js,jquery属性和属性节点,及attr方法和removeAttr方法,prop和removeprop

最新推荐文章于 2023-06-13 17:44:55 发布

吃糖的青蛙

最新推荐文章于 2023-06-13 17:44:55 发布

阅读量1.3k

点赞数

分类专栏： jquery和js

本文链接：https://blog.csdn.net/qq_44772414/article/details/107815792

版权

jquery和js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-属性和属性节点</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.什么是属性?
            对象身上保存的变量就是属性
            2.如何操作属性?
            对象.属性名称 = 值;
            对象.属性名称;
            对象["属性名称"] = 值;
            对象["属性名称"];

            3.什么是属性节点?
            <span name = "it666"></span>
            在编写HTML代码时,在HTML标签中添加的属性就是属性节点
            在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
            在attributes属性中保存的所有内容都是属性节点

            4.如何操作属性节点?
            DOM元素.setAttribute("属性名称", "值");
            DOM元素.getAttribute("属性名称");

            5.属性和属性节点有什么区别?
            任何对象都有属性, 但是只有DOM对象才有属性节点

            */

            /*
            function Person() {

            }
            var p = new Person();
            // p.name = "lnj";
            p["name"] = "zs";
            // console.log(p.name);
            console.log(p["name"]);
            */
            var span = document.getElementsByTagName("span")[0];
            span.setAttribute("name", "lnj");
            console.log(span.getAttribute("name"));
        });
    </script>
</head>
<body>
<span name = "it666"></span>
</body>
</html>





```bash
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-jQuery的prop方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.prop方法
            特点和attr方法一致
            2.removeProp方法
            特点和removeAttr方法一致
            */
            /*
            $("span").eq(0).prop("demo", "it666");
            $("span").eq(1).prop("demo", "lnj");
            console.log($("span").prop("demo"));

            $("span").removeProp("demo");
            */

            /*
            注意点:
            prop方法不仅能够操作属性, 他还能操作属性节点

            官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
            */
            // console.log($("span").prop("class"));
            // $("span").prop("class", "box");

            console.log($("input").prop("checked")); // true / false
            console.log($("input").attr("checked")); // checked / undefined

        });
    </script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>

<input type="checkbox">
</body>
</html>

吃糖的青蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js,jquery属性和属性节点,及attr方法和removeAttr方法,prop和removeprop

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>15-属性和属性节点</title> <script src="../js/jquery-1.12.4.js"></script> <script> $(function () { /*
复制链接

扫一扫

专栏目录