jQuery（七）--属性操作：attr、removeAttr、prop、removeProp、addClass、removeClass、toggleClass、html、text、val

小白小白从不日白

已于 2022-05-19 12:38:16 修改

阅读量1.2k

点赞数 2

分类专栏： jQuery 文章标签： jquery

于 2021-11-06 15:35:10 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/121177893

版权

jQuery 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

3.5 addClass(class|fn)

3.6 removeClass([class|fn])

3.7 toggleClass(class|fn[,sw])

3.8 html()、text()、val()

公共部分：

<script src="js/jquery-1.12.3.min.js"></script>

一、属性

对象身上保存的变量就是属性

1.1 操作属性

对象.属性名称=值；

对象.属性名称

对象[“属性”]=值;

对象[“属性”]

        function Person() {

        }
        var p = new Person();
        p.name = 'ls';
        console.log(p.name);
        p['age'] = 20;
        console.log(p['age']);

二、属性节点

2.1 概述

在编写HTML代码时，在HTML标签中添加的属性就是属性节点

在浏览器中找到span这个DOM元素之后，展开看到的都是属性；在attributes属性中保持的所有内容都是属性节点

操作属性节点：

DOM元素.setAttribute("属性名称","值");

DOM元素.getAttribute("属性名称");

属性和属性节点的区别：

任何对象都有属性，只有DOM对象才有属性节点

三、jQuery中的属性和属性节点

3.1 attr()

arrt(name|pro|key,val|fn)

作用：获取或设置属性节点的值

可以传递一个参数，也可以传递两个参数

如果传递一个参数代表获取属性节点的值

无论找到多少个元素，都只会返回第一个元素指定的属性节点的值

    <span class="span1" name="lwj"></span>
    <span class="span2" name="ls"></span>

        $(function() {
            console.log($("span").attr("class"));
        });

如果传递两个参数代表设置属性节点的值

找到多少个元素就会设置多少个

    <span class="span1" name="lwj"></span>
    <span class="span2" name="ls"></span>

        $(function() {
            console.log($("span").attr("class", "box"));
        });

如果设置的属性节点不存在，系统会自动新增

    <span class="span1" name="lwj"></span>
    <span class="span2" name="ls"></span>

        $(function() {
            console.log($("span").attr("data-name", "food"));
        });

3.2 removeAttr()

会删除所有找到元素指定的属性节点

    <span class="span1" name="lwj"></span>
    <span class="span2" name="ls"></span>

        $(function() {
            console.log($("span").removeAttr("class"));
        });

        $(function() {
            console.log($("span").removeAttr("class name"));
        });

3.3 prop()

如果传递一个参数代表获取属性节点的值

无论找到多少个元素，都只会返回第一个元素指定的属性节点的值

如果传递两个参数代表设置属性节点的值

找到多少个元素就会设置多少个

    <span class="span1" name="lwj"></span>
    <span class="span2" name="ls"></span>

        $(function() {
            $("span").eq(0).prop("demo", "zs");
            $("span").eq(1).prop("demo", "ls");
            console.log($("span").prop("demo"));
        });

3.4 removeProp()

会删除所有找到元素指定的属性节点

    <span class="span1" name="lwj"></span>
    <span class="span2" name="ls"></span>

        $(function() {
            $("span").removeProp("demo");
        });

prop方法不仅可以操作属性，还能操作属性节点

    <span class="span1" name="lwj"></span>
    <span class="span2" name="ls"></span>

        $(function() {
            console.log($("span").prop("class"));
            $("span").prop("class", "box");
        });

总结：

官方推荐在操作属性节点时，具有 true 和 false 两个属性的属性节点，如checked、selected、disabled使用prop()，其余的使用attr()

公共区域：

        * {
            margin: 0;
            padding: 0;
        }
        
        .class1 {
            width: 100px;
            height: 100px;
            background: red;
        }
        
        .class2 {
            border: 5px solid orange;
        }

3.5 addClass(class|fn)

添加类，如果需要添加多个类，类名之间用空格隔开

<button>添加类</button>

        $(function() {
            $("button:first").click(function() {
                $("div").addClass("class1 class2");
            });
        });

3.6 removeClass([class|fn])

删除类，如果有多个中间用空格隔开

    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>

        $(function() {
            $("button:first").click(function() {
                $("div").addClass("class1 class2");
            });


            $("button:nth-child(2)").click(function() {
                $("div").removeClass("class2");
            });
        });

3.7 toggleClass(class|fn[,sw])

有就删除，没有就添加

    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>

    <script>
        $(function() {
            $("button:first").click(function() {
                $("div").addClass("class1 class2");
            });


            $("button:nth-child(2)").click(function() {
                $("div").removeClass("class2");
            });

            $("button:nth-child(3)").click(function() {
                $("div").toggleClass("class1 class2");
            });
        });
    </script>

3.8 html()、text()、val()

html()和原生js中的innerHTML()一模一样
text()和原生js中的innerText()一模一样
标签对象.val() 取出表单控件的值
标签对象.val(值) 设置表单控件的值
标签对象.html() 取出双标签之间的内容
标签对象.html(值) 设置双标签之间的内容
标签对象.text() 取出双标签之间的内容
标签对象.text(值) 设置双标签之间的内容

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid orange;
        }
    </style>

    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text">
    <script></script>

        $("button:nth-child(1)").click(function() {
            $("div").html("<p>我是段落<span>我是span</span></p>");
        });
        $("button:nth-child(2)").click(function() {
            console.log($("div").html());
        });
        $("button:nth-child(3)").click(function() {
            $("div").text("<p>我是段落<span>我是span</span></p>");
        });
        $("button:nth-child(4)").click(function() {
            console.log($("div").text());
        });
        $("button:nth-child(5)").click(function() {
            $("input").val("请输入内容");
        });
        $("button:nth-child(6)").click(function() {
            console.log($("input").val());
        });