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>