jQuery选择器(6)

一:基本选择器
　　标签选择器：$("标签名"); 返回一组元素集合（匹配相同的标签名）
　　类选择器：$(".class类名"); 返回一组元素集合（匹配相同的class属性值）
　　id选择器：$("#id名"); 返回单个元素（匹配id属性值）
　　并集选择器：$("标签,class,id"); 返回一组元素集合（选择的元素）
　　全局选择器：$("*"); 返回一组元素集合（网页所有元素）

二.层次选择器
　　后代选择器  ancestor descendant 选取ancestor元素里的所有descendant（后代）元素 $("#menu span" )选取#menu下的<span>元素
　　子选择器 parent>child 选取parent元素下的child（子）元素 $(" #menu>span" )选取#menu的子元素<span>
　　相邻元素选择器  prev+next 选取紧邻prev元素之后的next元素 $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>  可用next()代替
　　同辈元素选择器 prev~sibings 选取prev元素之后的所有siblings元素 $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>  可用nextAll()代替

三.属性选择器
　　[attribute] 选取包含给定属性的元素 $(" [href]" )     选取含有href属性的元素
　　[attribute=value] 选取等于给定属性是某个特定值的元素 $(" [href ='#']" )     选取href属性值为“#”的元素
　　[attribute !=value] 选取不等于给定属性是某个特定值的元素 $(" [href !='#']" )      选取href属性值不为“#”的元素
　　[attribute^=value] 选取给定属性是以某些特定值开始的元素 $(" [href^='en']" )     选取href属性值以en开头的元素
　　[attribute$=value] 选取给定属性是以某些特定值结尾的元素 $(" [href$='.jpg']" )     选取href属性值以.jpg结尾的元素
　　[attribute*=value] 选取给定属性是以包含某些值的元素 $(" [href* ='txt']" )     选取href属性值中含有txt的元素

四.基本过滤选择器

/*获取第一个元素*/
$(".lis:first").css("color","green");
/*获取最后一个元素*/
$(".lis:last").css("color","blue");
/*忽略元素*/
$("a:not([href^=g])").css("background-color","pink");
/*奇数偶数：下标0开始，even偶数，odd奇数*/
 $("li:odd").css("background-color","pink"); 

/*定位到具体哪一个*/
$("li:eq(0)").css("color","red");
/*定位到大于位置的元素*/
$("li:gt(2)").css("background-color","pink");
/*定位到小于位置的元素*/
$("li:lt(2)").css("background-color","green");
/*定位到标题元素*/
$(":header").css("background-color","blue");    
/*获取有焦点的元素*/
$("#wht").focus();
$("input:focus").val('嗨喽');

/*获取动画元素*/
$("ul").fadeOut(3000).fadeIn(5000);
$("ul:animated").css("background-color","blue");

五、可见性选择器

　　:visible  选取所有可见的元素   返回集合元素  eg、$(":visible") 选取所有可见元素

　　:hidden 选取所有隐藏的元素　 返回集合元素  eg、$(":hidden") 选取所有隐藏元素
　　　　:hidden可以定位到隐藏元素，包含隐藏域等，如果说定位到的时隐藏域，显示时则修改type属性值，如果时普通元素则可以修改css样式display 
　　　　$("input:hidden").attr("type","visible");
　　　　$("input:hidden").css("display","block");
六、注意问题

　　1.选择器中有特殊符号的注意事项

　　　　使用转义符：\\

　　2.选择器中含有空格的注意事项

七、补充

　　1.find ：

　　　　当使用$(this)时，可用find()查找当前元素下的元素

　　2.each()迭代：
　　　　$("li").each(function(){
　　　　　　alert($(this).html());
　　　　});

 

转载于:https://www.cnblogs.com/xiao-ran/p/11346970.html