jQuery快速入门

一、概述

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jQuery是一个快速、简洁、具有丰富特性的JavaScript库。通过简单易用的API，兼容各主流浏览器，并使得HTML文档操作、事件处理、动画、Ajax交互等事情变得更加简单。

• 快速获取文档元素

  jQuery提供了快速查询DOM文档中元素的能力，而且强化了JavaScript中获取页面元素的方式。

• 漂亮的页面动态效果

  jQuery中内置了一系列的动画效果，如淡入淡出、元素移除等动态特效。

• 创建Ajax无刷新网页

  通过Ajax，可以对页面进行局部刷新，而不必每次数据更新都需要刷新整个页面。

• 对JavaScript的增强

  jQuery提供了对基本JavaScript结构的增强，如元素迭代、数组处理等操作。

• 增强的事件处理

  jQuery提供了各种页面事件，避免在HTML中添加太多的事件处理代码。

• 更改网页内容

  jQuery可以修改网页中的内容，简化了原本使用JavaScript处理的方式，如更改网页文本、插入图像等。

二、模块划分

jQuery的模块可以分为三部分：入口模块、底层支持模块和功能模块。

1、入口模块

在构造jQuery对象模块中，如果调用构造函数创建jQuery对象时传入了选择器表达式，则会调用选择器引擎遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jQuery对象。

var div = $('#div-id');

其中，$()表示构造函数，#div-id表示选择器，div表示指向id为div-id的DOM元素的jQuery对象。

2、底层支持模块

回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用等功能。

异步队列模块用于解耦异步任务和回调函数，为回调函数增加了状态，支持传播任意同步或异步回调函数的状态。

数据缓存模块用于为DOM元素和JavaScript对象附加任意类型的数据。

队列模块用于管理一组函数，支持函数的入队和出队操作，并确保函数按顺序执行。

3、功能模块

事件系统提供了统一的事件绑定、响应、触发和移除机制，基于数据缓存模块来管理事件，而不是将事件直接绑定到DOM元素上。

Ajax模块允许从服务器上加载数据，而不用刷新页面，基于异步队列模块来管理和触发回调函数。

动画模块用于向网页添加动画效果，基于队列模块来管理和执行动画函数。

属性操作模块用于对HTML属性和DOM属性进行读取、设置和移除操作。

DOM遍历模块用于在DOM树中遍历父元素、子元素和兄弟元素。

DOM操作模块用于插入、移除、复制和替换DOM元素。

样式操作模块用于获取计算样式或设置样式。

坐标模块用于读取或设置DOM元素的文档坐标。

尺寸模块用于获取DOM元素的高度和宽度。

三、jQuery选择器

选择器通过标签名、属性名或内容对DOM元素进行快速、准确的定位。根据所获取页面中元素的不同，可以将选择器分为：基本选择器、层次选择器、过滤选择器和表单选择器。

1、基本选择器

使用最频繁的选择器，包括元素ID、Class名、元素名等。

id选择器：

$('#element-id')

class选择器：

$('.class-name')

元素选择器：

$('element-name')

2、层次选择器

通过DOM元素间的层次关系获取元素，主要层次关系包括后代、父子、相邻、兄弟关系等。

根据祖先元素匹配所有后代元素：

$('ancestor descendant')

根据父元素匹配所有的子元素：

$('parent > child')

匹配所有紧接在prev元素后的相邻元素：

$('prev + next')

匹配prev元素之后的所有兄弟元素：

$('prev ~ siblings')

3、过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，以:开头。过滤选择器又分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。

3.1 简单过滤选择器

获取页面第一个和最后一个X元素：

$('element:first')
$('element:last')

获取所有索引值为偶数和奇数的元素，索引值从0开始：

$('element:even')
$('element:odd')

获取等于、大于和小于索引值的元素：

$('element:eq(index)')
$('element:gt(index)')
$('element:lt(index)')

获取除给定的选择器外的元素：

$('element:not(selector)')

3.2 内容过滤选择器

获取包含给定文本的元素：

$('element:contains(text)')

