Jquery选择器过滤和转移

最新推荐文章于 2021-12-29 10:47:56 发布

lealiujj

最新推荐文章于 2021-12-29 10:47:56 发布

阅读量134

点赞数

分类专栏： html前端

本文链接：https://blog.csdn.net/lealiujj/article/details/99926195

版权

html前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通过 has eq过滤：
has(选择器名称)方法，表示选取包含指定选择器的标签
eq(索引)方法，表示选取指定索引的标签，标签从0开始
通过下面的方法来实现转移，相当于是反选：
prev(); 表示选择元素的上一个的同级元素
prevAll(); 表示选择元素的上面所有的同级元素
next(); 表示选择元素的下一个的同级元素
extAll(); 表示选择元素的下面所有的同级元素
.parent(); 表示选择元素的父元素
children(); 表示选择元素的所有子元素
siblings(); 表示选择元素的其它同级元素
find(’.myClass’);表示选择元素内的class等于myClass的元素（在所选择元素内的子元素中找）

Demo：
<!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="./js/jquery-1.12.4.min.js"></script>
    <script>
        // $(document).ready(function(){
        //     var $id= $("#d1");
        //     alert($id);
        //     alert($id.html);
        // });
        window.onload = function(){
            var id=document.getElementById("d1");
            alert(id.innerHTML)
        };
        $(function(){
            var $id=$("#d1");
            alert($id)
        });
        $(function(){
            // id选择器
            var $b1 = $("#d1");
            alert("通过id选择器选择的个数："+$b1.length);
            var $b2 = $("div");
            alert("通过标签选择器选择的个数："+$b2.length);
            var $b3=$("div h1");
            $b3.css({"color":"red"});
            alert($b3.html());
            $b3.html("你好你好!")
            alert("通过层级选择器选择的个数："+$b3.length);
            var $b4=$("input[type=button]");
            alert("通过属性选择器选择的个数："+$b4.length);
            var $b5=$(".la");
            alert("通过类选择器选择的个数："+$b5.length);

        });
        // 过滤选择器，通过has再次使用选择器，通过筛选子标签锁定父标签
        $(function(){
            var $t1 = $("tr");
            $t1.has(".tr1").css({"background":"blue"});
            $t1.eq(1).css({"background":"blue"});
        });
        // 选择器转移
        $(function(){
            var $c1 = $(".td2").prevAll().css({"background":"green"});
     $c1.prop({"class":"td1"}); //设置非css属性
        });

    </script>
    <!-- <style>
        p {
            background: blue;
        }
    </style> -->
</head>
<body>
    <div id="d1">
        hahahaah
    </div>
    <div>
        <h1>hehe</h1>
    </div>
    <input type="text">
    <input type="button" value="ok">
    <label for="" class="la">lable</label>
    <div>
        <table>
            <tr class="tr1">
                <th >ha1</th>
                <th>ha2</th>
                <th>ha3</th>
            </tr>
            <tr>
                <td>op1</td>
                <td class="td2">op2</td>
                <td>op3</td>
            </tr>
        </table>
    </div>
    
</body>
</html>

lealiujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery选择器过滤和转移

通过 has eq过滤has(选择器名称)方法，表示选取包含指定选择器的标签eq(索引)方法，表示选取指定索引的标签，标签从0开始通过prev(); 表示选择元素的上一个的同级元素prevAll(); 表示选择元素的上面所有的同级元素next(); 表示选择元素的下一个的同级元素extAll(); 表示选择元素的下面所有的同级元素.parent(); 表示选择元素的父元素chil...
复制链接

扫一扫

专栏目录