010-jQuery获取和设置内容属性

  • 时间:
  • 浏览:
  • 来源:互联网

1. jQuery DOM操作

1.1. jQuery拥有可操作html元素和属性的强大方法。

1.2. jQuery提供一系列与DOM相关的方法, 这使访问和操作元素和属性变得很容易。

1.3. jQuery属性操作方法:

1.4. jQuery文档操作方法:

2. text()方法

2.1. text()方法方法设置或返回被选元素的文本内容。

2.2. 返回文本内容

2.2.1. 当该方法用于返回一个值时, 它会返回所有匹配元素的组合的文本内容(会删除html标记)。

2.2.2. 语法

$(selector).text()

2.3. 设置文本内容

2.3.1. 当该方法用于设置值时, 它会覆盖被选元素的所有内容。

2.3.2. 语法

$(selector).text(content)

2.3.3. 参数

2.4. 使用函数设置文本内容

2.4.1. 使用函数设置所有被选元素的文本内容。

2.4.2. 语法

$(selector).text(function(index, oldcontent))

2.4.3. 参数

3. html()方法

3.1. html()方法返回或设置被选元素的内容(inner html)。

3.2. 返回元素内容

3.2.1. 当使用该方法返回一个值时, 它会返回第一个匹配元素的内容。

3.2.2. 语法

$(selector).html()

3.3. 设置元素内容

3.3.1. 当使用该方法设置一个值时, 它会覆盖所有匹配元素的内容。

3.3.2. 语法

$(selector).html(content)

3.3.3. 参数

3.4. 使用函数来设置元素内容

3.4.1. 使用函数来设置所有匹配元素的内容。

3.4.2. 语法

$(selector).html(function(index,oldcontent))

3.4.3. 参数

4. val()方法

4.1. val()方法返回或设置被选元素的值。

4.2. 元素的值是通过value属性设置的。该方法大多用于input元素。

4.3. 返回value属性

4.3.1. 返回匹配的input元素的value属性的值。

4.3.2. 语法

$(selector).val()

4.4. 设置value属性的值

4.4.1. 该方法设置一个值, 会覆盖input元素的value属性的值。

4.4.2. 语法

$(selector).val(value)

4.4.3. 参数

4.5. 使用函数设置value属性的值

4.5.1. 使用函数来设置所有匹配元素的value属性的值。

4.5.2. 语法

$(selector).val(function(index,oldvalue))

4.5.3. 参数

5. attr()方法

5.1. attr()方法设置或返回被选元素的属性值。设置的时候, 如果属性不存在, 就是添加。

5.2. 返回属性值

5.2.1. 返回被选元素的属性值。

5.2.2. 语法

$(selector).attr(attribute)

5.2.3. 参数

5.3. 设置属性/值

5.3.1. 设置被选元素的属性和值。

5.3.2. 语法

$(selector).attr(attribute,value)

5.3.3. 参数

5.4. 使用函数来设置属性/值

5.4.1. 设置被选元素的属性和值。

5.4.2. 语法

$(selector).attr(attribute,function(index,oldvalue))

5.4.3. 参数

5.5. 设置多个属性/值对

5.5.1. 为被选元素设置一个以上的属性和值。

5.5.2. 语法

$(selector).attr({attribute:value, attribute:value ...})

5.5.3. 参数

6. removeAttr()方法

6.1. removeAttr()方法从被选元素中移除属性。

6.2. 语法

$(selector).removeAttr(attribute)

6.3. 参数

7. 获取和设置内容属性例子

7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery获取和设置内容属性</title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					alert($("#p1").text());
				});
				$('#btn2').click(function(){
					alert($("#p1").html());
				});
				$('#btn3').click(function(){
					alert($("#input1").val());
				});
				$('#btn4').click(function(){
					alert($("#input2").attr("value"));
				});
				$('#btn5').click(function(){
					$("#p1").text("");
				});
				$('#btn6').click(function(){
					$("#p1").html("请填写用户信息, <big><b>牢记自己的用户名和密码</b></big>。");
				});
				$('#input1').focus(function(){
					$(this).val("");
				});
				$('#input2').focus(function(){
					$(this).val("").attr("type", "password");
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">请填写用户信息, <big><b>牢记自己的用户名和密码</b></big>。</p>
		<span>用户名:</span><input id="input1" type="text" name="userName" value="请输入名字" /><br />
		<span>密码:</span><input id="input2" type="text" name="password" value="请输入密码" /><br /><br />
		<button id="btn1">显示文本</button> <button id="btn2">显示html</button> <button id="btn3">显示第一个input的表单输入值</button>
		<button id="btn4">显示第二个input的value属性的值</button> <br /><br />
		<button id="btn5">设置文本</button> <button id="btn6">设置html</button>
	</body>
</html>

7.2. 效果图

8. 使用函数设置内容属性例子

8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery使用函数设置内容属性</title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("#p1").text(function(index, origText){
						return "";
					});
				});
				$('#btn2').click(function(){
					$("#p1").html(function(index, origHtml){
						return "请填写用户信息, <big><b>牢记自己的用户名和密码</b></big>。";
					});
				});
				$('#btn3').click(function(){
					$("#input2").attr({"type": "password", "value": "123456", "name": "password"});
					alert($("#input2").attr("name"));
				});
				$('#btn4').click(function(){
					$("#input2").removeAttr("value");
					alert($("#input2").attr("value"));
				});
				$('#input1').focus(function(){
					$(this).val(function(index, origVal){
						return "";
					});
				});
				$('#input2').focus(function(){
					$(this).val(function(index, origVal){
						return "";
					}).attr("type", function(index, origValue){
						return "password";
					});
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">请填写用户信息, <big><b>牢记自己的用户名和密码</b></big>。</p>
		<span>用户名:</span><input id="input1" type="text" value="请输入名字" /><br />
		<span>密码:</span><input id="input2" type="text" value="请输入密码" /><br /><br />
		<button id="btn1">设置文本</button> <button id="btn2">设置html</button> 
		<button id="btn3">设置多个属性</button> <button id="btn4">移除属性</button>
	</body>
</html>

8.2. 效果图

 

本文链接http://element-ui.cn/article/show-298652.aspx