获取所有不包含子元素或者文本的空元素：

$('element:empty')

获取含有选择器所匹配的元素的元素：

$('element:has(selector)')

获取含有子元素或文本的元素：

$('element:parent')

3.3 可见性过滤选择器

获取所有不可见的元素，或者type为hidden的元素：

$('element:hidden')

获取所有可见的元素：

$('element:visible')

3.4 属性过滤选择器

获取包含给定属性的元素：

$('element[attribute]')

获取属性是给定值的元素：

$('element[attribute=value]')

获取属性不是给定值的元素：

$('element[attribute!=value]')

获取属性是以给定值开始的元素：

$('element[attribute^=value]')

获取属性是以给定值结束的元素：

$('element[attribute$=value]')

获取属性是包含给定值的元素：

$('element[attribute*=value]')

3.5 子元素过滤选择器

获取父元素下的第一个、最后一个、唯一一个子元素：

$('parent:first-child')
$('parent:last-child')
$('parent:only-child')

获取父元素下的特定位置的元素，索引值从1开始：

$('parent:nth-child(eq|even|odd|index)')

3.6 表单对象属性过滤选择器

获取表单中所有属性为可用的元素：

$('element:enabled')

获取表单中所有属性为不可用的元素：

$('element:disabled')

获取表单中所有被选中的元素：

$('element:checked')

获取表单中所有被选中option的元素：

$('element:selected')

4、表单选择器

通过它可以在页面中快速定位某表单对象。

获取所有input、textarea、select等input元素：

$('form:input')

获取所有单行文本框：

$('form:text')

获取所有密码框：

$('form:password')

获取所有单项按钮：

$('form:radio')

获取所有复选框：

$('form:checkbox')

获取所有提交按钮：

$('form:submit')

获取所有图像域：

$('form:image')

获取所有重置按钮：

$('form:reset')

获取所有按钮：

$('form:button')

获取所有文件域：

$('form:file')

四、DOM操作

在与页面中的元素进行交互式的操作中，主要包括对元素属性、内容、值、CSS等的操作。同时，还有对页面节点的操作，包括节点元素的创建、插入、复制、替换、删除等操作。

1、元素属性操作

在jQuery中，可以对元素属性进行获取、设置、删除等操作。

获取指定属性名的元素属性：

$(selector).attr(name)

设置元素属性值，key为属性名称，value为属性值：

$(selector).attr(key, value)

设置多个属性值：

$(selector).attr({keyN:valueN})

删除指定属性名的元素属性：

$(selector).removeAttr(name)

2、元素内容操作

在jQuery中，可以获取和设置元素的HTML或文本内容。

获取元素的HTML/文本内容：

$(selector).html()
$(selector).text()

设置元素的HTML/文本内容：

$(selector).html(value)
$(selector).text(value)

两者的区别是，html()方法仅支持HTML类型的文档，不支持XML。而text()方法不仅支持HTML类型，也支持XML类型。

3、元素值操作

在jQuery中，可以获取和设置元素的值。

获取元素的值：

$(selector).val()

设置元素的值：

$(selector).val(value)

Tips：通过val().join(",")获取select标签中的多个选项值。

4、元素样式操作

在jQuery中，可以直接设置样式、增加CSS类别、类别切换、删除类别等操作。

为指定name的样式设置值：

$(selector).css(name, value)

为元素增加样式类：

$(selector).addClass(class)

切换不同的样式类：

$(selector).toggleClass(class)

删除元素的样式类：

$(selector).removeClass(class)

5、创建节点元素

如果要在页面中添加某个元素，需要先通过构造函数创建节点元素：

$(html)

6、插入节点元素

按照插入元素的位置区分，可以分为内部和外部两种插入方法。

6.1 内部插入节点

向所选择的元素内部追加/前置内容：

$(selector).append(content)
$(selector).prepend(content)

向所选择的元素内部追加/前置function方法所返回的内容：

$(selector).append(function())
$(selector).prepend(function())

把所选择的元素追加/前置到另一个指定的元素集合中：

