jQuery学习笔记——jQuery常规选择器

一．简单选择器
在使用 jQuery 选择器时，咱们首先必须使用“$()”函数来包装咱们的 CSS 规则。而
CSS 规则做为参数传递到 jQuery 对象内部后，再返回包含页面中对应元素的 jQuery 对象。
随后，咱们就能够对这个获取到的 DOM 节点进行行为操做了。
#box {
//使用 ID 选择器的 CSS 规则
color:red;
//将 ID 为 box 的元素字体颜色变红
}
在 jQuery 选择器里，咱们使用以下的方式获取一样的结果：
$('#box').css('color', 'red');
//获取 DOM 节点对象，并添加行为
那么除了 ID 选择器以外，还有两种基本的选择器，分别为：元素标签名和类(class)：
选择器
CSS 模式
jQuery 模式
描述
元素名
div {}
$('div')
获取全部 div 元素的 DOM 对象
ID
#box {}
$('#box')
获取一个 ID 为 box 元素的 DOM 对象
类(class)
.box{}
$('.box')
获取全部class为box的全部DOM对象
$('div').css('color', 'red');
//元素选择器，返回多个元素
$('#box').css('color', 'red');
//ID 选择器，返回单个元素
$('.box').css('color', 'red');
//类(class)选择器，返回多个元素
为了证实 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，咱们能够采
用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。
alert($('div').size());
//3 个
alert($('#box').size());
//1 个，后面两个失明了
alert($('.box').size());
//3 个
同理，你也能够直接使用 jQuery 核心属性来操做：
alert($('#box').length);
//1 个，后面失明了
警告：有个问题特别要注意，ID 在页面只容许出现一次，咱们通常都是要求开发者要
遵照和保持这个规则。但若是你在页面中出现三次，而且在 CSS 使用样式，那么这三个元
素还会执行效果。但若是，你想在 jQuery 这么去作，那么就会遇到失明的问题。因此，开
发者必须养成良好的遵照习惯，在一个页面仅使用一个 ID。
$('#box').css('color', 'red');
//只有第一个 ID 变红，后面两个失明
jQuery 选择器的写法与 CSS 选择器十分相似，只不过他们的功能不一样。CSS 找到元素
后添加的是单一的样式，而 jQuery 则添加的是动做行为。最重要的一点是：CSS 在添加样
式的时候，高级选择器会对部分浏览器不兼容，而 jQuery 选择器在添加 CSS 样式的时候却
没必要为此烦恼。
#box > p {
//CSS 子选择器，IE6 不支持
color:red;
}
$('#box > p').css('color','red');
//jQuery 子选择器，兼容了 IE6
jQuery 选择器支持 CSS一、CSS2 的所有规则，支持 CSS3 部分实用的规则，同时它还有
少许独有的规则。因此，对于已经掌握 CSS 的开发人员，学习 jQuery 选择器几乎是零成本。
而jQuery 选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像 JavaScript
那样每次对节点的获取须要进行有效判断。
$('#pox').css('color', 'red');
//不存在 ID 为 pox 的元素，也不报错
document.getElementById('pox').style.color = 'red';
//报错了
由于 jQuery 内部进行了判断，而原生的 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)) {} 或 if ($('#pox')[0]) {}
//经过数组下标也能够获取 DOM 对象
二．进阶选择器
在简单选择器中，咱们了解了最基本的三种选择器：元素标签名、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');
//通配选择器
目前介绍的六种选择器，在实际应用中，咱们能够灵活的搭配，使得选择器更加的精准
和快速：
$('#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');
//加了逗号，体会区别
警告：在构造选择器时，有一个通用的优化原则：只追求必要的肯定性。当选择器筛选
越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。好比：
$('div#box ul li a#link');
//让 jQuery 内部处理了没必要要的字符串
$('#link');
//ID 是惟一性的，准确度不变，性能提高
三．高级选择器
在前面咱们学习六种最常规的选择器，通常来讲经过这六种选择器基本上能够解决全部
DOM 节点对象选择的问题。但在不少特殊的元素上，好比父子关系的元素，兄弟关系的元
素，特殊属性的元素等等。在早期 CSS 的使用上，因为 IE6 等低版本浏览器不支持，因此
这些高级选择器的使用也不具有广泛性，但随着 jQuery 兼容，这些选择器的使用频率也越
来越高。
层次选择器
在层次选择器中，除了后代选择器以外，其余三种高级选择器是不支持 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');
//和子选择器等价
选择器
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对象
//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('*');
为了补充高级选择器的这三种模式，jQuery 还提供了更加丰富的方法来选择元素：
$('#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')选定下方全部指定元素，这
样必然出现错误。
理论上来说，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'));
综上所属，最快的是 find()方法，最慢的是$('#box p')这种高级选择器。若是一开始将
$('#box')进行赋值，那么 jQuery 就对其变量进行缓存，那么速度会进一步提升。
var box = $('#box');
var p = box.find('p');
注意：咱们应该推荐使用哪一种方案呢？其实，使用哪一种都差很少。这里，咱们推荐使用
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