Jquery选择器大全汇总

一.选择器

　1.三个基本选择器，$("#ID") 、$(".className") 、$("tagName")

　2.其他选择器

　//html页面

<ul>

扫描二维码关注公众号，回复： 6170686 查看本文章

</ul>

　　　　</select>

　　 </div>

　　//层级选择器

$("ul li").css("font-size","50px");　　//选取ul下的li元素

$("ul li").html("替换内容").css("font-size","50px");　

$(".box+h1").css("color","red"); //类名为.box紧挨着的h1元素

$("h1~.box").css("background","yellow"); //选取h1后面所有类名为.box的所有兄弟元素

　　//过滤选择器

　　 $("ul li:first").css("background","red"); 　　　　　　//选取ul下的第一个li

　　 $("ul li:first").css("background","red"); 　　　　　//选取ul下的第一个li

$("ul li:eq(1)").css("background","green"); 　　　　//选取ul下索引为1的li，即第二个

$("ul li").eq(1).css("background","yellow"); 　　　　//上面这行也可以这样写，选取ul下索引为1的li,即第二个

$("ul li:odd").css("font-size","100px"); 　　　　　　 //选取ul下的偶数项li

$("ul li:not(.nob)").css("border","3px solid #000"); //选取ul下的li，除开类名为.nob的其他所有项

$("ul li:lt(2)").css("height","50px"); 　　　　 //选取ul下的索引编号小于2的li，即前2个

$(":header").css("color","pink"); 　　　　//选中标题标签，所有h标签都被选中

　　//内容过滤

$("li:contains(li1)").css("color","red");　　　　　　//选取li元素，同时文本内容包含li1的

$("li:empty").css({height:100,background:"red"}); //选取li元素，且文本内容为空的

$("li:has(span)").css("border","1px solid green"); //选取嵌套span标签的li元素

　　$("li:parent").css("background","yellow"); 　　　 //选取父元素下面含有li标签的父元素

　　//可见性过滤

　　$(".box:hidden").css("width","200px");　　　　　　//注意$符号括号里面没有空格，表示要同时满足2个条件

　　$(".box:visible").css("background-color","pink"); //选中类名为box的标签，同时要满足是可见的

　　//属性过滤

　　$("div[title]").css("background-color","pink");　　//从所有div标签选取带属性title的标签

　　$("div[title=one]").css("color","yellow");　　　　 //从所有div标签选取带属性title且值为one的标签

　　$("div[title][class=a]").css("color","red");　　　　//从所有div标签选取带属性title和带class=a属性值的标签

　　//子元素过滤

　　$("li:nth-child(2)").css("background-color","red"); //选取每个父元素下第2个li元素

　　$("li:nth-child(odd)").css("font-size","50px"); 　　//选取每个父元素下奇数项li元素

　　$("li:first-child").css("color","blue"); 　　　　 //选取每个父元素下第一个li元素

　　$("li:only-child").css("font-style","italic"); 　　//选取每个父元素下只有一个li元素的li元素

　　//表单类型

　　$(".box :input").css("background-color","pink");　　//选取所有input、textarea、select、button元素

　　$(".box :text").css("font-size","10px");　　　　　　　//选选取所有的单行文本框

　　$(".box :password").css("font-size","20px");　　　　//选取所有的密码框

　　$(".box :radio").css("font-size","30px");　　　　　　//选取所有的单选框

　　$(".box :checkbox").css("font-size","40px");　　　　//选取所有的多选框

　　$(".box :submit").css("font-size","50px");　　　　　　//选取所有提交按钮

　　$(".box :button").css("font-size","60px");　　　　　　//选取所有的按钮

　　$(".box :file").css("font-size","70px");　　　　　　　　//选取所有的上传域

　　$(".box :hidden").css("font-size","80px");　　　　　　//选取所有不可见元素

</script>

Jquery选择器大全汇总

猜你喜欢