jQuery系统的学习（三）

最新推荐文章于 2025-08-09 21:06:48 发布

原创最新推荐文章于 2025-08-09 21:06:48 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

front-end-jqurey 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了jQuery中用于操作元素内容和属性的各种方法，包括text()、html()、val()及attr()等方法的基本用法和回调函数的应用，并详细阐述了如何使用append()、prepend()、after()和before()方法来添加新的HTML内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jqurey-设置内容和属性

将使用（二）的三个相同的方法设置内容：

text（）设置或返回所选元素的文本内容。
html（）设置或返回所选元素的内容。
val（）设置或返回表单字段的值。

通过 text()、html() 以及 val() 方法来设置内容：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <script>$(document).ready(function() {
    $("#btn1").click(function() {
        $("#t1").text("你很棒");
    });
    $("#btn2").click(function() {
        $("#t2").html("<b>你很有个性</b>");
    });
    $("#btn3").click(function() {
        $("#t3").val("student");
    });
});</script>
    <body>
        <p id="t1">这就是我</p>
        <p id="t2">这也是我</p>
        <p>输入框：<input id="t3" value="大学生"/></p>
        <button id="btn1">设置文本</button>
        <button id="btn2">设置html</button>
        <button id="btn3">设置值</button>
    </body>
</html>

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#btn1").click(function() {
					$("#t1").text(function(i, o) {
						return "旧文本" + o + ",新文本" + i;
					})
				});
				$("#btn2").click(function() {
					$("#t2").html(function(i, o) {
						return "旧html" + o + ",新html" + i;
					})
				});

			});
		</script>
	</head>

	<body>
		<p id="t1">这是<b>我</b></p>
		<p id="t2">那是<b>你</b></p>
		<button id="btn1">显示 新/旧 文本</button>
		<button id="btn2">显示 新/旧 HTML</button>
	</body>

</html>

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

<!DOCTYPE html>
<html>

	<head>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<meta charset="UTF-8">
		<script>
			$(document).ready(function(){ 
				$("button").click(function(){ 
					$("#baidu").attr("href","http://www.sina.com");
					 }); 
					 });
		</script>

	</head>

	<body>
		<p>
			<a href="http://www.baidu.com" id="baidu">baidu</a>
		</p>
		<button>修改 href 值</button>
		<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
	</body>

</html>

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#csdn").attr("href", function(i, origValue) {
						return origValue + "/nav/newarticles";
					});
				});
			});
		</script>
	</head>

	<body>

		<p>
			<a href="https://www.youkuaiyun.com" id="csdn">csdn</a>
		</p>

		<button>修改 href 值</button>

		<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>

	</body>

</html>

jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<script>
		$(document).ready(function() {
			$("#btn1").click(function() {
				$("p").append("追加文本");
			});
			$("#btn2").click(function() {
			    $("ol").append("<li>追加</li>");

			});
		});
	</script>

	<body>
		<p>这是wo。</p>
		<p>那是你。</p>
		<ol>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ol>
		<button id="btn1">添加文本</button>
		<button id="btn2">添加列表项</button>
	</body>

</html>

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("#btn1").click(function(){
		$("p").prepend("<b>在开头追加文本</b>。 ");
	});
	$("#btn2").click(function(){
		$("ol").prepend("<li>在开头添加列表项</li>");
	});
});
</script>
</head>
<body>
	
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
	
</body>
</html>

append()和prepend（）方法能够通过参数接受无线数量的新元素。可以通过jquery来生成文本/html，或者通过javascript代码和dom元素。我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta charset="utf-8">
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            function appendText() {
                var txt1 = "<p>文本</p>";
                var txt2 = $("<p></p>").text("文本");
                var txt3 = document.createElement("p");
                txt3.innerHTML = "文本";
//                $("body").prepend(txt1, txt2, txt3);
                $("body").append(txt1, txt2, txt3);
            }
        </script>
    </head>

    <body>

        <p>这是一个段落。</p>
        <button onclick="appendText()">追加文本</button>

    </body>

</html>

after（）和before（）方法

前者在被选元素之后插入内容，后者在被选元素之前插入内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").before("<b>之前</b>");
  });

  $("#btn2").click(function(){
    $("#div1").after("<i>之后</i>");
  });
});
</script>
</head>

<body>
<div id="div1">你好棒</div>
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">

        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
    
            function beforeText() {
                var txt1 = "<p><b>你好棒</b></p>";
                var txt2 = $("<p></p>").text("真的好棒");
                var txt3 = document.createElement("small");
                txt3.innerHTML = "向你致敬";
                $("#div1").before(txt1, txt2, txt3);
            }
                function afterText() {
                var txt1 = "<p><b>你好棒</b></p>";
                var txt2 = $("<p></p>").text("真的好棒");
                var txt3 = document.createElement("small");
                txt3.innerHTML = "向你致敬";
                $("#div1").after(txt1, txt2, txt3);
            }
        </script>
    </head>

    <body>
        <div id="div1" style="color: red;">这是我</div>
        <button onclick="beforeText()">添加到前面</button>
        <button onclick="afterText()">添加到后面</button>
    </body>

</html>