jQuer基础教程

2017-01-13 11:40:26来源:CSDN作者:u014744118人点击

一、jQuery是一个JavaScript 库。jQuery极大地简化了JavaScript 编程。

1、jQuery库包含以下特性:

·        HTML 元素选取

·        HTML 元素操作

·        CSS 操作

·        HTML 事件函数

·        JavaScript 特效和动画

·        HTML DOM 遍历和修改

·        AJAX

·        Utilities

2、jQuery库位于一个JavaScript 文件中,其中包含了所有的jQuery 函数。可以通过下面的标记把jQuery 添加到网页中:

·        <head>

·        <scripttype="text/javascript"src="jquery.js"></script>

·        </head>

3、通过jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

二、jQuery语法

1、jQuery语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

2、所有jQuery 函数位于一个document ready 函数中:

$(document).ready(function(){

 

--- jQuery functions go here ----

 

});

这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。

3、如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

·        试图隐藏一个不存在的元素

·        获得未完全加载的图像的大小

4、选择器允许您对元素组或单个元素进行操作。

jQuery 选择器

·        在前面的章节中,我们展示了一些有关如何选取HTML 元素的实例。

·        关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

·        jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML 元素进行选择。

·        选择器允许您对 HTML 元素组或单个元素进行操作。

·        在 HTMLDOM 术语中:

·        选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

·        jQuery 使用 CSS 选择器来选取 HTML 元素。

·        $("p") 选取 <p>元素。

·        $("p.intro")选取所有class="intro" 的<p> 元素。

·        $("p#demo")选取所有id="demo" 的<p> 元素。

jQuery 属性选择器

·        jQuery 使用 XPath 表达式来选择带有给定属性的元素。

·        $("[href]")选取所有带有 href 属性的元素。

·        $("[href='#']")选取所有带有 href 值等于"#" 的元素。

·        $("[href!='#']")选取所有带有 href 值不等于"#" 的元素。

·        $("[href$='.jpg']")选取所有 href 值以".jpg" 结尾的元素。

jQuery CSS 选择器

·        jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

·        下面的例子把所有 p 元素的背景颜色更改为红色:

5、jQuery是为事件处理特别设计的。

jQuery 事件处理方法是jQuery 中的核心函数。

事件处理程序指的是当HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

6、jQuery使用 $ 符号作为 jQuery 的简介方式。

某些其他JavaScript 库中的函数(比如Prototype)同样使用 $ 符号。jQuery使用名为noConflict() 的方法来解决该问题。

varjq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

结论:由于jQuery 是为处理HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

·        把所有 jQuery 代码置于事件处理函数中

·        把所有事件处理函数置于文档就绪事件处理器中

·        把 jQuery 代码置于单独的 .js 文件中

·        如果存在名称冲突,则重命名 jQuery 库

Event 函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件(当文档完成加载时)

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

7、jQuery: 隐藏/显示

jQuery hide() 和 show()

通过jQuery,您可以使用hide() 和show() 方法来隐藏和显示HTML 元素:

$("#hide").click(function(){

  $("p").hide();

});

 

$("#show").click(function(){

  $("p").show();

});

jQuery toggle()

通过jQuery,您可以使用toggle() 方法来切换hide() 和show() 方法。

8、jQuery:淡入淡出

通过jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种fade 方法:

·        fadeIn() 淡入

·        fadeOut() 淡出

·        fadeToggle() 切换淡入淡出

·        fadeTo() 允许渐变为给定的不透明度(值介于 0 与1 之间)。

9、jQuery: 滑动

通过jQuery,您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法:

·        slideDown() 向下滑动

·        slideUp() 向上滑动

·        slideToggle()可以在slideDown()与 slideUp()方法之间进行切换。

10、jQuery: 动画

jQuery animate()方法允许您创建自定义的动画。

语法:

$(selector).animate({params},speed,callback);

必需的params 参数定义形成动画的CSS 属性。

可选的speed 参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。

可选的callback 参数是动画完成后所执行的函数名称。

jQueryanimate()- 操作多个属性

请注意,生成动画的过程中可同时使用多个属性:

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

提示:可以用animate() 方法来操作所有CSS 属性吗?

是的,几乎可以!不过,需要记住一件重要的事情:当使用animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用paddingLeft而不是padding-left,使用marginRight而不是margin-right,等等。同时,色彩动画并不包含在核心jQuery 库中。如果需要生成颜色动画,您需要从jQuery.com 下载Color Animations 插件。

jQueryanimate()- 使用相对值

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上+= 或 -=:

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQueryanimate() - 使用预定义的值

您甚至可以把属性的动画值设置为"show"、"hide"或"toggle":

实例

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

jQueryanimate() - 使用队列功能

默认地,jQuery提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个animate() 调用,jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate调用。

实例

隐藏,如果您希望在彼此之后执行不同的动画,那么我们要利用队列功能:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。jQuerystop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

Callback 函数在当前动画100% 完成之后执行。许多jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例子:$("p").hide("slow")

speed 或 duration 参数可以设置许多不同的值,比如"slow", "fast", "normal" 或毫秒。

由于JavaScript 语句(指令)是逐一执行的- 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。

