jquary-------------层次选择器

最新推荐文章于 2023-04-06 14:35:13 发布

wangxiaohui6687

最新推荐文章于 2023-04-06 14:35:13 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

分类专栏： jquary 文章标签： xhtml div border function html 文档

本文链接：https://blog.youkuaiyun.com/wangxiaohui6687/article/details/7650910

jquary 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了jQuery中各种选择器的使用方法及其应用场景，包括后代选择器、子元素选择器、相邻兄弟选择器等，并通过具体示例展示了如何利用这些选择器进行DOM元素的样式修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一个选择器：（后代选择器：控制的是子子孙孙）

第二个选择器：只控制儿子级别的

l紧接相邻选择器prev + next可以使用next()方法替代

l后面相邻兄弟选择器prev ~siblings可以使用nextAll()方法替代

l选择前后相邻兄弟可以使用siblings()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#two{width:100px;height:100px;border:1px solid #000;display:none;}
div{width:200px;height:100px;border:1px solid #000;}
#three{height:400px;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
   $(function(){
       //$("#three ul").css("background","red")----------选取#three元素里面的所有的后代元素，改变背景颜色
       //$("#three>ul").css("background","red")----------选取#three元素里面子元素，改变背景颜色
       //$('h3+ul').css("background","red")--------选取H3的下一个兄弟元素ul，改变样式
       //$('#three h3+ul').css("background","red")--------选取#three里面的H3的下一个兄弟元素ul，改变样式
       //$('h3~ul').css("background","red")--------选取h3后面的H3的兄弟元素ul，改变样式（如果在h3前面，就无法改变样式）




           })
</script>
</head>

<body>

<h3>改变标题的原色</h3>
<div id="two">这是一个动画盒子</div>
<h3>这是h3</h3>
   <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
   </ul>
<div id="three">
   <h3>这是h3</h3>
   <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
   </ul>
    <div id="three_three" style="border:none">
    <ul>
      <li>2</li>
      <li>2</li>
      <li>2</li>
      <li>2</li>
      </ul>
    </div>
</div>
<div>
   <ul>
      <li>1</li>
      <li>1</li>
    </ul>
</div>
<div>第一个div</div>
<div>
   <p>2222222222</p>
</div>
<div></div>
</body>
</html>

第二次练习

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

#box {
   background-color: #F00;
   height: 500px;
   width: 500px;
}
#cengci {
   height: 500px;
   width: 500px;
   border:1px solid #F00;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
   $(function(){
/*       $("#box").click(function(){
               $(this).hide('slow',function(){//hide可以换成slideDown（up）
                       alert("我被隐藏了")
                   });
           })*/
       //$("#cengci ul").css("background-color","red")//后代选择器管理的是子子孙孙
       //$("#cengci > ul").css("background-color","red")//只控制儿子级别的
       //$("h3+ul").css("background-color","red")//所有H3元素的下一个元素会发生改变(可以用下面的next（）代替)
       //$("h3~ul").css("background-color","green");//只要在H3后面是我的兄弟元素就都会发生改变(可以用下面的nextAll（）代替)
       //$('div').css("background-color","#0000FF");
       //$('#cengci div').css("background-color","#0000FF");
       //$('#cengci+#two').css("background-color","#0000FF");
       //$('#cengci').next().css("background-color","#0000FF");
       //$("h3").nextAll("ul").css("background","red");//上面的4444就没有发生变化（想让444也变化就要用siblings）
       $("h3").siblings("ul").css("background","red")//选择所有同辈的兄弟元素
   })
</script>
</head>

<body>

   <ul>
      <li>44444444444</li>
      <li>44444444444</li>
      <li>44444444444</li>
      <li>44444444444</li>
   </ul>

<h3>下面的ul颜色会发生改变</h3>
   <ul>
      <li>11111111111</li>
      <li>11111111111</li>
      <li>11111111111</li>
      <li>11111111111</li>
   </ul>

<div id="cengci">
   <h3>下面的ul颜色会发生改变</h3>
   <ul>
      <li>11111111111</li>
      <li>11111111111</li>
      <li>11111111111</li>
      <li>11111111111</li>
   </ul>
    <ul>
      <li>333333</li>
      <li>333333</li>
      <li>333333</li>
      <li>333333</li>
   </ul>
    <div>
       <ul>
          <li>2222222222</li>
          <li>2222222222</li>
          <li>2222222222</li>
          <li>2222222222</li>
       </ul>
    </div>
</div>
<div id="two">
第二个div
</div>
<div id="two">
第二个div
</div>
</body>
</html>