012-jQuery HTML-设置内容和属性

最新推荐文章于 2022-11-11 08:49:16 发布

天又热了

最新推荐文章于 2022-11-11 08:49:16 发布

阅读量537

点赞数

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

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

版权

jQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery HTML-设置内容和属性</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<!--
		jQuery-设置内容和属性
		设置内容-text(),html()以及val()
			我们将使用前一章中的三个相同的方法来设置内容
			-text()-设置或返回所选元素的文本内容
			-html()-设置或返所选元素的内容(包括HTML标记)
			-val()-设置或返回表单字段的值
			下面的例子演示如何通过text(),html(),val()方法来设置内容
			实例
			$("#btn1").click(function(){
				$("#test1").text("Hello World");
			});
			$("#btn2").click(function(){
				$("#test2").html("<b>Hello World</b>");
			});
			$("#btn3").click(function(){
				$("#test3").val("RUNOOB");
			});
		text(),html()以及val()的回调函数
			上面三个jQuery方法:text(),html()以及val()同样拥有回调函数,
			回调函数有两个参数:被选元素列表中当下元素的下标,以及原始值.
			然后函数新值返回您希望使用的字符串.
			下面例子演示带有回调函数的text()和html()
			$("#btn4").click(function(){
				$("#test4").text(function(i, origText){
					return "旧文本: "+origText+" 新文本: Hello World! (index:" +i+")";
				});
			});
			$("#btn5").click(function(){
				$("#test5").html(function(i, origText){
					return "旧 html: "+origText+"新 html: Hello <b>World!</b> (index: "+i+")";
				});
			});
		设置属性-attr()
			jQuery attr()方法也用于设置/改变属性值
			下面的例子演示如何改变(设置)链接中的href属性的值
			实例:
			$("#btn6").click(function(){
				$("#test6").attr("href", "http://www.runoob.com/jquery");
			});
			attr()方法也允许您同时设置多个属性
			下面的例子演示如何同时设置href和title属性
			实例
			$("#btn7").click(function(){
				$("#test7").attr(
					{
						"href":"http://www.runoob.com/jquery",
						"title":"jQuery教程"
					}
				);
				title = $("#test7").attr('title');
				$("#test7").text(title);
			});
		attr()的回调函数
			jQuery方法attr(),也提供回调函数.回调函数有两个参数:
			被选元素列表中当前元素的下标,以及原始(旧的)值.然后以函数新值返回您希望使用的字符串
			下面的例子演示带有回调函数的attr()方法
			实例
			
	-->
	<script>
		$(document).ready(function(){
			$("#btn1").click(function(){
				$("#test1").text("Hello World");
			});
			$("#btn2").click(function(){
				$("#test2").html("<b>Hello World</b>");
			});
			$("#btn3").click(function(){
				$("#test3").val("RUNOOB");
			});
			$("#btn4").click(function(){
				$("#test4").text(function(i, origText){
					return "旧文本: "+origText+" 新文本: Hello World! (index:" +i+")";
				});
			});
			$("#btn5").click(function(){
				$("#test5").html(function(i, origText){
					return "旧 html: "+origText+"新 html: Hello <b>World!</b> (index: "+i+")";
				});
			});
			$("#btn6").click(function(){
				$("#test6").attr("href", "http://www.runoob.com/jquery");
			});
			$("#btn7").click(function(){
				$("#test7").attr(
					{
						"href":"http://www.runoob.com/jquery",
						"title":"jQuery教程"
					}
				);
				title = $("#test7").attr('title');
				$("#test7").text(title);
			});
			$("#btn8").click(function(){
				$("#test8").attr("href", function(i, origValue){
					return origValue+"/jquery";
				});
			});
		});
	</script>
	<body>
		<p id="test1">这是一个段落</p>
		<p id="test2">这是另外一个段落</p>
		<p>输入框:<input type="text" id="test3" value="菜鸟教程"></p>
		<button id="btn1">设置文本</button>
		<button id="btn2">设置HTML</button>
		<button id="btn3">设置值</button>
		<p id="test4">这是一个有<b>粗体</b>字的字段</p>
		<p id="test5">这是另外一个有<b>粗体</b>字的段落</p>
		<button id="btn4">显示新/旧 文本</button>
		<button id="btn5">显示新/旧 HTML</button>
		<p><a href="//www.runoob.com" id="test6">菜鸟教程</a></p>
		<button id="btn6">修改href值</button>
		<p>点击按钮修改后,可以点击链接查看链接地址是否变化.</p>
		<p><a href="//www.runoob.com" id="test7">菜鸟教程</a></p>
		<button id="btn7">修改href和title</button>
		<p>点击按钮修改后,可以查看href和title是否变化</p>
		<p><a href="//www.runoob.com" id="test8">菜鸟教程</a></p>
		<button id="btn8">修改href的值</button>
		<p>点击按钮修改后,可以点击链接查看href属性是否变化</p>
	</body>
</html>

天又热了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
012-jQuery HTML-设置内容和属性

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jQuery HTML-设置内容和属性</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <!-- jQuery-设
复制链接

扫一扫