jQuery2.3--层次选择器

层次选择器:查找子元素, 后代元素, 兄弟元素的选择器

  • ancestor descendant :给定的祖先元素下匹配所有的后代元素
  • parent>child :在给定的父元素下匹配所有的子元素
  • prev+next :匹配所有紧接在 prev 元素后的 next 元素
  • prev~siblings :匹配 prev 元素之后的所有 siblings 元素
    可以用nexAll() 代替siblings
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script>
        /*
         需求:
         1. 选中ul下所有的的span
         2. 选中ul下所有的子元素span
         3. 选中class为box的下一个li
         4. 选中ul下的class为box的元素后面的所有兄弟元素
         */
        $(function(){
            //1. 选中ul下所有的的span --->后代选择器
            $('ul span').css('background','red');
            //2. 选中ul下所有的子元素span --->子元素选择器
            $('ul>span').css('background','yellow');
            //3. 选中class为box的下一个li
            $('.box+li').css('background','green');
            //4. 选中ul下的class为box的元素后面的所有兄弟元素
            $('.box').nextAll('*').css('background','pink');
        })
    </script>
</head>
<body>
<ul>
    <li>AAAAA</li>
    <li class="box">CCCCC</li>
    <li title="hello"><span>BBBBB</span></li>
    <li title="hello"><span class="box">DDDD</span></li>
    <span>EEEEE</span>
</ul>
</body>
</html>

在这里插入图片描述

发布了119 篇原创文章 · 获赞 1 · 访问量 3987

猜你喜欢

转载自blog.csdn.net/weixin_42139212/article/details/103443369