jQuery

jQuery第一章

本章学习要点：

• 选择器

• 效果

• 属性

• 工具

• 事件

• 文档处理

• CSS

• 筛选

选择器

基本选择器

1）ID选择器
(“#id名”)  
2）类选择器(“.class”)
3）标签选择器
(“标签名”)4）全局选择器(“*”)
5）多重选择器
(“#id,.class,标签”)  
6）:first  
获取第一个元素  
7）:last()  
获取最后个元素  
8）:not(selector)  
去除所有与给定选择器匹配的元素  
9）:even  
匹配所有索引值为偶数的元素，从 0 开始计数  
10）:odd  
匹配所有索引值为奇数的元素，从 0 开始计数  
11 ):eq(index)  
匹配一个给定索引值的元素  
12）gt(index)  
匹配所有大于给定索引值的元素  
13）lt(index)  
匹配所有小于给定索引值的元素  
14）header  
匹配如 h1, h2, h3之类的标题元素  
15 ):animated  
匹配所有正在执行动画效果的元素  
16 ):focus  
匹配当前获取焦点的元素。  
17）:lang(language)  
选择指定语言的所有元素   
18):root  
选择该文档的根元素。   
在HTML中，文档的根元素，和(“:root”)选择的元素一样， 永远是元素。
19):target
选择由文档URI的格式化识别码表示的目标元素。

层次选择器

1）ancestor descendant
在给定的祖先元素下匹配所有的后代元素
2）parent>child
在给定的父元素下匹配所有的子元素
3）prev +next
匹配所有紧接在 prev 元素后的 next 元素
4）prev ~siblings
匹配 prev 元素之后的所有 siblings 元素必须是同辈

属性选择器

1）[attribute]
匹配包含给定属性的元素
2 ) [attribute=value]
匹配给定的属性是某个特定值的元素
3）[attribute!=value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素
4）[attribute^=value]
匹配给定的属性是以某些值开始的元素
5）[attribute$=value]
匹配给定的属性是以某些值结尾的元素
6）[attribute*=value]
匹配给定的属性是以包含某些值的元素
7）[selector1][selector2][selectorN]
复合属性选择器，需要同时满足多个条件时使用。

内容

1）:contains(text)
匹配包含给定文本的元素
选取的元素，若用来赋值，则原来的数据会消失
2）:empty
匹配所有不包含子元素或者文本的空元素
3）:has(selector)
匹配含有选择器所匹配的元素的元素
4）:parent
匹配含有子元素或者文本的元素
选取的元素，若用来赋值，则原来的数据会消失

子元素

1）:nth-child（n）
匹配其父元素下的第N个子或奇偶元素

2）:first-child
匹配第一个子元素

3）:last-child
匹配最后一个子元素

4）:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配

表单

1）:input
匹配所有 input, textarea, select 和 button 元素

2）:text
匹配所有的单行文本框type=text

3 ):password
匹配所有密码框

4 ):radio
匹配所有单选按钮

5 ):checkbox
匹配所有复选框

6 ):submit
匹配所有提交按钮

7 ):image
匹配所有图像域

8 ):reset
匹配所有重置按钮

9 ):button
匹配所有按钮

10 ):file
匹配所有文件域

11 ):hidden
匹配所有不可见元素，或者type为hidden的元素

表单对象属性

1）:enabled
匹配所有可用元素
有disabled=”disabled” 是不可用元素

2）:disabled
匹配所有不可用元素

3）:checked
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

4）:selected
匹配所有选中的option元素

可见性选择器

1）:hidden
匹配所有不可见元素，或者type为hidden的元素
2）:visible
匹配所有的可见元素

效果

基本效果

1）show([speed,[easing],[fn]])
显示隐藏的匹配元素。
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
fn:在动画完成时执行的函数，每个元素执行一次。

2）hide([speed,[easing],[fn]])
隐藏显示的元素
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
fn:在动画完成时执行的函数，每个元素执行一次。

3）toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

淡入淡出

