jQuery中prepend()方法用法實(shí)例
更新時(shí)間：2014年12月25日 10:42:43 投稿：shichen2014
這篇文章主要介紹了jQuery中prepend()方法用法,以實(shí)例形式較為詳細(xì)的分析了prepend()方法的功能、定義及使用技巧,并對比分析了與text()方法的不同之處,需要的朋友可以參考下
本文實(shí)例講述了jQuery中prepend()方法用法。分享給大家供大家參考。具體分析如下：
此方法可向所有匹配元素的內(nèi)部的前面追加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).prepend(content)
實(shí)例代碼:
實(shí)例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.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").prepend("<b> 好好學(xué)習(xí)</b>");
})
</script>
</head>
<body>
<div>原來內(nèi)容</div>
</body>
</html>[/size]
[size=2]
在原來div內(nèi)容的前面追加內(nèi)容。
實(shí)例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.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").prepend("<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ū)別。
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法,涉及jquery通過定時(shí)器采用Ajax方法讀取并處理XML文件的相關(guān)技巧,需要的朋友可以參考下2015-07-07
jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果實(shí)例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果,結(jié)合具體實(shí)例形式詳細(xì)分析了FusionCharts插件繪制3D柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
jquery精度計(jì)算代碼 jquery指定精確小數(shù)位
這篇文章主要為大家詳細(xì)介紹了jquery精度計(jì)算代碼,jquery指定精確小數(shù)位，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
查找a元素的方法有很對，可以通過ID或者class,但如果這兩個(gè)條件都不具備的話，難道就沒有方法了嗎？NO,通過url也是可以做到的，下面有個(gè)不錯(cuò)的示例，大家可以感受下2014-04-04
基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解
本篇文章介紹了，基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解需要的朋友參考下2013-04-04
Jquery的擴(kuò)展方法extend是我們在寫插件的過程中常用的方法，該方法有一些重載原型，在此，我們一起去了解了解2012-02-02
jquery實(shí)現(xiàn)滑動(dòng)圖片自己測試的例子
最近使用jquery寫了一個(gè)圖片滑動(dòng)的插件，雖然還是有些問題存在，用法很簡單，希望對大家有所幫助2013-11-11
jQuery插件擴(kuò)展extend的簡單實(shí)現(xiàn)原理
下面小編就為大家?guī)硪黄猨Query插件擴(kuò)展extend的簡單實(shí)現(xiàn)原理。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了jQuery常用的4種加載方式,結(jié)合實(shí)例形式分析了jQuery在頁面加載之前與加載之后執(zhí)行的4種常用加載方式,需要的朋友可以參考下2016-07-07