jQuery中的常用选择器 在做项目中常用的jQuery选择器，能帮助我们准确的拿到想要的元素，所要的元素的值。 牢记：jQuery选择器返回值是一个伪数组对象，如果没有匹配元素，会返回一个空的伪数组对象！！因此判断jQuery对象是否存在 要用jQuery对象的length属性大于0，来进行判断。牢记这个！！ 基本选择器有5种，ID选择器，类型选择器，类选择器，通配选择器，分组选择器
说到ID选择器，js提供了原生方法 var element = document.getElementById(“id值”)； jQuery 方法提供了更简单的方法 $("#id的值")；
<div id="div"> <h2>刚开完视频</h2> </div> <script> $(function(){ $("#div").css("background","red");//拿到名字为div的元素，并将该元素的背景色设置为红色 }) </script>两种方法：js的方法执行速度比jq的方法要快。 假如 你想拿到的元素的id有特殊字符，用jq方法时候要考虑转义特殊字符；用js的方法就不用去转义 记住在特殊符号前面加上两个反斜杠\ \ 例如：
<div id="[div]"><h2>变化多端的标签</h2></div> <script> $(function(){ //第一种用原生js方法 document.getElementById("[div]").style.color="red"; //第二种方法 用jq的方法 $("#\\[div\\]").css("color","red"); }) </script>js也提供了一个方法 在Dom中选择指定类型的元素，这里是指定类型，不是指定某一个，也就是说我们通过 document.getElementsByTagName("");所拿到的(也就是这个方法的返回值)是目标元素的集合，参数值为字符串型HTML标签名称。 jQuery的方法是$(“目标标签名字”)；返回值不同是，返回一个包含匹配标签的jQuery的元素代码贴一下吧。
//类选择器方法的使用。 <div>我很快乐</div> <div>我有点快乐</div> <div>我希望你快乐</div> $(function(){ //jq方法比较简单 $("div").css("color","red");//将所有的div标签定义为红色。 //第二种方法，有一点点复杂，利用js原生方法document.getElementsByTagName("") var result=document.getElementsByTagName("div");//此时返回所有div元素的集合 for(i=0;i<result.length;i++){//挨个div遍历。。。。。 result[i].style.color="red"; } //第三种方法，也就是jq对象和dom对象的转化一下 var res= $("div");//拿到jq对象。 for(var i=0;i<res.length;i++){ res[i].style.color="red"; } })关于执行速度的问题，js原生方法要比jq的方法快。
类选择器和类型选择器不一样，类型是某些元素标签，类是某些元素标签的特性。 在html5才增加了document.getElementsByClassName("")方法，这个方法是js的原生方法，这个方法的参数可以使一个，也可以是多个，类名通过空格分隔，返回值是参数类型的元素集合。 jq的方法更加简单直接$(".+目标元素的类")；别忘了一个点"."；关于类选择器有一个最重要的，有些低版本的浏览器不支持js的方法document.getElementsByClassName("")，我们要重新给这个方法进行拓展。
//对document.getElementsByClassName("")方法进行拓展 document.getElementsByClassName=function(className){ var res=[];//这个相当于容器 var allHtml = document.getElementsByTagName("*");//获取所有的元素 for( var i=0;i<allHtml.length;i++){//遍历整个html if(allHtml[i].className==className){ res[res.length]=allHtml[i]; }} return res; }然后就能使用document.getElementsByClassName("")方法进行筛选了。这个虽然一般用不到，但是一些单位确实浏览器很版本很低，有时候需要没有定义的方法进行拓展在使用。
通配选择器在上一个拓展方法中已经使用了，就是给document.getElementsByTagName("")，这个方法传递一个“”*“”；返回值文档所有元素的列表。 jq方法就是 $("*"); 想说的是 在使用jq和js方法的过程中，灵活使用，这样既能简化代码的书写，也能提高效率。
分组选择器更好的实现了一次选择多个元素的，一个方法从多个维度综合选择，想拿到的元素一次拿到。
<h2>嘿嘿</h2> <div id="hh">哈哈</div> <span class="you">看电视</span> <p title="text">声音真大</p> <script> $(function(){ $("h2,#hh,span.you,[title='text'").css("color","red");//分组选择器一次性选择多个想得到的元素jq对象 }) </script>层级选择器有四种，包含选择器，子选择器，相邻选择器，兄弟选择器。
包含选择器：给定祖先元素下匹配的所有元素。例如$(“form input”)代表了 form表单下所有的input元素,不在form元素内的input是不包含在内的。包含选择器不受结构的层级限制。
<form> <lable> 这个 <input /> </lable> </form> <lable> 那个 <input /> </lable> <script> $(function(){ $("form input").css({"border":"solid 1px red","background":"blue"}); }) </script>子选择器：给定父元素下匹配所有的子元素。例如$(“form > input”) 表示form表单下所有的子级input元素，注意是所有的。
<div> <span><h2>哈哈哈这个被span标签修饰了，子选择器不能拿到它</h2></span> <h2>这个可以取到</h2> </div> <h2>这个取不到，因为它不再div父级标签里</h2> <script> $(function(){ $("div > h2").css("color","red");//拿到div下的h2这个h2标签不能被其他标签修饰，只能是div的子级 }) </script>相邻选择器：匹配所有紧跟在prev元素后的next元素，其中prev表示任何有效的选择器，next表示有效选择器紧跟着的第一个选择器，这里的选择器的定义可以看做是一个html元素。例如$(“label + input”)表示可以匹配所有跟在label后面的input元素，相邻选择器只会选择一个！！！！！！！！！！！！
<div> <span><h2>不能拿到它</h2></span> <h2>这个也不可以取到</h2> </div> <h2>这个可以取到，因为它是div标签同级下的一级，并且紧跟着div</h2> <script> $(function(){ $("div + h2").css("color","red"); }) </script>兄弟选择器：其实我感觉兄弟选择器和相邻选择器类似，区别就是兄弟选择器是选择所有的同级元素，相邻选择器只有一个。 $(“div ~ input”)选择与div元素同一级别的input元素，该input元素不能被其他元素修饰，要体现出同级的概念。
<div> <span><h2>不能拿到它</h2></span> <h2>这个也不可以取到</h2> </div> <h2>这个可以取到，因为它是div标签同级下的一级，并且紧跟着div</h2> <h2>这个可以取到，因为它是div标签同级下的一级，并且紧跟着div</h2> <label><h2>这个凉了</h2></label> <script> $(function(){ $("div ~ h2").css("color","red"); }) </script>子元素选择器相对来说比较简单，在项目中常用的就几个方法，下面一一介绍下。 直接上代码吧。
//子元素选择器 <ul> <li>大家好</li> <li>我是彭涵</li> <li>我喜欢吃苹果</li> <li>也喜欢吃橘子</li> </ul> $(function(){ $("li : first-child").css("color", "red"); $("li : last-child").css("color", "red"); $("li : nth-child(1)").css("color", "red");//第1个li元素，这里的下标不是从0开始的，jq对象是， //因为jq对象是伪数组,数组下标从。。。。开始 $("li : nth-child(2n)").css("color", "red"); //第2个li元素及其后面间隔2的元素 })本来是想写一些关于过滤选择器和属性选择器的，结果想起来的东西太多了。。。。明天更新一下选择器的其他几类别。很基础 但是用的上。
