jQuery - 设置内容和属性

最新推荐文章于 2022-12-05 18:11:26 发布

幻想＆逆风

最新推荐文章于 2022-12-05 18:11:26 发布

阅读量152

点赞数

分类专栏： JQuery 文章标签： JQuery html

本文链接：https://blog.csdn.net/qq_44700535/article/details/90732857

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、设置内容 text()、html() 以及 val()

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery/jquery-1.7.2.min.js">
		</script>

	</head>

	<body>
		<p id="test1">这是第一个文本段落，点击text测试按钮之后会重新生成Hello world</p>
		<p id="test2">这是第二个文本段落，点击HTML测试按钮之后会重新Hello world</p>
		<p>输入框: <input type="text" id="test3" value="输入框默认文本"></p>
		<button id="btn1">text测试按钮</button>
		<button id="btn2">HTML测试按钮</button>
		<button id="btn3">val测试按钮</button>
	</body>
</html>
<script>
	$(function() {
		$("#btn1").click(function() {
			$("#test1").text("Hello world!");
		});
		$("#btn2").click(function() {
			$("#test2").html("<b>Hello world!</b>");
		});
		$("#btn3").click(function() {
			$("#test3").val("RUNOOB");
		});
	});
</script>

配合jQuery 我们可以实现，用户注册在输入用户时，如果格式等有问题，就可以再输入框后面显示一段文本，提示用户这里有问题，增加用户体验度。

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

回调函数的百度定义：回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。
简单的理解：JavaScript语句逐行执行，但是由于jQuery的效果的实现需要一些时间才能完成，所以下一行代码很可能会在前一个效果仍在运行使执行，所以为了防止这种情况的发生，jQuery会为每个效果方法提供了一个回调函数。
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

核心代码

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

三、设置属性 attr()

改变原有的属性，这里以href属性举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery/jquery-1.7.2.min.js">
		</script>
		<script>
			$(function() {
				$("button").click(function() {
					$("#runoob").attr("href", "http://www.baidu.com");
				});
			});
		</script>
	</head>

	<body>
		<p><a href="https://www.csdn.net" id="runoob">csdn地址</a></p>
		<button>修改 href 值</button>
		<p>点击按钮前访问 地址是csdn，点击按钮之后，地址是百度</p>
	</body>
</html>

也可以设置多个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery/jquery-1.7.2.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#runoob").attr({
						"href": "https://www.baidu.com",
						"title": "链接百度地址"
					});
					// 通过修改的 title 值来修改链接名称
					title = $("#runoob").attr('title');
					$("#runoob").html(title);
				});
			});
		</script>
	</head>

	<body>
		<p><a href="https://www.csdn.net" id="runoob">链接CSDN地址</a></p>
		<button>修改 href 和 title属性</button>
		<p>点击按钮前访问 地址是csdn，点击按钮之后，地址是百度</p>
	</body>
</html>

幻想＆逆风

关注

0
点赞
踩
0

收藏

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

一、设置内容 text()、html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值我的代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
复制链接

扫一扫