jQuery_选择器超详细
一.基本选择器
$(“#demo”) ： 选择 id为demo的第一个元素
$(“#demo”).css(‘background’,’black”); //有多个只选择第一个
$(“.item”): 选择所有class为item的元素
$(“.item”).css(‘background’,’black”)
$(‘div’) : 选择所有标签为div的元素
$(‘div’) .css(‘background’,’black”)
$(“*”) :选择所有的元素，配合其他选择器来使用
$(“*”).css(‘background’,’black”)
$(‘.item,div’) :选择多个指定的选择器，这里是指item和div元素
$(‘.item,div’) .css(‘background’,’black”)
$(“li#aa”) : 交集选择器
$(“li#aa”) .css(‘background’,’black”)
二.层级选择器
层级选择器是选择了选择符后面的那个元素，比如，div > p ,是选择 > 后面的 p 元素
空格: 后代选择器,选择所有的后代
$(“div span”)
: 子代选择器，选择所有的子代元素
$(“div>span”)
- :紧邻选择器，选择该元素的紧邻选择器
$(“div+span”)
~ :兄弟选择器，选择该元素后面的兄弟元素
$(“div~span”)
三.过滤选择器
过滤选择器主要是以冒号开头：
A.基本过滤选择器
:eq(index)
index 是从0开始的一个数字 ，选择序号为index的元素$(“li:eq(2)”).css(‘background’,”red”)
//选中li 第三个元素设置背景颜色，选中第一个匹配元素:last
选择匹配最后一个元素$(“li:last”).css(‘background’,”red”)
// 选择li中最后一个元素:first
选择匹配第一个元素$(“li:first”).css(‘background’,”red”)
// 选择li中第一个元素:even / :odd
odd选择所有的序号为奇数的元素$(“li:odd”).css(‘background’,”red”)
//选中li奇数元素设置背景颜色:It(index)/:gt(index)
index是从0开始的一个数字 ，选择序号大于index$(“li:gt(2)”).css(‘background’,”red”) // 选中li 大于第三个元素设置背景颜色
B.内容过滤选择器
C.可见性过滤选择器
D.属性过滤选择器 $(“a”)
$(“a[attribute]”) : 选出属性为attribute的a元素
$(‘a[href]’).css(“color”,”red”);
$(“a[attribute = value] “) : 选出属性attribute为value值的a元素
$(‘a[href=“value”]’).css(“color”,”red”);
$(“a[attribute！=value]”) :选出所有属性值不为value的a元素，包括没有该属性的a元素
$(‘a[href!=“value”]’).css(“color”,”red”);
// 注意： $(‘a’).css(“color”,”red”) 没有href的a元素也会被选中$(“a[attribute^=value] “):选中以value开头的a元素
$(‘a[href^=“http”]’).css(“color”,”red”)
// 选中href值以http开头的a元素$(“a[attribute=value] “): 选中以value结尾的a元素。
（在attribute后面有美元符号，因为编辑原因无法显示 ）$(‘a[href$=“cn”]’).css(“color”,”red”);
//选中href值以cn结尾的a元素$(“a[attribute*=value]”) ：选中包含value的a元素 ，value可以是中英文
$(‘a[href*=“i”]’).css(“color”,”red”) 选中href值包含i的a元素
$(“a[attribute][attribute] “) ：满足这两个属性的a元素被选出来
$(‘a[href][title]).css(“color”,”red”)；
//选中有href和title属性的a元素
E.子元素过滤选择器
F.表单对象属性选择器
四.筛选选择器（方法）
.parent(expr)：选择父元素,可以筛选
$(“span”).parent().css(“font-size”,”40px”)
筛选： $(“span”).parent(.selected).css(“font-size”,”40px”).children(): 选择子元素
$(“span”).children().css(“font-size”,”40px”)
.siblings(): 选择兄弟元素,除了它自己其余的兄弟元素
$(“span”).siblings().css(“font-size”,”40px”)
.eq(index) :选择第index个
与：eq很相似，但.eq()是方法$(“span”).eq(1).css(“font-size”,”40px”) // 选择第一个span元素
.find():查找元素
$(“div”).find(“#one”).css(‘color’,”red”) //查找div下面的id为one的元素
.first():选择第一个元素
$(“span”).first().css(“font-size”,”40px”)
本是古典 何须时尚
╰+攻爆jí腚メ
小鱼儿
还没有评论，来说两句吧...