Jquery选择器
Posted hhl6
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery选择器相关的知识,希望对你有一定的参考价值。
下面介绍几种Jquery选择器的用法:
先在html写入如下代码:
<div class="parent"> <div class="contain"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> </div>
.eq
$(‘.child‘).eq(2) //选择的是第3个div
.next
/ .prev
$(‘.child‘).eq(1).next() //获取class为child且下标为1的元素紧跟着的同辈元素,也就是获取第三个div $(‘.child‘).eq(1).prev() //获取class为child且下标为1的元素之前的同辈元素,也就是获取第一个div
.nextAll
/ .prevAll
$(‘.child‘).eq(2).nextAll() //获取class为child且下标为1的元素后面的所有同辈元素,也就是获取第4个div $(‘.child‘).eq(2).prevAll() //获取class为child且下标为1的元素前面的所有同辈元素,也就是获取第1、2个div
.siblings
$(‘.child‘).eq(1).sibings() //获取class为child且下标为1的元素的所有邻居,也就是获取第1、3、4个div
.parent
/ .parents
$(‘.child‘).parent() //获取class为child的父元素,也就是获取contain元素
$(‘.child‘).parents() //获取class为child的所有父元素,包括contain,parent,body,html元素
.children
/ .find
$(‘.contain‘).children() //获取class为contain的所有子元素
$(‘.contain‘).children(‘child‘) //获取class为contain的所有子元素中class为child的元素
区别:
.children(selector)
方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。.find(selector)
方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。.filter
.filter(selector), .filter(function(index))
筛选当前结果集中符合条件的对象,参数可以是一个选择器或者一个函数
$(‘div‘).filter(‘child‘); //筛选当前结果集中符合条件的对象,参数可以是一个选择器或者一个函数 $(‘div‘).filter(function(index) { return index % 3 == 2; })
.has
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
$(‘div‘).has(‘child‘)
.is
.is(selector), is(function(index)), is(dom/jqObj)
判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true
$(‘child‘).is("div") //true
以上是关于Jquery选择器的主要内容,如果未能解决你的问题,请参考以下文章