简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Introduction to commonly used selectors in jQuery_jquery

WBOY
Release： 2016-05-16 17:36:54
Original
1080 people have browsed it

层次选择器：

$('div p');//选取div下的所有的p元素

$('div>p').css('border','1px solid red');//只选取div下的直接子元素

//相邻的元素

$('div ~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的

所有p兄弟元素

$('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素

$('div +p').css('border','1px solid red');与$('div').next('p')等价//这种写法表示div后

只找紧挨着的第一个兄弟元素，并且该元素是p。 

获得兄弟元素的方法：

    next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）

nextAll();//当前元素之后的所有兄弟元素

prev();//当前元素之前的紧邻着的兄弟元素（上一个）

prevAll();//当前元素之前的所有兄弟元素

siblings();//当前元素的所有兄弟元素
 

基本过滤选择器：

 $('p:first')与$('p').first()是等价的。获取所有p元素中的第一个P元素

 $('p:last')与$('p').last()

 $('p:eq(2)')在所有的p元素中找到索引为2的元素

 $('p:even')选取所有奇数的p标签

 $('p:odd')选取所有偶数的p标签

 $('p:not(.tst)').css();选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称

 $('p:gt(1)')选取所有索引值大于1的p元素

 $('p:lt(3)')选取所有索引值小于3的p元素。

 $(':header')选取页面上所有的h1-h6的元素。（如果这样写的话，中间绝对不能有空格。）


属性过滤选择器：

    $("div[id]")选取有id属性的

$("div[title=test]")选取title属性为“test”的

，jQuery中没有对getElementsByName       

    进行封装，用$("input[name=abc]")

    $("div[title!=test]")选取title属性不为“test”的

      还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等，条件还 

      可以复合。【[属性1=a][属性2=b]…】（*）

      表单对象属性选择器（过滤器）：

    $("#form1 :enabled")选取id为form1的表单内所有启用的元素

    $("#form1 :disabled")选取id为form1的表单内所有禁用的元素

    $(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.

    $("select :selected")选取所有选中的选项元素（下拉列表）


表单滤选择器：

    $('#form1:enabled');//这个表示能够启用的且id为form1的标签

    $('#form1  :enabled')；//这个表示能够启用的且id为form1下的所有启用的元素。

    $('input:checked')

    $('input:disabled')

    $ ('select:selected')

$(“:input")选取所有、