快捷導(dǎo)航

詳解jQuery設(shè)置內(nèi)容和屬性

更新時間：2019年04月11日 10:34:20 作者：AllenWalker1936

這篇文章主要介紹了jQuery設(shè)置內(nèi)容和屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、設(shè)置內(nèi)容以及回調(diào)函數(shù)

方法

text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值

例子

$("#btn1").click(function(){
 $("#test1").text("Hello world!");
});//設(shè)置文本內(nèi)容
$("#btn2").click(function(){
 $("#test2").html("<b>Hello world!</b>");
});//設(shè)置元素內(nèi)容
$("#btn3").click(function(){
 $("#test3").val("Dolly Duck");
});//設(shè)置值

$("#btn1").click(function(){
 $("#test1").text(function(i,origText){
  return "Old text: " + origText + " New text: Hello world!
  (index: " + i + ")";
 });
});//返回文本內(nèi)容

$("#btn2").click(function(){
 $("#test2").html(function(i,origText){
  return "Old html: " + origText + " New html: Hello <b>world!</b>
  (index: " + i + ")";
 });
});//返回元素內(nèi)容

TIPS

回調(diào)函數(shù)由兩個參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。

二、設(shè)置屬性以及回調(diào)函數(shù)

方法

attr() - 設(shè)置屬性值

例子

$("button").click(function(){
 $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});//設(shè)置單個屬性

$("button").click(function(){
 $("#w3s").attr({
  "href" : "http://www.w3school.com.cn/jquery",
  "title" : "W3School jQuery Tutorial"
 });
});//設(shè)置多個屬性

$("button").click(function(){
 $("#w3s").attr("href", function(i,origValue){
  return origValue + "/jquery";
 });
});//回調(diào)函數(shù)

總代碼

<!doctype html>
	<head>
	<title>jq設(shè)置內(nèi)容和屬性</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#bt1").click(function(){
				$("#p1").text("hello world1!");
			});
			$("#bt2").click(function(){
				$("#p2").html("<h1>hello world2!</h1>");
			});
			$("#bt3").click(function(){
				$("#t1").val("hello world3!");
			});
			$("#bt4").click(function(){
				$("#p1").text(function(i,origText){
					return "舊文本："+origText+"新文本：這是新文本(index:"+i+")"
				});
			});
			$("#bt5").click(function(){
				$("#p2").html(function(i,origText){
					return "舊HTML："+origText+"新HTML：<b>這是新HTML</b>(index:"+i+")"
				});
			});
			$("#bt6").click(function(){
				$("#t1").val(function(i,origText){
					return "舊值："+origText+"新值：這是新值(index:"+i+")"
				});
			});
			$("#bt7").click(function(){
				$("a").attr("href","https://tieba.baidu.com");
			});
			$("#bt8").click(function(){
				$("a").attr("href",function(i,origValue){return origValue + "/s?wd=1&rsv_spt=1&rsv_iqid=0xbc3b96600002e5f4&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=163&rsv_sug4=1686"});
			});
		});
	</script>
	</head>

	<body>
		<input type="button" id="bt1" value="設(shè)置文本" "">
		<input type="button" id="bt2" value="設(shè)置HTML" "">
		<input type="button" id="bt3" value="設(shè)置值" "">
		<p id="p1">這是文本</p>
		<p id="p2">這是HTML</p>
		<p>這是：<input type="text" value="值" id="t1" style ="width:500px"></p>
		<input type="button" id="bt4" value="顯示舊/新文本" "">
		<input type="button" id="bt5" value="顯示舊/新HTML" "">
		<input type="button" id="bt6" value="顯示舊/新值" "">
		<hr><!--以上是設(shè)置內(nèi)容，一下是設(shè)置屬性-->
		<input type="button" id="bt7" value="改變href值為貼吧" "">
		<p><a id="baidu"  rel="external nofollow" target="_blank">百度</a></p>
		<input type="button" id="bt8" value="改變href值為搜索1（回調(diào)函數(shù)）" "">
	</body>
</html>

以上所述是小編給大家介紹的jQuery設(shè)置內(nèi)容和屬性詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: