《jQuery基础教程》读书笔记一

都说javascript门槛低，在互联网高度发达的今天，仅仅是“能用”这门语言不足以说明其简易性，毕竟，更简易的是对脚本搜索结果进行复制和黏贴。正当我被“面向对象”的javascript弄得晕头转向的时候，jQuery在一定程度上拯救了我。这是个优雅而简洁的javascript框架，并且体积小，兼容性极好。希望我可以借此提升一定的前端编码能力，并从真正意义上去理解javascript吧。

《jQuery基础教程》读书笔记一

---- $()工厂函数不需要用for循环来访问一组元素，放在()里的东西会自动进行循环并作为jq对象储存。

---- $(document).ready DOM下载完成以后开始运行，速度比onload快。

---- 事件捕获与事件冒泡:

允许多个元素响应事件时浏览器所采取的两种正好相反的事件传播模型。事件捕获模式下元素是从外至内响应事件的；而冒泡则从内至外；不同的浏览器采用的是不同的事件传播模型。

DOM标准规定应同时采用这两种策略。首先，事件从一般到具体进行捕获，然后事件再通过冒泡返回DOM树顶层。而事件处理程序可以注册到这个过程的任何一部分。遗憾的是目前的浏览器解析并没有跟标准保持一致。

jQuery始终会在模型的冒泡阶段注册事件处理程序。因此，可以假定最具体的元素会首先获得响应事件的机会。

.hover()方法比.mouseout()和.mouseover()优越之处在于能够准确定位到具体的事件元素，阻止了事件冒泡带来的副作用。

但是在其他事件中则需要通过阻止事件冒泡来解决问题。操纵事件对象event及其方法.stopPropagation()都可以阻止事件冒泡，这是纯javascript特性但是无法支持跨浏览器。而在jQuery中则妥善解决了这个问题。

---- 取消默认操作

由于事件传播和默认操作是两套相互独立的机制，二者任何一方发生时，都可以中止另一方。但在事件对象上调用.stopPropagation()方法是无法取消默认操作的，在这种情况下需要用.preventDefault()方法。

如果想同时停止事件传播和默认操作，则需要在事件处理程序中返回false。这是在事件对象上同时调用.stopPropagation()和.preventDefault()的简写方式。

---- 模拟用户操作 .trigger()
通过该方法可以在不必触发事件的情况下模拟事件触发后的状态。通过这种方式触发事件时，不会触发事件传播。

---- 一次性触发事件 .one()
通过该方法会为元素绑定一个一次性的事件处理函数。

---- 用show()和hide()控制元素的显示和隐藏
这两个方法其实是控制css的display属性。调用这两个方法的时候，jQuery会记住display之前的属性值。fadeIn()和fadeOut()也用于控制显示和隐藏，区别在于效果上是通过控制不透明度来实现。

---- 通过使用连缀，可以对任何jQuery效果进行排队。

---- 使用jQuery的全局函数$.getScript()可以在需要的时候随时加载js文件。以这种方式取得的脚本会在当前页面的全局环境下执行。

jQuery选择符总结

$('#title1 > li')为取得ID为title1(#title)的子元素(>)中所有的列表项(li)。

$('#title1 li:not(.class1)')为取得ID为title的后代元素中没有(not)class1类的所有列表项。

jQuery库支持XPath选择符。如：

$('a[@title]')为取得所有带title属性的链接。

也可以不用@符号。如：

$('div[ol]')为取得所以包含一个ol属性的div元素。

当然，还允许以正则表达式中的^(开始)$(结尾)*(任意)，示例如下：

$('a[href^="mailto:"]')为取得所有电子邮件的链接。

$('a[href$=".rar"]')为取得所有指向RAR文件的链接。

$('a[href*="tao028.com"]')为取得所有包含tao028.com的链接

自定义选择符，如：

$('div:eq(1)')为取得div元素集合中第2个项，注意为单个对象，其length为1。

$('div:nth-child(1)')为取得div元素集合中的所有第一个div，注意其为对象集合，稍后再详述。

$('tr:odd')为取得所有奇数行。

$('tr:even')为取得所有偶数行。

$('td:contains("hahaha")')为取得所有单元格包含hahaha的元素。

---- 关于$.each(obj, fn)：

$.each(obj, fn) 是一个通用的迭代函数，可用于近似地迭代对象和数组。

这个函数与$().each()不同，$().each()是专门用于迭代和执行jQuery对象的函数。而$.each(obj, fn)可以用于迭代任何对象和数组。 这个函数的回调中包含两个参数：第一个是key（对象）或index（数组），第二个是值。

返回值:Object

参数:
obj (Object): 要重复迭代的对象或数组
fn (Function): 要在每个对象中执行的函数