1.JQuery选择器的优势

　　

2Jquery选择器 不会报错；因此当希望使用Jquery来检测某个元素在网页上是否存在的时候，应该根据获取到的 元素的长度来进行判断；

2.3 Jquery选择器

　　$(“#ID”)用来代替document.getElementById()函数

　　$(“tagname”)用来代替document.getElementByTagName()函数

　　$(".test") 选取所有class为test的元素。

　　$("*")选取所有元素

　　$("div,span,p.myClass")选取所有<div><span>和拥有class为<myClass>的<p>标签的一组元素；

基本选择器示例：

改变id为one的元素的背景色       $('#one').css("background","#bbffaa");

改变class为mini的所有元素的背景色  $('.mini').css("background","#bbffaa");

改变元素名是<div>的所有元素的背景色    $('div').css("background":"#bbddaa")

改变所有元素的背景色：$("*").css("background":"#bbddaa")

改变所有的<span>元素和id为two的元素的背景色  $("span，#two").css("background":"#bbddaa")

层次选择器：

希望通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等。

$("ancestor   descendant")    选取ancestor元素里的所以descendant元素       返回集合元素

$("parent>child ")         选取parent元素下的child（子）元素，      返回集合元素

$("prev +next  ")         选取紧接在prev元素后的next元素    返回集合元素

$("prev~siblings")       选取prev元素之后的所有sibling元素    返回集合元素

等价：$('.one+div');======$('.one').next("div");            $("#prev~div")=====$("#prev").nextAll("div");

注意：$("#prev~div")选择器只能选择“#prev”元素后面的同辈<div>元素。而$("#prev").siblings（"div"）方法与前后位置无关，只要是同辈节点都能匹配。

 

基本过滤选择器：

：first       选取第一个元素             $("div:first")选取所有<div>元素中第一个<div>元素

：last       选取第一个元素             $("div:last")选取所有<div>元素中最后一个<div>元素

：not（selecor） 去除所有与给定选择器匹配的元素              $("input :not(.myClass)")选取class不是myClass的<input>元素

：even       选取索引是偶数的所有元素，索引从0开始，        $("input:even")  选取元素是偶数的<input>元素

：odd        选取索引等于奇数的所有元素，索引从0开始         $("input:odd")  选取元素是奇数的<input>元素

：eq（index）  索取索引等于index的所有元素（索引从0开始）    $("input:eq(1)")索取索引等于1的<input>元素

：gt（index）选取索引大于index的元素（index从0开始）         $("input :gt(1)")选取索引大于1的<input>元素

：It(index) 选取索引小于index的元素（index从0开始）　　　　　　 $("input :it(1)")选取索引小于1的<input>元素

：header  选取所有的标题元素                     $(":header")  选取网页中所有的<h1><h2><h3>元素

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

 

内容过滤选择器：

：contains（text）   选取含有文本内容为“text”的元素     $(“div ： contains（“我”）”)选取含有文本“我”的<div>元素

：empty       选取不包含子元素或者文本元素的空元素    $(“div ：empty”)选取元素不包含子元素（包括文本元素）的<div>的空元素

：has（selector）   选取含有选择器所匹配的元素的元素      $("div :has(p)") 选取含有<p>元素的<div>元素

：parent     选取含有子元素或者文本的元素      $("div:parent")选取拥有子元素（包括文本元素）的<div>元素

 

可见性过滤选择器：根据元素的可见和不可见状态来选择相应的元素

：hidden   选取所有不可见的元素      $(":hidden")选取所有不可见的元素，包括<input type="hidden">,<div style="display:none;">和 <div style="visibility:hidden;">等元素，如果只是想选取<input>元素

，可以使用$("input:hidden");

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

　　　　　　插入show（3000）Jquery方法，它的功能是显示元素，3000是时间，单位是毫秒

属性过滤选择器:通过元素的属性来获取相应的元素。

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

【attribute=value】  选取属性的值为value的元素     $("div[title=text]")选取实行title为text的<div>元素

【attribute！=value】  选取属性的值不等于value的元素     $("div[title=text]")选取实行title不等于text的<div>元素（没有属性title的div元素也会被选取）

【attribute^=value】  选取属性的值以value开始的元素       $("div[title^text]")选取属性title以test开始的元素

【attribute$=value】  选取属性的值以value结束的元素       $("div[title$text]")选取属性title以test结束的元素

【attribute*=value】   选取属性值含有value的元素              $("div [atttribute*=test]")选取属性title含有“test”的<div>元素

【selector1】【selector2】【selectorN】  用属性选择器合并成一个复合属性原则器，满足多个条件。没选择一次，缩小一次范围。$("div[id][title$='test']")选取拥有属性id，并且属性title以

‘test’结束的div元素

子元素过滤选择器：

：nth-child（index/even/odd/equation）选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）

：first-child  选取每个父元素的第一个子元素     ：first只返回单个元素，：first-child选择符将为每个父元素匹配第一个子元素$("ul li:first-child")选择每个<ul>中第一个<li>元素

：last-child 选取每个父元素最后一个子元素     ：last只返回单个元素，而last-child选符将为每个父元素匹配第一个子元素$("ul li:last-child")选择每个<ul>中最后一个<li>元素

：only-child  如果某个元素是父元素中唯一的子元素，那么将会被匹配。如果父元素还有其他的元素，则不是被匹配

 

表单对象属性过滤选择器

：enable  选择可以的元素  $("#formal  :enable") 选取id为formal的表单内的所有元素

：disable 选取所有不可用的元素  $("#form2：disable")

：checked  选取所有被选中的元素 （单选框  复选框 ）   $("input：checked")选取所有被选中的<input>对象

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

 

 

选择器中含有“.”“#”“(” "]“等特殊字符 则需要使用转义字符转义

选择器中含有空格的注意事项:选择器中的空格是不容忽视的，多一个空格和少一个空格也许会得到不同的效果例如

var $t_a=$(‘.test     ：hidden’)；  //带空格的    表示选取class为”test“的元素里面的 隐藏元素

var $t_a=$(‘.test：hidden’)；//不带空格    表示选取隐藏的class为”test“的元素