011-jQuery HTML-获取内容和属性

最新推荐文章于 2022-08-18 08:49:58 发布

天又热了

最新推荐文章于 2022-08-18 08:49:58 发布

阅读量636

点赞数

分类专栏： jQuery 文章标签： html jquery javascript

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122624365

版权

jQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#btn1").click(function(){
					alert("Text: "+$("#text").text());
				});
				$("#btn2").click(function(){
					alert("HTML:"+$("#text").html());
				});
				$("#btn3").click(function(){
					alert("值为: "+$("#input").val());
				});
				$("#btn4").click(function(){
					alert($("#attr").attr("href"));
				})
			});
		</script>
	</head>
	<!--
		jQuery-获得内容和属性
			jQuery拥有可操作HTML元素与属性的强大方法
			jQuery DOM操作
			jQuery中非常重要的部分,就是操作DOM的能力
			jQuery提供一系列与DOM相关的方法,这使得访问和操作元素都变得十分容易
			DOM=Document Object Model(文档对象模型)
			DOM定义访问HTML和XML文档的标准
			"W3C文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容,结构以及样式."
		获得内容-text(),html()以及val()
			三个简单实用的用于DOM操作的jQuery方法
			- text()-设置或返回所选元素的文本内容
			- html()-设置或返回所选元素的内容,包括html标记
			- val()-设置或返回表单字段的值
			下面例子演示了如何通过jQuery text()和html()方法来获得内容
			$("#btn1").click(function(){
				alert("Text: "+$("#text").text());
			});
			$("#btn2").click(function(){
				alert("HTML:"+$("#text").html());
			})
			下面的例子展示了如何通过jQuery val()方法获得输入字段的值
			$("#btn3").click(function(){
				alert("值为: "+$("#input").val());
			});
		获取属性-attr()
			jQuery attr()方法用于获取属性值
			下面的例子演示如何获得链接中的href属性的值
			
	-->
	<body>
		<p id="text">这是段落中的<b>粗体</b></p>
		<button id="btn1">显示文本</button>
		<button id="btn2">显示HTML</button>
		<p>名称:<input type="text" id="input" value="菜鸟教程"></p>
		<button id="btn3">显示值</button>
		<p><a href="csdvsd" id="attr">菜鸟教程</a></p>
		<button id="btn4">显示href属性的值</button>
	</body>
</html>