为了避免这个情况,您可以以参数的形式添加Callback 函数。

通过jQuery,您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个jQuery 方法(在相同的元素上)。

三、jQuery:HTML

1、jQuery:获得内容和属性

jQuery 拥有可操作HTML 元素和属性的强大方法。

获得内容- text()、html()以及 val()

三个简单实用的用于DOM 操作的 jQuery 方法:

·        text() - 设置或返回所选元素的文本内容

·        html() - 设置或返回所选元素的内容(包括 HTML 标记)

·        val() - 设置或返回表单字段的值

·        attr() 方法用于获取属性值。

2、jQuery:设置属性和内容

·        text() - 设置或返回所选元素的文本内容

·        html() - 设置或返回所选元素的内容(包括 HTML 标记)

·        val() - 设置或返回表单字段的值

·        attr() 方法用于获取属性值。

在上述四种方法中的括号中添加即将要修改成的内容即可设置

text()、html()以及 val()、attr(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

3、jQuery:添加元素

通过jQuery,可以很容易地添加新元素/内容。添加新的 HTML 内容

我们将学习用于添加新内容的四个jQuery 方法:

·        append() - 在被选元素的结尾插入内容

·        prepend() - 在被选元素的开头插入内容

·        after() - 在被选元素之后插入内容

·        before() - 在被选元素之前插入内容

上述四种方法的括号中都可以有大于1个以上的参数,即可以添加多个新元素。

4、jQuery:删除元素

如需删除元素和内容,一般可使用以下两个jQuery 方法:

·        remove() - 删除被选元素(及其子元素)

·        empty() - 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。该参数可以是任何jQuery 选择器的语法。

5、jQuery:设置并获取CSS类

通过jQuery,可以很容易地对CSS 元素进行操作。

Query 拥有若干进行CSS 操作的方法。我们将学习下面这些:

·        addClass() - 向被选元素添加一个或多个类

·        removeClass() - 从被选元素删除一个或多个类

·        toggleClass() - 对被选元素进行添加/删除类的切换操作

·        css() - 设置或返回样式属性,设置或返回被选元素的一个或多个样式属性。

Css()返回

返回css("propertyname");

Css()设置

css("propertyname","value");

设置多个css属性

css({"propertyname":"value","propertyname":"value",...});

6、jQuery:尺寸

jQuery 提供多个处理尺寸的重要方法:

·        width()设置或返回元素的宽度(不包括内边距、边框或外边距)。

·        height()设置或返回元素的高度(不包括内边距、边框或外边距)。

·        innerWidth()返回元素的宽度(包括内边距)。

·        innerHeight()返回元素的高度(包括内边距)。

·        outerWidth()返回元素的宽度(包括内边距和边框)。

·        outerHeight()返回元素的高度(包括内边距和边框)。

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

四、jQuery遍历

jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

jQuery 提供了多种遍历DOM 的方法。

遍历方法中最大的种类是树遍历(tree-traversal)。

1、向上遍历DOM 树:

·        parent()返回被选元素的直接父元素,该方法只会向上一级对DOM 树进行遍历。

·        parents()返回被选元素的所有祖先元素,它一路向上直到文档的根元素(<html>)。

·        parentsUntil()返回介于两个给定元素之间的所有祖先元素。

2、用于向下遍历DOM 树的 jQuery 方法:

·        children()返回被选元素的所有直接子元素,该方法只会向下一级对DOM 树进行遍历。

·        find()返回被选元素的后代元素,一路向下直到最后一个后代。

3、在DOM 树进行水平遍历:

·        siblings()返回被选元素的所有同胞元素。

·        next()返回被选元素的下一个同胞元素。

·        nextAll()返回被选元素的所有跟随的同胞元素。

·        nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素。

·        prev()

·        prevAll()

·        prevUntil()

prev(), prevAll() 以及prevUntil()方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在DOM 树中沿着同胞元素向后遍历,而不是向前)。

4、过滤

first()返回被选元素的首个元素。

last()返回被选元素的最后一个元素。

eq()返回被选元素中带有指定索引号的元素。

filter() 规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素。

first(), last() 和eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法,比如filter() 和not() 允许您选取匹配或不匹配某项指定标准的元素。

五、AJAX

AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。

AJAX = 异步JavaScript 和XML(AsynchronousJavaScript and XML)。

简短地说,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。通过jQuery AJAX方法,能够使用HTTP Get 和HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。

1、jQueryload()从服务器加载数据,并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

可选的callback 参数规定当load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

·        responseTxt -包含调用成功时的结果内容

·        statusTXT - 包含调用的状态

·        xhr - 包含XMLHttpRequest 对象

2、jQueryget() 和post() 方法用于通过HTTP GET 或POST 请求从服务器请求数据。

HTTP 请求:GETvs. POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

·        GET - 从指定的资源请求数据

·        POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST方法不会缓存数据,并且常用于连同请求一起发送数据。

$.get() 方法通过HTTP GET 请求从服务器上请求数据。

语法:

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。回调函数第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。

$.post() 方法通过HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

jQuerynoConflict()方法

noConflict()方法会释放会$ 标识符的控制,这样其他脚本就可以使用它了。

 

 


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台