jQuery 如何先創(chuàng)建、再修改、后添加DOM元素
更新時間：2014年05月20日 09:44:11 作者：
這篇文章主要介紹了jQuery 如何創(chuàng)建、修改、添加DOM元素,需要的朋友可以參考下
如何一氣呵成地，on the fly地操作DOM元素呢？
例如順序執(zhí)行【創(chuàng)建】-> 【修改】-> 【添加】三個動作。
由于jQuery支持鏈式操作，其實就是設計模式的builder模式，所以我們可以把三個操作串在一起來執(zhí)行。
首先創(chuàng)建一個p元素，內(nèi)容包含一個a元素。
$('<p><a>jQuery</a></p>')
然后為a元素添加一個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')
注意，這個地方需要執(zhí)行end()操作，否則添加到body中的元素不是p元素變成了p元素中的a元素。
其實，end()操作不能等價與撤銷，它返回的是previous selection，但是這個selection已經(jīng)被end之前的操作修改過。
<!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>
頁面代碼
例如順序執(zhí)行【創(chuàng)建】-> 【修改】-> 【添加】三個動作。
由于jQuery支持鏈式操作，其實就是設計模式的builder模式，所以我們可以把三個操作串在一起來執(zhí)行。
首先創(chuàng)建一個p元素，內(nèi)容包含一個a元素。
復制代碼 代碼如下:
$('<p><a>jQuery</a></p>')
然后為a元素添加一個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')
注意，這個地方需要執(zhí)行end()操作，否則添加到body中的元素不是p元素變成了p元素中的a元素。
其實，end()操作不能等價與撤銷，它返回的是previous selection，但是這個selection已經(jīng)被end之前的操作修改過。
復制代碼 代碼如下:
<!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>
頁面代碼
相關(guān)文章
本文主要介紹了寫jQuery插件時該注意的知識點，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jquery實現(xiàn)的分頁顯示功能,涉及jQuery的ajax交互及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-08-08
這篇文章介紹了jQuery表單獲取和失去焦點輸入框提示效果的實例代碼，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了jQuery學習筆記之創(chuàng)建DOM元素的相關(guān)資料,需要的朋友可以參考下2015-01-01
JQuery操作與遍歷元素并設置其屬性、樣式和內(nèi)容
本文詳細講解了JQuery操作與遍歷元素并設置其屬性、樣式和內(nèi)容的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細介紹了jQuery創(chuàng)建折疊式菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了jQuery插件開發(fā)中的extend方法，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了jquery實現(xiàn)彈出層遮罩效果的簡單實例。需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
jQuery插件開發(fā)的五種形態(tài)小結(jié)
這篇文章主要介紹了jQuery插件開發(fā)的五種形態(tài)小結(jié)，具體的內(nèi)容就是解決javascript插件的8種特征，非常的詳細，這里推薦給小伙伴們。2015-03-03
這篇文章主要介紹了JQuery動態(tài)添加和刪除表格行的方法,實例分析了jQuery中動態(tài)操作表格行的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03