jquery学习-基本选择器

jquery选择器也就是使用jquery方法简单快速的查找元素。

1.）jquery基本选择器：

id选择器：用#号 + 标签名称来表示。
类选择器：用.(点) + 标签名称来表示。
标签选择器：用标签名称来表示。
子元素选择器：用>符号来表示。
后代选择器：用空格来表示。
组合选择器：多元素选择器。

几个基本选择器的代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <style type="text/css">
        #box1,.box2{
            height: 100px;
            width: 100px;
            border: 1px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div class="box2"></div>
    <p>12155</p>
    <p>13215</p>
    <div id="box3">
        <div class="box3">
            <p>22222</p>
            <p>22222</p>
        </div>
    </div>
    <script>
        $('#box1').css('background','green');
        //id选择器：选择id为box1的元素，设置它的css样式背景颜色为green。
        //css（)方法：用来设置或者获取css样式。

        $('.box2').css('background','gray');
        //类选择器：选择类为box的元素，设置它的css样式背景颜色为gray。

        $('p').css('color','red');
        //标签选择器：选择标签名称为p的元素，设置它的css样式背景颜色为red。

        $('#box3 .box3').css('background','gray');
        //后代选择器：选择id为box3的后代元素，这个后代元素的类名称为box3，
        // 再将这个后代元素css样式背景颜色为gray。

        $('.box3 > p').css('color','red');
        //子元素选择器：选择类名称为box3下所有名称为p的子元素。

        $('#box1,.box2,#box3,.box3').css('background','red');
        //组合选择器：选择id为box1、类名称为box2，id为box3，类名称为box3这几个元素。
        //设置它的css样式背景颜色为red。
    </script>
</body>
</html>

jquery学习-基本选择器

1.）jquery基本选择器：

猜你喜欢