获取多个选择器 用逗号隔开：$("#id值,.class值")

<script> $(function(){ /*基本选择器 $("#id值") $(".class值") $("标签名") 理解:获取多个选择器 用逗号隔开 $("#id值,.class值")*/ //<input type="button" value="选择 id为 one 的元素." id="btn1"/> $("#btn1").click(function(){ $("#one").css("background-color","aqua"); }) //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> $("#btn2").click(function(){ $(".mini").css("background-color","aqua"); }) //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> $("#btn3").click(function(){ $("div").css("background-color","aqua"); }) //<input type="button" value="选择 所有的元素." id="btn4"/> $("#btn4").click(function(){ $("*").css("background-color","aqua"); }) //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> $("#btn5").click(function(){ $("span,#two").css("background-color","aqua"); }) }) </script>

3.2 层次选择器 

a b:a的所有b后代

a>b:a的所有b孩子(不包括孙子)
a+b:a的下一个兄弟(大兄弟)
a~b:a的所有弟弟们

<script> $(function(){ /*层次选择器 a b:a的所有b后代 a>b:a的所有b孩子(不包括孙子) a+b:a的下一个兄弟(大兄弟) a~b:a的所有弟弟们*/ //<input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","blueviolet"); }) // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> $("#btn2").click(function(){ $("body>div").css("background-color","blueviolet"); }) //<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> $("#btn3").click(function(){ $("#one+div").css("background-color","blueviolet"); }) //<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> $("#btn4").click(function(){ $("#two~div").css("background-color","blueviolet"); }) }) </script>

3.3 基本过滤选择器
:frist 第一个
:last 最后一个
:odd  索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >索引大于哪一个值
:lt(index) <索引小于哪一个值

<script type="text/javascript"> $(function(){ /*基本过滤选择器 :frist 第一个 :last 最后一个 :odd 索引奇数 :even 索引偶数 :eq(index) 指定索引 :gt(index) >索引大于哪一个值 :lt(index) <索引小于哪一个值*/ //<input type="button" value="选择第一个div元素." id="btn1"/> $("#btn1").click(function(){ $("div:first").css("background-color","blueviolet"); }) //<input type="button" value="选择最后一个div元素." id="btn2"/> $("#btn2").click(function(){ $("div:last").css("background-color","blueviolet"); }) //<input type="button" value="选择索引值为偶数 的div元素." id="btn3"/> $("#btn3").click(function(){ $("div:even").css("background-color","blueviolet"); }) //<input type="button" value="选择索引值为奇数 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:odd").css("background-color","blueviolet"); }) //<input type="button" value="选择索引值等于3的div元素." id="btn5"/> $("#btn5").click(function(){ $("div:eq(3)").css("background-color","blueviolet"); }) //<input type="button" value="选择索引值大于3的div元素." id="btn6"/> $("#btn6").click(function(){ $("div:gt(3)").css("background-color","blueviolet"); }) }); </script>

3.4 内容过滤:
:has("选择器"):包含指定选择器的元素

<script type="text/javascript"> $(function(){ /* 内容过滤 :has("选择器"):包含指定选择器的元素*/ //<input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/> $("#btn1").click(function(){ $("div:has('.mini')").css("background-color","blueviolet"); }) }); </script>