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

前端OnTheRun

已于 2022-09-28 12:51:55 修改

阅读量209

点赞数

分类专栏： jQuery 笔记文章标签： jquery javascript 前端

于 2022-06-08 00:13:46 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/125175871

版权

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

摘要由CSDN通过智能技术生成

文章目录

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要改成随鼠标或上下键而切换