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