JQuery中的选择器

最新推荐文章于 2024-09-05 16:56:18 发布

xuezhengyyy

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量488

点赞数

本文链接：https://blog.csdn.net/xuezhengyyy/article/details/9253347

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择器</title>
<style type="text/css">
div,span,p {
   width: 150px;
   height: 150px;
   margin: 5px;
   background: #aaa;
   border: #000 1px solid;
   float: left;
   font-size: 12px;
}

.mini {
   width: 55px;
   height: 55px;
   background: #aaa;
}

.hide {
   display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
   $(function() {
       $("#btn1").click(function() {
           $(".mini, #one").css("background", "red");
       });
       $("#btn2").click(function() {
           $("body div").css("background", "blue");
       });
       $("#btn3").click(function() {
           $("body > div").css("background", "yellow");//parent > child    仅选择子元素
       });
       $("#btn4").click(function() {
           $("#one + div").css("background", "purple");//prev+next 前后元素选择紧接在prev元素后的next 元素
       });
       $("#btn5").click(function() {
           $("#two ~ div").css("background", "orange");//prev ~siblings 选择在prev元素后的所有sibling元素
       });
       $("#btn6").click(function() {
           $(":header").css("color", "gold"); //选取所有标题元素
       });
       $("#btn7").click(function() {
           $("div:last").css("background", "green");//选择最后一个元素
       });
       $("#btn8").click(function() {
           $("div:not(.one)").css("background", "pink");//:not(selector) 去除所有与给定选择器不匹配的元素
       });
       $("#btn9").click(function() {
           $("div:odd").css("background", "cyan");//:even /:odd 索引偶数或奇数，下标0开始
       });
       $("#btn10").click(function() {
           $("div:eq(3)").css("background", "black");//:eq(index) 选取下标为index 的元素单个元素
       });
       $("#btn11").click(function() {
           $("div:lt(3)").css("background", "white");//:gt(index) 选取下标小于index得元素
       });
       $("#btn12").click(function() {
           $("div:contains(test)").css("background", "#00ffbb");//:contains(text) 选择含有文本内容text的元素
       });
       $("#btn13").click(function() {
           $("div:empty").css("background", "#876543");//:empty   选择空元素
       });
       $("#btn14").click(function() {
           $("div:has(.mini)").css("background", "#345678");//:has(selector) 选取含有选择器所匹配元素的元素
       });
       $("#btn15").click(function() {
           $("div:parent").css("background", "#456789");//:parent 选取含有子元素或文本的元素
       });
       $("#btn16").click(function() {
           $("div:hidden").show(5000).css("background", "#741");//:hidden   选取所有隐藏的元素
       });
       $("#btn17").click(function() {
           $("div:visible").hide(5000).css("background", "#147");//visible    选取所有可见的元素
       });
       $("#btn18").click(function() {
           $("div:visible").hide(5000).css("background", "#147");
       });
       $("#btn19").click(function() {
           $("div[id][title^=t][title*=x]").css("background", "#369");//attr^=val] 选取含有属性是attr以val和attr含有val开头的元素
       });
       $("#btn20").click(function() {
           $("div:first-child").css("background", "#963");//:first-child 选取每个父元素中的第一个子元素
       });
       $("#btn21").click(function() {
           $("div:only-child").css("background", "#396");//:only-child   如果某个元素是它它父元素中唯一的子元素
       });
       $("#btn22").click(function() {
           $("div:nth-child(1)").css("background", "#693");//:nth-child(index) 选取每个父元素下的第index个元素
             :eq(x) 只匹配一个从0开始；:nth-child(x) 从1开始给每个父元素配子元素
       });
   });
</script>
</head>
<body>
   <input type="button" value="btn1" id="btn1">
   <input type="button" value="btn2" id="btn2">
   <input type="button" value="btn3" id="btn3">
   <input type="button" value="btn4" id="btn4">
   <input type="button" value="btn5" id="btn5">
   <input type="button" value="btn6" id="btn6">
   <input type="button" value="btn7" id="btn7">
   <input type="button" value="btn8" id="btn8">
   <input type="button" value="btn9" id="btn9">
   <input type="button" value="btn10" id="btn10">
   <input type="button" value="btn11" id="btn11">
   <input type="button" value="btn12" id="btn12">
   <input type="button" value="btn13" id="btn13">
   <input type="button" value="btn14" id="btn14">
   <input type="button" value="btn15" id="btn15" />
   <input type="button" value="btn16" id="btn16" />
   <input type="button" value="btn17" id="btn17" />
   <input type="button" value="btn18" id="btn18" />
   <input type="button" value="btn19" id="btn19" />
   <input type="button" value="btn20" id="btn20" />
   <input type="button" value="btn21" id="btn21" />
   <input type="button" value="btn22" id="btn22" />
   <input type="button" value="btn23" id="btn23" />
   <input type="button" value="btn24" id="btn24" />
   <input type="button" value="btn25" id="btn25" />
   <hr>
   <div class="one" id="one">
       id为one，class为one，的div
       <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test my">
       id为two，class为one，title为Test的div
       <div class="mini" title="test">class为mini,title为test</div>
       <div class="mini" title="xxxx">class为mini,title为xxxx</div>
   </div>
   <div class="one">
       <div class="mini">class为mini</div>
       <div class="mini">class为mini</div>
       <div class="mini">class为mini</div>
   </div>
   <div class="one">
       <div class="mini">class为mini</div>
       <div class="mini"></div>
       <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div></div>
   <div style="display: none" class="none">style为display：none的div</div>
   <div class="hide">class为hide的div</div>
   <div>
       包含隐藏域的div <input type="hidden" size="8" />
   </div>
   
</body>
</html>