Javascript 寒假练习（三）jQuery选择器-CFANZ编程社区

学习目标：能够使用jQuery选择器获取标签元素。

jQuery选择器的种类：

标签选择器类选择器 id选择器层级选择器属性选择器

示例代码：

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //  获取标签对象
            var $p = $('p');
            //  通过length判断标签是否被选中
            alert($p.length);
            //  通过jQuery设置标签样式
            $p.css({"color": "red"});

            var $div1 = $('.div');
            alert($div1.length);

            var $div2 = $('#box1');
            alert($div2.length);

            var h1 = $("div h1")
            alert($h1.length);
            //有两个input 选择其中一个
            var $input = $("input[type=text]");
            alert($input.length);
        });
    </script>
</head>
<body>
    <p>I am P</p>
    <div class="div1">class</div>
    <div id="box1">Id</div>
    <div>
        <h1>层级</h1>
    </div>
    <input type="text">
    <input type="button">
</body>

结论：jQuery选择器获取标签，与css选择器匹配标签的方式一样。

选择集过滤：

1. has（选择器名称）方法，表示选取包含指定选择器的标签

2. eq（索引）方法，表示选取指定索引的标签

    <script>
        $(function(){
            //  通过jQuery选择器获取html标签
            var $divs = $("div");
            //  获取包含有指定选择器的父标签
            //  设置css查看是否选取
            $divs.has(".pName").css({"background" : "red"});

            //根据下标选择指定的标签
            $divs.eq(1).css({"background":"blue"});
        });
    </script>
<body>
    <div>
        <p class="pName">Haha</p>
    </div>
    <div>
        <p>hihihihi</p>
        <input type="button" value="按钮">
    </div>
</body>

选择集转移：

以选择标签为参照，然后获取转移后的标签。

示例：

    <!-- 选择集转移: 根据指定标签为参照物，选中其他标签-->
    <script>
        $(function(){
            //获取div 并且作为参照物
            var $div = $("#box1")
            //  css参数是一个js对象 与python中的字典类似
            //  选择上一个同级标签
            $div.prev().css({"color":"red", "font-size":"25px"});
            //  选择上一个所有同级标签
            $div.prevAll().css({"text-indent":"50px"});

            //  选择下一个同级标签
            $div.next().css({"color":"green", "font-size":"25px"});
            //  选择下一个所有同级标签
            $div.nextAll().css({"text-indent":"50px"});

            //选择同级的其他标签
            $div.siblings().css({"text-decoration":"underline"});
            
            //选择父标签
            $div.parent().css({"background":"gray"});
            //选择子标签
            $div.children().css({"color":"orange"});
            //查找指定的子标签
            $div.find(".divspan").css({"color":"yellow"});
        });
    </script>
<body>
    <div>
        <div id="div1">first</div>
        <h2>二级标签</h2>
        <p>PPP</p>
        <div id = "box1"><span>I </span> am <span class="divspan">div</span></div>
        <h3>三级标签</h3>
        <p>hihihihi</p>
    </div>
</body>

ps: 我添加css是为了表示出是否找到对应的标签。

获取标签的内容并且改变标签的内容：

        $(function(){
            var $div = $div("#div1");
            $div.html();
            $div.html("<a href='https://www.baidu.com'>BaiDu</a>");
            // 追加html内容
            $div.append("<span style='color:red'> hello</span>");
        });

获取和设置元素属性：

prop方法的使用

    <script>
        $(function(){
            //get label
            var $p = $("p");
            var $text = $("#txt1")
            //获取样式属性，比如：获取字体大小
            var $px = $p.css("font -size");
            $p.css({"font -size":"30px","color":"green"});
            //  除了样式属于的相关操作使用css方法

            //获取属性
            var $name = $text.prop("name");
            alert($name);
            var $type = $text.prop("type");
            alert($type);

            //设置属性
            $text.prop({"value":"张三","class":"tname"});
            //获取value属性可以使用val方法
            //alert($text.prop("value"));
            alert($text.val());
            $text.val("李四");
        });
    </script>
</head>
<body>
    <p>I am a graph label</p>
    <input type="text" name="usrName" id="txt1">
</body>