转自个人博客
本来是零丁整理了一个CSS挑选器的，然则在jQuery中基本都有对应的，所以就不发了。

jQuery挑选器，若未作迥殊申明，猎取的都是元素鸠合。

一. 通例挑选器

（一）简朴挑选器

模拟的是CSS挑选器，只不过在运用jQuery挑选器时，我们起首必需运用“$()”函数来包装我们的 CSS 划定规矩。
而CSS 划定规矩作为参数通报到jQuery对象内部后，再返回包含页面中对应元素的 jQuery 对象。随后可以举行节点操纵，比方：$('#box').css('color', 'red'); 。

那末除了 ID 挑选器以外，另有两种基本的挑选器，分别为：元素标署名和类(class)：

我们可以采纳jQuery中心自带的一个属性length来检察返回的元素个数。(size()要领已弃用)

在实践过程当中发明运用多个id时，css竟然都邑高亮，jQuery没有这个题目。（规范写明一个页面只能有一个id）

jQuery挑选器的写法与CSS挑选器非常类似，只不过他们的功用差别。CSS 找到元素后增加的是单一的款式，而jQuery则增加的是行动行动。主要的是jQuery兼容性更好，比方：

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

jQuery挑选器支撑CSS1、CSS2的悉数划定规矩，支撑CSS3部份有用的划定规矩，同时它另有少许独占的划定规矩而jQuery挑选器在猎取节点对象的时刻不只简朴，还内置了容错功用区分以下：

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

怎样推断jQuery是不是调取不存在的元素：

if ($('#pox').length > 0) { //jQuery对象，推断元素包含数目即可
    $('#pox').css('color', 'red');
}
//或许转化成DOM对象体式格局推断
if ($('#pox')[0]) {}; //经由过程数组下标也可以猎取 DOM 对象
if ($('#pox').get(0)) {} ;

（二）进阶挑选器

在简朴挑选器中，我们了解了最基本的三种挑选器：元素标署名、ID 和类(class)。那末在基本挑选器外，另有一些进阶和高等的挑选器轻易我们更精准的挑选元素

现在引见的六种挑选器，在现实运用中，我们可以天真的搭配，使得挑选器越发的精准和疾速：

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

正告：在现实运用上，通配挑选器平经常使用的并不多，平常只用在部分的环境内。因为在大通配上，比方：$('*')，这类运用要领效力很低，影响机能，发起只管的罕用。(CSS上也很罕用)

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

$('div.box'); //限制.box猎取到的元素标署名必需是div
$('p#box div.side'); //同上

犹如CSS一样，类(class)有一个特别的情势，就是同一个DOM节点可以声明多个类(class)。那末关于这类花样，我们有多class挑选器可以运用，但要注重和class群组挑选器的区分。

.box.pox { //双 class 挑选器猎取页面中class同时有.box.pox的元素
    color:red;
}
$('.box.pox').css('color', 'red'); //用多个class举行精准肯定

注重要点：

只寻求必要的肯定性。当挑选器挑选越庞杂，jQuery内部的挑选器引擎处置惩罚字符串的时候就越长。

（三）高等挑选器

在前面进修了六种最通例的挑选器，平常来说经由过程这六种挑选器基本上可以处理一切DOM节点对象挑选的题目。但在许多特别的元素上，比方父子关联的元素，兄弟关联的元素，特别属性的元素等等并不好猎取，下面就来说说这些高等挑选器：

实在子女挑选器我们在进阶挑选器内里已有过运用，这里为何要再提起呢?

因为它属于条理挑选器，在高等挑选器中，jQuery为如许的挑选器都供应了一个相对应的要领。