$(selector).appendTo(content)
$(selector).prependTo(content)

6.2 外部插入节点

向所选择的元素外部追加/前置内容：

$(selector).after(content)
$(selector).before(content)

向所选择的元素外部追加/前置function方法所返回的内容：

$(selector).after(function())
$(selector).before(function())

把所选择的元素追加/前置到另一个指定的元素：

$(selector).insertAfter(content)
$(selector).insertBefore(content)

7、复制节点元素

将某个元素节点复制到另一个节点之后。

复制匹配的DOM元素并且选中复制成功的元素：

$(selector).clone()

在复制时将该元素的所有行为也进行复制：

$(selector).clone(true)

8、替换节点元素

将所有选择的元素替换成指定的HTML或DOM元素：

$(selector).replaceWith(content)

将所有选择的元素替换成指定selector的元素：

$(selector).replaceAll(selector)

一旦完成替换，被替换元素中的全部事件将会消失。

9、删除节点元素

删除指定的元素：

$(selector).remove()

删除指定的元素，但保留被移除元素的事件：

$(selector).detach()

清空所选择的页面元素的内容，但不移除该元素：

$(selector).empty()

10、通用操作

这类操作不需要选择元素就可以直接使用。

$.trim()            //去除字符串两端的空格。
$.each()            //遍历一个数组或对象。
$.inArray()       //返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
$.grep()            //返回数组中符合某种标准的元素。
$.extend()         //将多个对象，合并到第一个对象。
$.makeArray()      //将对象转化为数组。
$.type()            //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray()       //判断某个参数是否为数组。
$.isEmptyObject()    //判断某个对象是否为空（不含有任何属性）。
$.isFunction()    //判断某个参数是否为函数。
$.isPlainObject()    //判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support()       //判断浏览器是否支持某个特性。

五、事件

jQuery可以把事件直接绑定在网页元素上，使代码更加简洁。

1、事件机制

事件在触发后被分为两个阶段：一个是捕获capture，一个是冒泡bubbling。为阻止事件的冒泡现象，可以调用stopPropagation()方法或者语句return false;来实现。

2、载入事件

在jQuery脚本加载到页面时，会设置一个isReady标记，用于监听页面加载的进度，当遇到执行ready()方法时，通过查看isReady是否被设置，如果未被设置，说明页面并未加载完成，将未完成的部分用数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。

3、绑定事件

为所选择的元素绑定事件：

$(selector).bind(type, [data], function)

其中，参数type为一个或多个事件类型的字符串，也可以自定义类型；参数data是作为event.data属性值传递给事件对象的额外数据对象；参数function是绑定到每个选择元素的事件中的处理方法。

如果在元素中绑定多个事件，可以将事件用空格隔开。还可以通过传入一个映射，对所选对象绑定多个事件处理方法。

4、切换事件

有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。

使元素在鼠标悬停和鼠标移出的事件间进行切换：

hover()

可以依次调用N个指定的方法，直到最后一个方法：

toggle()

5、移除事件

移除元素绑定的事件：

$(selector).unbind([type], [function])

6、常用事件

.blur()         //表单元素失去焦点。
.change()         //表单元素的值发生变化
.click()          //鼠标单击
.dblclick()     //鼠标双击
.focus()          //表单元素获得焦点
.focusin()      //子元素获得焦点
.focusout()     //子元素失去焦点
.keydown()      //按下键盘（长时间按键，只返回一个事件）
.keypress()     //按下键盘（长时间按键，将返回多个事件）
.keyup()          //松开键盘
.load()         //元素加载完毕
.mousedown()       //按下鼠标
.mouseenter()     //鼠标进入（进入子元素不触发）
.mouseleave()     //鼠标离开（离开子元素不触发）
.mousemove()       //鼠标在元素内部移动
.mouseout()     //鼠标离开（离开子元素也触发）
.mouseover()       //鼠标进入（进入子元素也触发）
.mouseup()      //松开鼠标
.ready()          //DOM加载完成
.resize()        //浏览器窗口的大小发生改变
.scroll()        //滚动条的位置发生变化
.select()        //用户选中文本框中的内容
.submit()        //用户递交表单
.unload()        //用户离开页面

