标签：
现在对于前端开发来说，肯定少不了JS,CSS，但是这些原生态的代码用起来不是太顺手，所以Jquery流行起来了，因为它操作简单，方便，但是它并没有代替原来的开发语言，只是同样的功能，用Jquery来说更加方便，代码量更少，但是许多JS的其他内容Jquery并没有实现，现在有许许多多的JS开发的框架，它们各有优势，但是Jquery用途更方便，操作简单，学习易上手。对于许多项目来说基本上成为必然会使用的一种代码库。
Jquery大的方面包括Jquery操作和Jquery easy-ui,我接下来所要学的都是Jquery的操作，Jquery只需要导入一个Js文件，当然这个JS文件要第一个被引入，在其之前引入的JS有可能不会引用到Jquery，对于初学者来说，最遗憾的一点是Jquery写错了之后不会报错，及时错了之后老半天找不到哪里出错了，这是比较郁闷的一点。
Jquery的官方API http://tool.oschina.net/apidocs/apidoc?api=jquery，
Jquery各个版本的下载地址：http://jquery.com/download/
Jquery的中文文档：http://www.jquery123.com/category/attributes/
接下来说今天要讲的内容，Jquery选择器，Jquery选择器是CSS的选择器，我之前并没有学习过什么CSS，即使学过，基本上也不用我调什么样式，学过也早忘掉了，但是我需要经常的使用Jquery，而选择器是学习Jquery中基础中的基础，但是选择器好像还有很多混淆的地方，所以写了这篇文章。
Jquery选择器主要分为六种，比较简单的选择器有三种器，标签选择器，类选择器，ID选择器。 接下来用一个例子来说明
1 <script type="text/javascript" src="jquery-2.1.4.min.js"></script> 2 <script type="text/javascript" src="index.js"></script> 3 <link type="text/css" rel="stylesheet" href="index.css"> 4 <title>This is the demo for Jquey</title> 5 </head> 6 <body> 7 <div id="A"> 8 <div id="A1" class="subdiv">A1</div> 9 <div id="A2">A2</div> 10 </div> 11 <div id="B"> 12 <div id="B1" class="subdiv">B1</div> 13 <div id="B2">B2</div> 14 </div> 15 <div id="C"> 16 <div id="C1" class="subdiv">C1</div> 17 <div id="C2">C2</div> 18 </div> 19 </body> 20 </html>
这是我用到的例子，他的展示效果是这个样子的
（图1）
标签选择器 ： $("div")可以访问到所有标签名称为div的元素，如果$("div“).size()会显示9,它一般都会返回一堆值，实际的应用中一般都不会使用到
ID选择器： $("#A")可以访问到第一个Div，ID一般都会唯一的得到一个Div元素，所以ID一般用的比较多。只要使用#和ID拼接的字符串即可
类选择器： $(".subdiv")可以访问到所有包含class=subdiv的Div元素，一般用来整体控制CSS样式，对于事件控制一般都用ID选择器。
使用上面三种方式$("div").css(‘background‘,‘red‘),$("#A").css(‘background‘,‘red‘),$(‘.subdiv‘).css(‘background‘,‘red‘)都可以使其选中的
Div元素背景色变红,下面使他们的显示结果。
(标签选择的效果)
(ID标签选中的效果)
（类选择选中的效果）
注：因为贴图太麻烦，以后就说那个元素变红就好了。
接下来介绍的是稍微比较复杂的选择器，这些选择器是高端选择器，包括后代选择器，属性选择器，过滤选择器
后代选择器：后代选择器的方法比较多，
（1）find()方法：这个方法会查询所有的子方法，如果$("#A").find("div").css(‘background‘,‘color‘),那么A1，A2会变红，因为在这个例子中ID为A的DIV元素下面只有DIV元素，所以看起来效果和选中ID是一样的，但是你也可以在该DIV中添加其他的HTML元素来看看效果，
（2）next()方法:这个方法会查询同级后面的元素，例如在这个例子中$("#A .subdiv").next("div").css(‘background‘,‘color‘),这个方法会查询ID为A的与A1相同等级的元素，那么变红的只有A2。与Find方法的区别是next查询的都是兄弟节点，而对于其兄弟的子节点不做查询，Find会遍历整个DOM树的节点，是以ID是A元素为根元素的所有节点。
(3)nextAll()方法：next只会查询第一次匹配，nextAll会匹配所有的,$("#A").next("div").css(‘background‘,‘red‘)，那么变红的只有B1，B2，如果nextAll()的话，C1，C2也会变红
(4)children()方法：查询该元素的所有子元素，如果$("#A”）.children(’div‘).css(‘background‘,‘red‘),那么变红只有A1，A2。
(5)prev()方法：该方法查询的是next（）的反操作,查询同级之前的元素
(6)prevAll()方法：该方法是nextAll（）的反操作
（7）siblings()方法:该方法是next()和prev（）操作的合并，即进行了一次next查询，又进行了一次prev的查询
(8)nextUntil()方法:$("#A").nextUntil("#C").css(‘backgroundcolor‘,‘red‘)；指的是ID为A元素和ID为C元素之间的A元素之后的兄弟元素，这里只有B元素会变
红，那么变红的只有B1和B2。如果把参数C改为B，则没有匹配的元素，prevUntil()是nextUntil的反操作。
属性选择器 : 这个选择器一般都用在Input元素当中，最常用的是$("input[type=text]")会查询到所有<input type="text">的元素。因为这里只是=号变成*=,$=之类的符号，各自的意义和正则表达式中相同，这里就不在介绍了，不过估计也不太实用
过滤选择器： 过滤的内容需要专门的进行写
标签：
原文地址：http://www.cnblogs.com/rain144576/p/5092575.html
