首页 > 代码库 > 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的元素
//从第一次结果中再次匹配class以p开头的元素
//从第二次结果中再次匹配attr=a1的元素
$("[class*=1][class^=p][attr=a1]")
jquery选择器