jQuery 操作 HTML 元素和属性的方法

jQuery拥有操作 HTML 元素和属性的强大方法。

1. 获取HTML 元素的内容和属性

  (1) 获得内容:  text()、html() 以及 val()方法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
 <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" > 
  $(function(){ 
   //text() - 设置或返回所选元素的文本内容
   $("#btnText").click(function(){
    alert($("#myDiv1").text());
   });
   $("#btnTextSet").click(function(){
    $("#myDiv1").text('这是一个美好的日子');
    alert($("#myDiv1").text());
   });
   //html() - 设置或返回所选元素的内容(包括 HTML 标记)
   $("#btnHtml").click(function(){
    alert($("#myDiv1").html());
   });
   $("#btnHtmlSet").click(function(){
    $("#myDiv1").html('这是一个<b>神奇</b>的世界啊');
    alert($("#myDiv1").html());
   });
   //val() - 设置或返回表单字段的值
   $("#btnVal").click(function(){
    alert($("#myInput1").val());
   });  
   $("#btnValSet").click(function(){
    $("#myInput1").val('好好学习,天天向上');
    alert($("#myInput1").val());
   });
  });
 </script>
</head>
<body>
 <button type="button" id="btnText">text()方法获取内容</button>
 <button type="button" id="btnHtml">html()方法获取内容</button>
 <button type="button" id="btnVal">val()方法获取内容</button><br/>
 <button type="button" id="btnTextSet">text()方法设置内容</button>
 <button type="button" id="btnHtmlSet">html()方法设置内容</button>
 <button type="button" id="btnValSet">val()方法设置内容</button>
 <div id="myDiv1">这是一个神奇的 <b>世界</b>啊 </div>
 <input type="text" id="myInput1" value="大家好"></p>
</body>
</html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/48.html