1:基本选择器:基本选择器是Jquery中最常用的选择器,也是最简单的选择器。,它通过元素ID、class和标签名等来查找Dom元素。在玩野中每个Id名称只能使用一次,class允许重复使用。

  Demo:#ID  $("#test"),  .class  $(".test"),  element  $("P")

  还有一个集合元素,将每一个选择器匹配到的元素合并后一起返回,$("div,span,p.myClass")

2:层次元素:如果想通过Dom元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素,那么同辈元素是一个非常好的选择。

  Demo:后代元素  $("div span") 选取div中的所有span  常用

      子元素     $("div>span") 选取div下元素名是span的子元素  常用

      同辈元素  $(".one+div") 选取class为one的下一个div同辈元素  不常用  因为等价于$(".one").next("div");

           $("#two~div") 选取id为two的元素后面的所有div元素  不常用  因为等价于$(".one").nextall("div");

           $("#two~div") 选取id为two的元素所有div元素,无乱前后,只要是同辈节点就都能匹配 $("#prev").siblings("div");

3:过滤选择器:通过特定的过滤规则来筛选出所需的Dom元素

  基本过滤选择器

      Demo:  :first 选取第一个元素  $("div:first")  选取所有的div元素中的第一个div

      :last  选取最后一个元素   选取所有的div元素中的最后一个div

      :not(selector)  $("div:not(.myClass)")  选取class不是myClass的div

      :even  $("div:even")  选取索引是偶数的div元素,索引从0开始

      :old  奇数

      :eq(index)  $("div:eq(1)")   索引为1的div

      :gt(index)  大于;  

      :lt("index")  小于;

      :header  选取所有的标题元素

      :animated  选取正在执行的动画

      :focus  选取当前获取焦点的元素

  内容过滤选择器

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

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

      :parent  $("div:parent")  选取拥有子元素(包括文本元素)的div元素

      :empty  $("div:empty")   选取不包含子元素(包括文本元素)的div元素

  可见性过滤选择器

      :hidden  选取所有不可见的元素,包括<input type="hidden"/>,<div style="display:none">/<div style="visibility:hidden">

      :visible   选取所有可见的元素

4:属性过滤选择器

      $("div[id]")  选取拥有属性id的元素  Demo:$("div[title]").css("background"."#bbffaa");  改变含有属性title的div元素的背景色

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

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

      $("div[title^=test]")  获取属性title的值以test开头的div元素

      $("div[title$=test]")  获取属性title的值以test结束的div元素

      $("div[title*=test]")  获取属性title的值含有test的div元素

      $('div[title|="en"]')   改变属性title等于en或以en为前缀(该字符串后跟一个连字符'-')的元素的背景色

      $("div[title~='uk']")  改变属性title用空格分隔的值中包含字符uk的元素的背景色

6:表单对象属性过滤器  主要是对所选择的表单元素经行过滤

      :enabled  选取所有可用元素

      :disabled  选取所有不可用元素

      :checked  选取所有被选中的元素(单选框,复选框)  $("input:checked")  选取所有被选中的<input>元素

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

posted on 2012-11-12 15:57  lin714115  阅读(160)  评论(0编辑  收藏  举报