Basic selector usage learning tutorial in jQuery

1. Simple selector
When using jQuery selectors, you must use the "$()" function to wrap CSS rules. After the CSS rules are passed into the jQuery object as parameters, the jQuery object containing the corresponding elements in the page is returned. Subsequently, you can perform behavioral operations on the obtained DOM node.

#box {//使用ID 选择器的CSS 规则 
 
 color:red;//将ID 为box 的元素字体颜色变红 
 
}

Copy after login

In the jQuery selector, we use the following method to obtain the same result:

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

Copy after login

In addition to the ID selector, there are two basic selectors, namely: element tag name and class:

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

$('#box').css('color', 'red');//获取DOM 节点对象，并添加行为 
 
$('div').css('color', 'red');//元素选择器，返回多个元素 
 
$('#box').css('color', 'red'); //ID 选择器，返回单个元素 
 
$('.box').css('color', 'red'); //类(class)选择器，返回多个元素

Copy after login

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

alert($('div').size());//3 个 
 
alert($('#box').size()); //1 个，后面两个失明了 
 
alert($('.box').size());//3 个

Copy after login

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

alert($('#box').length);//1 个，后面失明了

Copy after login

警告：有个问题特别要注意，ID 在页面只允许出现一次，一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次，并且在CSS 使用样式，那么这三个元素还会执行效果。但如果，你想在jQuery 这么去做，那么就会遇到失明的问题。所以，开发者必须养成良好的遵守习惯，在一个页面仅使用一个ID。

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

Copy after login

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

#box > p { //CSS 子选择器，IE6 不支持 
 
 color:red; 
 
} 
 
$('#box > p').css('color','red'); //jQuery 子选择器，兼容了IE6

Copy after login

jQuery 选择器支持CSS1、CSS2 的全部规则，支持CSS3 部分实用的规则，同时它还有少量独有的规则。所以，对于已经掌握CSS 的开发人员，学习jQuery 选择器几乎是零成本。而jQuery 选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像JavaScript那样每次对节点的获取需要进行有效判断。

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

Copy after login

因为jQuery 内部进行了判断，而原生的DOM 节点获取方法并没有进行判断，所以导致了一个错误，原生方法可以这么判断解决这个问题：

if (document.getElementById('pox')) {//先判断是否存在这个对象 
 
 document.getElementById('pox').style.color = 'red'; 
 
}

Copy after login

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

if ($('#pox').length > 0) {//判断元素包含数量即可 
 
 $('#pox').css('color', 'red'); 
 
}

Copy after login

除了这种方式之外，还可以用转换为DOM 对象的方式来判断，例如：

if ($('#pox').get(0)) {} 或if ($('#pox')[0]) {} //通过数组下标也可以获取DOM 对象

Copy after login

二．进阶选择器
在简单选择器中，了解了最基本的三种选择器：元素标签名、ID 和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。

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

Copy after login

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

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

Copy after login

警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。还有一种选择器，可以在ID 和类(class)中指明元素前缀，比如：

$('div.box');//限定必须是.box 元素获取必须是div 
 
$('p#box div.side');//同上

Copy after login

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

.box.pox {//双class 选择器，IE6 出现异常 
 
 color:red; 
 
} 
 
$('.box.pox').css('color', 'red');//兼容IE6，解决了异常

Copy after login

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

$('.box, .pox').css('color', 'red');//加了逗号，体会区别

Copy after login

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

$('div#box ul li a#link');//让jQuery 内部处理了不必要的字符串 
 
$('#link'); //ID 是唯一性的，准确度不变，性能提升

Copy after login

三．高级选择器
在前面六种最常规的选择器，一般来说通过这六种选择器基本上可以解决所有DOM 节点对象选择的问题。但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等。在早期CSS 的使用上，由于IE6 等低版本浏览器不支持，所以这些高级选择器的使用也不具备普遍性，但随着jQuery 兼容，这些选择器的使用频率也越
来越高。