1）fadeIn([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”

fn:在动画完成时执行的函数，每个元素执行一次。

2）fadeOut([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

3）fadeTo([[speed],opacity,[easing],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”

fn:在动画完成时执行的函数，每个元素执行一次。

4）fadeToggle([speed,[easing],[fn]])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

滑动

1）slideDown([speed],[easing],[fn])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”

fn在动画完成时执行的函数，每个元素执行一次。

2）slideUp([speed,[easing],[fn]])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

3）slideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
点一次向上再点一次向下

自定义

1）animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数。
params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.

fn:在动画完成时执行的函数，每个元素执行一次。

2）stop([clearQueue],[jumpToEnd])
停止所有在指定元素上正在运行的动画。

3）delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目。

设置

1）jQuery.fx.off
关闭页面上所有的动画。

把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：

• 你在配置比较低的电脑上使用jQuery。

• 你的一些用户由于动画效果而遇到了 可访问性问题

当把这个属性设成false之后，可以重新开启所有动画。

2）jQuery.fx.interval
设置动画的显示帧速。

属性

HTML代码/文本/值

1）html([val|fn])
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
如果有参数则是设置值
如果无参数则是取值

2）text([val|fn])
取得所有匹配元素的内容。

3）val([val|fn|arr])
获得匹配元素的当前值。
如果匹配的值是多个只返回第一个
val改变的是VALUES值
4）html 和text的不同点
html如果匹配到多个值则返回第一个，text返回所有
html返回会将其中的其他标签也读取出来，text返回会忽略其中的标签
html()在更改内容时，可以加入标签， text()更改的全是内容

CSS 类

1)addClass(class|fn)
为每个匹配的元素添加指定的类名。
2)removeClass([class|fn])
从所有匹配的元素中删除全部或者指定的类。
3)toggleClass(class|fn[,sw])
如果存在（不存在）就删除（添加）一个类。

工具

数组与对象操作

1）$.each(object, [callback])

通用例遍方法，可用于例遍对象和数组。
<1>数组遍历

$.each( [0,1,2], function(i, n){
alert( “Item #” + i + “: ” + n );
});
<2>对象遍历

$.each( { name: “John”, lang: “JS” }, function(i, n){
alert( “Name: ” + i + “, Value: ” + n );
});

事件

页面载入

1）ready(fn)
(document).ready(function()//在这里写你的代码…);简写法：(function(){

});

事件

1）mousemove([[data],fn])
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

2）mouseout([[data],fn])
当鼠标指针从元素上移开时，发生 mouseout 事件。不论鼠标指针穿过被选元素或其子元素，都会触发 mouseout 事件

3 )keydown([[data],fn])
当键盘或按钮被按下时，发生 keydown 事件。

4 )keypress([[data],fn])
当键盘或按钮被按下时，发生 keypress 事件。

5 )keyup([[data],fn])
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

6 )event.keyCode
键盘输入的字母对应的数值

7）blur([[data],fn])
当元素失去焦点时触发 blur 事件。

8）focusout([data],fn)
当元素失去焦点时触发 focusout 事件。
注：简单的说就是blur()不支持冒泡而focusout()支持冒泡
9）focus([[data],fn])
当元素获得焦点时，触发 focus 事件。

10）focusin([data],fn)
当元素获得焦点时，触发 focusin 事件。

注：简单的说就是focus()不支持冒泡而focusin()支持冒泡
11）dblclick([[data],fn])
当双击元素时，会发生 dblclick 事件。

12 )mousedown([[data],fn])
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。无需松开鼠标

13）mouseenter([[data],fn])
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

14）mouseleave([[data],fn])
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

15）mouseover([[data],fn])
当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件

16）mouseup([[data],fn])
当在元素上放松鼠标按钮时，会发生 mouseup 事件。

17 )resize([[data],fn])
当调整浏览器窗口的大小时，发生 resize 事件。
$(window).resize(function(){
alert(“Stop it!”);
});

18 )scroll([[data],fn])
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

19 )unload([[data],fn])
在当用户离开页面时，会发生 unload 事件。

具体来说，当发生以下情况时，会发出 unload 事件：

点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面

20）change([[data],fn])
当元素的值发生改变时，会发生 change 事件。

事件处理

1）bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数（可多个事件）。

2）unbind(type,[data|fn]])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

事件切换

1）hover([over,]out)

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

2）toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。多次单击事件。

3）on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。

4）off(events,[selector],[fn])
在选择元素上移除一个或多个事件的事件处理函数。

5）one(type,[data],fn)
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
在每个对象上，这个事件处理函数只会被执行一次

