1.基本选择器
body里面的代码 <body> <h1 id="movie">电影名称</h1> <ul class="uls"> <li>战狼</li> <li id="aa">英雄本色</li> <li>红海行动</li> <li>夏洛克只梦</li> </ul> </body> 记得要导入jQuery的包，目前我用的是这一个，可以去镜像库里面找 <script src="./jquery-3.1.1.js"></script> js里面的代码 <script> //id选择器 $("#movie").css('background-color','red'); //class类选择器 $(".uls").css('background-color','yellow'); //元素选择器 $('li').css('font-size','20px'); ///通配符选择器 $('*').css('color','blue'); ///同时选择多个，使用，分割 $('h1,#aa').css('font-weigt','800') </script>2.层次选择器
body里面的代码 <body> <h1 id="movie">电影名称</h1> <ul class="uls"> <li><span>战狼</span></li> <li id="aa">英雄本色</li> <li id="bb">红海行动</li> <li><span>夏洛克之梦</span></li> <span>更多电影细节</span> </ul> </body> 要导入jQuery里面的包 <script src="./jquery-3.1.1.js"></script> js里面的代码 <script> /*ancestor descendant 选取ancestor元素中的一切descendant(后代)元素 集合元素 $(“div span”)选取<div>里的所有的<span>元素 parent>child 选取parent元素下的child（子）元素 集合元素 $(“div>span”)选取<div>元素下的<span>子元素 prev next 选择相邻元素prev元素之后的next元素 集合元素 $(“.one div”)选取class为one的下一个<div>同辈元素 prev~siblings 选取prev元素之后的一切siblings(同龄人)元素 集合元素 $(“#two~div”)选取id为two元素背后的一切<div>同辈元素*/ //后代选择器 空格 $("ul span").css('font-size','20px'); ///子选择器 > $('.uls>span').css('color','red'); ///相邻元素的下一个元素 相邻的兄弟元素 $('#aa li').css('background-color','green'); //同龄人的所有元素 ~ $('#aa~li').css('font-family新宋体 </script>3.基本过滤器-2
body里面的代码 <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <h1 id="movie">电影名称</h1> <ul class="uls"> <li><span>战狼</span></li> <li id="aa">英雄本色</li> <li id="bb">红海行动</li> <li><span>夏洛克之梦</span></li> <li>西游记的女儿国</li> <li></li> <span>更多电影细节</span> </ul> <input type="text" autofocus="autofocus" /> </body> jquery要导入的包 <script src="./jquery-3.1.1.js"></script> js里面的代码 <script> /*:first 选择第一个元素 单个元素 $(“li:first)选择一切<li>第一个元素<li>元素 :last 选择最后一个元素 单个元素 $(“li:last)选择一切<li>最后一个元素<li>元素 :not(selector) 选择去除所有匹配给定选择器的元素 集合元素 $(“li:not(.demo)”)选取class不是demo的<li>元素 :even 选取所有索引值是偶数的元素（索引值从0开始） 集合元素 $(“li:even)索引值的选择是偶数的全部<li>元素 :odd 所有索引值都是奇数元素(索引值从0开始) 集合元素$(“li:odd)索引值的选择是所有奇数<li>元素*/ // :first 选择第一个元素 单个元素 $('li:first').css('background-color','aqua'); // :last 选取最后一个元素 单个元素 $('li:last').css('background-color','yellow'); // :not(selector) 选择去除所有匹配给定选择器的元素 $('li:not(#aa)').css('font-size','20px') // :even 所有索引值都是偶数元素(索引值从0开始) 集合元素 $('li:even').css('color','blue'); // :odd 所有索引值都是奇数元素 (索引值从0开始) $("li:odd").css('color','red') </script>4.基本过滤器-3
body里面的代码 <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <h1 id="movie">电影名称</h1> <ul class="uls"> <li><span>战狼</span></li> <li id="aa">英雄本色</li> <li id="bb">红海行动</li> <li><span>夏洛克之梦</span></li> <li>西游记的女儿国</li> <li></li> <span>更多电影细节</span> </ul> <input type="text" autofocus="autofocus" /> </body> jQuery要导入的包 <script src="./jquery-3.1.1.js"></script> js里面的代码 <script> /* :eq(index) 选择索引值等于index元素(索引值从0开始) :gt(index) 所有索引值的选择都大于index元素(索引值从0开始) :lt(index) 所有索引值都小于index元素(索引值从0开始)、 :header 选择所有标题元素，如h1~h6 :focus 选择当前获取焦点的元素* */ //document.ready(function(){}) $(function(){ $('li:eq(2)').css('background-color','yellow'); $('li:gt(3)').css('background-color','red'); $('li:lt(2)').css('background-color','orange'); $(':header').css('color','blue'); $(':focus').val(‘搜索’) }) </script>5.内容过滤器
body里面的代码 <body> <h1>电影名称</h1> <hr /> <ul> <li >红花二</li> <li class="movie">红海行动</li> <li cass="movie"><span>战狼</span></li>
<li>三国演义</li>
<li></li>
</ul>
</body>
jQuery要导入的包
<script src="./jquery-3.1.1.js"></script>
js里面的代码
<script>
// :contains(text) 选取包含给定文本的元素
// :empty 选取不包含子元素或者文本的空元素
// :has(selector) 选取含有选择器所匹配的元素的元素
// :parent 选取含有子元素或文本的元素
$(function(){
$("li:contains('红海')").css("font-size","30px");
/*$("li:empty").html("我是空标签");*/
$("li:has('span')").css("background-color","lightgreen");
$("li:parent").css("color","red");
})
</script>6.属性过滤器
body里面的代码
<body>
<ul>
<li title="红海行动" class="demo1">红海行动</li>
<li title="战狼" class="demo2">战狼</li>
<li title="西游记" class="exam01">西游记</li>
<li title="三国" class="exam02">三国</li>
<li title="水浒传" id="aa">水浒传</li>
<li></li>
</ul>
</body>
jQuery要导入的包
<script src="./jquery-3.1.1.js"></script>
js里面的代码
<script>
/* [attribute] 选取包含给定属性的元素
[attribute=value] 选取属性的值为value的元素
[attribute!=value] 选取属性的值不等于value的元素
[attribute^=value] 选取属性的值以value开始的元素
[attribute$=value] 选取属性的值以value结束的元素
[attribute*=value] 选取属性的值含有value的元素
[attribute1][attributeN] 选取满足所有属性选择器的元素
*/
$("li[id]").css("font-size","30px");
$("li[title='三国']").css("background-color","lightseagreen");
$("li[class!='demo1']").css("font-family","新宋体");
$("li[class^='demo']").css("background-color","yellow");
$("li[class$='2']").css("color","red");
$("li[class*='xa']").css("border","1px solid red");
$("li[title][id]").css("background-color","blue");
</script>