jQuery 如何先創(chuàng)建、再修改、后添加DOM元素
更新時(shí)間：2014年05月20日 09:44:11 作者：
這篇文章主要介紹了jQuery 如何創(chuàng)建、修改、添加DOM元素,需要的朋友可以參考下
如何一氣呵成地，on the fly地操作DOM元素呢？
例如順序執(zhí)行【創(chuàng)建】-> 【修改】-> 【添加】三個(gè)動(dòng)作。
由于jQuery支持鏈?zhǔn)讲僮鳎鋵?shí)就是設(shè)計(jì)模式的builder模式，所以我們可以把三個(gè)操作串在一起來(lái)執(zhí)行。
首先創(chuàng)建一個(gè)p元素，內(nèi)容包含一個(gè)a元素。
$('<p><a>jQuery</a></p>')
然后為a元素添加一個(gè)href屬性
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com')
最后把新添加的p元素添加到body中
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body')
注意，這個(gè)地方需要執(zhí)行end()操作，否則添加到body中的元素不是p元素變成了p元素中的a元素。
其實(shí)，end()操作不能等價(jià)與撤銷，它返回的是previous selection，但是這個(gè)selection已經(jīng)被end之前的操作修改過(guò)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jqeury.com').appendTo('body');
</script>
</body>
</html>
頁(yè)面代碼
例如順序執(zhí)行【創(chuàng)建】-> 【修改】-> 【添加】三個(gè)動(dòng)作。
由于jQuery支持鏈?zhǔn)讲僮鳎鋵?shí)就是設(shè)計(jì)模式的builder模式，所以我們可以把三個(gè)操作串在一起來(lái)執(zhí)行。
首先創(chuàng)建一個(gè)p元素，內(nèi)容包含一個(gè)a元素。
復(fù)制代碼 代碼如下:
$('<p><a>jQuery</a></p>')
然后為a元素添加一個(gè)href屬性
復(fù)制代碼 代碼如下:
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com')
最后把新添加的p元素添加到body中
復(fù)制代碼 代碼如下:
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body')
注意，這個(gè)地方需要執(zhí)行end()操作，否則添加到body中的元素不是p元素變成了p元素中的a元素。
其實(shí)，end()操作不能等價(jià)與撤銷，它返回的是previous selection，但是這個(gè)selection已經(jīng)被end之前的操作修改過(guò)。
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jqeury.com').appendTo('body');
</script>
</body>
</html>
頁(yè)面代碼
相關(guān)文章
jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁(yè)面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實(shí)現(xiàn)上拉刷新下拉加載更多頁(yè)面的呢？下面小編通過(guò)下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁(yè)面及原理，需要的朋友可以參考下2015-08-08
jQuery滾動(dòng)條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
PHP結(jié)合jQuery實(shí)現(xiàn)的評(píng)論頂、踩功能
本文給大家分享的功能是這樣的：你點(diǎn)擊一下頂或踩按鈕，記錄數(shù)值到數(shù)據(jù)庫(kù)，并且有顏色的背景跟著變，按照百分比的變化。這樣就可以通過(guò)背景顏色一眼就看清楚那邊支持的人比較多。2015-07-07
jquery創(chuàng)建并行對(duì)象或者合并對(duì)象的實(shí)現(xiàn)代碼
如果有對(duì)象A ，B 現(xiàn)在我想要合并成對(duì)象C 從C里面可以找到A , B 及其子對(duì)象 怎么做2012-10-10
本篇文章給大家分享jquery常用的函數(shù)與方法，有需要的朋友一起來(lái)學(xué)習(xí)下2015-09-09
jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時(shí)會(huì)發(fā)現(xiàn)數(shù)據(jù)在ff正常，但在chrome與ie瀏覽器中post過(guò)去的數(shù)據(jù)全部是亂碼2013-11-11
jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能,結(jié)合實(shí)例形式分析了jQuery+css控制圖片放大、縮小預(yù)覽查看的相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
jquery實(shí)現(xiàn)加載進(jìn)度條提示效果
這篇文章主要介紹了jquery實(shí)現(xiàn)加載進(jìn)度條提示效果，感興趣的小伙伴們可以參考一下2015-11-11
JQUERY簡(jiǎn)單按鈕輪換選中效果實(shí)現(xiàn)方法
這篇文章主要介紹了JQUERY簡(jiǎn)單按鈕輪換選中效果實(shí)現(xiàn)方法,涉及jQuery鼠標(biāo)事件與css樣式操作的基本技巧,需要的朋友可以參考下2015-05-05
jquery uploadify隱藏上傳進(jìn)度的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery uploadify隱藏上傳進(jìn)度的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02