jQuery中prepend()方法用法實(shí)例
本文實(shí)例講述了jQuery中prepend()方法用法。分享給大家供大家參考。具體分析如下:
此方法可向所有匹配元素的內(nèi)部的前面追加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").prepend("<b> 好好學(xué)習(xí)</b>");
})
</script>
</head>
<body>
<div>原來(lái)內(nèi)容</div>
</body>
</html>[/size]
[size=2]
在原來(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").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>
通過(guò)此實(shí)例大家可以觀察一下html內(nèi)容和文本內(nèi)容的區(qū)別。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
11個(gè)用于提高排版水平的基于jquery的文字效果插件
我們都知道,在傳統(tǒng)的排版當(dāng)中使用DIV+CSS來(lái)實(shí)現(xiàn)的話是很困難的,今天使用jquery插件,你可以實(shí)現(xiàn)卓越的排版效果,專門用于為您提高您的排版水平2012-09-09jquery實(shí)現(xiàn)textarea 高度自適應(yīng)
用jquery實(shí)現(xiàn)的textarea 高度自適應(yīng)代碼。這個(gè)動(dòng)畫效果比較流暢。適合新手學(xué)習(xí)。非常簡(jiǎn)單實(shí)用,這里推薦給小伙伴們。2015-03-03jquery對(duì)Json的各種遍歷方法總結(jié)(必看篇)
下面就為大家?guī)?lái)一篇jquery對(duì)Json的各種遍歷方法總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09利用jQuery的動(dòng)畫函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射效果
本文主要講解jQuery的animate函數(shù)的基本用法,利用動(dòng)畫函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射的效果,對(duì)于學(xué)習(xí)animate很有幫助,有需要的可以參考借鑒。2016-08-08用jQuery獲取IE9下拉框默認(rèn)值問(wèn)題探討
本文與大家詳細(xì)探討下用jQuery獲取IE9下拉框默認(rèn)值的問(wèn)題,如果下拉框沒(méi)有空默認(rèn)值會(huì)怎么樣等一系列問(wèn)題,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07