jQuery7(多条件选择器,层次选择器)

最新推荐文章于 2022-08-02 20:27:37 发布

天赋进行时

最新推荐文章于 2022-08-02 20:27:37 发布

阅读量617

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50639335

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

多条件选择器

关键点:当使用$('') ,引号内的内容可以写多个.
实例:

<!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>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //多条件选择器
                $('p,.cls,strong').css('backgroundColor', 'red');
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="效果" id='btn' />
    <p>
        这是p
    </p>
    <strong>这是strong</strong>
    <div class='cls' style='width: 300px; height: 300px; background-color: Green;'>
    </div>
</body>
</html>

层次选择器

空格
语法:$('div p').div层中所有的p标签

大于号>
语法:$('div>p') div层中直接的p元素,不含嵌套

加号+
语法:$('div+p') div层后面的第一个子元素,必须是p标签,直接的p标签.不往后顺延

波浪线~
语法:$('div~p') div层后面的直接p标签

实例:

<!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>
    <title></title>
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //第一种,直接加空格. div层中所有的p标签改变
                //$('div p').css('backgroundColor', 'red');
                //直接的子元素中,不包含嵌套什么的
                $('div>p').css('backgroundColor', 'red');
                //层后面第一个子元素,必须是p标签,必须是直接的p标签
                // $('div+p').css('backgroundColor', 'red');
                //层后面所有的直接p标签
                // $('div~p').css('backgroundColor', 'red');
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="显示效果" id='btn' />
    <p>
        外面p第一个
    </p>
    <p>
        外面第二个
    </p>
    <div style='width: 300px; height: 200px; background-color: Gray;'>
        <p>
            里面第一个
        </p>
        <p>
            里面第二个
        </p>
        <strong>
            <p>
                strong中的p标签</p>
        </strong>
        <p>
            里面第三个
        </p>
        <p>
            里面第四个
        </p>
    </div>
    <strong>
        <p>
            后面第一个
        </p>
    </strong>
    <p>
        后面第一个
    </p>
    <p>
        后面第二个
    </p>
</body>
</html>

天赋进行时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery7(多条件选择器,层次选择器)

多条件选择器关键点:当使用$('') ,引号内的内容可以写多个. 实例:<!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"
复制链接

扫一扫