JQ 5 高级选择器

/ 0评 / 0

层次选择器

  选择器 CSS 模式 jQuery 模式 描述
后代选择器 ul li a {} $('ul li a') 获取追溯到的多个DOM 对象
子选择器 div > p {} $('div p') 只获取子类节点的多个DOM 对象
next 选择器 div + p {} $('div + p') 只获取某节点后一个同级DOM 对象
nextAll 选择器 div ~ p{} $('div ~ p') 获取某节点后面所有同级DOM 对象

在层次选择器中,除了后代选择器之外,其他三种高级选择器是不支持IE6 的,而jQuery却是兼容IE6 的。

//后代选择器

$('#box p').css('color', 'red'); //全兼容

jQuery 为后代选择器提供了一个等价find()方法找出正在处理的元素的后代元素

$('#box').find('p').css('color', 'red'); //和后代选择器等价

//子选择器,孙子后失明

#box > p { //IE6 不支持

    color:red;

}

$('#box > p').css('color', 'red'); //兼容IE6

jQuery 为子选择器提供了一个等价children()方法:

$('#box').children('p').css('color', 'red'); //和子选择器等价

next 选择器(下一个同级节点)

#box + p { //IE6 不支持

      color:red;

}

$('#box+p').css('color', 'red'); //兼容IE6

jQuery 为next 选择器提供了一个等价的方法next():

$('#box').next('p').css('color', 'red'); //和next 选择器等价

nextAll 选择器(后面所有同级节点)

#box ~ p { //IE6 不支持

   color:red;

}

$('#box ~ p').css('color', 'red'); //兼容IE6

jQuery 为nextAll 选择器提供了一个等价的方法nextAll():

$('#box').nextAll('p').css('color', 'red'); //和nextAll 选择器等价

层次选择器对节点的层次都是有要求的,比如子选择器,只有子节点才可以被选择到,孙子节点和重孙子节点都无法选择到。next 和nextAll 选择器,必须是同一个层次的后一个和后N 个,不在同一个层次就无法选取到了。

在find()、next()、nextAll()和children()这四个方法中,如果不传递参数,就相当于传递了“*”,即任何节点,我们不建议这么做,不但影响性能,而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。

$('#box').next(); //相当于$('#box').next('*');

补充高级选择器的这三种模式

$('#box').prev('p').css('color', 'red'); //同级上一个元素

$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素

nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点,选定非指定的所有元素,一旦遇到指定的元素就停止选定。

$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定,遇到则停止

$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定,遇到则停止

siblings()方法正好集成了prevAll()和nextAll()两个功能的效果,及上下相邻的所有元素进行选定:

$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定

等价于下面:

$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定

$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定

警告:切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式,因为prevAll('p')返回的是已经上方所有指定元素,然后再nextAll('p')选定下方所有指定元素,这样必然出现错误。

                                    属性选择器

CSS 模式 jQuery 模式 描述
a[title]   $('a[title]') 获取具有这个属性的DOM 对象
a[title=num1] $('a[title=num1]') 获取具有这个属性=这个属性值的DOM 对象
a[title^=num] $('a[title^=num]') 获取具有这个属性且开头属性值匹配的DOM 对象
a[title|=num] $('a[title|=num]') 获取具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号的DOM 对象
a[title$=num] $('a[title$=num]') 获取具有这个属性且结尾属性值匹配的DOM 对象
a[title!=num] $('a[title!=num]') 获取具有这个属性且不等于属性值的DOM 对象
a[title~=num] $('a[title~=num]') 获取具有这个属性且属性值是以一个空格分割的列表,其中包含属性值的DOM 对象
a[title*=num] $('a[title*=num]') 获取具有这个属性且属性值含有一个指定字串的DOM 对象
a[bbb][title=num1] $('a[bbb][title=num1]') 获取具有这个属性且属性值匹配的DOM对象

<a title="num">num1</a>

<a>num2</a>

<a>num3</a>

<a title="no4">num4</a>

<a bbb="aaa" title="num">num5</a>

//选定这个属性的

a[title] { //IE6 不支持

color:red;

}

$('a[title]').css('color', 'red'); //兼容IE6 了

//选定具有这个属性=这个属性值的

a[title=num1] { //IE6 不支持

color:red;

}

$('a[title=num1]').css('color', 'red'); //兼容IE6 了

//选定具有这个属性且开头属性值匹配的

a[title^=num] { //IE6 不支持

color:red;

}

$('a[title=^num]').css('color', 'red'); //兼容IE6 了

//选定具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号

a[title|=num] { //IE6 不支持

color:red;

}

$('a[title|="num"]').css('color', 'red'); //兼容IE6 了

//选定具有这个属性且结尾属性值匹配的

a[title$=num] { //IE6 不支持

color:red;

}

