目前,jQuery作为一个优秀的javascript框架已经发行到了1.9版(提供295个方法),其优秀的设计理念和完美地兼容性,完全征服了这个时代。因其高效的版本更新,往往我们的学习速度跟不上它的更新速度。作为使用者,如何快速地掌握它,则已成为一大部分人的一个愿望。虽然它有着完善的API,但无奈英文水平太洼,只能望而却步。国内也有一些无私奉献的良民对其进行了翻译,但对于懒惰和忙碌的程序员来说,个人时间的短缺则无暇进行系统阅读。鉴于国内现状,本人不才特录制jQuery API的完整视频以供大家学习,本视频特点完全遵循官方API的原滋原味,教案也完全依循其API。针对每一个方法提供一个视频进行解析,实现每个视频短小精悍,易于浏览者准确查找和收看。避免了现有国内培训机构喜欢的超长视频,不易查找某个知识的弊端。本人会对每个API都会提出自己的一些见解,注重每个方法的使用细节。如果你觉得某个视频录制的不好或有错误可以直接发邮件给我,也可以直接QQ(40780734)与我联系。如果你觉得对于您老人家来说完全没有价值则可以直接飘过,因为大家都明白“众口难调”的道理。本人一直坚信:不积跬步,无以至千里;不积小流,无以成江海。希望能在这里与大家打造一个共同学习的平台。
目 录
一、选择器
1.基本
1.1 All Selector (“*”)
功能:选择指定范围内的所有元素
写法:$('*')
从页面的顶级元素html、head、meta到页面body及内部的所有元素都会被选择到!
案例1(查找页面中的所有元素):D:\项目\jQueryAPI\选择器\1基本\星1.html
案例2(查找指定div中的所有元素):D:\项目\jQueryAPI\选择器\1基本\星2.html
警告: 除非被它自己使用,否则 * 选择器或通用选择器,其速度是极其慢的。
1.2 Class Selector (“.class”)
功能:选择指定范围内给定样式类名的所有元素
写法:$('.className')
参数:className一个用来查找的类名,可以写入多个类名,类名之间没有任何分隔符。
一个元素有多个类时,如果有一个匹配即可选中。
当className是多个类名时,只要元素中应用了className中提及的这几个类,则就会被选中,不管元素class中类名的先后顺序。
案例1(查找页面中应用样式myClass的所有元素):D:\项目\jQueryAPI\选择器\1基本\class1.html
案例2(查找页面中同时应用了样式myClass和youClass的所有元素):D:\项目\jQueryAPI\选择器\1基本\class2.html
注意:样式名称是区分大小写的
1.3 Element Selector (“element”)
功能:根据给定(html)标记名称选择所有的元素。
写法:$('html标记名称')
参数:html标记名称是一个用来搜索的元素, 指DOM节点的标签名。
案例1(查找页面中所有的div):D:\项目\jQueryAPI\选择器\1基本\element1.html
案例2(查找表格中的所有div):D:\项目\jQueryAPI\选择器\1基本\element2.html
注意:选择html标记名称也可以自定义的标签,选择时$('')这里的引号不能丢!!
1.4 ID Selector (“#id”)
功能:选择一个具有给定id属性的单个元素
写法:$('#idName')
参数:idName即一个用来查找的ID,即元素的id属性
案例1(查找页面中id为container的元素):D:\项目\jQueryAPI\选择器\1基本\id1.html
案例2(查找页面中id为myId.container[0]的元素):D:\项目\jQueryAPI\选择器\1基本\id2.html
注意:id中有.或[或]等特殊字符时一定要转义。错误的页面中有多个重复的id,则只会选中第一个出现该重复id的元素
1.5 Multiple Selector (“selector1, selector2, selectorN”)
功能:将每一个选择器匹配到的元素合并后一起返回
写法:$('selector1,selector2,selector3,……,selectorN')
参数:selector可以是html标签,可以是id,也可以是class的名称
案例1(选择页面中的div,span和应用了myClass样式的元素):D:\项目\jQueryAPI\选择器\1基本\selector1.html
案例2(返回jQuery对象的顺序按Dom树的顺序,并非selector的顺序,难):D:\项目\jQueryAPI\选择器\1基本\selector2.html
注意:一种选择任意不同类型元素的有效方法,返回的jQuery对象是按页面中Dom的顺序,并非按selector1,selector2……的顺序!!
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
2.层级
2.1 Child Selector (“parent > child”)
功能:选择指定“parent”元素内指定的"child"的【所有直接儿子】元素。
写法:$('parent > child')
参数:parent 任何有效的选择器
child用来筛选“子”元素的选择器(这里的子就是儿子的意思,不包含孙子级别)
案例1(选择页面中的无序列表下的所有直接子元素):D:\项目\jQueryAPI\选择器\2层级\查找儿子们.html
注意:作为一个css选择器,IE6下不支持这种选择,然而jQuery做到了完全兼容,这是它的nb之处!! ">"左右的空格可有可无。
2.2 Descendant Selector (“ancestor descendant”)
功能:选择给定的祖先元素内的【所有后代】元素。
写法:$('ancestor descendant')
参数:ancestor: 任何有效的选择器
descendant: 一个用来筛选后代元素的选择器。
案例1(查找表单下所有的input标签):D:\项目\jQueryAPI\选择器\2层级\所有后代元素.html
注意:所有后代元素可能是该元素的孩子,孙子,曾孙等。
2.3 Next Adjacent Selector (“prev + next”)
功能:选择所有紧接在 “prev” 元素后的【“next“,紧挨着的一个兄弟】 元素。
写法:$('prev + next')
参数: prev: 任何有效的选择器
next: 用于筛选紧跟在 "prev" 后面的元素的选择器。
案例1(查找表单元素后紧挨着的一个div):D:\项目\jQueryAPI\选择器\2层级\一个相邻的兄弟.html
注意:next是其兄弟且与prev在Dom节点上为上下紧挨的关系,且在同一个父元素下,如果next元素虽在prev之后但之间有非文本或注释的节点,则next节点不能被选中,+前后的空格可有可无,可以用next()代替。
2.4 Next Siblings Selector (“prev ~ siblings”)
功能:匹配 “prev” 元素之后的【所有兄弟】元素。具有相同的父元素,并匹配过滤“siblings”选择器。
写法:$('prev ~ siblings ')
参数: prev: 任何有效的选择器
siblings : 一个选择器来【过滤】第一选择器以后的兄弟元素。
案例1(查找id为div1的元素后面所有的div):D:\项目\jQueryAPI\选择器\2层级\身后的所有兄弟.html
注意:siblings是其在Dom结构上后面的所有兄弟,不包含兄弟的家属,'siblings'是选择兄弟们的暗号,~前后空格可有可无,与nextAll()不同。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
3.基本筛选
3.1 :animated Selector
功能:选择所有正在执行动画效果的元素。
写法:$(':animated') 高效filter(':animated')
案例1(使页面中正在为div1的元素后面所有的div):D:\项目\jQueryAPI\选择器\ 3基本筛选 \animated选择正在执行动画的所有元素1.html
D:\项目\jQueryAPI\选择器\ 3基本筛选 \animated选择正在执行动画的所有元素2.html
注意::animated是jQuery延伸出来的选择器,直接使用$('div:animated')效率 小于 先用css选择器$('div')然后再过滤.filter(':animated')。
3.2 :eq() Selector
功能:在匹配的集合中选择索引值为index的元素,即使符合条件的元素有多个但只能选中一个元素。
写法:$(':eq(index)')或.eq(index)
参数:index如果是正数,则从第一个元素开始计数,0开始
index如果是负数,则从最后一个元素开始计数,-1则表示倒数第1个元素
案例1(查找表格tb中的第1个td和最后1个td):D:\项目\jQueryAPI\选择器\ 3基本筛选 \eq1.html
D:\项目\jQueryAPI\选择器\ 3基本筛选 \eq2.html
注意:eq是一个jQuery延伸并不是CSS规范的一部分,使用:eq()查询不能使用原生Dom提供的querySelectorAll()方法提高性能,
为了在现代浏览器上获得更佳的性能,请使用$("your-pure-css-selector").eq(index)代替
3.3 :even Selector
功能:选择索引值为偶数(0、2、4……)的元素。
写法:$(':even') 高效:filter(':even')
案例1(把表格tb的1、3、5行设置为绿色背景):D:\项目\jQueryAPI\选择器\ 3基本筛选 \even.html
注意:even是一个jQuery延伸出来的选择器,所以为了高效请使用css选择器选择元素然后再filter(':even')的方法!!
查找表格中索引值是偶数的行(即实际表格中的奇数行),即匹配第一行、第三行、第五行等 (索引值是 0, 2 ,4 等 )
3.4 :first Selector
功能:返回第一个匹配的元素,仅返回一个元素。
写法:$(':first')
案例1(把class为star内的第一个元素并设置为灰色背景):D:\项目\jQueryAPI\选择器\3基本筛选\first.html
注意:first是一个jQuery延伸出来的选择器,所以为了高效请使用css选择器选择元素后然后filter(':first')的方法!
它等价于eq(0)或lt(1)
3.5 :gt() Selector
功能:选择匹配集合中所有大于给定index(索引值)的元素。
写法:$(':gt(index)')
参数:index是一个基于从0开始的数字,不包含该index的元素
案例1(选择class为star内除第一个元素以外的所有元素并设置其背景为灰色):D:\项目\jQueryAPI\选择器\3基本筛选\gt.html
注意::gt()是一个jQuery延伸出来的选择器,为提高性能请使用$('pure-css-selector').slice(index)代替;
3.6 :header Selector
功能:选择所有标题元素,像h1, h2, h3 等
写法:$(':header')
案例1(选择页面中所有的header标签并设置它们统一的背景):D:\项目\jQueryAPI\选择器\3基本筛选\header.html
注意::header是jQuery延伸出来的选择器,为提高性能请使用$('pure-css-selector').filter(':header')代替。
3.7 :lang Selector
功能:选择指定语言的所有元素(以及它的所有后代)。
写法:$(':lang(language)')
参数:language指一种语言代码或语言代码的开始部分,如zh、en、en-us,具体内容浏览http://www.w3school.com.cn/tags/html_ref_language_codes.asp
案例(根据div的语言属性,分别对其着色):D:\项目\jQueryAPI\选择器\3基本筛选\lang.html
D:\项目\jQueryAPI\选择器\3基本筛选\lang1.html
注意:对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定。
div:lang(en-us)选择它及其下所有元素,div[lang|=es-es]只选中应用了lang='es-es'属性的元素,不能选中它的子元素,
以上css定义的兼容性在ie7及以下显示有问题,有兼容性问题
3.8 :last Selector
功能:选择最后一个匹配的元素,如果有多项匹配,则只返回最后一项
写法:$(':last')
案例(选择ul中的最后一项设置其背景为灰):D:\项目\jQueryAPI\选择器\3基本筛选\last.html
注意::last是jQuery延伸出来的选择器,为提高性能请使用$('pure-css-selector').filter(':last')代替。
3.9 :lt() Selector
功能:选择匹配集合中所有索引值小于给定index参数的元素,截至到索引为0为止。
写法:$(':lt(index)')
参数:index是一个基于从0开始的数字,不包含该index的元素
案例:(选择class为star内前3个元素并设置其背景为灰色):D:\项目\jQueryAPI\选择器\3基本筛选\lt.html
注意::lt()是一个jQuery延伸出来的选择器,为提高性能请使用$('pure-css-selector').slice(0, index)代替;
返回多个元素索引相关的选择说明,这种索引相关的选择器(包括这个“小于”选择器)会在先前提供的选择器筛选出的元素基础上再进行筛选。进一步筛选的依据就是这个元素在原先匹配集合中的顺序。举例来说,如果一开始通过 class 选择器 (.myclass ) 选中了 4 个元素,然后这四个元素的索引值会被分配为 0到3,之后就可以用这种索引值选择器来进一步筛选了。
3.10 :not() Selector
功能:选择所有元素去除不匹配给定的选择器的元素。
写法:$('not(selector)')或$('pure-css-selector').not('selector')
参数:selector任意选择器
案例:(查找所有的未选中复选框,设置其后的span背景为红色):D:\项目\jQueryAPI\选择器\3基本筛选\not.html
注意::not() 通常会构建出一个非常复杂的选择器,推荐使用.not()方法,可以让代码更易读。
3.11 :odd Selector
功能:选择索引值为奇数元素,索引从0开始计数,选择索引为1、3、5……的元素。
写法:$(':odd')
案例1(选择应用.star下的Li设置为绿色背景):D:\项目\jQueryAPI\选择器\ 3基本筛选 \odd.html
注意:odd是一个jQuery延伸出来的选择器,所以为了高效请使用css选择器选择元素然后再filter(':odd')的方法!!
查找表格中索引值是奇数的行(即实际表格中的偶数行),即匹配第二行、第四行、第六行等 (索引值是 1, 3 ,5等 )
3.12 :root Selector(新)
功能:选择该文档的根元素
写法:$(':root')
案例1(选择文档的根元素):D:\项目\jQueryAPI\选择器\ 3基本筛选 \root.html
注意:文档的根元素和$(':root')选择的永远是html页的<html>元素
3.13 :target Selector(新)
功能:选择由文档URI的格式化识别码表示的目标元素,返回页面中id=target的唯一元素
写法:$(':target')
参数:target表示打开网页中的id的值,在用jQuery选择时,一直用target这个变量代表,在URI中用实际id的值
案例(通过页面跳转,通过地址传参的方式选中跳转到页面中id为参数值的元素):D:\项目\jQueryAPI\选择器\ 3基本筛选 \target.html
注意::target是jQuery对uri中#后参数值所启用的一个“变量”,并非查找页面中id=target的元素,应该用id为target代表的值的元素!
目前该方法兼容性不好,chrome不支持,只能在ie或其他浏览器中测试。http://www.w3.org/TR/css3-selectors/#target-pseudo
4.内容筛选
4.1 :contains() Selector
功能:选择所有包含指定文本的元素。
写法:$(':contains(text)')或$(':contains("text")')
参数:text是用来查找的一个文本字符串,这里是区分大小写的。
案例(查找.star元素中包含item的元素并设置它们的背景为红色):D:\项目\jQueryAPI\选择器\4内容筛选\contains.html
注意:匹配的文本可以直接出现在所选的元素中,或在该元素的任何后代中,或两者兼有。
:contains()则会全部选中,:contains('')则全不选,contains(这里要选择的文本可以加引号也可不加)
4.2 :empty Selector
功能:选择所有没有子元素的元素(包括文本节点)。
写法:$(':empty')
案例(选择页面中所有的空元素,并设置它们的内容,提醒使用者):D:\项目\jQueryAPI\选择器\4内容筛选\empty.html
注意:W3C建议<p>等标签中至少要有一个节点,即使这个子节点是文本。
<input>, <img>, <br>, 和 <hr>这样的单标签都被认定为无子元素,
文本则被认为是一个元素的子元素,注释不被认为是一个元素的子元素。
4.3 :parent Selector
功能:选择所有含有子元素(包含文本节点)或文本的父级元素。
写法:$(':parent')
案例(选择页面中所有的非空元素,并设置它们的背景为红色):D:\项目\jQueryAPI\选择器\4内容筛选\parent.html
注意:parent是一个jQuery延伸出来的选择器,所以为了高效请使用css选择器选择元素后.filter(':parent')的方法!
<input>, <img>, <br>, 和 <hr>这样的单标签都被认定为无子元素。
4.4 :has() Selector
功能:选择元素其中至少包含指定选择器匹配的一个种元素。可以在其所有后代元素中,则该元素就被选中。
写法:$(':has(selector)')或.has(selector/DOMElement)
参数:selector任意的选择器
案例(给所有含有p段落标签的 div 上应用一个名为"test"的class):D:\项目\jQueryAPI\选择器\4内容筛选\has.html
注意:has是一个jQuery延伸出来的选择器,所以为了高效请使用css选择器选择元素后.has(selector/DOMElement)的方法!
这个方法强调的是后代元素中有selector这样元素,如果有就会被选中!!
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
5.可见性筛选
5.1:hidden Selector
功能:选择所有隐藏的元素。
写法:$(':hidden')
参数:在页面中的隐藏元素在页面中不占据空间,而像visiblity:hidden或opcity:0的元素虽然在页面中不可见,
但占据着页面中的位置,则不属于隐藏元素。
(隐藏元素:css的display属性值为none、type="hidden"的表单元素、宽和高显示地设置其值为0、有一个祖先元素为隐藏元素)
(隐藏元素:css的display属性值为none、type="hidden"的表单元素、宽和高显示地设置其值为0、有一个祖先元素为隐藏元素)
案例:(查找页面中所有的隐藏元素)D:\项目\jQueryAPI\选择器\5可见性筛选\hidden.html
注意::hidden是jQuery延伸出来的一个选择器,为了在现代浏览器中获得最佳性能推荐使用$('pure-css-selector').filter(':hidden')代替
5.2:visible Selector
功能:选择所有显示的元素。
写法:$(':visible')
参数:在页面中占据着空间的元素均被认定为可见元素。包括visibility:hidden的元素和opacity:0这两种特殊的元素。
像宽或高不为0,display不为none、表单元素type不是hidden的元素、祖先中没有被隐藏的均可认定为可见元素
案例:(查找页面中的可见元素,点击它们时背景变色)D:\项目\jQueryAPI\选择器\5可见性筛选\visible.html
注意::visible是jQuery延伸出来的一个选择器,为了在现代浏览器中获得最佳性能推荐使用$('pure-css-selector').filter(':visible')代替
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
6.属性
6.1Attribute Contains Prefix Selector [name|="value"]
功能:选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-” )的元素。
写法:$('[attribute|="value"]')
参数:attibute是一个属性名,可以是一个元素的任意属性名称
value可以是一个带引号的字符串,也可以是一个不带引号的单词,这里最终选择时会匹配以value为值或值以value开头,-紧跟其后的元素。
案例(查找hreflang属性值是英语的所有链接)
D:\项目\jQueryAPI\选择器\
6属性\lang.html
注意:这个选择器是引入CSS规范来处理语言属性,这个选择器重点在前缀这个概念,且如果作为前缀则其后跟-。
6.2Attribute Contains Selector [name*="value"]
功能:选择指定属性具有包含一个给定的子字符串的元素。(选择给定的属性是以包含某些值的元素)
写法:$('[attribute*="value"]')
参数:attribute是一个任意的属性名
value是一个可以带引号也可以不带引号的字符串或单词,选择的元素属性值中必须包含该值
案例(查找页面中class样式中包含color的元素)
D:\项目\jQueryAPI\选择器\
6属性\contains.html
注意:这个选择器是jQuery选择器中有别于单词选择器的一个选择器,如果选择器的字符串内的任何地方出现的元素的属性值,它会被选择。
而单词选择器[attribute~="word"]是仅匹配值中word一个值或word前后以空格分隔的值。
6.3Attribute Contains Word Selector [name~="value"]
功能:选择指定属性用空格分隔的值中包含一个给定值的元素。
写法:$('[attribute~="value"]')
参数:attribute是一个任意的属性名
value是任意的单词或字符串,它的引号可有可无。选择的元素属性值是该值或值的前后以空格分隔开
案例(查找页面中name属性包含man的input,并设置它们的值)
D:\项目\jQueryAPI\选择器\
6属性\spaceAndContains.html
注意:这个选择器测试属性值中的每个单词字符串,其中“value”是一个由空白分隔的字符串定义的。如果测试字符串恰好等于任何一个字符这个选择器将选择。
6.4Attribute Ends With Selector [name$="value"]
功能:选择指定属性是以给定值结尾的元素。这个给定值是区分大小写的。
写法:$('[attribute$="value"]')
参数:attribute是一个任意的属性名
value是任意一个单词或字符串,它的引号可有可无。选择的元素属性值必须以此值结束
案例(查找所有的属性名称以“letter”的结束的元素
)
D:\项目\jQueryAPI\选择器\
6属性\endWith.html
注意:这个选择器的重点在于强调结束,以value结束,其后不能有任何字符,还区分大小写。
6.5Attribute Starts With Selector [name^="value"]
功能:选择指定属性是以给定字符串开始的元素
写法:$('[attribute^="value"]')
参数:attribute是一个任意的属性名
value是任意一个单词或字符串,它的引号可有可无。选择的元素属性值必须以此值开始
案例(
查找所有的属性名称以“letter”的结束的元素
)
D:\项目\jQueryAPI\选择器\
6属性\startWith.html
注意:这个选择器的重点在于属性值的开始,以value开始,在该值之前不能有任何的字符,且区分大小写。这个选择器可以确定页面中由服务器端框架产生HTML元素的系统产生的ID的元素,是非常有用的。 然而,它会比使用类选择器慢一些,如果可以的话组成类似的元素。
6.6Attribute Equals Selector [name="value"]
功能:选择指定属性等于给定值的元素。
写法:$('[attribute="value"]')
参数:attribute是一个任意的属性名
value是任意一个单词或字符串,它的引号可有可无。
案例(查找页面中value="anchao ac"的元素)
D:\项目\jQueryAPI\选择器\
6属性\eq.html
注意:这个选择器重点是属性值必须与指定的值一致。
6.7Attribute Not Equal Selector [name!="value"]
功能:选择不存在指定属性,或者指定的属性值不等于给定值的元素。等价:not(name='value')
写法:$('[attribute!="value"]')
参数:attribute是一个任意的属性名
value是任意一个单词或字符串,它的引号可有可无。
案例(查找页面中value不是anchao的元素)
D:\项目\jQueryAPI\选择器\
6属性\not.html
注意:这个选择器重点是指定的属性不存在,或有该属性但值不是指定的value。因为这个选择器是jQuery的一个扩展方法,为了高效执行推荐使用
$('
pure-css-selector
').not('[name="value"]')
6.8Has Attribute Selector [name]
功能:选择所有具有指定属性的元素,该属性可以是任何值。
写法:$('["attribute"]')
参数:attribute是一个任意的属性名
案例(查找页面中有id属性的div并设置它们的内容)
D:\项目\jQueryAPI\选择器\
6属性\has.html
注意:这个选择器重点是检查所要查寻的元素是否包含指定的属性,不管这个属性的值是否有值。
6.9Multiple Attribute Selector [name="value"][name2="value2"]
功能:选择匹配所有指定的属性筛选器的元素
写法:$('[attributeFilter1]
[attributeFilter2]
[attributeFilterN]
')
参数:attributeFilter是任意一个属性选择器,用来对选择元素的过滤
案例(查找页面中有id属性且name属性以color结尾的元素)
D:\项目\jQueryAPI\选择器\
6属性\multiple.html
注意:主要侧重查找的元素同时包含这几个属性,每个属性的选择都是在进一步减少选择的元素。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
7.子元素筛选
7.1:first-child Selector
功能:选择所有父级元素下的第一个子元素(可能是一个集合)。
写法:$(':first-child')
案例(给页面中每一个div下的第一个span加上下划线并加上鼠标悬浮效果)
D:\项目\jQueryAPI\选择器\
7子元素筛选\first-child.html
注意:虽然:first只匹配一个单独的元素,但是:first-child选择器可以匹配多个,即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)。
7.2:last-child Selector
功能:选择所有父级元素下的最后一个子元素(可能是一个集合)。
写法:$(':last-child')
案例
(给页面中每一个div下的最后一个span加上红色字体样式并加上鼠标悬浮效果)
D:\项目\jQueryAPI\选择器\
7子元素筛选\last-child.html
注意::last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素,即为每个父级元素匹配最后一个子元素。
7.3:first-of-type Selector(新)
功能:选择所有父级元素下相同的元素名称的第一个兄弟元素。
写法:$(':first-of-type')
案例(在每一个匹配的div中查找第一个span,给它添加一个类)
D:\项目\jQueryAPI\选择器\
7子元素筛选\first-of-type.html
$('div span:first-of-type')这里的div与span的关系可以是直接关系或间接关系,而在选择span时则会通过span父级下的子元素进行筛选
注意::first-of-type 选择器匹配的元素在文档树中具有相同的父元素并且相同的元素名称,即看其是否是同一父元素下指定类型的第一个。
7.4:last-of-type Selector
(
新
)
功能:
选择所有父级元素下相同的元素名称的最后一个兄弟元素。
写法:$(':last-of-type')
案例(在每一个匹配的div中找到最后一个span,并加上 CSS 以及增加鼠标悬停效果
)
D:\项目\jQueryAPI\选择器\
7子元素筛选\last-of-type.html
$('div span:last-of-type')这里的div与span的关系可以是直接关系或间接关系,而在选择span时则会通过span父级下的子元素进行筛选
注意::last-of-type 选择器匹配在文档树中具有相同的父元素并且相同的元素名称,即看其是否是同一父元素下指定类型的最后一个。
7.5:nth-child() Selector
功能:选择所有父元素下的第n个子元素。
写法:$(':nth-child(index/even/odd/equation)')
参数:index每个相匹配子元素的索引值,从1开始。even/odd指定一个偶数或奇数的字符串,
equation指定一个方程式:nth-child(4n),各个参数都不加引号
案例1(查找页面中ul下的第二个li并赋上新样式)
D:\项目\jQueryAPI\选择器\
7子元素筛选\nth-child.html
案例2(综合)
D:\项目\jQueryAPI\选择器\
7子元素筛选\nth-child2.html
注意::nth-child(n)中的n是从1开始计数的,它选择的是父元素内所有子元素的第几个,不区分子元素的类别,返回可能是多个元素。而:eq(n)、:even、:odd等则只会选中冒号前面指定类型的元素,且把所有的元素作为一个集合然后再进行筛选,eq中的n从0开始计数,且永远最多返回一个元素。
7.6
:nth-of-type() Selector
(
新
)
功能:
选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。
写法:$(':nth-of-type(index/even/odd/equation)')
参数:
index每个相匹配子元素的索引值,从最后一个开始(1),也可以是字符串even或odd,或一个方程式nth-last-child(3n+1)
各个参数都不加引号
案例(
查找页面中每个span,这个span在其所有
span
兄弟元素中的第二个元素
)
D:\项目\jQueryAPI\选择器\
7子元素筛选\
nth-of-type
.html
注意:nth-of-type(n)遵循CSS3中结构性伪类选择符 E:nth-of-type(n)实现的,它匹配所有父元素下同类型中的第n个同级兄弟元素E(先按e进行筛选,然后查找第n个)。nth-child(n)遵循1.冒号前面的元素类型;2.是父元素中的第n个子元素。
7.7:nth-last-child() Selector
(
新
)
功能:
选择同属于一个父元素下的第n个子元素。计数从最后一个元素开始到第一个。
写法:$(':nth-last-child(index/even/odd/equation)')
参数:index每个相匹配子元素的索引值,从最后一个开始(1),也可以是字符串even或odd,或一个方程式nth-last-child(3n+1)
各个参数都不加引号
案例1(查找页面中ul下的倒数第二个li并赋上新样式)
D:\项目\jQueryAPI\选择器\
7子元素筛选\nth-last-child.html
案例2(综合)
D:\项目\jQueryAPI\选择器\
7子元素筛选\nth-last-child2.html
注意::nth-last-child(n)中的n是从1开始计数的,它选择的是父元素内所有子元素的倒数第几个,强调的是倒数第n个的位置上的子元素是否为冒号前面的类型,如果是该类型则选中,返回可能是多个元素。认位置再认标签
7.8:nth-last-of-type() Selector
(
新
)
功能:选择同一父级元素下相同元素名称中的第n个子元素,计数从最后一个元素到第一个。
写法:$(':nth-last-of-type(
index/even/odd/equation
)')
参数:index每个相匹配子元素的索引值,从最后一个开始(1),也可以是字符串even或odd,或一个方程式nth-last-child(3n+1)
各个参数都不加引号
案例1(
在每个匹配的ul中查找倒数第二个li,并将它标记出来
)
D:\项目\jQueryAPI\选择器\
7子元素筛选\nth-last-of-type.html
案例2(综合)
D:\项目\jQueryAPI\选择器\
7子元素筛选\
nth-last-of-type2
.html
注意:nth-last-of-type(n)中的n是从1开始计数的,它从最后一个元素开始计数,冒号前面是它要找的元素类型,只要包含该类型元素的父元素中有此类型的元素,则在该父元素中首先过滤出所有的指定类别的子元素,然后选中倒数第n个元素,强调的是按type过滤后的倒数第n个子元素,可能返回多个元素。先按指定标签过滤再认位置
7.9:only-child Selector
功能:如果某个元素是其父元素的唯一子元素,那么该子元素就会被选中(独生子或独生女选择器)。
写法:$(':only-child')
案例(查找页面中只包含一个ul的div)
D:\项目\jQueryAPI\选择器\
7子元素筛选\
only-child
.html
注意:此选择器强调父元素中有且只有一个元素,并且该元素还是指定的类型
7.10:only-of-type Selector
(
新
)
功能:
选择在其父元素中唯一指定类别的子元素,
那么该子元素就会被选中(多个子元素中唯一类型选择器)
。
写法:$(':only-of-type')
案例(查找页面中有一个子元素为ul的div)
D:\项目\jQueryAPI\选择器\
7子元素筛选\
only-of-type
.html
注意:此选择器强调在父元素中,该子元素的类别是唯一的。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
8.表单
8.1:button Selector
功能:选择所有按钮元素(button)和类型为按钮(type='button')的元素。
写法:$(':button')或
$("button, input[type='button']")
案例(查找div下的所有按钮,并设置它们为透明背景)
D:\项目\jQueryAPI\选择器\
8表单\button.html
注意:
:button是一个 jQuery 延伸出来的选择器,并不是的CSS规范的一部分,为了当使用:button的时候在现代浏览器上获得更佳的性能,首先使用纯CSS选择器选择元素,然后使用.filter(":button")。
8.2:checkbox Selector
功能:选择所有类型为checkbox的元素,即选择所有的复选框元素。
写法:$(':checkbox')或$('[type="checkbox"]')
案例(歌曲选择)
D:\项目\jQueryAPI\选择器\
8表单\checkbox.html
注意:$(':checkbox') 等同于 $('[type=checkbox]')。如同其他伪类选择器(那些以“:”开始)建议前面加上一个标记名称或其他选择器;否则,默认使用通用选择("*")。换句话说$(':checkbox') 等同于 $('*:checkbox'),所以应该使用$('input:checkbox')来提升效率。:checkbox 是一个 jQuery 延伸出来的选择器,并不是的CSS规范的一部分,使用:checkbox 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了现代浏览器上获得更佳的性能,建议使用[type="checkbox"]代替.
8.3:checked Selector
功能:匹配所有勾选的元素(单选或多选框)。
写法:$(':checked')
案例(确定多个单选和复选框被选中)
D:\项目\jQueryAPI\选择器\
8表单\checked.html
注意:这个 :checked 选择器适用于复选框和单选框。[checked]只能选择html中拥有checked属性的元素,对于动态点击赋值的复选框或单选按钮都不能被选中。对于下拉框元素, 使用 :selected 选择器。
8.4:disabled Selector
功能:选择所有被禁用的元素。
写法:$(':disabled')
案例(查找页面div中所有的禁用的元素并设置它们的内容)
D:\项目\jQueryAPI\选择器\
8表单\disabled.html
注意:如同其他伪类选择器(那些以“:”开始)建议前面加上一个标记名称或其他选择器;否则,通用选择("*")被默认使用。换句话说$(':disabled') 等同于 $('*:disabled'),所以应该使用$('input:disabled')。
:disabled选择器和[disabled] 属性(attribute) 选择器的差别, :disabled 检查元素的disabled属性的值(true/false),[disabled] 检查是否存在的disabled属性。
:disabled 选择器仅可用于选择支持disabled属性(attribute)的HTML元素(<button>, <input>,
<select>,
<optgroup>, <option>和<textarea>)。
optgroup禁用会把其子元素也设置成disabled
8.5:enabled Selector
功能:选择所有可用的元素。
写法:$(':enabled')
案例(查找页面div中所有可用的元素并设置它们的内容)
D:\项目\jQueryAPI\选择器\
8表单\enabled.html
注意::enabled选择器和:not([disabled])属性(attribute) 选择器还是有些细微的差别;:enabled 检查元素的disabled属性是否严格等于false,:not([disabled]) 排除有disabled 属性(attribute)的元素。
:enabled 选择器仅可用于选择支持disabled属性(attribute)的HTML元素(<button>, <input>, <optgroup>, <option>, <select>, 和 <textarea>)。
8.6:focus Selector
功能:选择当前获取焦点的元素。
写法:$(':focus')或$(document.activeElement)
案例(给获取焦点的元素添加focused类):
D:\项目\jQueryAPI\选择器\
8表单\focus.html
注意:如果你正在寻找当前的焦点元素,$(document.activeElement )将检索,而不必查找整个DOM树。
8.7:file Selector
功能:选择所有类型为file的元素,即选择所有的文件上传元素。
写法:$(':file')或$('[type="file"]')
案例(查找页面中input的type属性为file的元素并设置它们的背景)
D:\项目\jQueryAPI\选择器\
8表单\file.html
注意::file是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:file查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用[type="file"] 代替。
8.8:image Selector
功能:选择所有类型为image的元素,即选择所有的图片按钮元素。
写法:$(':image')或$('[type="image"]')
案例
(查找页面中input的type属性为image的元素并设置它们的背景)
D:\项目\jQueryAPI\选择器\
8表单\image.html
注意:
:image是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:image查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用[type="
image
"] 代替。
8.9:input Selector
功能:选择input\select\texteare\button元素,基本选择表单中所有元素。
写法:$(':input')
案例(查找页面中input元素)
D:\项目\jQueryAPI\选择器\
8表单\input.html
注意:
:input是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:input查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用.filter(':input')
代替。
8.10:password Selector
功能:选择所有类型为password的元素,即选择所有的密码框元素。
写法:$(':password')或$('[type="password"]')
案例(查找页面中的密码元素)
D:\项目\jQueryAPI\选择器\
8表单\password.html
注意::password是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:password查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用[type="password"] 代替。
8.11:radio Selector
功能:选择所有类型为radio的元素,即选择所有的单选框元素。
写法:$(':radio')或$('[type="radio"]')
案例(查找页面中单选框元素并设置它们的边框)
D:\项目\jQueryAPI\选择器\
8表单\radio.html
注意:
:radio是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:radio查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用[type=
"
radio
"] 代替。
8.12
:reset Selector
功能:选择所有类型为reset的元素,即选择所有的重置按钮。
写法:$(':reset')或$('[type="reset"]')
案例(查找页面中的重置按钮并设置它们的边框)
D:\项目\jQueryAPI\选择器\
8表单\reset.html
注意:
:reset是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:reset查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用[type=
"
reset
"] 代替。
8.13:selected Selector
功能:选择select元素中所有被选中的元素(它只适用于select中的option元素)。
写法:$(':selected')
案例(在 select 元素上添加 change 事件,将选中的 option 元素的文本写入一个 div 中
)
D:\项目\jQueryAPI\选择器\
8表单\select.html
注意:[selected]只能选择html中拥有selected属性的元素,对于动态点击选中的元素则不能被选中。:sel
ected是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:selected查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用.filter(':selected')
代替。
8.14
:submit Selector
功能:选择所有类型为submit的元素,即选择所有的提交按钮和button标签被指定或被渲染为
type="submit"
按钮。
写法:$(':submit')
案例(查找表格中的提交按钮
)
D:\项目\jQueryAPI\选择器\
8表单\submit.html
注意:为所有按钮明确标注其type属性!!!不写type属性
IE6-10将<button>元素作为type="button"默认处理,chrome\firefox\safari\opera将<button>作为type='submit'按钮处理。
:submit比[type='submit']选择范围大,[type='submit']只选择指定type属性值为submit的按钮,而:submit不仅选择指定的而且还会选择浏览器默认渲染为提交类型的按钮!!
:submit是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:submit查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。
为了在现代浏览器上获得更佳的性能,请使用input[type=
"
submit
"],button
[type=
"
submit
"]
代替。
8.15:text Selector
功能:选择所有类型为text的元素,即选择所有的文本框元素。
写法:$(':text')
案例(查找页面中的所有的文本框)
D:\项目\jQueryAPI\选择器\
8表单\text.html
注意:
$(":text")默认使用$('*:text')比较低效,建议使用:前面加上相应的标签,如$('input:text')
:text可以选择明确指定type="text"(<input type="text" />)和没有指定type属性的input元素(<input />)
[type="text"]在IE6-9能够选中没有指定type属性的input元素(<input />),IE10\chrome\firefox\safari\opera不选这种类型的Input
:text
是一个 jQuery 延伸出来的选择器 。并且不是的CSS规范的一部分, 使用:submit()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用[type="text"]
代替(不严谨)。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
二、属性/CSS
1.属性
1.1.attr()属性
功能:获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。
写法:获取值.attr(attributeName)
设置值.attr(attributeName, value)、.attr(attributes)、.attr(attributeName,function(key,value){})
参数:
attributeName要获取或设置的属性名称|string类型, value要设置的值|string或value类型,
attributes键值对类型,
function(index,attr){}返回值作为
attributeName的值,如果没有返回值则为undefined。
.attr(attributeName)
获取匹配的元素集合中的第一个元素的属性的值。
要获取每个单独的元素的属性值,需要jQuery的 .each()或者.map()方法循环。
没有的属性,则返回undefined
案例(设置页面中code内的文本内容)
D:\项目\jQueryAPI\
属性与CSS\1属性\attr1.html
.attr(attributeName, value)
设置每一个匹配元素的一个属性
.attr(attributes)
设置每一个匹配元素的一个或多个属性,这里attributes是一个{键:值,键:值}形式的类型
.attr(attributeName,function(key,value){})对每一个要设置的属性值进行处理,这里的key是索引,.attr前面选择器选择的元素的索引从0开始,value是前面选择器选择的元素属性
attributeName的值
注意:.attr()不应该用在普通的对象,数组,窗口(window)或文件(document)上。若要检索和更改DOM属性请使用.prop()方法。.attr()用在HTML中显示的属性上,单值属性和不在HTML上显示的属性要用.prop()
当设置样式名("class")属性时,必须使用引号,因为class是js的保留字!Internet Explorer不允许改变<input>或者<button>元素的type属性,若要修改type属性,ie6-9会抛出异常,button和input不修改其在页面中默认显示的模样;IE10\firefox\safari\chrome\opera中
button不能修改其显示的默认模样,input
变成其修改后的模样。因各浏览器形态各异,所以不要修改其type属性。
1.2.prop()特性
功能:获取匹配的元素集合中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。
写法:获取值.prop(propertyName)
设置值.prop(propertyName, value)、.prop(properties)、.prop(propertyName,function(index,oldPropertyValue))
参数:propertyName要得到的属性名称|string类型,value是要设置的属性的值,properties
是一个{键:值,键:值}形式的类型
.prop(propertyName,function(index,oldPropertyValue))
一个函数,返回将要被设置的值,
如果没有返回值则为undefined。index 参数表示集合中元素的索引位置。oldPropertyValue 参数表示原有的属性值。this 指向当前的元素
。
.prop( propertyName, value)为匹配的元素设置一个
.prop( properties)为匹配的元素设置多个属性(properties)
.prop( propertyName, function(index, oldPropertyValue)
)
对每一个要设置的属性值进行处理,这里的index是索引,.prop前面选择器的元素的索引从0开始,oldPropertyValue表示原有的属性值
那么,什么时候使用attr()【底层通过elem.getAttribute(attributeName)实现】,
什么时候使用prop()【底层通过elem.attributeName实现】?
1.添加属性名称该属性就会生效(如checked、readOnly、selected、disabled等)应该使用prop();
2.是有true,false两个属性使用prop();
3.在html(比如:window.location)中不存在的properties
4.所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作
5.prop设置的自定义属性attr取不到,在html中不显示; attr()设置的自定义属性prop()也获取不到但在html中显示。prop指一类元素的特性,attr是一类元素某个具体实例上属性。
![](http://dl.iteye.com/upload/attachment/482401/bf5b6182-ffc7-3e30-a159-75ac8980fd1f.jpg)
案例1(查看单值属性的property的值是true和flase)
D:\项目\jQueryAPI\
属性与CSS\1属性\prop1.html
案例2(查看attr、prop和is三个方式为checked赋值的变化)
D:\项目\jQueryAPI\
属性与CSS\1属性\prop2.html
案例3(设置页面中的复选框和下拉框的选中状态)
D:\项目\jQueryAPI\
属性与CSS\1属性\prop3.html
注意:在IE9之前的版本,使用.prop()为DOM元素的属性赋值时,若所赋值的类型不是基本类型(number, string, 或 boolean),而且在DOM对象从文档中被移除之前也没有使用.removeProp() 方法,此时可能会产生内存泄漏。为了安全地在DOM对象上进行赋值而不用担心内存泄露问题,请使用.data() 方法。例如:<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>。Properties 属性一般影响 DOM 元素的动态状态并不会改变序列化的 HTML attribute属性。
1.3.removeAttr(attributeName)
功能:为匹配的元素集合中的每个元素中移除一个或多个属性(attribute)。
写法:.removeAttr(attributeName)
参数:
attributeName是一个属性的名称或多个用空格分隔的属性名称
案例(移除页面中div的行内样式)
D:\项目\jQueryAPI\
属性与CSS\1属性\removeAttr.html
D:\项目\jQueryAPI\
属性与CSS\1属性\removeAttr1.html
注意: 按钮的事件绑定不要使用.removeAttr(),要用卸载事件的方法。对于行内事件处理可以使用removeAttr()方法,官方说法IE6、7、8不能起效或有潜在问题推荐使用.prop()代替(经实验并非如此),
IE6,7或8使用.prop()后在html中渲染时会把属性移除,而其他浏览器依然会渲染上只是不起作用
。
1.4.removeProp(propertyName)
功能:为集合中匹配的元素删除一个属性(property)。
写法:.removeProp(propertyName)
参数:
propertyName要删除的一个属性名称,不能一次删除多个
案例(给页面中的p增加属性并删除属性)
D:\项目\jQueryAPI\
属性与CSS\1属性\removeProp.html
注意:一般来说,只需要移除自定义的属性(property),而不是移除原生属性。如果checked,disabled或者selected这些原生的属性一旦移除,不能再次被添加到元素上。一般通过.prop()来设置这些属性为false代替。
1.5.val()
功能:获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。
写法:.val()或.val(value)或.val(fn)
参数:.
val()
获取匹配的元素集合中第一个元素的当前值。input、select都有value的属性、texteare内部的文本即value的值。对于选择框select和复选框checkbox两种类型的元素也可以:selected和:checked来获取值。
.val(value)设置或选中匹配的元素集合中每个元素的值。value类型string或Array(字符串形式的数组)把这两种类型的值赋予每个匹配的元素,复选框checkbox、单选radio、选择框select的option符合的值会被选中,其它不符合的元素将取消选中
.val(function(index,value))一个用来返回设置值的函数,this指向当前元素。接收集合中的元素,旧的值作为参数的索引值
案例(设置页面中div的值)
D:\项目\jQueryAPI\
属性与CSS\1属性\val.html
D:\项目\jQueryAPI\
属性与CSS\1属性\val1.html
D:\项目\jQueryAPI\
属性与CSS\1属性\val2.html
注意:通过 .val() 方法从 textarea 元素中取得的值是不含有回车(\r)字符的。但是如果该值是通过 XHR 传递给服务器的,回车(\r)字符会被保留(或者是被浏览器添加的,但是在原始数据中并不包含回车(\r))。可以使用valHooks 方法解决这个问题:
$.valHooks.texteare = {
get: function (elem) {
return elem.value.replace(/\r?\n/g, '\r\n');
}
};
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
2.CSS
3.尺寸
4.位置
5.数据
三、操作
1.拷贝
2.DOM插入、包裹
3.DOM插入,内部插入
4.DOM插入,外部插入
5.DOM移除
6.DOM替换
四、遍历
1.筛选
2.各种遍历
3.树遍历
五、事件
1.浏览器事件
2.文档加载
3.事件绑定
4.表单事件
5.键盘事件
6.鼠标事件
7.事件对象
六、效果
1.基础
2.自定义
3.渐变
4.滑动
七、AJAX
1.全局AJAX事件处理程序
2.辅助函数
3.底层接口
4.快捷方法
八、核心
1.jQuery对象
2.实用工具
3.DOM元素方法
4.内部构件
5.延迟对象
6.回调对象
.prop( propertyName, value)为匹配的元素设置一个
.prop( properties)为匹配的元素设置多个属性(properties)
.prop( propertyName, function(index, oldPropertyValue) )对每一个要设置的属性值进行处理,这里的index是索引,.prop前面选择器的元素的索引从0开始,oldPropertyValue是前面选择器选择的元素属性propertyName的值true或false