JQ2 常规选择器

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

一．简单选择器

在使用jQuery 选择器时，我们首先必须使用“$()”函数来包装我们的CSS 规则。而CSS 规则作为参数传递到jQuery 对象内部后，再返回包含页面中对应元素的jQuery 对象。随后，我们就可以对这个获取到的DOM 节点进行行为操作了。

#box { //使用ID 选择器的CSS 规则

color:red; //将ID 为box 的元素字体颜色变红

}

在jQuery 选择器里，使用如下的方式获取同样的结果：

$('#box').css('color', 'red'); //获取DOM 节点对象，并添加行为

简单选择器

选择器	CSS模式(样式)	jQuery 模式	描述
元素名	div {}	$('div')	获取所有div 元素的DOM 对象
ID	#box {}	$('#box')	获取一个ID 为box 元素的DOM 对象
类(class)	.box{}	$('.box')	获取所有class 为box 的所有DOM 对象

$(function () {

$('div').css('color', 'red'); //元素选择器，返回多个元素

$('#box').css('color', 'red'); //ID 选择器，返回单个元素

$('.box').css('color', 'red'); //类(class)选择器，返回多个元素

});

为了证明ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数。

$(function () {

alert($('div').size());

alert($('#box').size());

alert($('.box').size());

同理，你也可以直接使用jQuery 核心属性来操作：

alert($('#box').length);

});

警告：有个问题特别要注意，ID 在页面只允许出现一次，如果出现多个相同ID就会出现失明

$('#box').css('color', 'red'); //只有第一个ID 变红，后面两个失明(颜色未变)

jQuery 选择器的写法与CSS 选择器十分类似，只不过他们的功能不同。CSS 选择器找到元素后添加的是单一的样式，而jQuery 则添加的是动作行为。最重要的一点是：CSS 在添加样式的时候，高级选择器会对部分浏览器不兼容，而jQuery 选择器在添加CSS 样式的时候就兼容了。

#box > p { //选择所有作为box元素的子元素p，子选择器，IE6 不支持

color:red;

}

$('#box > p').css('color','red'); //jQuery 子选择器，兼容了IE6

jQuery 选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像JavaScript那样每次对节点的获取需要进行有效判断。

$('#pox').css('color', 'red'); //不存在ID 为pox 的元素，也不报错

document.getElementById('pox').style.color = 'red'; //不存在ID 为pox 的元素，报错了

JavaScript原生的DOM 节点,解决这个问题

if (document.getElementById('pox')) { //先判断是否存在这个对象

document.getElementById('pox').style.color = 'red';

}

使用jQuery 调用的话，怎么去判断是否存在呢？因为本身返回的是jQuery 对象，可能会导致不存在元素存在与否，都会返回true。

if ($('#pox').length > 0) { //判断元素包含数量即可

$('#pox').css('color', 'red');

}

通过数组下标也可以获取DOM 对象

if ($('#pox').get(0)) {

$('#pox').css('color', 'red');

}

或

if ($('#pox')[0]) {

$('#pox').css('color', 'red');

}

二．进阶选择器

选择器	CSS 模式(样式)	jQuery 模式	描述
群组选择器	span,em,.box {}	$('span,em,.box')	获取多个选择器的DOM 对象
后代选择器	ul li a {}	$('ul li a')	获取追溯到的多个DOM 对象
通配选择器	* {}	$('*')	获取所有元素标签的DOM 对象

//群组选择器

span, em, .box { //多种选择器添加红色字体

color:red;

}

$('span, em, .box').css('color', 'red'); //群组选择器jQuery 方式

//后代选择器

ul li a { //层层追溯到的元素添加红色字体

color:red;

}

$('ul li a').css('color', 'red'); //群组选择器jQuery 方式

//通配选择器

* { //页面所有元素都添加红色字体

color:red;

}

$('*').css('color', 'red'); //通配选择器jQuery 方式

目前介绍的六种选择器，在实际应用中，我们可以灵活的搭配，使得选择器更加的精准和快速：

$('#box p, ul li *').css('color', 'red'); //组合了多种选择器

警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用

还有一种选择器，可以在ID 和类(class)中指明元素前缀，比如：

$('div.box'); //限定必须是.box 元素获取必须是div

$('p#box div.side'); //同上

类(class)有一个特殊的模式，就是同一个DOM 节点可以声明多个类(class)。那么对于这种格式，我们有多class 选择器可以使用，注意和class 群组选择器的区别。

.box.pox { //双class 选择器，IE6 出现异常

color:red;

}

$('.box.pox').css('color', 'red'); //兼容IE6，解决了异常

多class 选择器是必须一个DOM 节点同时有多个class，用这多个class 进行精确限定。而群组class 选择器，只不过是多个class 进行选择而已。

$('.box, .pox').css('color', 'red'); //群组class 选择器加了逗号，注意区别

警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。比如：

$('div#box ul li a#link'); //让jQuery 内部处理了不必要的字符串

$('#link'); //ID 是唯一性的，准确度不变，性能提升

三．高级选择器

层次选择器

选择器	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');

JQ2 常规选择器

Onex ecstore mootools简单操作应用知识

JQ2 常规选择器

shopex产品登录后台授权激活码问题

WordPress代码实现回复可见

Javascript你可能不知道的小技巧