首页 > 代码库 > jQuery选择器
jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件的处理,遍历DOM和Ajax操作都依赖于选择器
基本选择器:6种:
标签选择器
语法:element 返回值:元素集合
标签选择器:
//$("h1").css("color","red")
类选择器
//$(".myclass").css("color","green")
ID选择器 :
语法:.class 返回值:元素集合
//$("#myid").css("color","yellow")
并集选择器 :
语法:#id 返回值:单个元素
//$("div#my").css("color","blue")
交集选择器:
语法:selector1, selector2...selectorN 返回值:元素集合
//$("div,#my").css("color","yellow")
全局选择器:
语法:* 返回值:集合元素
$("*").css("color","yellow")
层次选择器:后代选择器:
语法:ancestor descendant 返回值:元素集合
后代选择器:
$("A B").css("color","yellow")
子选择器:
语法:parent>child 返回值:元素集合
定位的只是直接子类
$("A>B").css("color","yellow")
相邻元素选择器:
语法:prev+next 返回值:元素集合
$("A+B").css("color","yellow")
同辈元素选择器:
语法:prev~sibings 返回值:元素集合
锁定prev之后的元素,不能锁定prev之前的元素
$("A~B").css("color","yellow")
属性选择器:
$(“[class=odds]”).css(“background”,”red”)
$(“[id!=box]”).css(“background”,”red”)
Title元素中以h开头:
$(“[title^=h]”).css(“background”,”red”)
Title元素中以jp结尾:
$(“[title$=jp]”).css(“background”,”red”)
Title元素中以含s的:
$(“[title*=s]”).css(“background”,”red”)
包含class属性 且title属性值中含有s的li元素
$(“li[class][title*=s]”).css(“background”,”red”)
过滤选择器:
基本过滤选择器:
//$("li:first").css("background","#09F") //第一个
//$("li:last").css("background","#09F") //最后一个
//$("li:not(.three)").css("background","#09F") //class不为three的
//$("li:even").css("background","#09F") //索引值为偶数的
//$("li:odd").css("background","#09F") //索引值为奇数的
//$("li:eq(1)").css("background","#09F") //索引值等于一
//$("li:gt(1)").css("background","#09F") //索引值大于一
//$("li:lt(1)").css("background","#09F") //索引值小于一
//$(":header").css("background","#09F")
//所有标题
$(":focus").css("background","#09F")
//获取焦点的元素的背景颜色
可见性过滤选择器:
执行结果:
jQuery选择器