jquery学习-常用dom属性相关⽅法

最新推荐文章于 2024-07-05 14:21:58 发布

深山老妖&

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量118

点赞数

分类专栏： jquery学习笔记文章标签： jquery中dom属性相关方法

本文链接：https://blog.csdn.net/qq_39573741/article/details/84569670

版权

jquery学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

dom属性相关⽅法：

addClass():为匹配的元素添加一个class类（样式）.。
removeClass():移出集合中匹配元素的一个或多个class类。
toggleClass():切换类，如果有就删除，如果没有就添加。
html()方法和text()方法：获取或者设置相应的内容，如果里面传入内容表示设置如果为空表示获取。

注意：
1.）这里的html方法等价于原生js中的innerHtml方法(它会去掉html标签)。
2.）这里的text方法等价于原生js中的innerText方法(它是设置、获取文档内容,不会去掉html标签)。

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        .red{
            margin: 30px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button>添加类跟样式</button>
    <button>移出类跟样式</button>
    <button>切换类</button>
    <div id="box"></div>
   <script>
       $(function () {
           $("button:first").click(function () {
               $('#box').html('<p>hello</p>').addClass('red');
               //当点击第一个button的时候，获取di为box的元素，给它设置html内容，再添加一个名为red的类。
           });

           $('button:eq(1)').click(function () {
               $("#box").removeClass('red');
               //点击下标为1的button元素时，获取di为box的元素，删除它上面名为red的类。
           });

           $('button:eq(2)').click(function () {
              $("#box").text('<p>hello</p>').toggleClass('red');
               /*当点击下标为2的button元素时，获取di为box的元素，设置它的内容，
               再切换名为red的类(当有这个类的时候就删除，没有的之后就添加)。
               */
           });
       });
   </script>
</body>
</html>