jQuery总结

*回顾下CSS选择器：—css选择器的作用是给指定的元素设置样式的。

1)id选择器  #id名{样式规则}     id="id名"

2)类选择器  .类名{样式规则}     class="类名1 类名2 ....."

3)标签选择器 标签名{样式规则}

4)后代选择器 选择器1 选择器2{样式规则}

5)子元素选择器  选择器1>选择器2{样式规则}

6)相邻选择器  选择器1+选择器2{样式规则}

7)同辈选择器  选择器1~选择器2{样式规则}

8)属性选择器

     [属性名='值']

 [属性名^='值']

 [属性名$='值']

 [属性名|='en']   比如:<input type="en-aa">

 [属性名*='en']

 [属性名~='en']   比如:<input type="en aa">

jQuery选择器:–Jquery选择器的作用是给指定的元素设置行为的。它提供了css1，css2

              css3部分的选择器，还包含自身特有的一些选择器。功能比较强大。



选择器效率的问题

  1)$("#id")

  2)$("#id").find("");

  3)$("p")

  4)$(".className")

  5)$("#id :hidden")

1)常用的基本选择器

 #id:根据给定的id匹配一个元素*****

 .classname:根据给定的类名匹配一个元素*****

  classname:根据给定的元素名匹配元素*****

 *:匹配所有元素

 select1,select2…:将每一个匹配到的元素合并后一起返回

2)层次选择器*****

 ancestor descendant:选取ancestor元素里的所有descendant元素--对应的方法find()

 parent>child:获取parent元素下的child元素---对应的方法children()

 prev+next:选取紧接在prev元素后的next元素---对应的next()方法

 prev~siblings:选取prev元素之后的所有siblings元素--对应的nextAll()方法

  实例：

      //获取所有的input元素

      //alert($("#divTest input").length);

      //alert($("#divTest").find("input").length);

  //获取id为divTest的元素下的input子元素

      //alert($("#divTest>input").length);

      //alert($("#divTest").children("input").length);

      //获取id为next元素的下一个input元素的内容

      //alert($("#next+input").val());

      //alert($("#next").next("input").val());

      //获取id为next元素的前后所有同辈a元素的个数

     // alert($("#next~span").length);

      alert($("#next").siblings("span").length);

3)基本过滤选择器

    :first:根据给定的id匹配一个元素==first()

:last:根据给定的类名匹配一个元素---last()

:not(selector):去除所有与给定选择器匹配的元素

:even:选取索引值为偶数的所有元素,从0开始计数*****

:odd:选取索引值为奇数的所有元素,从0开始计数*****

:eq(index):匹配一个给定索引值元素,从0开始*****

:gt(index):匹配大于给定索引值元素,从0开始

:lt(index):匹配小于给定索引值元素,从0开始

:header:选择h1,h2,h3一类的标签

:animated:匹配正执行动画效果的元素

:focus:匹配获取焦点的元素

4)常用的内容过滤选择器

:contains(text):匹配包含给定文本的元素

:empty:匹配所有不包含子元素或者文本的空元素

:has(selector):匹配含有选择器所匹配元素的元素*****

:parent:选取含有子元素或者文本的元素



    //查找空元素的个数

      //alert($("li:empty").length);

      //查找内容包含ip的li元素的个数

      //alert($("li:contains('ip')").length);

      //查找拥有子元素的所有li元素，输出满足条件的元素个数

     // alert($("li:parent").length);

      //查找并输出包含a元素的li元素的内容

      //alert($("li:has('a')").text());   



5)常用的可见性过滤选择器*****

 :hidden:选取所有不可见的元素 <input type="hidden">  display:none

 :visible:选取所有可见的元素



6)常用的属性过滤选择器

元素名[attribute]:选取拥有此属性的元素

元素名[attribute=value]:选取属性值等于value的元素

元素名[attribute!=value]:选取属性值不等于value的元素

元素名[attribute^=value]:选取属性值以value开始的元素

元素名[attribute$=value]:选取属性值以value结束的元素

元素名[attribute*=value]:选取属性值包含value的元素

元素名[attribute|=value]:选取属性值是value的元素或以value开头，后面跟-

元素名[attribute~=value]:选取属性值包含value且以空格隔开的元素

元素名[attribute1][attribute2]…:多个属性选择器合并成一个复合属性选择器



7):常用的子元素过滤选择器

:first-child:选取每个父元素下的第一个子元素

:first-of-type:选取同名兄妹节点的第一个子元素的所有元素

:last-child:选取每个父元素下的最后一个子元素

:last-of-type:选取同名兄妹节点的最后一个子元素的所有元素

:only-child:选取父元素中具有唯一的子元素的所有元素

:only-of-type:选取前后没有同名兄妹节点的子元素的所有元素

:nth-child(index/even/odd):选取每个父元素下的第index个子元素或奇偶元素（index从1开始算起)

:nth-last-child(index/even/odd):取每个父元素下的第index个子元素,从最后一个往第一个数（index从1开始算起)



8):常用的表单选择器

:input:选取所有<input>、<textarea>、<select>和<button>元素(表单元素)

:text:选取所有单行文本框

:password:选取所有密码框

:radio:选取所有单选按钮

:checkbox:选取所有复选框

:submit:选取所有提交按钮

:image:选取所有图像按钮

:reset:选取所有重置按钮

:button:选取所有按钮

:file:选取所有上传域



 9)常用的表单对象属性过过滤选择器

:disabled:选取所有不可用元素

:enabled:选取所有可用元素

:checeked:选取所有被选中的元素（单选框和复选框）

:selected:选取所有被选中的选项元素(下拉列表)