首页 > 代码库 > jquery选择器

jquery选择器

jquery选择器

 

  (1).ID选择器

    $("#div1");

 

  (2).标签选择器

    $("div");

 

  (3).类选择器

    $(".d1");

 

  (4).通配选择器

    $("*");

 

  (5).复合选择器

    $("#div1,.d1,body");

 

  (6).后代元素选择器

    $("div span");

 

  (7)子元素选择器

    $(".d1>span");

 

  (8)相邻元素选择器(匹配的是必须紧跟第一个选择器后面的元素)

    $(".d1+a");

 

  (9)同辈元素选择器

    $("#div1~p");

 

  (10)基本过滤选择器(过滤出第一个元素)

    $("p:first");

 

  (11)基本过滤选择器(过滤出最后一个元素)

    $("p:last");

 

  (12)当独立使用:first:last过滤选择器时查找起始点为html

    $(":first");

    $(":last");

 

  (13)匹配p元素中不包含not()括号中选择器的元素

    在使用not不包含过滤选择器时不要在括号内部使用‘‘单引号 或者双引号""

    $("p:not(:last)");

 

  (14)基本过滤选择器(过滤偶数行和过滤奇数行)index索引值从 0开始

    //第一行为偶数行

    $("ul>li:even");  //偶数

    $("ul>li:odd"); //奇数

 

  (15):eq过滤选择器的index是从0开始的并且支持负数,index为负 数的话则从后面往前匹配(倒数)

    $("ul>li:eq(0)");

    $("ul>li:eq(-2)"); //倒数,从后面数第二个

 

  扩展:

    console.log($("ul>li").get(0).innerHTML);

    //.get(0)将获得的元素转换成原生的DOM对象,所有要获得元素的值要用.innerHTML,不要用.html();

    console.log($("ul>li").get(-1).innerHTML);

    //.get()也支持负数

 

  (16).:gt过滤选择器的index是从0开始的,匹配大于第index个的元素

    $("ul>li:gt(2)");

 

  (17).:lt过滤选择器的index是从0开始的,匹配小于第index个的元素

    $("ul>li:lt(2)");

 

  (18).匹配所有p元素并且拥有class属性的

    $("p[class]");

 

  (19).匹配所有p元素中并且class=p2的元素

    $("p[class=p2]");

 

    (20).匹配页面所有元素中并且class属性值以p开头的元素

    $("p[class^=p]");

 

  (21).匹配页面所有元素中并且class属性值以1结束的元素

    $("p[class$=1]");

 

  (22).匹配页面所有元素中并且id属性值中包含i的元素

    $("[id*=i]");

 

  (23).复合属性过滤选择器

    //先匹配class包含1的元素

    //从第一次结果中再次匹配classp开头的元素

    //从第二次结果中再次匹配attr=a1的元素

    $("[class*=1][class^=p][attr=a1]")

 

jquery选择器