jQuery中after()方法用法實(shí)例
更新時(shí)間：2014年12月25日 11:35:10 投稿：shichen2014
這篇文章主要介紹了jQuery中after()方法用法,以實(shí)例形式較為詳細(xì)的分析了after()方法的功能、特性與使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery中after()方法用法。分享給大家供大家參考。具體分析如下：
此方法可向每個(gè)匹配元素的外部的尾部追加HTML內(nèi)容。
特別說明:
此方法是追加內(nè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ì)被渲染。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(selector).after(content)
實(shí)例代碼:
實(shí)例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<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>
在原來div內(nèi)容的后面追加內(nèi)容。
實(shí)例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<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>
通過此實(shí)例大家可以觀察一下html內(nèi)容和文本內(nèi)容的區(qū)別。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
JQuery插件開發(fā)示例代碼2013-11-11
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
1.2.0版本插件在1.0.0插件基礎(chǔ)上進(jìn)一步修改，版權(quán)信息僅保留致謝信息，刪除作者為了代碼整體提示美觀度，故將jQuery官方兩位數(shù)版本變更為三位數(shù)版本2011-07-07
jQuery實(shí)現(xiàn)HTML5 placeholder效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)HTML5 placeholder效果實(shí)例,本文目的主要是在需要兼容一些瀏覽器時(shí)使用,需要的朋友可以參考下2014-12-12
jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jquerymobile checkbox及時(shí)刷新才能獲取其準(zhǔn)確值
一般登錄的時(shí)候 都有個(gè)記住用戶名 記住密碼 的兩個(gè)checkbox 多選框用jquerymobile 做頁面 ，當(dāng)勾選checkbox 時(shí)總是不能獲取它正確的值2012-04-04
jquery移除button的inline onclick事件(已測試及兼容瀏覽器)
這種方法在Google Chrome下正常工作，但是在IE的兼容模式下會(huì)馬上調(diào)用reclick方法，這不是我們想要的效果;為了解決這個(gè)問題，我們可以換個(gè)思路，就是延遲綁定click事件2013-01-01
Jquery根據(jù)瀏覽器窗口改變調(diào)整大小的方法
下面小編就為大家?guī)硪黄狫query根據(jù)瀏覽器窗口改變調(diào)整大小的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
使用jQuery簡化Ajax開發(fā) Ajax開發(fā)入門
jQuery是一個(gè)可以簡化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，異步Javascript和XML）編程的Javascript庫。不同于其他的Javascript庫，jQuery有他自己的哲學(xué)，使你可以 很簡單的編寫代碼。2009-10-10
在一個(gè)頁面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的方法
最近發(fā)現(xiàn)項(xiàng)目中很多地方都是樹形菜單，而這些樹形菜單都是使用樹形插件zTree來制作的，下面這篇文章主要給大家介紹了關(guān)于在一個(gè)頁面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要介紹了jQuery事件綁定和委托,以實(shí)例形式分析了jQuery事件綁定和委托中on()、bind()、live()、delegate()的用法,具有一定的學(xué)習(xí)與借鑒價(jià)值,需要的朋友可以參考下2014-11-11