JQuery选择器

1.通过标签类型选择  $("p")                   //选择所有的P标签
  $("a")                  //选择所有的a标签
  $("div")                //选择所有的div标签

2.通过class选择元素
   $(".red")             //选择类名为red的类

3.通过ID选择元素
   $("#red")          //选择ID名为red的类

4.使用联合选择器更加准确的选择
   $("p.red")        //选择具有类名为red的p标签

5.使用组合选择器
   $("p,.red,#red")        //选择所有p标签  具有red类名的类   ID名为red的类

6.层次选择器
  $("body span")             //选择出body里面的所有span标签,包括被p包含的span标签
  $("body>span")            //只选择body下直接含有的span标签,不包括那些被p包含的span标签

7.选择不匹配某个选择器的元素  :not()
  $("p:not(.foo)");         //选择所有类名不是foot的P标签元素

8.第一个元素和最后一个元素   :first和:last
选择第一个元素:$("p:first");            //选择第一个P标签
选择最后一个元素:$("p:last");        //选择第二个P标签

9.选择奇数偶数的元素   :even和:odd
   选择奇数:$("p:even");
   选择偶数:$("p:odd");

10.选择特定索引的元素
     $("p:eq(5)")          //选择第6个P标签
     注意:索引是从0开始,0代表第一个元素,1代表第二个,2代表第三个......

11.内容过滤器    :contains()  区分大小写的,内容的大小写影响匹配
    $("p:contains(哇塞,有头猪)");           //P标签里面含有“哇塞,有头猪”文本,才会被选中

12.匹配包含特定元素的元素    :has()
    $("p:has(span)");             //选择里面含有span标签的p元素

13.选择空元素
    $(":empty");                //不包含任何文本也不包含任何其他元素的空元素

14.选择父元素        :parent  只匹配那些拥有子元素的元素,不管它包含的是其他元素,还是文本内容
    $("p:parent");              //所有拥有子元素的P标签

15.可见性过滤器    :hidden和:visible   分别用来选择被隐藏的元素和可看到的元素
     选择所有可见的段落:$("p:visible");
      选择所有不可见的段落:$("p:hidden");

16.属性过滤器    属性是位于标签内部用来对标签做进一步描述的东西(如class、href、ID、title等
     ①根据属性及属性的值选择元素
     要匹配拥有特定属性及属性值的元素,用下面的格式将属性和值放到方括号当中([]):
     [属性名=属性值]
     要选择拥有class foo的所有元素,在控制台执行以下代码:
     $("[class=foo]");
     ②选择没有某个属性的元素或属性值不匹配的元素
     反之,要选择不匹配特定属性及其值的元素,在属性名和属性值之间的等号前插入一个感叹号(!):
     [属性名!=属性值]
     运行下面的代码,选出没有foo class的全部段落:
     $("p[class!=foo]");

17.子元素过滤器
     子元素过滤器是:even、:odd和:eq()的一种代用品。主要的区别在于这一套选择器起始索引为1而不是0
     匹配奇数索引值/偶数索引值/特定索引值的元素      :nth-child()
     4个参数选项:even、odd、index和equation
     这个过滤器的索引也是从1而不是0开始,这样第一个元素的索引就是1而不是0,第2个元素是2,以此类推
     选择第一个或最后一个子元素
:first-child和:last-child返回的元素集合可能含有不止一个匹配元素
     $("p span:last");       //找回段落内的最后一个span


18.表单过滤器
      按表单元素配匹类型
       button、:checkbox、:file、:image、:input、:password、:radio、:submit和:text
         $("input:radio");       //选择全部单选按钮
         按匹配可禁用的表单元素 enabled和:disabled
         $(":disabled");                //选择所有被禁用表单元素
         匹配选中和未选中的表单元素  checked和:selected
$(":checked");                //当前选中的单选按钮
posted on 2012-10-12 10:25  风景依旧  阅读(149)  评论(0编辑  收藏  举报