Jquery选择器

 Jquery选择器

说明：选择器是JQuery的要基，在Jquery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器。如果能熟悉地使用选择器，不公能简化代码，而且可能达到事半功倍的效果。

$(.类别名).click(function()){

};

$("#id名")

$("#id名").css("color","red");

if($("#tt").length>0){

//do something（判断是否为空）

}

if($("#tt")[0]){

//do something（判断是否为空）

}

层次选择器

$("标签名")

$('body div')            //body内所有div

$('body > div')           //body内子div

$("#one").next("div")  //one的一下个div

$("prev").nextAll("div")  //prev之后的所有div

基本过滤选择器

$("div:first") 选取第一个元素    

$("div:last") 选取最后一个元素

$("input:not(.myClass)") 选取class不是myClass的<input>元素

$("input:even") 选取索引是偶数的<input>元素

$("input:odd") 选取索引是奇数的<input>元素

$("input:eq(1)") 选取索引等于1的<input>元素

$("input:gt(1)") 选取索引大于1的<input>元素

$("input:lt(1)") 选取索引小于1的<input>元素

$(":header") 选取网页中所有的<h1><h2><h3>...

$("div:animated") 选取正在执行动画的<div>元素

内容过滤选择器：

$("div:contains('我')") 选取含有文本'我’的<div>元素

$("div:empty") 选取不包含子元素的<div>空元素

$("div:has(p)") 选取含有<p>元素的<div>元素

$("div:parent") 选取挺有子元素的<div>元素

可见性过滤器

$("hidden").show(3000); 选取所有不可见的元素

$("div:visible") 选取所有可见的<div>元素

属性过滤选择器

$("div[id]") 选取拥有属性id的元素

$("div[title=test]") 选取属性title为test的div元素

$("div[title!=test]") 选取属性不等于 test的div元素

$("div[title^=test]") 选取属性title以test开始的div元素

$("div[title$=test]") 选取属性title以test结束的div

$("div[title&=test]") 选取属性title含有test的div元素

$("div[id][title$='test']") 选取拥有属性id，并且属性title以test结束的div元素

子元素过滤选择器：

:nth-child(index) 从1开始的

:eq(index) 从0开始的

$("ul li:first-child"); 选取每个ul中第1个li元素

$("ul li:last-child"); 选取每个ul中最后1个li元素

$("ul li:only-child"); 在ul中选取是惟一子元素的li元素

表音对象属性过滤选择器

$("#form1 :emabled") 选取id为form1的表单内的所有可用元素

$("#form2 :disabled) 选取id为form2的表单内的所有不可用元素

$("input:checked") 选取所有被选中的input元素

$("select :selected") 选取所有被选中的选项元素

表单选择器

$("input") 选择的有input元素

$(":text") 选取所有的单选文本框

$(":password") 选取所有的密码框 

$(":radio") 选取所有的单选框

$(":checkbox") 选取所有的复选框

$(":submit") 选取所有的提交按钮

$(":images) 选取所有的图像按钮

$(":reset") 选取所有的重置按钮

$(":button") 选取所有的提交按钮

$(":file") 选取所有的上传域

$(":hidden") 选取所有的不可见元素

常用的CSS选择器

标签选择器： E｛ CSS规则 ｝      ， 描述：以文档元素作为选择符

ID选择器：   #ID｛ ｝            ， 描述：以文档元素的惟一标识符ID作为选择符

类选择器：   E.className｛ ｝    ,  描述：以文档元素的class作为选择器

群组选择器： E1,E2,E3 { }        ， 描述：多个选择符应用同样的样式规则

后代选择：   E F ｛ ｝           ， 描述：元素E的任意后代元素F

通配选择符： *｛｝               ， 描述：以文档的所有元素作为选择符

Jquery选择器大全网址：http://www.admin10000.com/document/48.html

简单例子：

Javascript写法

<script type="text/javascript">

   function demo(){

     alert('Javascript demo.');

}

</script>

<p onclick="demo">点击我.</p>

Jquery写法

<p onclick="demo">点击我.</p>

<script type="text/javascript">

   $(".demo").click(function(){

      alert("Jquery demo");

   });

</script>

说明：Jquery选择器的写法与CSS选择器的写法十分相似，只不过两者的作用效果不同，CSS选择器找到元素后添加样式，Jquery选择器找到元素后添加行为。需要特别说明的是，JQuery中涉及CSS样式的部分比单纯的CSS功能更为强大，并且拥有跨浏览器的兼容性!

——参考资料《锋利的JQuery》