Web前端学习——jQuery知识点（一）

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() - 隐藏当前元素

• $("p").hide() - 隐藏所有

  元素

• $("p.test").hide() - 隐藏所有 class="test" 的

  元素

• $("#test").hide() - 隐藏所有 id="test" 的元素

• 
  

$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

•  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
•  JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery对象与DOM对象

通过原生DOM模型提供的document.getElementById(“”) 方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。

通过$('#i')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。

通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：

1. 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
2. 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。

把jQuery对象转成DOM对象：

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

DOM对象转化成jQuery对象

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

jQuery DOM 操作

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr() - 方法用于获取属性值。
  

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

实例

$ ( " #btn1 " ) . click ( function ( ) { alert ( " Text: " + $ ( " #test " ) . text ( ) ) ; } ) ;

$ ( " #btn2 " ) . click ( function ( ) { alert ( " HTML: " + $ ( " #test " ) . html ("123" ) ) ; } ) ;

$("#btn1").click(function(){ alert("值为: " + $("#test").val());});

$("button").click(function(){ alert($("#runoob").attr("href"));});

无参数则返回所选元素的内容，有参数则设置所选内容。

jQuery - 添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。

$ ( " p " ) . append ( " 追加文本 " ) ;

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

$ ( " p " ) . prepend ( " 在开头追加文本 " ) ;

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText ( ) {

var txt1 = "

文本。

" ; // 使用 HTML 标签创建文本

var txt2 =$ ( "

" ) . text ( " 文本。 " ) ; // 使用 jQuery 创建文本

var txt3 = document . createElement ( " p " ) ;

txt3 . innerHTML = " 文本。 " ; // 使用 DOM 创建文本 text with DOM

$ ( " body " ) . append ( txt1 , txt2 , txt3 ) ; // 追加新元素 }

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$ ( " img " ) . after ( " 在后面添加文本 " ) ; $ ( " img " ) . before ( " 在前面添加文本 " ) ;

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText ( ) {

var txt1 = " I " ; // 使用 HTML 创建元素

var txt2 =$ ( " " ) . text ( " love " ) ; // 使用 jQuery 创建元素

var txt3 = document . createElement ( " big " ) ; // 使用 DOM 创建元素

txt3 . innerHTML = " jQuery! " ;

$ ( " img " ) . after ( txt1 , txt2 , txt3 ) ; // 在图片后添加文本 }

总结：

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

jQuery - 删除元素

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

jQuery remove() 方法删除被选元素及其子元素。

$ ( " #div1 " ) . remove ( ) ;

jQuery empty() 方法删除被选元素的子元素。

$ ( " #div1 " ) . empty ( ) ;

jQuery - 获取并设置 CSS 类

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

在添加类时，您也可以选取多个元素：

$ ( " button " ) . click ( function ( ) {

$ ( " h1,h2,p " ) . addClass ( " blue " ) ;

$ ( " div " ) . addClass ( " important " ) ; } ) ;

不同的元素中删除指定的 class 属性：

$ ( " button " ) . click ( function ( ) {

$ ( " h1,h2,p " ) . removeClass ( " blue " ) ; } ) ;

对被选元素进行添加/删除类的切换操作：

$ ( " button " ) . click ( function ( ) {

$ ( " h1,h2,p " ) . toggleClass ( " blue " ) ; } ) ;

如需返回指定的 CSS 属性的值，请使用如下语法：

css(" propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

$ ( " p " ) . css ( " background-color " ) ;

如需设置指定的 CSS 属性，请使用如下语法：（可设置多个CSS属性）

css(" propertyname"," value");

下面的例子将为所有匹配元素设置 background-color 值：

$ ( " p " ) . css ( " background-color " , " yellow " ) ;

jQuery 尺寸方法

• width()    方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
• height()   方法设置或返回元素的高度（不包括内边距、边框或外边距）。
• innerWidth()    方法返回元素的宽度（包括内边距）。
• innerHeight()    方法返回元素的高度（包括内边距）。
• outerWidth()    方法返回元素的宽度（包括内边距和边框）。
• outerHeight()     方法返回元素的高度（包括内边距和边框）。

jQuery 尺寸

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有

元素:   $("p")

#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下： $("#test")

.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。

语法如下： $(".test")

元素 元素

语法	描述	实例
$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 元素	在线实例
$("p:first")	选取第一个 元素	在线实例
$("ul li:first")	选取第一个 元素的第一个 元素	在线实例
$("ul li:first-child")	选取每个 元素的第一个 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 元素	在线实例
$(":button")	选取所有 type="button" 的 元素 和 元素	在线实例
$("tr:even")	选取偶数位置的
在线实例
$("tr:odd")	选取奇数位置的

独立文件中使用 jQuery 函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

实例

< head > < script src = " http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js " > script > < script src = " my_jquery_functions.js " > script > head >

jQuery 事件

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$ ( " p " ) . click ( ) ;

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$ ( " p " ) . click ( function ( ) { // 动作触发后执行的代码!! } ) ;

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

实例

$ ( " p " ) . click ( function ( ) { $ ( this ) . hide ( ) ; } ) ;

jQuery 效果- 隐藏和显示

jQuery   hide() 、 show()和 toggle() 

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

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

实例

$ ( " #hide " ) . click ( function ( ) { $ ( " p " ) . hide ( ) ; } ) ;

$ ( " #show " ) . click ( function ( ) { $ ( " p " ) . show ( ) ; } ) ;

$("button").click(function(){ $("p").toggle();});

语法:

$( selector).hide( speed,callback);
$( selector).show( speed,callback);

$( selector ).toggle( speed,callback );

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

对于可选的 callback 参数，有以下两点说明：

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；当 callback 函数加上括号时，函数立即执行，只会调用一次， 如果不加括号，元素显示或隐藏后调用函数，才会调用多次。

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback既可以是函数名，也可以是匿名函数；

jQuery 效果 - 淡入淡出

j Query Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：

• fadeIn()    用于淡入已隐藏的元素。
• fadeOut()    方法用于淡出可见元素。
• fadeToggle()    方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
• fadeTo()    方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:

$( selector).fadeOut( speed,callback);

方法：

实例

$ ( " button " ) . click ( function ( ) {

$ ( " #div1 " ) . fadeOut ( ) ;

$ ( " #div2 " ) . fadeOut ( " slow " ) ;

$ ( " #div3 " ) . fadeOut ( 3000 ) ;

} ) ;

jQuery 效果 - 滑动

jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：

• slideDown()   用于向下滑动元素。
• slideUp()    用于向上滑动元素。
• slideToggle()     可以在 slideDown() 与 slideUp() 方法之间进行切换。

jQuery slideDown() 方法用于向下滑动元素。

语法:

$( selector).slideDown( speed,callback);

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

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

下面的例子演示了 slideDown() 方法：

实例

$ ( " #flip " ) . click ( function ( ) { $ ( " #panel " ) . slideDown ( ) ; } ) ;

jQuery 效果- 动画

jQuery animate() 方法用于创建自定义动画。

语法：

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

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

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

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

下面的例子演示 animate() 方法的简单应用。它把

元素往右边移动了 250 像素：

实例

$ ( " button " ) . click ( function ( ) { $ ( " div " ) . animate ( { left : ' 250px ' } ) ; } ) ;

需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。

队列操作

jquery中有一个Queue队列的接口，这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的，Queue队列如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施

Queue队列

队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。

为什么要引入队列

var a = 1;
setTimeout(function(){
　　a=2;
},0)
alert(a);

我们一直习惯于线性的编写代码逻辑，但是在JavaScript编程几乎总是伴随着异步操作：

setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，web Database 等等，大量异步操作所带来的回调函数会把我们的算法分解，对于“异步+回调”的模式，怎么“拉平”异步操作使之跟同步一样，因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑，所以就会出现 promises 约定了。

那么 jQuery 引入队列其实从一个角度上可以认为：允许一系列函数被异步地调用而不会阻塞程序。

看一个代码段：

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列，它的内部其实就是一组队列 Queue，所以队列和 Deferred 地位类似，是一个内部使用的基础设施。

• 当 slideUp 运行时，fadeIn 被放到 fx 队列中
• 当 slideUp 完成后，从队列中被取出运行

Queue 函数允许直接操作这个链式调用的行为，同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

jQuery 提供了 2 组队列操作的 API：

jQuery.queue/dequeue
jQuery.fn.queue/dequeue

但是不同与普通队列定义的是：

• jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素，还会自动执行返回的队头元素
• fn 是扩展在原型上的高级API是提供给实例使用的
• .queue/.dequeue 其内部是调用的 .queue，.dequeue 静态的底层方法实现入列与出列

动画调度

对于 jQuery 的动画的设计我们要分 2 个层面理解：

1. 每一个动画效果可以看作一个独立的动画对象，每个对象都实现了针对自己这个动画的生命周期的控制
2. 动画对象与动画对象之间其实是没有直接关系，但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制

动画的源码：

animate: function(prop, speed, easing, callback) {
   doAnimation = function() {
      var anim = Animation(this, args, optall);
   };
   this.queue(optall.queue, doAnimation);
}

这个代码缩减了，但是我们上面提到的最重要的 2 点这里都涉及到了：通过 queue 调度动画的之间的衔接，Animation 方法执行单个动画的封装。

jQuery 在 queue 的调度上涉及了一个关键的处理：同步与异步代码同时执行，同步收集动画序列，异步调用序列，看看整个调用的流程是这样的：

1. 通过多个 animate 方法形成动画链，那么这个动画链其实都是会加入到 queue 队列里面
2. 在每一次 queue 方法中会把动画数据写到队列中，然后取出队列中的第一个序列通过 dequeue 方法执行
3. 开始执行之前写一个进程锁“inprogress”到 queue 里面，代表这个动画还在执行中，防止同个序列的多个动画重复执行，这个就是异步执行同步收集的处理方案
4. 此时动画开始了，这里注意动画是在异步执行的同步的代码，继续调用下一个 animate
5. 执行同样的 animate 方法逻辑但是此时问题来了，动画可能还在执行可是后续的 animate 还在继续调用，所以这个时候后面的动画代码就需要等待了（进程锁）
6. 队列头是有一把“inprogress”进程锁的，那么这时候动画只需要加入队列，但是可以通过 inprogress 是否存在来判断是否执行
7. 所有的 animate 方法在加入队列都是按照以上的逻辑依次执行，动画执行完毕了就会有一个结束通知，然后从 queue 取出第一个队列继续执行了，如此循环

以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

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

语法:

$( selector).stop( stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

实例

$ ( " #stop " ) . click ( function ( ) { $ ( " #panel " ) . stop ( ) ; } ) ;

jQuery - 链(Chaining)

        通过 jQuery，可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

实例

$ ( " #p1 " ) . css ( " color " , " red " ) . slideUp ( 2000 ) . slideDown ( 2000 ) ;