1. jQuery为子女挑选器供应了一个等价的find(）要领:

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

1. jQuery为子挑选器供应了一个等价的children()要领

$('#box > p').css('color','red');//子挑选器，孙子失明
$('#box').children('p').css('color','red');//和子挑选器等价

1. jQuery为next挑选器供应了一个等价的next()要领：

$('#box+p').css('color','red');//下一个同级节点
$('#box').next('p').css('color','red');//和next挑选器等价

1. jQuery为nextAll挑选器供应了一个等价的要领nextAll()：

$('#box ~ p').css('color','red');//背面一切同级节点
$('#box').nextAll('p').css('color', 'red'); //和 nextAll 挑选器等价

须要注重的是：

1. 条理挑选器对节点的条理都是有请求的，比方子挑选器，有子节点才可以被挑选到，孙子节点和重孙子节点都没法挑选到。next和nextAll挑选器，必需是同一个条理的后一个和后N个，不在同一个条理就没法拔取到了。

2. 在 find()、children()、next()和nextAll()和这四个要领中，如果不通报参数，就相当于通报了“*”，挑选一切相符前提的元素，发起只管坚持参数的通报

jQuery独占补充要领。CSS未含有

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

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

$('#box').siblings('p').css('color','red');//siblings()要领恰好集成了prevAll()和nextAll()两个功用的结果，及高低相邻的一切元素举行选定：

扩大：

$('p', '#box');//jQuery会自动把这条语句转成$('#box').find('p')，这会致使肯定的机能丧失。

$('p', $('#parent'));//jQuery内部会也将这条语句转成$('#box').find('p')

这里，引荐运用jQuery供应的要领。运用“+”或“~”从字面上没有next和nextAll越发语义化，越发清楚，jQuery的要领越发雄厚，供应了相对的prev和prevAll。
而且偶然须要可以天真的拆分和组合挑选器。所以，如果jQuery供应了自力的要领来替换某些挑选器的功用，引荐优先运用自力的要领。

（四）属性挑选器

注重¦应该是|，因为markdown表格剖析的题目，所以用来替换

二. 过滤挑选器

（一）基本过滤器

注重：:focus过滤器，必需是网页初始状况的已被激活核心的元素才完成元素猎取。而不是鼠标点击或许Tab键盘敲击激活的。

$('input').get(0).focus(); //先初始化激活一个元素核心
$(':focus').css('background', 'red'); //被核心的元素

jQuery为最经常使用的过滤器供应了专用的要领，以下：

$('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的元素

（二）内容过滤器

内容过滤器的过滤划定规矩主如果包含的子元素或文本内容上。

jQuery 供应了一个 has()要领来进步:has 过滤器的机能：

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

jQuery供应了一个称号和:parent类似的要领，但这个要领并非拔取含有子元素或文本的元素，而是猎取当前元素的父元素，返回的是元素鸠合。

$('li').parent().css('background','#ccc');//挑选当前元素的父元素
$('li').parents().css('background','#ccc');//挑选当前元素的父元素及先人元素（追溯到html）
$('li').parentsUntil('html').css('background','#ccc');//挑选当前元素碰到html父元素住手（会在body上加）

（三）可见性过滤器

可见性过滤器依据元素的可见性和不可见性来挑选响应的元素。

注重：:hidden过滤器平常是包含的内容为：CSS款式为display:none、input表单范例为type="hidden"和visibility:hidden的元素。

（四）子元素过滤器

子元素过滤器的过滤划定规矩是经由过程父元素和子元素的关联来猎取响应的元素。

（五）其他要领

jQuery 在挑选器和过滤器上，还供应了一些经常使用的要领，轻易我们开辟时天真运用。

is:

$('.red').is('li'); //挑选器，检测class为是不是为 red
$('.red').is($('li')); //jQuery 对象鸠合，同上
$('.red').is($('li').eq(2)); //jQuery 对象单个，同上
$('.red').is($('li').get(1)); //DOM 对象，同上

还可以举行种种自定义推断：

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>
<script>
$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});
</script>

当用户点击的是第一个列表项中的单词"list"或第三个列表项中的任何单词时，被点击的列表项会被设置为赤色背景。
不过，当用户点击第一个列表项中的item1或第二个列表项中的任何单词时，都不会有任何变化，这是为这上面的状况中，事宜的目的分别是 <strong> 是 <span>。

slice:

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

注重：这个参数有多种传法和JavaScript中的slice要领是一样的比方：slice(2)，从第三个最先到末了选定；slice(2,4)，第三和第四被选定；slice(0,-2)，从倒数第三个位置，向前选定一切；slice(2,-2)，前两个和末端两个未选定。

filter：

$('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');

此处注重$(this)的运用，这把this包装成了jQuery对象，以便运用jQuery的要领。

三. 表单挑选器

（一）通例挑选器

实在运用上面的挑选器已能对表单元素举行拔取了，先来考证一下，来看看怎样应用上面的要领来举行表单元素的挑选。

//val()是jQuery用来猎取表单元素文本内容的一个要领
$('input').val(); //元素名定位，默许猎取第一个
$('input').eq(1).val(); //同上，猎取第二个
$('input[type=password]').val();//挑选type为password的字段
$('input[name=user]').val(); //挑选 name 为 user 的字段

很显然，上面的这个要领都能挑选到想要的元素，那末关于 id 和class基本一致，也可以连系属性挑选器来准确的定位，在这里我们不在反复。
关于表单中的其他元素名比方：textarea、select 和 button 等，道理一样，不在反复。
然则如许是不是是太过于庞杂了呢？如果我们要同时挑选input、textarea、select 和 button？继承看吧。

（二）表单挑选器

虽然可以运用通例挑选器来对表单的元素举行定位，但偶然照样不能满足开辟者天真多变的需求，而且也太过于烦琐。所以，jQuery为表单供应了专用的挑选器。

注重：

1. 因为这些挑选器都是返回元素鸠合，如果想猎取某一个指定的元素，最好连系一下属性挑选器。比方：

$(':text[name=user]).size(); //猎取单行文本框 name=user 的元素

1. 在运用这些属性时最好界定父元素，比方直接$(":hidden").length如许是不正确的，因为它还会挑选到head标签内的元素，所以length属性不会为0，发起运用如许的情势：$("form :hidden")

（三）表单过滤器

jQuery 供应了四种表单过滤器，分别在是不是可以用、是不是选定来举行表单字段的挑选过滤。