04. jQuery - 获取内容和属性
jQuery - 获取内容和属性
1. jQuery DOM 操作
jQuery 中非常重要的部分,就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
2. 获得内容- text()、html()以及 val()
三个简单实用的用于DOM操作的jQuery方法:
1) text() -设置或返回所选元素的文本内容
2) html() -设置或返回所选元素的内容(包括HTML标记)
3) val() -设置或返回表单字段的值
案例:获取文本内容、值 及属性值
案例代码
<html> <head> <meta charset="UTF-8"> <title>dom 获取表单值</title> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script> </head> <script type="text/javascript"> $(function(){ //文档就绪函数 $("#btn1").click(function(){ var t1 = $("#test").text(); alert("Text: "+t1); }); $("#btn2").click(function(){ var t1 = $("#test").html(); alert("html: "+t1); }); }); function getName(){ var t3 =$("#name").val(); alert("姓名为:"+t3); } function getSx(){ var t4 =$("#url").attr("href"); alert("获取属性(href)值为:"+t4); } </script> <body> <fieldset id="test01"> <legend>1.获取文本</legend> <div style="margin-top: 10px;"> <p id="test">获取DOM值<font color="blue">文本</font>。 </p> </div> <div style="margin-top: 10px;"> <input type="button" id="btn1" value="显示文本"/> <input type="button" id="btn2" value="显示HTML"/> </div> </fieldset> <fieldset id="test02" style="margin-top:10px;"> <legend>2.获取表单字段值</legend> <div style="margin-top: 10px;"> 姓名:<input type="text" id="name" value=""/> </div> <div style="margin-top: 10px;"> <input type="button" id="btn3" value="获取姓名" onclick="getName();"/> </div> </fieldset> <fieldset id="test03" style="margin-top:10px;"> <legend>3.获取属性值-attr()</legend> <a id="url" href="www.baidu.com">百度</a><br> <input type="button" id="btn4" value="获取属性值" onclick="getSx();"/> </fieldset> </body> </html>
(-end-)