jQuery 第四天属性方法-CSDN博客

本文链接：https://blog.csdn.net/qq_44788518/article/details/108229749

HTML代码/文本/值

html()
它可以设置和获取起始标签和结束标签中的内容。
跟 dom 属性 innerHTML 一样。
text()
它可以设置和获取起始标签和结束标签中的文本。
跟 dom 属性 innerText 一样。
val()
它可以设置和获取表单项的 value 属性值。
跟 dom 属性 value 一样
val 方法同时设置多个表单项的选中状态。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../js/jquery-1.7.2.js"></script>
  <script>
    $(function () {
      //获取#nav1元素中的innerHTML
      $("#btn1").click(function () {
        alert($("#nav1").html());
      });
      //修改#nav1元素中的innerHTML
      $("#btn2").click(function () {
        $("#nav2").html("你好啊<b>爱您！</b>");
      });
      //获取#nav1元素中的innerText
      $("#btn3").click(function () {
        alert($("#nav1").text());
      });
      //获取#tx中的value
      $("#btn4").click(function () {
        alert($("#tx").val());
      });
      //选中#singleSelect元素中的单选框value值为radio1
      $("#btn5").click(function () {
        $("#singleSelect :radio").val(["radio1"]);
      });
      //选中#multiplySelect元素中的多选框value值为checkbox1和checkbox2
      $("#btn6").click(function () {
        $("#multiplySelect :checkbox").val(["checkbox1", "checkbox2"]);
      });
      //一起选
      $("#btn7").click(function () {
        $(":radio,:checkbox,#multiple,#single").val([
          "radio1",
          "checkbox1",
          "checkbox2",
          "mul1",
          "mul2",
          "sin2",
        ]);
      });
    });
  </script>

  <body>
    <button id="btn1">获取#nav1元素中的innerHTML</button>
    <button id="btn2">修改#nav1元素中的innerHTML</button>
    <button id="btn3">获取#nav1元素中的innerText</button>
    <button id="btn4">获取#tx中的value</button>
    <button id="btn5">选中#singleSelect元素中的单选框value值为radio1</button>
    <button id="btn6">
      选中#multiplySelect元素中的多选框value值为checkbox1和checkbox2
    </button>
    <button id="btn7">一起选</button>
    <div id="container">
      <div id="nav1">我<b>非常</b>大方</div>
      <div id="nav2">阿道夫</div>
      <div id="nav3">阿嘎</div>
      <input type="text" id="tx" />
      <br />
      <br />
      <br />
      <p id="singleSelect">
        单选：
        <input name="radio" type="radio" value="radio1" />radio1
        <input name="radio" type="radio" value="radio2" />radio2
        <br />
      </p>
      <p id="multiplySelect">
        多选：
        <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
        <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
        <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
      </p>
      <br />
      下拉多选 ：
      <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
      </select>
      <br />
      下拉单选 ：
      <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
      </select>
    </div>
  </body>
</html>

属性相关

attr()
可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等
attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop()
可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jquery-1.7.2.js"></script>
    <script>
      $(function () {
        // alert($(":checkbox:first").attr("name"));//获取
        // $(":checkbox:first").attr("name", "adf"); //设置
        $(":checkbox:last").prop("checked", true);
      });
    </script>
  </head>
  <body>
    <input type="checkbox" name="checkbox" value="checkbox1" />head
    <input type="checkbox" name="checkbox" value="checkbox2" />header
  </body>
</html>

Css相关

addClass()
添加样式
removeClass()
删除样式
toggleClass()
有就删除，没有就添加样式。
offset()
获取和设置元素的坐标。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Insert title here</title>
    <style type="text/css">
      div {
        width: 100px;
        height: 260px;
      }

      div.whiteborder {
        border: 2px white solid;
      }

      div.redDiv {
        background-color: red;
      }

      div.blueBorder {
        border: 5px blue solid;
      }
    </style>

    <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      $(function () {
        var $divEle = $("div:first");

        $("#btn01").click(function () {
          //addClass() - 向被选元素添加一个或多个类

          $divEle.addClass("redDiv blueBorder");
        });

        $("#btn02").click(function () {
          //removeClass() - 从被选元素删除一个或多个类

          $divEle.removeClass();
        });

        $("#btn03").click(function () {
          //toggleClass() - 对被选元素进行添加/删除类的切换操作
          $divEle.toggleClass("redDiv");
        });

        $("#btn04").click(function () {
          //offset() - 返回第一个匹配元素相对于文档的位置。
          $divEle.offset({
            top: 10,
            left: 10,
          });
        });
      });
    </script>
  </head>
  <body>
    <table align="center">
      <tr>
        <td>
          <div class="border"></div>
        </td>

        <td>
          <div class="btn">
            <input type="button" value="addClass()" id="btn01" />
            <input type="button" value="removeClass()" id="btn02" />
            <input type="button" value="toggleClass()" id="btn03" />
            <input type="button" value="offset()" id="btn04" />
          </div>
        </td>
      </tr>
    </table>

    <br />
    <br />

    <br />
    <br />
  </body>
</html>