jQuery中after()方法用法實(shí)例
本文實(shí)例講述了jQuery中after()方法用法。分享給大家供大家參考。具體分析如下:
此方法可向每個(gè)匹配元素的外部的尾部追加HTML內(nèi)容。
特別說(shuō)明:
此方法是追加內(nèi)容,也就是原來(lái)的內(nèi)容還在。
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í)例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.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(){
$("div").after("<b> 好好學(xué)習(xí)</b>");
})
</script>
</head>
<body>
<div></div>
</body>
</html>
在原來(lái)div內(nèi)容的后面追加內(nèi)容。
實(shí)例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.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").after("<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ì)有所幫助。
相關(guān)文章
JQuery中attr屬性和jQuery.data()學(xué)習(xí)筆記【必看】
下面小編就為大家?guī)?lái)一篇JQuery中attr屬性和jQuery.data()學(xué)習(xí)筆記【必看】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05jquery實(shí)現(xiàn)美觀的導(dǎo)航菜單鼠標(biāo)提示特效代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)美觀的導(dǎo)航菜單鼠標(biāo)提示特效代碼,涉及jquery鼠標(biāo)事件及頁(yè)面animate動(dòng)畫(huà)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09jQuery ajax請(qǐng)求返回list數(shù)據(jù)動(dòng)態(tài)生成input標(biāo)簽,并把list數(shù)據(jù)賦值到input標(biāo)簽
這篇文章主要介紹了jQuery ajax請(qǐng)求返回list數(shù)據(jù)動(dòng)態(tài)生成input標(biāo)簽,并把list數(shù)據(jù)賦值到input標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2016-03-03JQuery發(fā)送ajax請(qǐng)求時(shí)中文亂碼問(wèn)題解決
這篇文章主要介紹了JQuery發(fā)送ajax請(qǐng)求時(shí)中文亂碼問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11jQuery+CSS實(shí)現(xiàn)一個(gè)側(cè)滑導(dǎo)航菜單代碼
側(cè)滑菜單在網(wǎng)站設(shè)計(jì)中應(yīng)用比較廣泛,在許多網(wǎng)站上都可以看到此種類(lèi)型的菜單。本文給大家介紹jQuery+CSS實(shí)現(xiàn)一個(gè)側(cè)滑導(dǎo)航菜單代碼,需要的朋友參考下吧2016-05-05jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示
這篇文章主要介紹了jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示,感興趣的小伙伴們可以參考一下2015-11-11jQuery實(shí)現(xiàn)帶滑動(dòng)條的菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶滑動(dòng)條的菜單效果代碼,涉及jquery遍歷頁(yè)面元素及動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02