在jQuery中 常用的选择器介绍

2020-05-24 21:22:36易采站长站整理

层次选择器:


$(‘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>


$(“div[title=test]”)选取title属性为“test”的<div>,jQuery中没有对getElementsByName       


    进行封装,用$(“input[name=abc]”)


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


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


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


      表单对象属性选择器(过滤器):