JQ 5 高级选择器

代码 2016-09-30 小酱沫手机阅读

层次选择器

选择器	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] { //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>

<ul>

</ul>

<ul>

</ul>

$('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: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>

<ul>

</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');

JQ 5 高级选择器

Onex ecstore商品相册图拖动效果

基础9 流程控制语句

Onex ecstore无法生成certi.php

Linux下搭建ntp时间同步服务器

Amazon AWS —— 免费的午餐不好吃