关于jquery选择器的转移

最新推荐文章于 2021-04-09 11:59:24 发布

Protagonists

最新推荐文章于 2021-04-09 11:59:24 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/owc1874/article/details/80744657

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //选取class名称为four的div标签
            var $div = $('.four')
            $div.css({"color":"red"})

            //平级关系,兄弟
                //上一个兄弟
                var $result = $div.prev();
                //位于前面的所有兄弟
                var $result = $div.prevAll();
                //下一个兄弟
                var $result = $div.next();
                //下面所有的兄弟
                var $result = $div.nextAll();
                //除了他自己以外其他所有平级的节点,也就是兄弟节点
                var $result = $div.siblings();
                // $result.css({"color":"green"})

            //父子关系
            //children和find查找子元素
            var $result = $div.children('p');
            var $result = $div.find('span');
            // $result.css({"color":"green"});
            
            //父元素parent
            var $result = $div.parent();
            $result.css({"color":"red"})
            
            


        })
    
    </script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <div class="four">4
        <p class="son">son son son</p>
        <span>hello world</span>
        <label for="">label</label>
    </div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</body>
</html>