jQuery中的选择器

最新推荐文章于 2024-10-31 15:39:18 发布

原创最新推荐文章于 2024-10-31 15:39:18 发布 · 175 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

12 篇文章

订阅专栏

/*id选择器
$("#id属性值");
标签选择器
$("标签名字");
类选择器-----标签+类选择器
$(".类样式的名字");
交集选择器-----多条件选择器
$("标签名.类样式名字");
并集选择器
$("标签名字，.类样式名字,#id选择器");
层次选择器
$("选择器选择器");---->$("#dv span")
$("选择器> 选择器");---->$("#dv span")
$("选择器 ~选择器");---->$("#dv span")
$("选择器 +选择器");---->$("#dv span")
//获取的是div这个父级元素中所有span标签（直接的子元素，孙子元素）
//$("#dv span").css("backgroundColor","red");
//
//$("#dv>span").css("backgroundColor", "red");
//获取的是div这个父级元素后面的所有的兄弟元素--span
// $("#dv~span").css("backgroundColor", "red");
//div后面的直接的兄弟元素
$("#dv+span").css("backgroundColor", "red");

* */

层次选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //点击按钮，设置div中span的样式
            //层次选择器
            $("#btn").click(function () {
                //获取的是div这个父级元素中所有span标签（直接的子元素，孙子元素）
                //$("#dv span").css("backgroundColor","red");
               ///获取的是div这个父级元素中所有的子元素span标签
                //$("#dv>span").css("backgroundColor", "red");
               //获取的是div这个父级元素后面的所有的兄弟元素--span
                //$("#dv~span").css("backgroundColor", "red");
                //div后面的直接的兄弟元素
               $("#dv+span").css("backgroundColor", "red");
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<span>这是div前面的兄弟元素span</span>
<div id="dv">
    <span>第一个span</span>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <span>第二个li中的span</span>
        <span>第二个li中的span</span>
        <li>第三个li</li>
    </ul>
    <span>第二个span</span>
    <span>第三个span</span>
</div>

<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
</body>
</html>