6）trigger(type,[data])
在每一个匹配的元素上触发某类事件。

7）triggerHandler( eventType [, extraParameters ] )
为一个事件执行附加到元素的所有处理程序。
如果您使用 .triggerHandler() 触发 focus 事件，那么它只会触发绑定了该事件的处理函数，而浏览器的默认 focus 动作是不会被触发的。

文档处理

内部插入

1）append(content|fn)
向每个匹配的元素内部追加内容。

2）appendTo(content)
把所有匹配的元素追加到另一个指定的元素元素集合中。

3）prepend(content)
向每个匹配的元素内部前置内容。

4）prependTo(content)
把所有匹配的元素前置到另一个、指定的元素元素集合中。

外部插入

1）after(content|fn)
在每个匹配的元素之后插入内容。

2）before(content|fn)
在每个匹配的元素之前插入内容。

3）insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
("p").insertAfter("#foo");=(“#foo”).after(“p”)。

4）insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
("p").insertBefore("#foo");=(“#foo”).before(“p”)

包裹

1）wrap(html|element|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来。

2）unwrap()
这个方法将移出元素的父元素

3）wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来

4 )wrapInner(htm|element|fnl)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

替换

1）replaceWith(content|fn)
将所有匹配的元素替换成指定的HTML或DOM元素。

2）replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。

A.replaceWith(B)，用B替换A
A.replaceAll(B)，用A替换B中的所有节点

删除

1）empty()
删除匹配的元素集合中所有的子节点。
清空内容

2）remove([expr])
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

3）detach([expr])
从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

复制

clone([Even[,deepEven]])
克隆匹配的DOM元素并且选中这些克隆的副本。

CSS

CCS

1 )css(name|pro|[,val|fn])
访问或者设置匹配元素的样式属性。

位置

1）offset([coordinates])
获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效

2）position()
获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

3）scrollTop([val])
获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

4）scrollLeft([val])
获取匹配元素相对滚动条左侧的偏移。

此方法对可见和隐藏元素均有效。

尺寸

1）height([val|fn])
取得匹配元素当前计算的高度值（px）。

2 )width([val|fn])
取得第一个匹配元素当前计算的宽度值（px）。

3 )innerHeight()
获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效。

4 )innerWidth()
获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效。

5 )outerHeight([options])
获取第一个匹配元素外部高度（默认包括补白和边框）。

6 )outerWidth([options])
获取第一个匹配元素外部宽度（默认包括补白和边框）。

筛选

过滤

1）eq(index|-index)
获取第N个元素
index一个整数，指示元素基于0的位置,这个元素的位置是从0算起。

-index一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)

2）first()
获取第一个元素

3）last()
获取最后个元素

4 )hasClass(class)
检查当前的元素是否含有某个特定的类，如果有，则返回true。
这其实就是 is(“.” + class)。

5 )filter(expr|obj|ele|fn)
筛选出与指定表达式匹配的元素集合。

6 )is(expr|obj|ele|fn)
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

7 )map(callback)
将一组元素转换成其他数组（不论是否是元素数组）

你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用’$.map()’来方便的建立。

8 )has(expr|ele)
保留包含特定后代的元素，去掉那些不含有指定后代的元素。

9 )not(expr|ele|fn)
删除与指定表达式匹配的元素

10）slice(start, [end])
选取一个匹配的子集
start
开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
end
结束选取自己的位置，如果不指定，则就是本身的结尾。

查找

1）children([expr])
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

2）closest(expr,[context]|object|element)

3）find(expr|obj|ele)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

4 )next([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

5 )nextAll([expr])
查找当前元素之后所有的同辈元素。

6 )nextUntil([exp|ele][,fil])
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止不包括匹配的元素。

7）offsetParent()
返回第一个匹配元素用于定位的父节点。

8）parent([expr])
取得一个包含着所有匹配元素的唯一父元素的元素集合。

9）parentsUntil([expr|element][,filter])
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

10）prev([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

11）prevAll([expr])
查找当前元素之前所有的同辈元素

12 )prevUntil([exp|ele][,fil])
查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

13 )siblings([expr])
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

串联

1）add(expr|ele|html|obj[,con])
2）andSelf()
加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

3）contents()
4）end()
回到最近的一个”破坏性”操作之前。即，将匹配的元素列表变为前一次的状态。