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-）

04. jQuery - 获取内容和属性

猜你喜欢