码迷,mamicode.com
首页 > Web开发 > 详细

Jquery选择器

时间:2019-01-16 19:25:21      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:就是   filter   UNC   第一个   strong   body   code   nbsp   ext   

下面介绍几种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选择器

标签:就是   filter   UNC   第一个   strong   body   code   nbsp   ext   

原文地址:https://www.cnblogs.com/hhl6/p/10278552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!