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的元素

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

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

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