基础选择器
id选择器
标签选择器
类选择器
通配符选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础选择器</title> <script src="js/jquery-3.3.1.js"></script> </head> <body> <ul> <li id="brother">A</li> <li><a href="www.baidu.com">BaiDu</a></li> <li class="l3">C</li> <li>D</li> <li>E</li> </ul> </body> <script type="text/javascript"> <!--回调函数--> $(function () { //ID选择器 console.log($("#brother")); //通过ID选择器设置元素css样式 $("#brother").css("color","red"); //标签选择 //设置一个值 $("a").css("color","green") //设置多个值，设置多个值用字典对象存储 $("a").css({"font-size":"25px","color":"green"}) //类选择器 $(".l3").css("background","green") //通配符选择器，使用不频繁 $("*").css({"padding":"0","margin":"0"}) //清空整个html元素 // $("*").html("") }); <!--回调函数--> $(document).ready(function () { }) </script> </html>
高级选择器
层级选择器
后代选择器，空格
子代选择器>
兄弟选择器
//后代选择器 $("div p").css("color","red"); //子代选择器，不包括孙子类的标签 $("div >p").css("background","green"); //比邻选择器，匹配所有紧接在#brother元素后的下一个元素 $("#brother+ li").css("color","yellow"); //兄弟选择，匹配所有#brother之后的所有兄弟姐妹元素 $("brother~li").css("background","#996633"); //:first 获取第一个元素 $("li:first").text("ok?") //:last获取最后一个元素 $("li:last").html("sury?") //根据索引值选择，eq从零开始选择 var vl=$('p:eq(3)').text()
过滤选择器
/* * 基本过滤选择器*/ //:first 获取第一个元素 $("li:first").text("ok?") //:last获取最后一个元素 $("li:last").html("sury?") //:odd，匹配所有索引值为奇数的元素,从零开始 $("li:odd").css("color","red"); //:even，匹配所有索引值为偶数的元素,从零开始 $("li:even").css("color","yellow") //根据索引值选择，eq从零开始选择 var vl=$('p:eq(3)').text() //获取索引值比给定值大的索引元素 $("li:gt(1)").css("font-size","40px") //获取索引值比给定值小的索引元素 $("li:lt(1)").css("font-size","40px")
属性选择器
<script type="text/javascript"> $(function () { //标签[属性名] 查找所有含id属性的该标签元素 $("li[id]").css("color","red"); //[attr=value]匹配给定的属性是某个特定的元素 $("li[class=what]").css("font-size","30px"); //[attr!=value]匹配所有不含有指定属，或属性不等于指定值的元素 $("li[class!=what]").class("color","darkgreen"); //匹配给定的属性是以某些值开头的元素 $("input[name^=username]").css("background","red") }) </script>
jquery筛选选择器
链式调用
<script type="text/javascript"> $(document).read(function () { //获取第n个元素，数值从0开始 $("span").eq(n).css("font-size","40px"); //first()获取第一个元素 $("ul").first().css("background","green"); //last()获取最后一个元素 $("ul").last().css("background","green"); //.parent()选择父亲元素 $("span").parent(".p1").css({"width":"10px","height":"20px","background":"green"}); //.siblings()选择所有兄弟元素 $(".list").siblings("li").css("color","yellow"); //.find()查找所有后代元素 $('div').find('button').css("background","#313131") }) </script>