从零玩转jQuery-属性相关

2022-03-02 04:16:29

属性和属性节点

  • 什么是属性?
    • 属性就是对象身上的变量
    • 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
<script>
            // 1.自定义一个对象
            var obj = {};
            console.log(obj);
            // 2.动态给自定义对象添加属性
            obj.name = "lnj"; // name就是对象obj的一个属性
            obj.age = 33; // age就是对象obj的一个属性
            console.log(obj);
</script>
从零玩转jQuery-属性相关
image.png
  • 什么是属性节点?
    • 在html中编写的所有标签，里面的属性都是属性节点
      • <span class = 'box' nj = '666'></span> // 这里的class和nj就是属性节点
从零玩转jQuery-属性相关
image.png
  • 如果操作属性?
    • 添加或修改属性(没有就会添加,有就会修改)
      • 对象.属性名称 = 值;
      • 对象["属性名称"] = 值;
    • 获取属性
      • 对象.属性名称
      • 对象["属性名称"]
  • 如何操作属性节点?
    • 获取属性节点
      • DOM对象.getAttribute("属性节点名称")
    • 设置属性节点
      • DOM对象.setAttribute("属性节点名称", "值");

jQuery中的attr和prop方法

<script>
        $(function () {
            // 1.获取指定属性节点值
            var $res = $(".span1").attr("nj");
            console.log($res);
            // 2.设置属性节点
            $(".span1").attr("nj", "666");
            $(".span2").attr("id", "box1 box2");

            // 3.注意点:
            // 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
            $res = $("span").attr("class");
            console.log($res);
             $("span").attr("class", "lnj");
        });
</script>

<script>
        $(function () {
            // 1.设置属性节点时,会给所有找到元素设置属性节点
            $("span").attr("test", "jonathan");
            // 2.删除属性节点时,会删除所有找到元素的属性节点
            $("span").removeAttr("test");
        });
</script>

<script>
        $(function () {
            // 1.设置属性
            // 1.1.设置属性时,会设置所有找到元素的属性
            $("span").prop("demo", "lnj");
            // 2.获取属性
            // 2.1.获取属性时,只会获取找到第一个元素的属性
            console.log($("span").prop("demo"));
        });
</script>

<script>
        $(function () {
            // 删除所有找到元素的demo属性
            $("span").removeProp("demo");
        });
</script>
  • attr方法和prop方法区别
    • 既然所有的DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
    • 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
    • 因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false
<script>
        $(function () {
            // 1.可以通过prop获取属性节点
            console.log($("input").prop("class"));
            // 2.可以通过prop设置属性节点
            $("input").prop("class", "tag");

            // 3.如果没有默认值,那么attr获取返回undefined
//            console.log($("input[type=checkbox]").attr("checked"));
            // 4.如果没有默认值,那么prop获取返回false
            console.log($("input[type=checkbox]").prop("checked"));
            // 5.通过attr设置选中
//            $("input[type=checkbox]").attr("checked", true);
            
            // 6.通过prop设置选中
            $("input[type=checkbox]").prop("checked", true)

        });
</script>

jQuery增删Class

  • jQuery CSS类相关方法都是用于操作DOM对象的class属性节点的值
  • addClass(class|fn)
    • 给元素添加一个或多个类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-jQueryCSS类</title>
    <style>
        .class1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .class2{
            border: 5px solid #000;
        }
    </style>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           $("button").eq(0).click(function () {
               // 1.添加一个类
//               $("div").addClass("class1");
               // 2.再添加一个类
//               $("div").addClass("class2");
               // 3.一次性添加多个类(用空格隔开)
               $("div").addClass("class1 class2");
           });
        });
    </script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<button>切换</button>
<div></div>
</body>
</html>

<script>
        $(function () {
            $("button").eq(1).click(function () {
                // 4.删除一个类
//                $("div").removeClass("class2");
                // 5.再删除一个类
//                $("div").removeClass("class1");
                // 6.一次性删除多个类(用空格隔开)
                $("div").removeClass("class1 class2");

            });
        });
</script>

<script>
        $(function () {
            $("button").eq(2).click(function () {
                // 7.切换一个类
//                $("div").toggleClass("class2");
                // 8.切换多个类
                $("div").toggleClass("class1 class2");
            });
        });
    </script>

jQuery代码/文本/值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-jQuery代码文本值</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var $btns = $("button");
            var $div = $("div");
            $btns.eq(0).click(function () {
                // 1.添加html, 相当于innerHTML
//                $div.html("<p>我是p标签</p>");
//                $div.html("<p><span>我是span标签</span></p>");
                $div.html("我是文本");
            });
            $btns.eq(1).click(function () {
                // 2.获取html
                console.log($div.html());
            });
        });
    </script>
</head>
<body>
<button>添加html</button>
<button>获取html</button>
<button>添加文本</button>
<button>获取文本</button>
<div></div>
</body>
</html>
  • text([val|fn])
    • 添加或获取元素中的文本
    • text方法能做的html方法都能做,所以一般使用html方法即可
<script>
        $(function () {
            $btns.eq(2).click(function () {
                // 3.添加文本, 相当于innerText
                // 如下内容不会被转换为标签
//                $div.text('<p>我是段落</p>');
               $div.text('我是文本');
            });
            $btns.eq(3).click(function () {
                // 4.获取文本
                console.log($div.text());
            });
</script>

<script>
        $(function () {
            $btns.eq(4).click(function () {
                // 4.添加value值
                $("input").val("我是一个输入框");
            });
            $btns.eq(5).click(function () {
                // 4.获取value值
                console.log($("input").val());
            });
        });
</script>
上一篇：12-JavaScript基础-for循环


下一篇：从零玩转jQuery-入口函数