jQuery中html()方法用法實(shí)例
本文實(shí)例講述了jQuery中html()方法用法。分享給大家供大家參考。具體分析如下:
此方法能夠設(shè)置和取得匹配元素的HTML內(nèi)容,原來(lái)的內(nèi)容將會(huì)被新設(shè)置的內(nèi)容替換。
特別說(shuō)明:
HTML內(nèi)容就是內(nèi)容中可以包含HTML標(biāo)簽,并且能夠被瀏覽器渲染。
文本內(nèi)容是先將內(nèi)容中的HTML預(yù)定義字符轉(zhuǎn)換成html字符實(shí)體,這樣HTML標(biāo)簽就不會(huì)被渲染。
語(yǔ)法結(jié)構(gòu)一:
此時(shí)方法不帶參數(shù)時(shí)候是取得第一個(gè)匹配元素的html內(nèi)容。
此方法與text()方法沒(méi)有參數(shù)用法類(lèi)似,但是還是有很大區(qū)別:
一.html()方法取得第一個(gè)匹配元素的內(nèi)容,而text()方法是取得所有匹配元素包含的內(nèi)容。
二.html()方法取得內(nèi)容html內(nèi)容,而text()方法取得是文本內(nèi)容。
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>腳本之家</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("div").html());
})
})
</script>
</head>
<body>
<div>
<ul>
<li><span>腳本之家歡迎您</span></li>
</ul>
</div>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
以上代碼將返回div元素中的內(nèi)容。
語(yǔ)法結(jié)構(gòu)二:
帶有參數(shù)的時(shí)候是設(shè)置所有匹配元素而的html內(nèi)容。
此方法與text()方法帶有參數(shù)的用法類(lèi)似,但是還是有很大的區(qū)別:
html()方法設(shè)置的是html內(nèi)容,而text()方法設(shè)置的是文本內(nèi)容。
實(shí)例代碼:
以下代碼將div中的html內(nèi)容設(shè)置為"<b>我是重新設(shè)置后的內(nèi)容</b>"。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>腳本之家</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").html("<b>我是重新設(shè)置后的內(nèi)容</b>");
})
})
</script>
</head>
<body>
<div>原來(lái)內(nèi)容</div>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
實(shí)例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>腳本之家</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".html").html("<b>好好學(xué)習(xí)</b>");
$(".text").text("<b>好好學(xué)習(xí)</b>");
})
})
</script>
</head>
<body>
<div class="html"></div>
<div class="text"></div>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
通過(guò)此實(shí)例大家可以觀察一下html內(nèi)容和文本內(nèi)容的區(qū)別。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery刪除節(jié)點(diǎn)的三個(gè)方法即remove()detach()和empty()
- 得到j(luò)Query detach()后節(jié)點(diǎn)中的某個(gè)值實(shí)現(xiàn)代碼
- jQuery中remove()方法用法實(shí)例
- jQuery中replaceWith()方法用法實(shí)例
- jQuery中before()方法用法實(shí)例
- jQuery中after()方法用法實(shí)例
- jQuery中prepend()方法用法實(shí)例
- jQuery中append()方法用法實(shí)例
- jQuery中val()方法用法實(shí)例
- jQuery中animate()方法用法實(shí)例
- jQuery中detach()方法用法實(shí)例
相關(guān)文章
jQuery循環(huán)滾動(dòng)新聞列表示例代碼
jquery實(shí)現(xiàn)點(diǎn)擊公告的上一條下一條來(lái)查看滾動(dòng)條,示例代碼如下,希望對(duì)大家有所幫助2014-06-06jQuery實(shí)現(xiàn)在下拉列表選擇時(shí)獲取json數(shù)據(jù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)在下拉列表選擇時(shí)獲取json數(shù)據(jù)的方法,主要涉及jQuery中g(shù)etJSON方法的使用技巧,需要的朋友可以參考下2015-04-04tuzhu_req.js 實(shí)現(xiàn)仿百度圖片首頁(yè)效果
這篇文章主要介紹了tuzhu_req.js 實(shí)現(xiàn)仿百度圖片首頁(yè)效果的相關(guān)資料,需要的朋友可以參考下2015-08-08jquery加載頁(yè)面的方法(頁(yè)面加載完成就執(zhí)行)
jquery加載頁(yè)面的方法(頁(yè)面加載完成就執(zhí)行),建議大家看下windows.onload與$(document).ready之間的區(qū)別。2011-06-06jquery正則表達(dá)式驗(yàn)證(手機(jī)號(hào)、身份證號(hào)、中文名稱(chēng))
這篇文章主要介紹了jquery正則表達(dá)式驗(yàn)證,實(shí)現(xiàn)手機(jī)號(hào)、身份證號(hào)、中文名稱(chēng)驗(yàn)證,感興趣的小伙伴們可以參考一下2015-12-12jQuery實(shí)現(xiàn)復(fù)選框成對(duì)選擇及對(duì)應(yīng)取消的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)復(fù)選框成對(duì)選擇及對(duì)應(yīng)取消的方法,實(shí)例分析了jQuery中change方法的使用技巧,需要的朋友可以參考下2015-03-03jquery綁定事件 bind和on的用法與區(qū)別分析
這篇文章主要介紹了jquery綁定事件 bind和on的用法與區(qū)別,結(jié)合實(shí)例形式分析了jquery綁定事件 bind和on的基本功能、用法、區(qū)別與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁(yè)面的代碼
jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁(yè)面(包括jquery頁(yè)面加載完畢才執(zhí)行方法)2011-01-01Jquery中offset()和position()的區(qū)別分析
這篇文章主要介紹了Jquery中offset()和position()的區(qū)別,實(shí)例分析了offset()與position()的使用的技巧與區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02