$('a[title$=num]').css('color','red'); //兼容IE6 了

//选定具有这个属性且属性值不想等的

a[title!=num1] { //不支持此CSS 选择器

color:red;

}

$('a[title!=num1]').css('color','red'); //jQuery 支持这种写法

//选定具有这个属性且属性值是以一个空格分割的列表,其中包含属性值的

a[title~=num] { //IE6 不支持

color:red;

}

$('a[title~=num1]').css('color','red'); //兼容IE6

//选定具有这个属性且属性值含有一个指定字串的

a[title*=num] { //IE6 不支持

color:red;

}

$('a[title*=num]').css('color','red'); //兼容IE6

//选定具有多个属性且属性值匹配成功的

a[bbb][title=num1] { //IE6 不支持

color:red;

}

$('a[bbb][title=num1]').css('color','red'); //兼容IE6

过滤选择器

过滤选择器简称:过滤器。也是一种选择器

基本过滤器

过滤器主要通过特定的过滤规则来筛选所需的DOM 元素,和CSS 中的伪类的语法类似:使用冒号(:)开头。

 

 

过滤器名 jQuery 语法 说明 返回
:first $('li:first') 选取第一个元素 单个元素
:last $('li:last') 选取最后一个元素 单个元素
:not(selector) $('li:not(.red)') 选取class 不是red 的li 元素 集合元素
:even $('li.even') 选择索引(0 开始)是偶数的所有元素 集合元素
:odd  $('li:odd')  选择索引(0 开始)是奇数的所有元素 集合元素
:eq(index)  $('li:eq(2)')  选择索引(0 开始)等于index 的元素 单个元素
:gt(index)  $('li:gt(2)')  选择索引(0 开始)大于index 的元素 集合元素
:lt(index)  $('li.lt(2)')  选择索引(0 开始)小于index 的元 集合元素
:header  $(':header')  选择标题元素,h1 ~ h6 集合元素
:animated  $(':animated')  选择正在执行动画的元素 集合元素
:focus $(':focus')  选择当前被焦点的元素 集合元素

 

<div style="display:none;">我们的新域名为:ycku.com</div>

<div>我们的旧域名为:yc60.com</div>

<div></div>

<div></div>

<ul>

<li>列表1</li>

<li>列表2</li>

<li class="red">列表3</li>

<li>列表4</li>

<li>列表5</li>

<li>列表6</li>

</ul>

<ul>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

<li>列表4</li>

<li>列表5</li>

<li>列表6</li>

</ul>

 

<input type="text" />

<h3>我是标题</h3>

$('li:first').css('background', '#ccc'); //第一个元素

