爱站程序员基地jQuery中的常用选择器
在做项目中常用的jQuery选择器，能帮助我们准确的拿到想要的元素，所要的元素的值。
牢记：jQuery选择器返回值是一个伪数组对象，如果没有匹配元素，会返回一个空的伪数组对象！！因此判断jQuery对象是否存在 要用jQuery对象的length属性大于0，来进行判断。牢记这个！！
基本选择器有5种，ID选择器，类型选择器，类选择器，通配选择器，分组选择器
1.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>
2.类型选择器
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的方法快。
3.类选择器
类选择器和类型选择器不一样，类型是某些元素标签，类是某些元素标签的特性。
在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++){//遍历整个htmlif(allHtml[i].className==className){res[res.length]=allHtml[i];}}return res;}
然后就能使用document.getElementsByClassName(\”\”)方法进行筛选了。这个虽然一般用不到，但是一些单位确实浏览器很版本很低，有时候需要没有定义的方法进行拓展在使用。
4.通配选择器
通配选择器在上一个拓展方法中已经使用了，就是给document.getElementsByTagName(\”\”)，这个方法传递一个“”*“”；返回值文档所有元素的列表。
jq方法就是 $(\”*\”);
想说的是 在使用jq和js方法的过程中，灵活使用，这样既能简化代码的书写，也能提高效率。
5.分组选择器
分组选择器更好的实现了一次选择多个元素的，一个方法从多个维度综合选择，想拿到的元素一次拿到。
<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>
6. 结构选择器中的—-层级选择器
层级选择器有四种，包含选择器，子选择器，相邻选择器，兄弟选择器。
6.1 包含选择器
包含选择器：给定祖先元素下匹配的所有元素。例如$(“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>
6.2 子选择器
子选择器：给定父元素下匹配所有的子元素。例如$(“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>
6.3 相邻选择器
相邻选择器：匹配所有紧跟在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>
6.4 兄弟选择器
兄弟选择器：其实我感觉兄弟选择器和相邻选择器类似，区别就是兄弟选择器是选择所有的同级元素，相邻选择器只有一个。
$(“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>
7.子元素选择器
子元素选择器相对来说比较简单，在项目中常用的就几个方法，下面一一介绍下。
直接上代码吧。
//子元素选择器<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的元素})
本来是想写一些关于过滤选择器和属性选择器的，结果想起来的东西太多了。。。。明天更新一下选择器的其他几类别。很基础 但是用的上。
