jQuery-挑选器浅析
jQuery 最中心的组成部分就是:挑选器引擎,挑选器引擎Sizzle占了jQuery很大一部分。它继续了CSS 的语法,能够对DOM 元素的标署名、属性名、状况等举行疾速正确的挑选,而且没必要忧郁浏览器的兼容性。jQuery挑选器完成了CSS1~CSS3 的大部分划定规矩以外,还完成了一些自定义的挑选器,用于种种特别状况的挑选。
基础挑选器
挑选范例 挑选器 返回
元素名 $('div') 猎取一切div元素的DOM对象
ID $('#xzavier') 猎取一个ID为box元素的DOM对象
类(class) $('.xzavier') 猎取一切class为box的一切DOM对象
群组挑选 $('span,.xzavier') 猎取多个挑选器的DOM对象
子女挑选 $('ul li a') 猎取追溯到的多个DOM对象
通配挑选 $('*') 猎取一切元素标签的DOM对象
子女挑选 $('ul li a') 猎取追溯到的多个DOM对象
子挑选 $('div p') 只猎取子类节点的多个DOM对象
next挑选 $('div + p') 只猎取某节点后一个同级DOM对象
nextAll挑选 $('div ~ p') 猎取某节点背面一切同级DOM对象
$('#xzavier').find('button') //等价子女挑选器
$('#xzavier').children('button') //等价子挑选器
$('#xzavier').next('button') //等价next挑选器
$('#xzavier').nextAll('button') //等价nextAll挑选器
$('#xzavier').prev('button') //挑选同级上一个元素
$('#xzavier').prevAll('button') //挑选同级一切上面的元素
$('#xzavier').prevUntil('button') //挑选同级上非指定元素,碰到则住手
$('#xzavier').nextUntil('button') //挑选同级下非指定元素,碰到则住手
$('#xzavier').siblings('button') //挑选同级高低一切元素
更多:
1.ID返回的是单个元素,而元素标署名和类(class)返回的是多个,我们能够采纳jQuery 中心自带的一个属性length 或size()要领来检察返回的元素个数。
2.ID在页面中是唯一的,平常请求开发者要恪守范例。假如你在页面中涌现三次,在CSS运用款式是会胜利显现款式的,但在jQuery,就婚配不到背面的ID。
3.在运用上,通配挑选器平常用的并不多,尤其是,比方:$(‘‘),这类运用要领效力很低,影响机能。
4.在组织挑选器时,只管简朴,只保证必要确实定性。当挑选器挑选越庞杂,jQuery 内部的选器引擎处置惩罚字符串的时刻就越长。
5.注重,find()、next()、nextAll()和children()这四个要领中,假如不通报参数,就相当于通报了“*”,即任何节点。
属性挑选器
对应CSS形式 挑选器 返回
a $('a') 猎取title属性的DOM对象
a $('a') 猎取title属性且=num的DOM对象
a $('a') 猎取title且开首属性值婚配的DOM对象
a $('a') 猎取title且=num或开首属性值婚配背面跟一个“-”号的DOM对象
a $('a') 猎取title属性且末端属性值婚配的DOM对象
a $('a') 猎取title属性且!=num的DOM对象
a $('a') 猎取title且属性值是以一个空格支解的列表,个中包含属性值的DOM对象
a $('a') 猎取title且属性值含有一个指定字串的DOM对象
a[xz] $('a[xz]') 猎取具有bbb属性且title属性=num的DOM对象
过滤挑选器
基础过滤挑选器
过滤器名 jQuery 返回
:first $('li:first') 拔取第一个元素
:last $('li:last') 拔取末了一个元素
:not(selector) $('li:not(.xzavier)') 拔取class不是xzavier的li元素
:even $('li.even') 挑选索引(0 最先)是偶数的一切元素
:odd $('li:odd') 挑选索引(0 最先)是奇数的一切元素
:eq(index) $('li:eq(2)') 挑选索引(0 最先)即是index的元素
:gt(index) $('li:gt(2)') 挑选索引(0 最先)大于index的元素
:lt(index) $('li.lt(2)') 挑选索引(0 最先)小于index的元素
:header $(':header') 挑选题目元素,h1 ~ h6
:animated $(':animated') 挑选正在实行动画的元素
:focus $(':focus') 挑选当前被核心的元素
更多:
1.:focus 过滤器,必需是网页初始状况的已被激活核心的元素才完成元素猎取。而不是鼠标点击或许Tab键盘敲击激活的。
2.:first、:last 和first()、last()这两组过滤器和要领在涌现雷同元素的时刻,first 会完成第一个父元素的第一个子元素,last 会完成末了一个父元素的末了一个子元素。所以,假如须要明确是哪一个父元素。
内容过滤器
过滤器名 jQuery 返回
:contains(text) $(':contains("xzavier")') 拔取含有"xzavier"文本的元素
:empty $(':empty') 拔取不包含子元素或空文本的元素
:has(selector) $(':has(.xzavier)') 拔取含有class是xzavier的元素
:parent $(':parent') 拔取含有子元素或文本的元素
更多:
1.jQuery 供应了一个has()要领来进步:has 过滤器的机能:$(‘ul’).has(‘.xzavier’)
2.jQuery 供应了一个称号和:parent 类似的要领,但这个要领并非拔取含有子元素或文本的元素,而是猎取当前元素的父元素,返回的是元素鸠合
可见性过滤器
过滤器名 jQuery 返回
:hidden $(':hidden') 拔取一切不可见元素鸠合元素
:visible $(':visible') 拔取一切可见元素鸠合元素
更多:
1.:hidden 过滤器平常是包含的内容为:CSS 款式为display:none、input 表单范例为type=”hidden”和visibility:hidden 的元素
子元素过滤器
过滤器名 jQuery 返回
:first-child $('li:first-child') 猎取每一个父元素的第一个子元素
:last-child $('li:last-child') 猎取每一个父元素的末了一个子元素
:only-child $('li:only-child') 猎取只要一个子元素的元素
:nth-child(odd/even/eq(index)) $('li:nth-child(even)') 猎取每一个自定义子元素的元素(索引值从1最先盘算)
过滤要领
要领名 jQuery 备注
is(s/o/q/f) $('li').is('.red') 参数可通报挑选器、DOM、jquery对象或是函数来婚配
hasClass(class) $('li').hasClass('xzavier') 同is("." + class)
slice(start, end) $('li').slice(0,2) 挑选从start到end位置的元素,假如是负数,则从背面最先
filter(s/o/q/f) $('li').filter('.xzavier') 参数可通报挑选器、DOM、jquery对象或是函数来婚配
end() $('div').find('p').end() 猎取当前元素前一次状况鸠合元素
contents() $('div').contents() 猎取某元素下面一切元素节点,包含文本节点
表单元素挑选器
挑选器名 jQuery 返回
:input $(":input") 一切 <input> 元素
:text $(":text") 一切 type="text" 的 <input> 元素
:password $(":password") 一切 type="password" 的 <input> 元素
:radio $(":radio") 一切 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 一切 type="checkbox" 的 <input> 元素
:submit $(":submit") 一切 type="submit" 的 <input> 元素
:reset $(":reset") 一切 type="reset" 的 <input> 元素
:button $(":button") 一切 type="button" 的 <input> 元素
:image $(":image") 一切 type="image" 的 <input> 元素
:file $(":file") 一切 type="file" 的 <input> 元素
:enabled $(":enabled") 一切激活的 input 元素
:disabled $(":disabled") 一切禁用的 input 元素
:selected $(":selected") 一切被拔取的 input 元素
:checked $(":checked") 一切被选中的 input 元素
更多:
1.这些挑选器都是返回元素鸠合,假如想猎取某一个指定的元素,最好连系一下属性挑选器。
$(':text[name=xzavier]); //猎取单行文本框name=xzavier 的元素
我们在运用中,不会一切标签都有id,运用起来也不轻易,代码芜杂。综合组合许多挑选器运用,选到特定的元素,也是异常轻易的。