2022-06-08 jQuery笔记(二) jq操作class,操作属性,操作偏移量

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/125175871

本文详细介绍了jQuery中如何操作class，包括添加、删除和切换；讲解了attr()和prop()在设置、获取和删除元素属性方面的应用；并探讨了jQuery的offset()和position()在处理元素偏移量上的区别和使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.jQuery操作class

1.1.为节点添加和删除一个class

代码

<style>
    .active {
        background-color: gold;
    }
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <div id="box">世界</div>
    <script>
        $("#box").addClass("active");
        //$("#box").removeClass("active");
    </script>
</body>

结果

div节点获得class=“active”

1.2.添加删除class的使用场景:选项卡的快速切换

代码(思路:链式操作+隐式迭代)

<ul>
    <li>hello</li>
    <li class="active">hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>
<script>
    // 思路一:先删除所有li的class,再为当前选中的li添加class
    // $("ul li").removeClass("active").eq(4).addClass("active"); //实际应用中4要改成随鼠标或上下键而切换
    // 思路二:先给目标li添加class,再把其他的所有表兄弟删除class
    $("ul li").eq(4).addClass("active").siblings().removeClass("active"); //实际应用中4要改成随鼠标或上下键而切换
</script>

1.3.节点是否存在该class以及切换toggleClass

代码

$("ul li").eq(4).addClass("active").siblings().removeClass("active"); //实际应用中4要改成随鼠标或上下键而切换
console.log($("ul li").eq(4).hasClass("active")); //第五个li是否含有class:active==>true
$("ul li").eq(4).toggleClass("active");//若有则删除,若无则添加class
console.log($("ul li").eq(4).hasClass("active")); //第五个li是否含有class:active==>false

2.jQuery操作属性

attr()设置获取和删除元素属性

代码

<div id="box" index="1001">hello</div>
<button id="btn">点击</button>
<script>
    /*获取和设置*/
    //获取原生属性
    console.log($("div").attr('id')); //box
    //设置原生属性
    $("div").attr("id", "box2");
    console.log($("div").attr('id')); //box2

    //获取自定义属性
    console.log($("div").attr('index')); //1001
    //设置自定义属性
    $("div").attr("index", "1002");
    console.log($("div").attr('index')); //1002

    /*删除(不常用)*/
    $("div").removeAttr("index");
    $("#btn").attr("disable", true); //<div id="box2">hello</div>
</script>

prop()只能操作原生属性

代码

//获取原生属性
console.log($("div").prop('id')); //box
//设置原生属性
$("div").prop("id", "box2");
console.log($("div").prop('id')); //box2

//获取自定义属性
console.log($("div").prop('index')); //undefine
//设置自定义属性
$("div").prop("index", "1002");
console.log($("div").prop('index')); //节点并未变成<div index="1002"></div>
/*删除自定义属性*/
 $("div").removeProp("index");//节点并未变成<div></div>

结论

用attr()操作自定义属性,用prop()操作原生属性

3.jQuery操作偏移量

偏移量:节点距屏幕左方(offsetLeft)或上方(offsetTop)的距离

offset():获取距屏幕左上角的left和top值,若传参就是设置

获取和设置没有定位的元素的偏移量

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
    * { margin: 0;padding: 0;}
    div{margin: 50px;width: 100px;height: 100px; background: blue;}
</style>
<body>
    <div></div>
    <script>
        console.log($("div").offset()); //获取:Object{left:50,top:50}
        $("div").offset({//设置
            left: 100,
            top: 100
        });
        console.log($("div").offset()); //Object{left:100,top:100}
    </script>

设置和获取带有定位的元素的偏移量

<style>
    * { margin: 0;padding: 0;}
    div{position:absolute;margin: 50px;width: 100px;height: 100px; background: blue;}
    p{position:relative;width:50px;height:50px;background:red;}
</style>
<body>
    <div></div>
    <script>
        console.log($("p").offset()); //Object{left:50,top:50}
        $("p").offset({
            left: 100,
            top: 100
        });
        console.log($("p").offset()); //Object{left:100,top:100}
        //此处的结果是为p在div上的偏移量变为了left:50px和top:50px
    </script>

结果

在这里插入图片描述

结论

不论元素有无定位,offset()拿到的都是元素左上角到排母左上角的距离

position():获取有定位元素的距离,不支持设置

代码

<style>
    p { position: absolute; left: 30px;top: 30px;background: red;width: 50px;height:50px;}
</style>
<body>
    <div><p></p></div>
    <script>
        console.log($("p").position()); //Object{left:30,top:30}
    </script>
</body>