今天估计是抽筋了,听着我嵩歌的有何不可,总结下jquery的选择器。
1、基本选择器:
id选择器:$("#b03").css("background","red"); //选上了id为b03的标签,并设置它的样式
类选择器:$(".liItem").css("background","red"); //选择所有类名为littem的标签
标签选择器:$("li").css("background","red"); //选择所有的li标签
* 通配符选择器:$("*").css("font-size","20px") // 选择所有的元素标签
, 并集选择器:$(".liItem,div").css("background","blue") 选择上类名为littem的标签和div标签
交集选择器:$("li#b03").css("font-size","20px") //选择id为b03 的li标签
2、层级选择器:侧重层次关系的选择
后代选择器:$(".wrap li").css("background","red") //选择 .wrap下所有li标签,注意后代选择器的中间有空格,与交集选择器有区别。
紧邻选择器 +: $(".wrap + div").css("font-size","30px"); // 紧邻选择器 如果后面有多个div 只选中了兄弟后面的第一个div,如果后面没跟div而是p,则浏览器不渲染,不起作用
子代选择器 >:$(".wrap > ul > li").css("font-size","30px"); //选择的是直接子代元素,与后代选择器有分别,
兄弟选择器 ~:$(".liItem ~ li").css("font-size","40px");
3、基本过滤选择器:在选择元素的里面进行过滤
$("li:odd").css("background","red"); //选择索引号为技术的 元素
$("li:even").css("background","green"); //选择索引号为偶数的元素
$("ul li:eq(4)").css("font-size","30px"); //选择索引号为4的元素
$("li:lt(6)").css("font-size","30px"); //选择索引号小于6的元素
$(".ulList1 li:gt(7)").css("font-size","40px"); //选择索引号大于7的元素
$(".ulList li:first").css("font-size","40px"); //选择第一个li元素
$("li:last").css("font-size","40px"); //选择最后一个li元素
4、属性选择器,用的比较少
/*$("a[href]").css("color","red");*/
// a[attr=value] 选择attr属性值为valuet的所有a(某)标签
$("a[href='http://web.itcast.cn']").css("font-size","40px");
//a [attr!=value] 选择attr属性值不为valuet的所有a标签
$("a[href!='http://www.baidu.com']").css("font-size","40px");
// [attr^=value] 选择attr属性值以valuet开头的所有a标签
$("a[href^='http']").css("font-size","40px");
// [attr$=value] 选择attr属性值以valuet结尾的所有a标签
$("a[href$='cn']").css("font-size","40px");
// [attr*=value] 选择attr属性值带有valuet的所有a标签
$("a[href*='it']").css("font-size","40px");
// [attr][attr] 都满足 交集
$("a[href][title*='的']").css("font-size","40px");
5、筛选选择器:在选择元素的外面进行第二次筛选,基本上都是方法。
// 类比 ":eq(index)" 选择器
$("span").eq(1).css("font-size","40px");
// .first() 没有参数 类比 ":first" 选择器
$("span").first().css("font-size", "40px");
//.parent() 没有参数 选择父亲元素
$("#sp").parent().css("background", "gold");
// 加入一个参数,选择ID为div的div
$("p").parent("#div").css("background", "gold");
//.siblings() 没有参数
//选择所有的兄弟元素,除了自己 带了参数就是选择兄弟时,只选择了带了参数的那个兄弟。
$("#li04").siblings(".liItem").css("background", "gold");
//.find() 没有参数
//查找所有后代元素 带参数则指后代中是参数的那个
$("div").find("#li04").css("background", "gold");