第六章jQuery选择器
一、jQuery选择器的分类:
1.基本选择器
2.层次选择器
3.属性选择器
4.基本过滤选择器
5.可见性过滤选择器
二、jQuery的基本选择器:
///基本选择器 //id选择器 //$("#div1").css(“background”,“red”);
//class选择器 //$(".p1").css("color","red"); //标签选择器 //$("p").css("color","red"); //并集选择器 //$("p,li").css("color","red"); //全局选择器 //$("*").css("color","red");
三、jQuery的层次选择器
//$("#div2 ul").css(“color”,“red”);
//2.子选择器 //$("#div2>p").css("color","red"); //3.相邻选择器 //$(".p1+p").css("color","red"); //4.同辈元素 //$(".p1~p").css("color","red");
四、jQuery中的属性选择器:
//获取所有含有name属性的元素,颜色设置为红色
//$("[name]").css(“color”,“red”);
//2.name的值等于name的变成红色 //$("[name='name']").css("color","red"); //3.name的值不是name的变成红色 //$("[name!='name']").css("color","red"); //4.name的值以p开头的变成红色 //$("[name^=p]").css("color","red"); //5.name的值以e结尾的颜色变成红色 //$("[name$=e]").css("color","red"); //6.2019年6月21日11:38:40 //name的值中包含e的字体颜色变红 //$("[name*=e]").css("color","red"); //7.选取含有id属性,并且name的值中包含e的元素,,字体颜色变成红色 //$("[id][name*=e]").css("color","red");
五、jQuery的过滤性选择器:
//$(“li:first”).css(“color”,“red”);
//2.将最后一个li变成红色 //$("li:last").css("color","red"); //3.选取class不是p1的元素变成红色 //$("li:not(.p1)").css("color","red"); //4.所有li的索引是偶数的背景色换一下 //$("li:even").css("background","red"); //5.所有li的索引是奇数的背景色换一下 //$("li:odd").css("background","red"); //6.索引等于2的li变成红色 //$("li:eq(2)").css("color","red"); //7.索引大于1的li变色 //$("li:gt(1)").css("color","red"); //8.索引小于2的li变色 //$("li:lt(2)").css("color","red"); //9.所有的标题元素变成红色 //$(":header").css("color","red");
六、可见性过滤器:
//$(":visible").css(“color”,“red”);
//2.将隐藏的元素变色 $("h3").hide(); $(":hidden").css("color","red");