jQuery选择器整理

		第六章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的层次选择器
//1.后代选择器
//$("#div2 ul").css(“color”,“red”);

//2.子选择器
//$("#div2>p").css("color","red");

//3.相邻选择器
//$(".p1+p").css("color","red");

//4.同辈元素
//$(".p1~p").css("color","red");

四、jQuery中的属性选择器：
//1.包含给定属性选择器的元素
//获取所有含有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的过滤性选择器：
//1.将第一个li变成红色
//$(“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");

六、可见性过滤器：
//1.所有可见元素变色
//$(":visible").css(“color”,“red”);

//2.将隐藏的元素变色
$("h3").hide();
$(":hidden").css("color","red");