jQuery_DOM操作标签中的属性值和标签文本内容

最新推荐文章于 2022-08-26 17:20:54 发布

NewBurlaSKing

最新推荐文章于 2022-08-26 17:20:54 发布

阅读量251

点赞数

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

本文链接：https://blog.csdn.net/qq_55961861/article/details/126390776

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用jQuery进行DOM操作，包括addClass(), removeClass(), toggleClass(), hasClass(), html(), val(), attr(), removeAttr()等方法。通过实例演示了如何应用这些方法来修改元素的样式、内容和属性。

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

jQuery_DOM操作标签中的属性值和标签文本内容

一.方法

addClass()

给元素添加class，值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上，也可以同时添加多个class值
removeClass()

移除元素中每个匹配元素上一个，多个或全部样式
toggleClass()

这是一个开关方法，如果class存在则删除，如果class不存在则添加
hasClass()

判断一个元素上是否具有某个class
html()

获取元素中的HTML内容，还可以设置html内容！
val()

用于获取<input>标签中的内容，还可以设置<input>标签中的内容！
attr()

获取匹配的元素的属性的值或设置匹配元素的一个或多个属性
removeAttr()

为匹配的元素集合中的每个元素中移除一个属性（attribute）

二.实例

addClass() removeClass toggleClass hasClass方法练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="box">哈哈</div>
    <script>
        $('div').addClass('txt').removeClass('box').toggleClass('aaa');
        var f = $('div').hasClass('aaa');
        if (f) {
            document.write('aaa  class值被添加了');
        } else {
            document.write('aaa  class值没有被添加了');
        }
    </script>
</body>
</html>

html() val() attr() removeAttr()方法练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="box">Hello! jQuery!</div>
    <br>
    <input type="text" value="hhh">
    <br>
    <img src="./1.jpg" alt="image">
    <br>
 
    <img class="im">
    <br>
    <br>
    <script>
        // html()   读+写
        var div_content = $('.box').html();
        document.write('读取到的div内容：'+ div_content + '<br>');
        div_content = $('.box').html('你好啊！jQuery!  原内容：Hello! jQuery!').html();
        document.write('改变内容之后再读取到的div内容：'+ div_content + '<br>')

        // val()    读+写
        var input_content = $('input').val();
        document.write('读取到的input内容：'+ input_content + '<br>');
        input_content = $('input').val('哈哈哈~ 原内容：hhh').val();
        document.write('改变内容之后再读取到的input内容：' + input_content + '<br>');

        // attr()   读+写
        var alt_content = $('img').attr('alt');
        document.write('获取到alt值为：' + alt_content + '<br>');
        $('.im').attr({
            src:'./1.jpg',
            alt:'img',
            title:'a logo'
        });
        $('.im').removeAttr('alt');
    </script>
</body>
</html>