回味jQuery系列(1)-选择器

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,运用起来也不轻易,代码芜杂。综合组合许多挑选器运用,选到特定的元素,也是异常轻易的。

    原文作者:xzavier
    原文地址: https://segmentfault.com/a/1190000006667079
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