jquery（三）jQuery DOM 操作取值赋值

获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性 - attr()

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

设置内容 - text()、html() 以及 val()

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

设置属性 - attr()

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

添加新的 HTML 内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery/jquery.js"></script>
    <script>
      $(function(){
        $("#b1").click(function(){
          $("#p1").after("<div style='background-color: black;width: 30px;height: 30px;'></div>")
          $("#p2").append("<div style='background-color: red;width: 30px;height: 30px;'></div>")
        })
      });
    </script>
</head>
<body>
    <p id="p1" style="border: 1px black solid;">after</p>
    <p id="p2" style="border: 1px black solid;">append</p>
    <button id="b1">点击</button>
</body>
</html>

after（）和append（）都是在元素后添加区别是

after在元素外后面追加，append元素内后面追加

删除元素/内容

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery/jquery.js"></script>
    <script>
      $(function(){
        $("#b1").click(function(){
          $("#p2").remove();
        })
      });
    </script>
</head>
<body>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <button id="b1">点击</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery/jquery.js"></script>
    <script>
      $(function(){
        $("#b1").click(function(){
          $("#p1").empty();
        })
      });
    </script>
</head>
<body>
<p id="p1">p1<span>span</span></p>
    <button id="b1">点击</button>
</body>
</html>

jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      .red{
        background-color: red;
      }
      .fontsize{
        font-size: 40px;
      }
    </style>
    <script src="../jquery/jquery.js"></script>
    <script>
      $(function(){
        $("#b1").click(function(){
          $("div").addClass("red fontsize");
        })
        $("#b2").click(function(){
          $("div").removeClass("red");    //只移除红色样式
          // $("div").removeClass();      //移除全部样式
        })
      });
    </script>
</head>
<body>
    <div style="border: 1px black solid;width: 60px;height:60px">div</div>
    <button id="b1">添加红色背景</button>
    <button id="b2">移除红色背景</button>
</body>
</html>

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

下面的例子将返回首个匹配元素的 background-color 值：

$("p").css("background-color");

下面的例子将为所有匹配元素设置 background-color 值：

$("p").css("background-color","yellow");

jquery（三）jQuery DOM 操作 取值 赋值

获得内容 - text()、html() 以及 val()

获取属性 - attr()

设置内容 - text()、html() 以及 val()

设置属性 - attr()

添加新的 HTML 内容

删除元素/内容

jQuery 操作 CSS

jQuery css() 方法

猜你喜欢

jquery（三）jQuery DOM 操作取值赋值