jQuery-DOM操作-内容操作、属性操作-通用属性操作、属性操作-class属性操作

jQuery-DOM操作-内容操作

1.html():获取/设置元素的标签体内容<a>内容</a> -- > 内容

2.text():获取/设置元素的标签体纯文本内容<a>内容</a> -- > 内容

　　3.val():获取/设置元素的value属性值

01-DOM操作-属性操作-内容操作.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-Dom操作_内容操作</title>
    <script src="../js/jquery-3.6.1.min.js"></script>
    <script>

        $(function () {
            // 获取myinput 的value值
            //var value = $("#myinput").val();
            //alert(value);
            //$("#myinput").val("李四");
            // 获取mydiv的标签体内容
            //var html = $("#mydiv").html();
            //alert(html);
            //$("#mydiv").html("<p>aaaa</p>");
            // 获取mydiv文本内容
            //var text = $("#mydiv").text();
            //alert(text);
            $("#mydiv").text("bbb");

        });
    </script>
</head>
<body>

    <input id="myinput" type="text" name="username" value="张三"><br>
    <div id="mydiv"><p><a href="#">标题标签</a></p></div>

</body>
</html>

属性操作-通用属性操作

　　1.通用属性操作

　　　　1.attr():获取/设置元素的属性

　　　　2.removeAttr():删除元素

　　　　3.prop():获取/设置元素的属性

　　　　4.removeProp():删除元素

attr和prop区别？

　　1.如果操作的是元素的固有属性，则建议使用prop

　　2.如果操作的是元素自定义的属性，则建议使用attr

02-DOM操作-属性操作-通用属性操作.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作-属性操作-通用属性操作</title>
    <script src="../js/jquery-3.6.1.min.js"></script>

    <style type="text/css">
        div,span{
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini{
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible{
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            //获取北京节点的name属性值
            var name = $("#bj").attr("name");
            //alert(name);
            //设置北京节点的name属性的值为dabeijing
            $("#bj").attr("name","dabeijing");
            //新增北京节点的discription属性 属性值是didu
            $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name");
            //获得hobby的的选中状态
            var checked = $("#hobby").prop("checked");
            alert(checked);

            //var checked = $("#hobby").attr("checked"); //获取不到，弹出undefined

        });
    </script>
</head>
<body>

    <ul>
        <li id="bj" name="beijing" xxx="yyy">北京</li>
        <li id="tj" name="tianjin">天津</li>
    </ul>
    <input type="checkbox" id="hobby"/>

</body>
</html>

属性操作-class属性操作

　　1.addClass():添加class属性值

　　2.removeClass():删除class属性值

　　3.toggleClass():切换class属性

　　　　toggleClass():切换class属性

判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在"class=one"，则添加

　　4.css():

03-DOM操作-属性操作-class属性操作.html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DOM操作-属性操作-class属性操作</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script  src="../js/jquery-3.6.1.min.js"></script>
  <style type="text/css">
    .one{
      width: 200px;
      height: 140px;
      margin: 20px;
      background: red;
      border: #000 1px solid;
      float:left;
      font-size: 17px;
      font-family:Roman;
    }

    div,span{
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float:left;
      font-size: 17px;
      font-family:Roman;
    }

    div .mini{
      width: 40px;
      height: 40px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family:Roman;
    }
    div .mini01{
      width: 40px;
      height: 40px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family:Roman;
    }

    /*待用的样式*/
    .second{
      width: 300px;
      height: 340px;
      margin: 20px;
      background: yellow;
      border: pink 3px dotted;
      float:left;
      font-size: 22px;
      font-family:Roman;
    }

  </style>
  <script type="text/javascript">

    $(function () {
      //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
      $("#b1").click(function () {
        $("#one").prop("class","second");
      });
      //<input type="button" value=" addClass"  id="b2"/>
      $("#b2").click(function () {
        $("#one").addClass("second");
      });
      //<input type="button" value="removeClass"  id="b3"/>
      $("#b3").click(function () {
        $("#one").removeClass("second");
      });
      //<input type="button" value=" 切换样式"  id="b4"/>
      $("#b4").click(function () {
        $("#one").toggleClass("second");
      });
      //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
      $("#b5").click(function () {
        var backgroundColor = $("#one").css("backgroundColor");
        alert(backgroundColor);

      });
      //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
      $("#b6").click(function () {
        $("#one").css("backgroundColor","green");

      });

    });

  </script>

</head>

<body>

<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
<input type="button" value=" addClass"  id="b2"/>
<input type="button" value="removeClass"  id="b3"/>
<input type="button" value=" 切换样式"  id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>

<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id="one">
  id为one
</div>

<div id="two" class="mini" >
  id为two   class是 mini
  <div  class="mini" >class是 mini</div>
</div>

<div class="one" >
  class是 one
  <div  class="mini" >class是 mini</div>
  <div  class="mini" >class是 mini</div>
</div>

<div class="one" >
  class是 one
  <div  class="mini01" >class是 mini01</div>
  <div  class="mini" >class是 mini</div>
</div>

<span class="spanone">    span
        </span>
</body>

</html>

__EOF__

本文作者：肥宅快乐水
本文链接：https://www.cnblogs.com/wsfj/p/17121685.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！