深入理解属性与属性节点：DOM操作与jQuery实践-CSDN博客

属性和属性节点

什么是属性?

属性就是对象身上的变量
- 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象 )

<script>

  // 1.自定义一个对象

  var obj = {};

  console.log(obj);

  // 2.动态给自定义对象添加属性

  [obj.name](http://obj.name) = "lmx; // name就是对象obj的一个属性

  obj.age = 33; // age就是对象obj的一个属性

  console.log(obj);

</script>

什么是属性节点?

在html中编写的所有标签，里面的属性都是属性节点
- <span class = 'box' nj = '666'></span> // 这里的class和nj就是属性节点

如果操作属性?

添加或修改属性(没有就会添加,有就会修改)
- 对象.属性名称 = 值;
- 对象["属性名称"] = 值;
获取属性
- 对象.属性名称
- 对象["属性名称"]

如何操作属性节点?

获取属性节点
- DOM对象.getAttribute("属性节点名称")
设置属性节点
- DOM对象.setAttribute("属性节点名称", "值");

jQuery中的attr和prop方法

attr(name|pro|key,val|fn) 方法

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

<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>

removeAttr(name) 方法

用于删除指定属性节点

<script>

  $(function () {

    // 1.设置属性节点时,会给所有找到元素设置属性节点

    $("span").attr("test", "jonathan");

    // 2.删除属性节点时,会删除所有找到元素的属性节点

    $("span").removeAttr("test");

  });

</script>

prop(n|p|k,v|f) 方法

用于设置或者获取元素的属性值

<script>

  $(function () {

    // 1.设置属性

    // 1.1.设置属性时,会设置所有找到元素的属性

    $("span").prop("demo", "lnj");

    // 2.获取属性

    // 2.1.获取属性时,只会获取找到第一个元素的属性

    console.log($("span").prop("demo"));

  });

</script>

removeProp(name) 方法

用于删除指定的元素的属性

<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)

作用：为每个匹配的元素添加指定的类名。
参数:一个或多个要添加到元素中的CSS类名，请用空格分开

removeClass([class|fn])

作用：从所有匹配的元素中删除全部或者指定的类。
参数:一个或多个要删除的CSS类名，请用空格分开

toggleClass(class|fn[,sw])

作用：如果存在（不存在）就删除（添加）一个类。
参数1:要切换的CSS类名.
参数2:用于决定元素是否包含class的布尔值。

eg：

<!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>19-JQuery类操作相关方法</title>
    <style>
      div {
        width: 300px;
        height: 300px;
      }
      .class1 {
        background-color: red;
      }
      .class2 {
        border: 10px solid blue;
      }
    </style>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
      $(function () {
        /*
            1.addClass(class|fn)
            作用：为每个匹配的元素添加指定的类名。
            参数:一个或多个要添加到元素中的CSS类名，请用空格分开
            2.removeClass([class|fn])
            作用：从所有匹配的元素中删除全部或者指定的类。
            参数:一个或多个要删除的CSS类名，请用空格分开
            3.toggleClass(class|fn[,sw])
            作用：如果存在（不存在）就删除（添加）一个类。
            参数1:要切换的CSS类名.
            参数2:用于决定元素是否包含class的布尔值。
        */
        //   添加
        $("button")
          .eq(0)
          .click(function () {
            $("div").eq(0).addClass("class1");
          });
        //   删除
        $("button")
          .eq(1)
          .click(function () {
            $("div").eq(0).removeClass("class1");
          });
        //   修改
        $("button")
          .eq(2)
          .click(function () {
            $("div").eq(0).toggleClass("class1 class2");
          });
      });
    </script>
  </head>
  <body>
    <button>添加</button>
    <button>删除</button>
    <button>修改</button>
    <div></div>
  </body>
</html>

JQuery代码/文本/值操作

html([val|fn])

作用：添加或获取元素中的HTML

text([val|fn])

作用：添加或获取元素中的文本

val([val|fn|arr])

作用：添加或获取元素value属性的值

eg：

<!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>20-JQuery文本值相关操作</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
    </style>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
      $(function () {
        /*
            1. html([val|fn])
            作用：添加或获取元素中的HTML
            2. text([val|fn])
            作用：添加或获取元素中的文本
            3. val([val|fn|arr])
            作用：添加或获取元素value属性的值
          */
        //  设置html
        $("button")
          .eq(0)
          .click(function () {
            $("div").html("<p>我是p标签</p>");
          });
        // 获取html
        $("button")
          .eq(1)
          .click(function () {
            console.log($("div").html());
          });
        // 设置text
        $("button")
          .eq(2)
          .click(function () {
            $("div").text("啊哈哈哈哈哈");
          });
        // 获取text
        $("button")
          .eq(3)
          .click(function () {
            console.log($("div").text());
          });
        // 设置val
        $("button")
          .eq(4)
          .click(function () {
            $("input").val("请输入内容");
          });
        //获取val
        $("button")
          .eq(5)
          .click(function () {
            console.log($("input").val());
          });
      });
    </script>
  </head>
  <body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置val</button>
    <button>获取val</button>
    <div></div>
    <input type="text" />
  </body>
</html>