$('li:last).css('background', '#ccc'); //最后一个元素

$('li:not(.red)).css('background', '#ccc'); //非class 为red 的元素

$('li:even').css('background', '#ccc'); //索引为偶数的元素

$('li:odd).css('background', '#ccc'); //索引为奇数的元素

$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素

$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素

$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素

$(':header').css('background', '#ccc'); //页面所有h1 ~ h6 元素

注意::focus 过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab 键盘敲击激活的。

$('input').get(0).focus(); //先初始化激活一个元素焦点

$(':focus').css('background', 'red'); //被焦点的元素

jQuery 为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:

//eq(num)将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0,而集合长度变成1。

$('li').eq(2).css('background', '#ccc'); //元素li 的第三个元素,负数从后开始

$('li').first().css('background', '#ccc'); //元素li 的第一个元素

$('li').last().css('background', '#ccc'); //元素li 的最后一个元素

$('li').not('.red').css('background', '#ccc'); //元素li 不含class 为red 的元素

注意::first、:last 和first()、last()这两组过滤器和方法在出现相同元素的时候,first 会实现第一个父元素的第一个子元素,last 会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素,需要指明:

$('#box li:last').css('background', '#ccc'); //#box 元素的最后一个li

//或

$('#box li).last().css('background', '#ccc') ; //同上

内容过滤器   过滤规则主要是包含的子元素或文本内容上

过滤器名 jQuery 语法 说明 返回
:contains(text) $(':contains("ycku.com")') 选取含有"ycku.com"文本的元素 元素集合
:empty  $(':empty') 选取不包含子元素或空文本的元素 元素集合
:has(selector)  $(':has(.red)') 选取含有class 是red 的元素 元素集合
:parent  $(':parent') 选取含有子元素或文本的元素 元素集合

<div style="display:none;">我们的新域名为:ycku.com</div>

<div>我们的旧域名为:yc60.com</div>

<div></div>

<div></div>

$('div:contains("ycku.com")').css('background', '#ccc');//选择元素文本节点含有ycku.com 文本的元素

$('div:empty').css('background', '#ccc'); //选择空元素

$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素

$(':parent').css('background', '#ccc'); //选择非空元素

jQuery 提供了一个has()方法来提高:has 过滤器的性能:

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素

jQuery 提供了一个名称和:parent 相似的方法,但这个方法并不是选取含有子元素或文本的元素,而是获取当前元素的父元素,返回的是元素集合。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素

$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素

$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止

可见性过滤器  根据元素的可见性和不可见性来选择相应的元素。

过滤器名 jQuery 语法 说明 返回
:hidden  $(':hidden') 选取所有不可见元 集合元素
:visible  $(':visible') 选取所有可见元 集合元素

$('p:hidden).size(); //元素p 隐藏的元素

$('p:visible').size(); //元素p 显示的元素

注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none、input 表单类型为type="hidden"和visibility:hidden 的元素。

 

子元素过滤器   过滤规则是通过父元素和子元素的关系来获取相应的元素

过滤器名 jQuery 语法 说明 返回
:first-child  $('li:first-child')  获取每个父元素的第一个子元素 集合元素
:last-child  $('li:last-child')  获取每个父元素的最后一个子元素 集合元素
:only-child  $('li:only-child') 获取只有一个子元素的元素 集合元素
:nth-child(odd/even/eq(index)) $('li:nth-child(even)') 获取每个自定义子元素的元素(索引值从1 开始计算) 集合元素

$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素

$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素

$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素

$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素

$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素

$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第二个li 元素

$('li:nth-child(2n)').css('background', '#ccc'); //每个父元素第二个的2倍 li 元素

//每个父元素第3个的下一个(第4个)的加3(1,4,7,10,……) li元素,从第1个开始

$('li:nth-child(3n+1)').css('background', '#ccc'); 

//每个父元素第4个的上一个(第3个)的加3(3,7,11,15,……) li元素,从第4-1个开始

$('li:nth-child(4n-1)').css('background', '#ccc'); 

                              常用的方法

方法名 jQuery 语法 说明 返回
is(s/o/e/f)  $('li').is('.red') 传递选择器、DOM、jquery 对象集合元素或是函数来匹配元素结合 集合元素
hasClass(class) $('li').eq(2).hasClass('red') 其实就是is("." + class) 集合元素
slice(start, end) $('li').slice(0,2) 选择从start 到end 位置的元素,如果是负数,则从后开始 集合元素
filter(s/o/e/f)  $('li').filter('.red') 从匹配的元素集合中删除那些不符合指定的筛选条件的元素(即返回与指定表达式匹配的元素集合)。这个方法用于缩小搜索的范围。  
end() $('div').find('p').end() 获取当前元素前一次状态(父节点或相邻的节点) 集合元素
contents() $('div').contents() 获取某元素下面所有元素节点,包括文本节点,如果是iframe,则可以查找文本内容 集合元素

<ul id="box">

<li>列表1</li>

<li>列表2</li>

<li class="red" title="列表3">列表3</li>

<li class="red">列表4</li>

<li>列表5</li>

<li>列表6</li>

<li>列表7</li>

<li>列表8</li>

<li>列表9</li>

<li>列表10</li>

</ul>

<ul>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

<li class="red" title="列表3">列表4</li>

<li>列表5</li>

<li>列表6</li>

<li>列表7</li>

<li>列表8</li>

<li>列表9</li>

</ul>

$('.red').is('li'); //true,选择器,检测class 为是否为red

$('.red').is($('li')); //true,jQuery 对象集合,同上

$('.red').is($('li').eq(2)); //true,jQuery 对象单个,同上

$('.red').is($('li').get(2)); //true,DOM 对象,同上

$('.red').is(function () { //true,方法,同上

         return $(this).attr('title') == '列表3'; //可以自定义各种判断

注意:必须使用$(this)来表示要判断的元素,否则,不管function里面是否返回true或false都和调用的元素关了

}));

$('li').eq(2).hasClass('red'); //和is 一样,只不过只能传递class,class名不加”点”

$('li').slice(0,2).css('color', 'red'); //前三个变成红色

注意:这个参数有多种传法和JavaScript 的slice 方法是一样的比如:slice(2),从第三个开始到最后选定;slice(2,4),第三和第四被选定;slice(0,-2),从倒数第三个位置,向前选定所有;slice(2,-2),前两个和末尾两个未选定。

$("div").find("p").end().get(0); //返回div 的原生DOM

$('#box').next('ul').end().css('background', '#ccc'); //返回ul的上一个ul节点,不是ul的父节点 的原生DOM

$('div').contents().size(); //返回子节点(包括文本)数量

$('li').filter('.red').css('background','#ccc'); //选择li 的class 为red 的元素

$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾选择

//特殊要求函数返回

$('li').filter(function () {

        return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';

}).css('background', '#ccc');

发表评论

电子邮件地址不会被公开。 必填项已用*标注