层次选择器
选择器	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');//全兼容

Copy after login

jQuery 为后代选择器提供了一个等价find()方法

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

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

#box > p { //IE6 不支持 
 
 color:red; 
 
} 
 
$('#box > p').css('color', 'red'); //兼容IE6

Copy after login

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

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

//next 选择器(下一个同级节点) 
#box + p {//IE6 不支持 
 
 color:red; 
 
} 
 
$('#box+p').css('color', 'red');//兼容IE6

Copy after login

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

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

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

#box ~ p { //IE6 不支持 
 
color:red; 
 
} 
 
$('#box ~ p').css('color', 'red');//兼容IE6

Copy after login

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

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

Copy after login

层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next 和nextAll 选择器，必须是同一个层次的后一个和后N 个，不在同一个层次就无法选取到了。在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递了“*”，即任何节点，不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。

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

Copy after login

为了补充高级选择器的这三种模式，jQuery 还提供了更加丰富的方法来选择元素：

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

Copy after login

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

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

Copy after login

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

$('#box').siblings('p').css('color', 'red');//同级上下所有元素选定 
 
//等价于下面： 
 
$('#box').prevAll('p').css('color', 'red');//同级上所有元素选定 
 
$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定

Copy after login

警告：切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式，因为prevAll('p')返回的是已经上方所有指定元素，然后再nextAll('p')选定下方所有指定元素，这样必然出现错误。理论上来讲，jQuery 提供的方法find()、next()、nextAll()和children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同，高级选择器是通过解析字符串来获取节点对象，而jQuery 提供的方法一般都是单个选择器，是可以直接获取的。但这种快慢的差异，对于客户端脚本来说没有太大的实用性，并且速度的差异还要取决了浏览器和选择的元素内容。比如，在IE6/7 不支持querySelectorAll()方法，则会使用“Sizzle”引擎，速度就会慢，而其他浏览器则会很快。有兴趣的可以了解这个方法和这个引擎。选择器快慢分析：

//这条最快，会使用原生的getElementById、ByName、ByTagName 和querySelectorAll()

$('#box').find('p'); 

//jQuery 会自动把这条语句转成$('#box').find('p')，这会导致一定的性能损失。它比最快的形式慢了5%-10%

$('p', '#box'); 

//这条语句在jQuery 内部，会使用$.sibling()和javascript 的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%

$('#box').children('p'); 

//jQuery 内部使用Sizzle 引擎，处理各种选择器。Sizzle 引擎的选择顺序是从右到左，所以这条语句是先选p，然后再一个个过滤出父元素#box，这导致它比最快的形式大约慢70%

$('#box > p'); 

//这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。

$('#box p'); 

//jQuery 内部会将这条语句转成$('#box').find('p')，比最快的形式慢了23%。

$('p', $('#parent'));

Copy after login

综上所属，最快的是find()方法，最慢的是$('#box p')这种高级选择器。如果一开始将$('#box')进行赋值，那么jQuery 就对其变量进行缓存，那么速度会进一步提高。

var box = $('#box'); 
 
var p = box.find('p');

Copy after login

注意：使用哪种方案呢？其实，使用哪种都差不多。这里，推荐使用jQuery 提供的方法。因为不但方法的速度比高级选择器运行的更快，并且它的灵活性和扩展性要高于高级选择器。使用“+”或“~”从字面上没有next 和nextAll 更加语义化，更加清晰，jQuery 的方法更加丰富，提供了相对的prev 和prevAll。毕竟jQuery 是编程语言，需要
能够灵活的拆分和组合选择器，而使用CSS 模式过于死板。所以，如果jQuery 提供了独立的方法来代替某些选择器的功能，推荐优先使用独立的方法。

属性选择器
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 对象

属性选择器也不支持IE6，所以在CSS 界如果要兼容低版本，那么也是非主流。但jQuery却不必考虑这个问题。

//选定这个属性的 
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

Copy after login

Basic selector usage learning tutorial in jQuery_jquery