当前位置：Gxlcms > JavaScript > 在jQuery中常用的选择器介绍_jquery

在jQuery中常用的选择器介绍_jquery

时间：2021-07-01 10:21:17 帮助过：20人阅读

层次选择器：

$('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")选取所有、