JQuery的选择器
  　页⾯的任何操作都需要节点的⽀撑，开发者如何快速⾼效的到指定的节点也是前端开发中的⼀个重点。jQuery提供了⼀系列的选择器帮助开发者达到这⼀⽬的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。
jQuery⼏乎⽀持主流的css1~css3选择器的写法，我们从最简单的也是最常⽤的开始学起
1、id选择器：⼀个⽤来查的ID，即元素的id属性
  $( "#id" )
  id选择器也是基本的选择器，jQuery内部使⽤JavaScript函数ElementById()来处理ID的获取。原⽣语法的⽀持总是⾮常⾼效的，所以在操作  DOM的获取上，如果能采⽤id的话尽然考虑⽤这个选择器
  值得注意：
  id是唯⼀的，每个id值在⼀个页⾯中只能使⽤⼀次。如果多个元素分配了相同的id，将只匹配该id选择集合的第⼀个DOM元素。但这种⾏为不应该发⽣；有超过⼀个元素的页⾯使⽤相同的id是⽆效的
2、类选择器，顾名思义，通过class样式类名来获取节点
  描述：$( ".class" )
  类选择器，相对id选择器来说，效率相对会低⼀点，但是优势就是可以多选，同样的jQuery在实现上，对于类选择器，如果浏览器⽀持，jQuery使⽤JavaScript的原⽣getElementsByClassName()函数来实现的
  我们不难发现：
  jQuery除了选择上的简单，⽽且没有再次使⽤循环处理
  不难想到$(".imooc").css()⽅法内部肯定是带了⼀个隐式的循环处理，所以使⽤jQuery选择节点，不仅仅只是选择上的简单，同时还增加很多关联的便利操作，后续我们还会慢慢的学到其他的优势。
3、元素选择器：根据给定（html）标记名称选择所有的元素
  描述：$( "element" )
