《JavaScript 权威指南》笔记 - jQuery 类库
摘自 《JavaScript 权威指南》 第 19 章 jQuery 类库。
JavaScript 的核心 API 设计的很简单,但由于不同浏览器之间的严重不兼容,导致客户端的 API 过于复杂。使用 JavaScript 框架或工具类库能简化通用操作,能隐藏浏览器之间的差异,这让很多程序员在开发 Web 应用时变得更简单。撰写本书时,最流行和广泛采用的类库之一就是 jQuery。
jQuery 基础
jQuery 类库定义了一个全局函数:jQuery()
。该函数使用频繁,因此在类库中还给它定义了一个快捷别名:$()
。这是 jQuery 在全局命名空间中定义的唯一两个变量。
在 jQuery 类库中,最重要的方法是 jQuery()
,也就是 $()
。它的功能很强大,有 4 中不同的调用方式:
传递 CSS 选择器字符串给
$()
。当通过这种方式调用时,$()
返回当前文档中匹配该选择器的元素集;传递一个 Element、Document 或 Window 对象给
$()
。在这种情况下,$()
只须简单地将 Element、Document、Window 对象封装成 jQuery 对象并返回;传递 HTML 文本字符串给
$()
。在这种调用方式下 jQuery 会根据传入的文本创建好 HTML 元素并封装成 jQuery 对象返回;传入一个函数给
$()
。此时,文档加载完毕且 DOM 可操作时,传入的函数将被调用。
传递 CSS 选择器字符串给 $()
,它返回的 jQuery 对象表示匹配该选择器的元素集。jQuery 对象是类数组,它们拥有 length 属性和介于 0 ~ length-1 之间的数值属性。这意味着可以使用标准的数组标识方括号来访问 jQuery 对象的内容。如果不想把数组标识用在 jQuery 对象上,可以使用 size() 来替代 length 属性,用 get() 来替代方括号索引。可以使用 toArray() 将 jQuery 对象转化为真实数组。
除了 length 属性,jQuery 对象还有其它三个属性:selector 属性是创建 jQuery 对象时的选择器字符串。context 属性是上下文对象,是传递给 $()
的第二个参数,如果没有的话,默认是 Document 对象。jquery 属性值是 jQuery 版本号。
可以使用 each()
方法来代替 for 循环遍历 jQuery 对象中的所有元素。each()
还会将索引值和该元素作为第一个和第二个参数传递给回调函数。与 forEach()
不同,each()
中,如果回调函数在任一个元素上返回 false,遍历将在该元素后中止。jQuery 方法通常隐式遍历匹配的元素,并操作它们。
jQuery 的 map()
和 Array.prototype.map() 相近。它将接收回调函数作为参数,并为 jQuery 对象中的每一个元素都调用回调函数,同时将回调函数的返回值收集起来,并封装成一个新的 jQuery 对象返回。map()
调用回调函数的方式和 each()
相同:元素的索引值作为第一个参数,元素本身作为 this 和第二个参数。
jQuery 的另一个基础方法是 index()
。该方法接收一个元素作为参数,返回值是该元素在 jQuery 对象中的索引值,如果找不到的话,返回 -1。如果传递一个 jQuery 对象作为参数,index()
会对该对象的第一个元素进行搜索。如果传入的是字符串,index()
会把它当成 CSS 选择器,并返回 jQuery 对象中匹配该选择器的一组元素中第一个元素的索引值。如果什么都不传入,index()
会返回该 jQuery 对象中的第一个毗(pí)邻元素的索引值。
还有一个通用的 jQuery 方法是 is()
。它接收一个选择器作为参数,如果选中元素至少有一个匹配该选择器时,则返回 true。可以在 each()
回调函数中使用它,例如:
jQeury 的 getter 和 setter
jQuery 对象上最简单、最常见的操作是获取(get)或设置(set)HTML 属性、CSS 样式、元素内容和位置高宽的值。jQuery 中的 getter 和 setter:
jQuery 使用同一个方法即当 getter 用又当 setter 用,而不是定义一对方法。如果传入一个新值给该方法,则它设置此值;如果没有指定值,则它返回当前值;
用作 setter 时,这些方法会给 jQuery 对象中的每一个元素设置值,然后返回该 jQuery 对象以便链式调用;
用作 setter 时,这些方法经常接收对象参数。在这种情况下,该对象的每个属性都需指定一个将要被设置的键值对;
用作 setter 时,这些方法经常接收函数参数。在这种情况下,会调用该函数来计算需要被设置的值。调用该函数传入的 this 值是对应的元素,第一个参数是该元素的索引值,第二个参数是该元素的当前值;
用作 getter 时,这些方法只会查询元素集中的第一个元素,返回单个值。如果需要遍历所有元素,请使用
map()
。
获取和设置 HTML 属性
attr()
是 jQuery 中用于 HTML 属性的 getter / setter。attr()
处理浏览器的兼容性和一些特殊情况,还可以让 HTML 属性名和 JavaScript 属性名可以等同使用,如 "for" - "htmlfor"、"class" - "className"。一个相关的函数是 removeAttr()
。例子:
获取和设置 CSS 属性
css()
和 attr()
很类似,只是 css()
作用于元素的 CSS 样式,而不是元素的 HTML 属性。css()
返回元素的当前的样式,返回值可能来自 style 属性也可能来自样式表。css()
允许在 CSS 样式名中使用连字符或驼峰格式的 JavaScript 样式名。
获取和设置 CSS 类
addClass()
和 removeClass()
用来从选中元素中添加和删除类。toggleClass()
在当元素还没有某些类时,给元素添加这些类,反之则删除。hasClass()
用来判断某类是否存在。例子:
获取和设置 HTML 表单值
val()
用来获取和设置 HTML 表单元素的 value 属性,还可以用于获取和设置复选框、单选按钮以及 <select>
元素的选中状态。
获取和设置元素的内容
text()
和 html()
用来获取和设置元素的纯文本或 HTML 内容。当不带参数调用时,text()
返回所有匹配元素的子孙文本节点的纯文本内容,html()
返回第一个匹配元素的 HTML 内容。如果传入字符串给 text()
或 html()
,该字符串会用作该元素的纯文本或格式化 HTML 文本内容。
获取和设置元素的位置高宽
使用 offset()
可以获取或设置元素的位置。该方法相对文档来计算位置值,返回一个对象,带有 left 和 top 属性,代表 X 和 Y 坐标。
position()
很像 offset()
,但它只能用作 getter,返回的元素是相对于其偏移父元素的,而不是相对于文档的。
用于获取元素宽度和高度的 getter / setter 共有 3 个。width()
和 height()
返回基本的宽度和高度,不包含内边距、边框、外边距。innerWidth()
和 innerHeight()
返回元素的宽度和高度,包含内边距的宽度和高度。outerWidth()
和 outerHeight()
通常返回的是包含元素内边距和边框的尺寸。
scrollTop()
和 scrollLeft()
可获取或设置元素的滚动条位置。这些方法可用在 Window 对象以及 Document 元素上。当用在 Document 对象上时,会获取或设置存放该 Document 的 Window 对象的滚动条位置。
获取和设置元素数据
jQuery 定义了一个名为 data()
的 getter / setter 方法,可用来获取或设置与文档元素、Document、Window 对象相关的数据。
removeData()
用来从元素中删除数据。如果不带参数调用 removeData()
,它会删除与元素相关联的所有数据。
修改文档结构
HTML 文档表示为一棵节点树,而不是一个字符的线性序列,因此插入、删除、替换操作不会像操作字符串和数组一样简单。
下面演示的每一个方法都接收一个参数,用于指定需要插入文档中的内容。该参数可以是用于指定新内容的纯文本或 HTML 字符串,也可以是 jQuery 对象、元素、文本节点。
clone()
创建并返回每一个选中的元素的一个副本,其返回的 jQuery 对象还不是文档的一部分,但可以使用上一节的方法将其插入文档中。
jQuery 定义了 3 种包装函数。warp()
包装每一个选中元素,wrapInner()
包装每一个选中元素的内容,warpAll()
将选中元素作为一组来包装。这些方法通常传入一个新创见的包装元素或用来创建元素的 HTML 字符串。
empty()
会删除每个选中元素的所有字节点,但不会修改元素自身。remove()
会从文档中移除选中元素,如果传入一个参数,该参数会被当成选择器,jQeury 对象中只有匹配该选择器的元素才会被移除。remove()
会移除所有事件处理程序以及可能绑定到被移除元素上的其它数据。detach()
和 remove()
类似,但不会移除事件处理程序和数据。
使用 jQuery 处理事件
jQuery 定义了一个统一事件 API,可兼容 IE(包括 IE9 以下),并能在所有浏览器中工作。jQuery API 具有简单的形式,比标准或 IE 的事件 API 更容易使用。jQuery API 还具有更复杂、功能更齐全的形式,比标准 API 更强大。
事件处理程序的简单注册
jQuery 定义了简单的事件注册方法,可用于常用和普适的每一个浏览器事件。比如,给单击事件注册一个事件处理程序,只要调用 click()
:
调用 jQuery 的事件注册方法可以给所有选中元素注册处理程序。下面是 jQuery 定义的简单事件处理程序注册的方法:
focus 和 blur 事件不支持冒泡,但 focusin 和 focusout 事件支持。相反地,mouseover 和 mouseout 事件支持冒泡,但 mouseenter 和 mouseleave 事件不支持。
resize 和 unload 事件类型只在 Window 对象中触发,如果想要给这两个事件类型注册处理程序,应该在 $(window)
上调用 resize()
和 unload()
。scroll()
经常也用与 $(window)
对象上,但它可以用在有滚动条的任何元素上,比如当 CSS 的 overflow 属性设置为 scroll 或 auto 时。load()
可在 $(window)
上调用,用来给窗口注册加载事件处理程序,但经常更好的选择是,直接将初始化函数传给 $()
。当然,还可以在 iframe 和图片上使用 load()
。error()
可用在 <img>
元素上,用来注册当图片加载失败时调用的处理程序。
除了这些简单的事件注册方法外,还有两个特殊形式的方法,有时很有用:
hover()
用来给 mouseenter 和 mouseleave 事件注册处理程序。调用hover(f, g)
就和先调用mouseenter(f)
然后调用mouseleave(g)
一样。如果仅传入一个参数,该参数函数会同时用做 enter 和 leave 事件的处理程序;toggle()
将事件处理程序绑定到单击事件。可以指定两个或多个处理程序函数,当单击事件发生时,jQuery 每次会调用一个处理程序函数。例如,如果调用toggle(f, g, h)
,第一次单击事件触发时,会调用函数f()
,第二次会调用g()
,第三次会调用h()
,然后第四次会再调用f()
。
jQuery 事件处理程序
上面例子中的事件处理程序函数被当作是不带参数以及不返回值的,但 jQuery 调用每一个事件处理程序,实际上都传入了一个或多个参数,并且对处理程序的返回值进行了处理。需要知道的最重要的一件事情是,每个事件处理程序都传入了一个 [jQuery 事件对象](#jQuery\ 事件对象) 作为第一个参数。该对象的字段提供了与该事件相关的详细信息,比如鼠标指针的坐标。jQuery 模拟标准 Event 对象,即便在不支持的标准事件对象的浏览器中(像 IE8 及其以下),jQuery 事件对象在所有浏览器上都拥有一组相同的字段。
jQuery 事件处理程序函数的返回值始终是有意义的。如果处理程序返回 false,则与该事件相关联的默认行为,以及该事件接下来的冒泡都会被取消。也就是说,返回 false 等同于调用 Event 对象的 preventDefault()
和 stopPropagation()
。同样,当事件处理程序返回一个值(非 undefined 值)时,jQuery 会将该值存储在 Event 对象的 result 属性中,该属性可以被后续调用的事件处理程序访问。
jQuery 事件对象
jQuery 通过定义自己的 Event 对象来隐藏浏览器之间的实现差异。当一个 jQuery 事件处理程序被调用时,总会传入一个 jQuery 事件对象作为其第一个参数。jQuery 会将以下所有字段从原声 Event 对象中复制到 jQuery 事件对象上,尽管对于特定事件类型来说,有些字段值为 undefined。
除了这些属性,jQuery 事件对象还定义了以下方法:
触发事件
手动触发事件最简单的方式是不带参数调用事件注册的简单方法,比如 click()
或 mouseover()
。与很多 jQuery 方法可以同时用做 getter 和 setter 一样,这些事件方法在带有一个参数时会注册事件处理程序,不带参数调用时则会触发事件处理程序。例如:
上面的 submit()
自己合成了一个 Event 对象,并触发了给 submit 事件注册的所有事件处理程序。如果这些事件处理程序没有返回 false 或调用 Event 对象的 preventDefault()
,实际上将提交该表单。注意,通过这种方式手动调用时,冒泡事件依旧会冒泡。
需要特别注意,jQuery 的事件触发方法会触发所有使用 jQuery 事件注册方法注册的处理程序,也会触发通过 onsubmit 等 HTML 属性或 Element 属性定义的处理程序。但是,不能手动触发使用 addEventListen()
或 attachEvent()
注册的事件处理程序。
同时需要注意,jQuery 的事件触发机制是同步的(不涉及事件队列)。
事件处理程序的高级注册 & 实时事件
书中介绍使用 bind()
,但实际建议使用 on()
。
动画效果
jQuery 定义了 fadeIn()
和 fadeOut()
等简单的方法实现常见视觉效果。除了简单动画方法,jQuery 还定义了一个 animate()
,用来实现更复杂的自定义动画。
jQuery 动画是异步的。调用 fadeIn()
等动画方法时,它会立刻返回,动画则在「后台」执行。如果一个元素已经在动画过程中,再调用一个动画方法时,新动画是不会立刻执行,而会延迟到当前动画结束后才执行。例如,可以让一个元素在持久显示前先闪烁一会:
简单动画
fadeIn()
、fadeOut()
、fadeTo()
这是最简单的动画:
fadeIn()
和fadeOut()
简单地改变 CSS 的 opacity 属性显示或隐藏元素。两者都接受可选的时长和回调参数。fadeTo()
稍有不同,它需要传入一个 opacity 目标值,fadeTo()
会将元素的当前 opacity 值变化到目标之。调用fadeTo()
时,第一参数必须是时长或选项对象,第二参数是 opacity 目标值,第三参数是回调函数。show()
、hide()
、toggle()
hide()
和show()
只是简单地立刻隐藏或显示选中元素,带有时长或选项对象时,它们会隐藏或显示有个动画过程。toggle()
可以改变在上面调用它的元素的可视状态:如果隐藏,则调用show()
,如果显示,则调用hide()
。slideDown()
、slideUp()
、slideToggle()
slideUp()
会隐藏 jQuery 对象中的元素,方式是将其高度动态变化到 0 ,然后设置 CSS 的 display 属性为 none。slideDown()
执行反向操作,来使得隐藏的元素再次可见。slideToggle()
使用向上滑动或向下滑动动画来切换元素的可见性。
自定义动画
animate()
可以实现更多通用的动画效果。第一个参数是必需的,它必须是一个对象,该对象的属性指定要变化的 CSS 属性和它们的目标值。第二个参数是可选的,可以传入一个选项对象给 animate()
。通常,animate()
接收两个对象参数,第一个指定动画内容,第二个指定如何定制动画。
动画属性对象
该对象的属性名必须是 CSS 属性,这些属性的值必须是动画的目标值。动画只支持数值属性:对于颜色、字体或 display 等枚举属性是无法实现动画效果的。如果属性值是数值,则默认单位是像素。如果属性值是字符串,可以指定单位。还可以指定相对值,用「+=」前缀表示增加,用「-=」前缀表示减少。jQuery 动画属性对象中,还可以使用 hide、show、toggle 这三个属性值。
动画选项对象
该选项对象用来指定动画如何执行。duration 属性指定动画持续的毫秒时间,其值可以是 fast、slow 或任何 jQuery.fx.speeds 中定义的名称。complete 属性指定动画完成时的回调函数。setp 属性指定在动画每一步或每一帧调用的回调函数。在回调函数中,this 指向正在连续变化的元素,第一个参数则是正在变化的属性值。queue 属性指定动画是否需要队列化,即是否需要等到所有尚未发生的动画都完成后再执行该动画。默认情况下,所有动画都是队列化的。easing 属性指定缓动函数名,jQuery 默认使用的是命为 swing 的正弦函数。
jQuery 中的 Ajax
在 Web 应用编程技术里,Ajax 很流行,它使用 HTTP 脚本来按需加载数据,而不需要刷新整个页面。jQuery 定义了一个高级工具方法和四个高级工具函数。这些高级工具都基于同一个强大的底层函数:jQuery.ajax()
。
load() 方法
load()
是所有 jQuery 工具中最简单的:向它传入一个 URL,它会异步加载该 URL 的内容,然后将内容插入每一个选中的元素,替换掉已经存在的任何内容。例如:
load()
可以用来注册 load 事件。如果传给方法的第一个参数是函数而不是字符串,则 load()
是注册事件处理程序而不是 Ajax 方法。
如果只想显示被加载文档的一部分,可以在 URL 后面添加一个空格和一个 jQuery 选择器。当 URL 加载完成后,jQuery 会用指定的选择器来从加载好的 HTML 中选取需要显示的部分:
除了 URL 参数,load()
还接受两个可选参数。第一个可选参数表示的数据,可以追加到 URL 后面,或者与请求一起发送。另一个可选参数是回调函数。如果没有指定任何数据,回调函数可以作为第二个参数传入。否则,它必须是第三个参数。在 jQuery 对象的每一个元素上都会调用回调函数,并且每次调用都会传入三个参数:被加载 URL 的完整文本内容、状态码字符串、以及用来加载该 URL 的 XMLHttpRequest 对象。其中,状态参数是 jQuery 的状态码,不是 HTTP 的状态码,其值是类似 success、error 和 timeout 的字符串。
Ajax 工具函数
jQuery 的其它 Ajax 高级工具不是方法,而是函数,可以通过 jQuery
或 $
直接调用,而不是在 jQuery 对象上调用。
jQuery.getScript()
jQuery.getScript()
函数的第一个参数是 JavaScript 代码文件的 URL。它会异步加载文件,加载完成之后在全局作用域执行该代码。它能同时适用于同源和跨源脚本:
可以传入回调函数作为第二个参数,在这种情况下,jQuery 会在代码加载和执行完成之后调用一次该回调函数:
传递给 jQuery.getScript()
的回调函数,仅在请求成功完成时才会被调用。
jQuery.getJSON()
jQuery.getJSON()
和 jQuery.getScript()
类似:它会获取文本,然后特殊处理一下,再调用指定的回调函数。jQuery.getJSON()
获取到文本之后,不会将其当作脚本执行,而会将其解析为 JSON。jQuery.getJSON()
只有在传入了回调函数时才有用。当成功加载 URL,以及将内容成功解析为 JSON 后,解析的结果会作为第一个参数传入回调函数中。
与 jQuery.getScript()
不同,jQuery.getJSON()
接受一个可选的数据对象参数,就和传入 load()
中的一样。
jQuery.get() 和 jQuery.post()
jQuery.get()
和 jQuery.post()
获取指定 URL 的内容,如果有数据的话,还可以传入指定数据,最后则将结果传递给指定的回调函数。jQuery.get()
使用 HTTP GET 请求来实现,jQuery.post()
使用 HTTP POST 请求实现。与 jQuery.getJSON()
一样,这两个方法也接受相同的三个参数:必须的回调函数,可选的数据字符串或对象,以及一个技术上可选但实际上总会使用的回调函数。调用的回调函数会被传入三个参数:第一个参数是返回的数据,第二个是 success 字符串,第三个则是 XMLHttpRequest 对象。
除了上面描述的三个参数,这两个方法还可以接受可选的第 4 个参数,该参数指定被请求数据的类型。load()
使用 html 类型,jQuery.getScript()
使用 script 类型,jQuery.getJSON()
则使用 json 类型。与上面这些专用函数相比,jQuery.get()
和 jQuery.post()
更灵活。该参数的有效值,在下面描述:
jQuery.ajax() 函数
jQuery 的所有 Ajax 工具最后都会调用 jQuery.ajax()
—— 这是整个类库中最复杂的函数。jQuery.ajax()
仅接受一个参数:一个选项对象,该对象的属性指定 Ajax 请求如何执行的很多细节。例如,jQuery.getScript(url, callback)
与下面 jQuery.ajax()
的调用等价:
可以通过 jQuery.ajaxSetup()
传入一个选项对象来设置任意选项的默认值:
运行以上代码后,指定的 timeout 和 cache 选项会在所有未指定这两个选项值的 Ajax 请求中使用,包括 jQuery.get()
和 load()
等高级工具。
通用选项
jQuery.ajax()
中最常用的选项如下:
type:指定 HTTP 的请求方法。默认是 GET,另一个常用值是 POST。可以指定其它 HTTP 的请求方法,比如 DELETE 或 PUSH,但不是所有浏览器都支持它们。
url:要获取的 URL。对于 GET 请求,data 选项会添加到该 URL 后。
data:添加到 URL 中(GET 请求)或在请求体中(POST 请求)发送的数据。
dataType:指定响应数据的预期类型,以及 jQuery 处理该数据的方式。
contentType:指定请求的 HTTP Content-Type 头。默认值是 application/x-www-form-urlencoded,这是 HTML 表单和绝大部分服务器脚本使用的正常值。
timeout:超时时间,单位是毫秒。
cache:对于 GET 请求,如果该选项设置为 false,jQuery 会添加一个「_=」参数到 URL 中,或者替换已经存在的同名参数。该参数的值是当前时间(毫秒格式),这可以禁用基于浏览器的缓存。
ifModified:当选项值设置为 true 时,jQuery 会为请求的每一个 URL 记录 Last-Modified 和 If-None-Match 响应头的值,并会在接下来的请求中为相同的 URL 设置这些头部信息。这可以使得,如果上次请求后 URL 的内容没有改变,则服务器会发送回 HTTP 304 Not-Modified 响应。
global:该选项指定 jQuery 是否应该触发上面描述的 Ajax 请求过程中的事件。默认值是 true,设置该选项为 false 会禁用 Ajax 相关的所有事件。
回调
下面的选项指定在 Ajax 请求的不同阶段调用的函数。
context:该选项指定回调函数在调用时的上下文对象 —— 就是 this。该选项没有默认值,如果不设置,this 会指向选项对象。
beforeSend:该选项指定 Ajax 请求发送到服务器之前激活的回调函数。第一个参数是 XMLHttpRequest 对象,第二个参数是该请求的选项对象。如果该回调函数返回 false,Ajax 请求会取消。注意跨域的 script 和 jsonp 请求没有使用 XMLHttpRequest 对象,因此不会触发 beforeSend 回调。
success:该选项指定 Ajax 请求成功完成时调用的回调函数。第一个参数是服务器发送的数据,第二个参数是 jQuery 状态码,第三个参数是用来发送该请求的 XMLHttpRequest 对象。
error:该选项指定 Ajax 请求不成功时调用的回调函数。该回调函数的第一个参数是该请求 XMLHttpRequest 对象,第二个参数是 jQuery 状态码。
complete:该选项指定 Ajax 请求完成时激活的回调函数。每一个 Ajax 请求或者成功时调用 success 回调,或者失败时调用 error 回调。在调用 success 或 error 后,jQuery 会调用 complete 回调。第一个参数是 XMLHttpRequest 对象,第二个参数是 jQuery 状态码。
不常用的选项和钩子
下述的 Ajax 选项不经常使用。
async:脚本化的 HTTP 请求本身就是异步的。然而,XMLHttpRequest 对象提供了一个选项,可用来阻塞当前进程,直到接收到响应。如果想开启这一阻塞行为,可以设置该选项为 false。
dataFilter:该选项指定一个函数,用来过滤或预处理服务器返回的数据。第一个参数是从服务器返回的原始数据,第二个参数是 dataType 选项的值。
jsonp:跨域问题应由服务端解决,略。
jsonpCallback:跨域问题应由服务端解决,略。
processData:当设置 data 选项为对象时,jQuery 通常会将该对象转换成字符串,该字符串遵守标准的 application/x-www-form-urlencoded 格式。如果想省略掉该步骤,可以设置该选项为 false。
scriptCharset:对于跨域的 script 和 jsonp 请求,会使用
<script>
元素,该选项用来指定<script>
元素的 charset 属性值。tranditional:jQuery 1.4 改变了数据对象序列化为 application/x-wwww-form-urlencoded 字符串的方式。设置该选项为 true,可以让 jQuery 恢复到原来的方式。
username, password:如果请求需要密码验证,可以使用这两个选项来指定用户名和密码。
xhr:该选项指定一个工厂函数,用来获取 XMLHttpRequest 对象。
Ajax 事件
jQuery 的 Ajax 函数还会在 Ajax 请求的每一个相同阶段触发自定义事件。下面的表格展示了这些回调函数和响应的事件。
可以使用 bind()
或上表第二列中的事件类型字符串来注册这些自定义 Ajax 事件,也可以使用第三列中的事件注册方法来注册。
由于 Ajax 事件是自定义事件,是由 jQuery 而不是浏览器产生的,因此传递给事件处理程序的 Event 对象不是很有用。这些事件的处理程序激活时在 event 参数后都带有两个额外的参数。第一个额外参数是 XMLHttpRequest 对象,第二个额外参数是 选项对象。
jQuery 选择器和选取方法
jQuery 选择器
在 CSS 选择器标准草案定义的选择器语法中,jQuery 支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类。
选择器语法有三层结构。#test
选取 id 属性为 test 的元素,blockquote
选取文档中的所有 blockquote 元素,而 div.note
则选取所有 class 属性为 note 的 div 元素。简单选择器可以组成「组合选择器」,比如 div.note > p
和 blockquote i
。
简单选择器
通常来说,指定标签类型前缀,可以让过滤器运行得更高效。ID 过滤器是个例外,不添加标签前缀时,它会更高效。
组合选择器
使用特殊操作符或「组合符」可以将简单选择器组合起来,表达文档树中元素之间的关系。
下面是组合选择器的一些例子:
选择器组
传递给 $()
函数,或在样式表中使用的选择器,就是选择器组。这是一个逗号分隔的列表,由一个或多个简单选择器或组合选择器构成。
下面是选择器组的一些例子:
选取方法
jQuery 还定义了一些选取方法,这些选取方法提供的多数功能与选择器语法的功能是一样的。
提取选中元素最简单的方式是按位置提取。first()
仅返回选中元素中的第一个 jQuery 对象,last()
则返回最后一个 jQuery 对象,eq()
返回指定序号的 jQuery 对象。
通过位置提取元素更通用的方法是 slice()
。jQuery 的 slice()
与 Array.slice()
类似:接受开始和结束序号,返回从开始(包含)到结束(不包含)序号的 jQuery 对象。
filter()
是通用的选区过滤方法,有 3 种调用方式:
传递选择器字符串,
filter()
会返回匹配该选择器字符串的新 jQuery 对象;传递另一个 jQuery 对象,
filter()
会返回一个包含这两个对象交集的新 jQuery 对象;传递判断函数,
filter()
会为每一个元素调用该判断函数,并返回包含所有函数执行结果为 true 的元素的新 jQuery 对象。
not()
与 filter()
一样,除了含义与 filter()
相反。
has()
如果传入选择器会返回一个新的 jQuery 对象,仅包含子孙元素中匹配该选择器的元素。
add()
会扩充选区,而不是对其进行过滤或提取。
将选中元素集用作上下文
jQuery 还定义了一些选取方法,可将当前选中元素作为上下文来使用。这些方法会使用该选中元素作为上下文或起始点,来得到新的选中元素,然后返回一个包含新选中元素并集的 jQuery 对象。
find()
会在每一个当前选中元素的子孙元素中,寻找与指定选择器匹配的元素,然后返回一个新的 jQuery 对象来代表所匹配的子孙元素集。find()
和 filter()
不同,filter()
不会选中新元素,只是简单地将当前选中的元素集进行缩减。
children()
返回每一个选中元素的直接子元素,支持使用可选的选择器参数进行过滤。
contents()
与 children()
类似,不同的是它会返回每一个元素的所有子节点,包括文本及节点。
next()
和 prev()
返回每一个选中元素的下一个和上一个兄弟元素,如果传入了选择器字符串,则只会选中匹配该选择器的兄弟元素。
nextAll()
和 prevAll()
返回每一个选中元素的前面或后面所有兄弟元素。siblings()
则返回每一个选中元素的所有兄弟元素。如果给这些方法传入选择器,则只会返回匹配该选择器的兄弟元素。
parent()
返回每一个选中元素的父节点。
parents()
返回每一个选中元素的祖先节点。
恢复到之前的选中元素集
为了实现方法的链式调用,很多 jQuery 对象的方法最后都会返回调用对象。虽然可以链式调用下去,但必须清楚地意
最后更新于