7、其他事件

为所选的元素绑定一个仅触发一次的处理方法：

$(selector).one(type, [data], function)

在所选的元素上触发指定类型的事件：

$(selector).trigger(type, [data])

六、特效

jQuery可以很方便地实现很多特效，并且还可以自定义动画效果。

1、显示与隐藏

显示/隐藏页面中的元素：

$(selector).show()
$(selector).hide()

Tips：可以调用toggle()方法来切换显示与隐藏状态。

2、淡入淡出

改变元素的透明度，实现淡入/淡出的动画效果：

$(selector).fadeIn()
$(selector).fadeOut()

还可以改变元素的透明度到指定的值：

$(selector).fadeTo()

3、上下滚动

向下展开/向上卷起页面中的元素：

$(selector).slideDown()
$(selector).slideUp()

Tips：可以调用slideToggle()方法来切换展开与卷起状态。

4、自定义动画

复杂的特效可以使用animate()方法进行自定义。

$('div').animate(
  {
    left : "+=50",   //不断右移
    opacity : 0.25   //指定透明度
  },
  300,               // 持续时间
  function() { alert('done!'); }    //回调函数
);

Tips：可以使用stop()和delay()方法来停止或延迟特效的执行。

七、最佳实践

• 使用最新的版本

  新版本不止会带来新功能，还会提升性能。

• 选择合理的选择器

  选择同一个网页元素，可以使用多种选择器，但每种选择器的性能却是不一样的。按照性能高低排列：id选择器和元素标签选择器>class选择器>属性选择器。

• 通过父元素选择子元素

  最佳选择是使用$parent.find('.child')。由于$parent通常在前面的操作已经生成，jQuery会进行缓存，提高了执行速度。

• 不要过度使用jQuery

  在能够使用原生的JavaScript的场合，尽量避免使用jQuery。

• 利用缓存

  使用选择器的次数越少越好，并且尽可能地缓存选中的结果，以便复用。

• 使用链式写法

  因为采用链式写法时jQuery会自动缓存每一步的结果，所以比非链式写法要快很多。

• 事件的委托处理

  将需要多次绑定在子元素上的事件，委托给父元素来处理，减少绑定次数，从而提高性能。

• 尽量少地改动DOM结构

  不要频繁改动DOM结构，如果要插入多个元素，可以先将其合并，然后再一次性插入。如果要对DOM元素进行大量处理，应该先使用.detach()方法，将元素从DOM中移除，处理完之后再重新插回文档。在DOM元素上存储数据时，应该使用$.data()方法。插入html代码时，原生的innterHTML()方法要比jQuery对象的html()方法更快。

• 合理地使用循环

  如果可以使用复杂的选择器直接选中元素，就不要使用循环。应该优先使用原生的循环方法。

• 尽量少生成jQuery对象

  每使用一次选择器，都会生成一个jQuery对象，带有很多属性和方法，会占用不少资源。能够使用jQuery函数的场合，尽量不要使用jQuery对象。

• 选择作用域链最短的方法

  JavaScript的变量采用链式作用域，读取局部变量要比全局变量快很多。在调用对象方法时，closure模式要比prototype模式更快。

• 使用Pub/Sub模式管理事件

  当发生某事件后，如果要连续执行多个操作，可以改用事件触发的形式。

• DOM对象与jQuery对象转换

  DOM对象指的是通过传统的JavaScript方法获取的DOM元素对象。jQuery对象指的是通过jQuery语法包装原始的DOM对象后生成的新对象。如果需要使DOM对象与jQuery对象之间的方法互相调用，必须先实现对象之间的类型转换。不能使用DOM对象调用jQuery对象的方法，也不能使用jQuery对象调用DOM对象的方法。

  调用jQuery中提供的[index]与get(index)方法即可将jQuery对象转换成DOM对象。DOM对象只要通过jQuery的方法$()进行封装，就可以转换成jQuery对象。