怎么在jQuery中設(shè)置內(nèi)容和屬性？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)于2013年開(kāi)始，先為永和等服務(wù)建站，永和等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為永和企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

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

方法

1. text() - 設(shè)置或返回所選元素的文本內(nèi)容

2. html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）

3. val() - 設(shè)置或返回表單字段的值

例子

$("#btn1").click(function(){
 $("#test1").text("Hello world!");
});//設(shè)置文本內(nèi)容
$("#btn2").click(function(){
 $("#test2").html("Hello world!");
});//設(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 world!
  (index: " + i + ")";
 });
});//返回元素內(nèi)容

TIPS

回調(diào)函數(shù)由兩個(gè)參數(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è)置單個(gè)屬性

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

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

總代碼

	
	
	
	
		$(document).ready(function(){
			$("#bt1").click(function(){
				$("#p1").text("hello world1!");
			});
			$("#bt2").click(function(){
				$("#p2").html("
hello world2!
");
			});
			$("#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：這是新HTML(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"});
			});
		});
	
	

	
		
		
		
		這是文本

		這是HTML

		
這是：
		
		
		
		

		
		
百度
		
	

jquery是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，它具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開(kāi)發(fā)網(wǎng)站。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。