jquery--summary[4]

最新推荐文章于 2021-10-12 16:55:53 发布

Asteroid 325

最新推荐文章于 2021-10-12 16:55:53 发布

阅读量121

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43846020/article/details/103450458

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

jQuery - 获取内容和属性

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

jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。

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

lamp DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
			 $("#text").click(function(){
				 alert("text方法:"+$("#excellent").text());//返回所选元素的文本内容
			});
			
			$("#html").click(function(){
				 alert("html方法:"+$("#excellent").html());//返回所选元素的内容（包括 HTML 标记）
			});
			
			
			
		 });
		</script>
	</head>
	<body>
		<p id="excellent">你真是个优秀的<b>男孩</b>呀呀</p>
		<input type="button" id="text" value="显示text"/>
		<input type="button" id="html" value="显示html"/>
        
	</body>
</html>
按第二个按钮：
html方法:你真是个优秀的<b>男孩</b>呀呀
按第一个按钮：
text方法:你真是个优秀的男孩呀呀

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
					 alert($("#test").val());//获取表单的字段
				});
			});
		</script>
	</head>
	<body>
		<input type="text" id="test">
		<button>显示</button>
	</body>
</html>

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
			
			$("#val").click(function(){
		 alert("val方法:"+$("#third").attr("href"));//www.baidu.com
			});
			
			
		 });
		</script>
	</head>
	<body>
			<input type="button" id="val" value="显示val"/>
        <a href="www.baidu.com" id="third"> </a>
	</body>
</html>

attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

实例 1：

<a href="https://www.runoob.com" target="_self" class="btn">你好</a>
这个例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>
这个例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。
   如果有相应的属性，返回指定属性值。


**prop()函数的结果:
      1.如果有相应的属性，返回指定属性值。
      2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
      1.如果有相应的属性，返回指定属性值。
      2.如果没有相应的属性，返回值是 undefined。**

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

jQuery - 设置内容和属性

1.设置内容 - text()、html() 以及 val()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#btn1").click(function(){
					$("#first").text("设置了text的值哟");
				});
				$("#btn2").click(function(){
					$("#second").html("<b>设置</b>了htmL的值哟");
				});
				$("#btn3").click(function(){
					$("#third").val("设置了表单的值哟");
				});
				
			});
		</script>
	</head>
	<body>
		<p id="first">i love study</p>
		<p id="second">i love  english</p>
		<p>输入值：<input type="text" value="math" id="third"></p>
		<button id="btn1">text</button>
		<button id="btn2">html</button>
		<button id="btn3">val</button>
		
	</body>
</html>

原先的值为：
在这里插入图片描述
按了三个按钮后的结果

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
（index,“原来的值”）

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery--summary[4]

jQuery - 获取内容和属性jQuery 拥有可操作 HTML 元素和属性的强大方法。jQuery DOM 操作jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。lamp DOM = Document Object Model（文档对象模型）DOM 定义访问 HTML 和 XML 文档的标准...
复制链接

扫一扫

专栏目录