搜索指定元素标签名的所有节点，这个是⼀个合集的操作。同样的也有原⽣⽅法getElementsByTagName()函数⽀持
下例代码所⽰：
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<script type="text/javascript">
//通过原⽣⽅法处理
//获取到所有的节点标记名为div的元素
//给每⼀个div加上蓝⾊的边框
var divs = ElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传⼊标签名p
//标签是可以多个的，所以得到的同样也是⼀个合集
$("p").css("border", "3px solid red");
</script>
</body>
第⼀组：通过getElementsByTagName⽅法得到页⾯所有的<div>元素
var divs = ElementsByTagName('div');
divs是dom合集对象，通过循环给每⼀个合集中的<div>元素赋予新的boder样式
第⼆组：同样的效果，$("p")选取所有的<p>元素，通过css⽅法直接赋予样式
4、全选择器（*选择器）
在CSS中，经常会在第⼀⾏写下这样⼀段样式
* {padding: 0; margin: 0;}
通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中⽂档页⾯中的元素
描述：$( "*" )
抛开jQuery，如果要获取⽂档中所有的元素，通过ElementsByTagName()中传递"*"同样可以获取到
不难发现，id、class、tag都可以通过原⽣的⽅法获取到对应的节点，但是我们还需要考虑⼀个兼容性的问题，我这⾥顺便提及⼀下，⽐如:
1. IE会将注释节点实现为元素，所以在IE中调⽤getElementsByTagName⾥⾯会包含注释节点，这个通常是不应该的
2. getElementById的参数在IE8及较低的版本不区分⼤⼩写
3. IE7及较低的版本中，表单元素中，如果表单A的name属性名⽤了另⼀个元素B的ID名并且A在B之前，那么getElementById会选中A
4. IE8及较低的版本，浏览器不⽀持getElementsByClassName
5、层级选择器
⽂档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以⽤传统的家族关系来描述，可以把⽂档树当作⼀个家谱，那么节点与节点直接就会存在⽗⼦，兄弟，祖孙的关系了。
选择器中的层级选择器就是⽤来处理这种关系：⼦元素、后代元素、兄弟元素、相邻元素
通过⼀个列表，对⽐层级选择器的区别
仔细观察层级选择器之间还是有很多相似与不同点
1. 层级选择器都有⼀个参考节点
2. 后代选择器包含⼦选择器的选择的内容
3. ⼀般兄弟选择器包含相邻兄弟选择的内容
4. 相邻兄弟选择器和⼀般兄弟选择器所选择到的元素，必须在同⼀个⽗元素下
6、基本筛选选择器
很多时候我们不能直接通过基本选择器与层级选择器到我们想要的元素，为此jQuery提供了⼀系列的筛选选择器⽤来更快捷的到所需的DOM元素。筛选选择器很多都不是CSS的规范，⽽是jQuery⾃⼰为了开发者的便利延展出来的选择器
筛选选择器的⽤法与CSS中的伪元素相似，选择器⽤冒号“：”开头，通过⼀个列表，看看基本筛选器的描述：
注意事项：
1. :eq(), :lt(), :gt(), :even, :odd ⽤来筛选他们前⾯的匹配表达式的集合元素，根据之前匹配的元素在进⼀步筛选，注意jQuery合集都是从0
开始索引
2. gt是⼀个段落筛选，从指定索引的下⼀个开始，gt(1) 实际从2开始
7、内容筛选选择器
基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了⼀组内容筛选选择器，当然其规则也会体现在它所包含的⼦元素或者⽂本内容上
内容过滤器描述如下表：
注意事项：
1. :contains与:has都有查的意思，但是contains查包含“指定⽂本”的元素，has查包含“指定元素”的元素
2. 如果:contains匹配的⽂本包含在元素的⼦元素中，同样认为是符合条件的。
3. :parent与:empty是相反的，两者所涉及的⼦元素，包括⽂本节点
8、可见性筛选选择器
元素有显⽰状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden
描述如下：
这2个选择器都是 jQuery 延伸出来的，看起来⽐较简单，但是元素可见性依赖于适⽤的样式
jquery是什么选择器:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等
我们有⼏种⽅式可以隐藏⼀个元素：
1. CSS display的值是none。
2. type="hidden"的表单元素。
3. 宽度和⾼度都显式设置为0。
4. ⼀个祖先元素是隐藏的，该元素是不会在页⾯上显⽰
5. CSS visibility的值是hidden
6. CSS opacity的指是0
如果元素中占据⽂档中⼀定的空间，元素被认为是可见的。
可见元素的宽度或⾼度，是⼤于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占⽤空间布局。
9、属性筛选选择器
属性选择器让你可以基于属性来定位⼀个元素。可以只指定该元素的某个属性，这样所有使⽤该属性⽽不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使⽤特定值的元素，这就是属性选择器展⽰它们的威⼒的地⽅。
浏览器⽀持：
[att=val]、[att]、[att|=val]、[att~=val]  属于CSS 2.1规范
[ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
[name!="value"]  属于jQuery 扩展的选择器
CSS选择器⽆论CSS2.1版本还是CSS3版本，IE7和IE8都⽀持，webkit、Gecko核⼼及Opera也都⽀持，只有IE6以下浏览器才不⽀持
在这么多属性选择器中[attr="value"]和[attr*="value"]是最实⽤的
[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，⽐如说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在⽹站中帮助我们匹配不同类型的⽂件
10、⼦元素筛选选择器
⼦元素筛选选择器不常使⽤，其筛选规则⽐起其它的选择器稍微要复杂点
⼦元素筛选选择器描述表：
注意事项：
1. :first只匹配⼀个单独的元素，但是:first-child选择器可以匹配多个：即为每个⽗级元素匹配第⼀个⼦元素。这相当于:nth-child(1)
2. :last 只匹配⼀个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个⽗级元素匹配最后⼀个⼦元素
3. 如果⼦元素只有⼀个的话，:first-child与:last-child是同⼀个
4.  :only-child匹配某个元素是⽗元素中唯⼀的⼦元素，就是说当前⼦元素是⽗元素中唯⼀的元素，则匹配
5. jQuery实现:nth-child(n)是严格来⾃CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，⽽eq(index)
是从0开始的
6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算
11、表单元素选择器
⽆论是提交还是传递数据，表单元素在动态交互页⾯的作⽤是⾮常重要的。jQuery中专门加⼊了表单选择器，从⽽能够极其⽅便地获取到某个类型的表单元素
表单选择器的具体⽅法描述：
注意事项：
除了input筛选选择器，⼏乎每个表单类别筛选器都对应⼀个input元素的type值。⼤部分表单类别筛选器可以使⽤属性筛选器替换。⽐如$(':password') == $('[type=password]')。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。