jq子元素过滤选择器

来源：互联网发布：香港宽频网络编辑：程序博客网时间：2024/05/16 06:57

jq子元素过滤选择器

主要通过jq选择器中的伪类选择器，进行设置。

样式css

div,span,p {width:140px;height:140px;margin:5px;background:#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana;}div.mini { width:55px;height:55px;background-color: #aaa;font-size:12px;}div.hide { display:none;}

页面

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-10</title> <link rel="stylesheet" type="text/css" href="css/style.css" /></head><body>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>  <h3>子元素过滤选择器.</h3>  <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>  <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>  <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>  <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/><br /><br />   <!-- 测试的元素 --><div class="one" id="one" >id为one,class为one的div<div class="mini">class为mini</div></div><div class="one"  id="two" title="test" >id为two,class为one,title为test的div.<div class="mini"  title="other">class为mini,title为other</div><div class="mini"  title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;"  class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/></div></body></html>

<script src="js/jquery-3.2.1.js" type="text/javascript"></script><script type="text/javascript">   //   $("#reset").click(function () {      $("div").css('background',"#aaa");    })//    选取每个class为one的div父元素下的第2个子元素$("#btn1").click(function () {    $(" .one div").css('background',"none");   $(" .one div:nth-child(2)").css('background','red')})//选取每个class为one的div父元素下的第一个子元素$("#btn2").click(function () {    $(" .one div").css('background',"none");    $(" .one div:first-child").css('background','#bbffab')})//选取每个class为one的div父元素下的最后一个子元素$("#btn3").click(function () {    $(" .one div").css('background',"none");    $(" .one div:last-child").css('background','#f99dff')})   //如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.$("#btn4").click(function () {    $(" .one div").css('background',"none");    $(" .one div:only-child").css('background','#fff')})</script>

阅读全文

1 0