jquery DOM操作 基于命令改變頁面
更新時間：2010年05月06日 22:15:53 作者：
jquery DOM操作 基于命令改變頁面,需要的朋友可以參考下。
操作屬性
jQuery提供.attr()方法改變屬性值,.removeAttr()方法刪除屬性
$(document).ready(function(){
$('div.character a').each(function(index){
$(this).attr({
'rel': 'external',
'id': 'mylink' + index
});
});
});
插入新元素
jQuery提供了兩種將元素插入到其它元素前面的方法,.insertBefore()方法和.before()方法,而.insertAfter()和.after()方法則用于將元素插入到其它元素后面.
$(document).ready(function(){
/*
*下面兩種方法效果一樣,使用.insertAfter()方法,可以通過連綴更多方法連續(xù)對所創(chuàng)建的a元素進(jìn)行操作.
*而使用.after()方法,連綴的其它方法的操作對象會變成$('div.chapter p')中選擇符匹配的元素
*/
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('div.chapter p').after('<a href="#top">back to top</a>');
});
DOM操作方法簡單歸納
(1)要在每個匹配的元素中插入新元素,使用:
.append()
.appendTo()
.prepend()
.prependTo()
(2)要在每個匹配的元素相鄰的位置上插入新元素,使用:
after()
.insertAfter()
.before()
.insertBefore()
(3)要在每個匹配元素的外部插入新元素,使用:
.wrap()
(4)要用新元素或文本替換每個匹配的元素,使用:
.html()
.text()
(5)要移除每個匹配的元素中的元素,使用:
.empty()
(6)要從文檔中移除每個匹配的元素及其后代元素,但不實際刪除它們,使用:
.remove()
jQuery提供.attr()方法改變屬性值,.removeAttr()方法刪除屬性
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$('div.character a').each(function(index){
$(this).attr({
'rel': 'external',
'id': 'mylink' + index
});
});
});
插入新元素
jQuery提供了兩種將元素插入到其它元素前面的方法,.insertBefore()方法和.before()方法,而.insertAfter()和.after()方法則用于將元素插入到其它元素后面.
$(document).ready(function(){
/*
*下面兩種方法效果一樣,使用.insertAfter()方法,可以通過連綴更多方法連續(xù)對所創(chuàng)建的a元素進(jìn)行操作.
*而使用.after()方法,連綴的其它方法的操作對象會變成$('div.chapter p')中選擇符匹配的元素
*/
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('div.chapter p').after('<a href="#top">back to top</a>');
});
DOM操作方法簡單歸納
(1)要在每個匹配的元素中插入新元素,使用:
.append()
.appendTo()
.prepend()
.prependTo()
(2)要在每個匹配的元素相鄰的位置上插入新元素,使用:
after()
.insertAfter()
.before()
.insertBefore()
(3)要在每個匹配元素的外部插入新元素,使用:
.wrap()
(4)要用新元素或文本替換每個匹配的元素,使用:
.html()
.text()
(5)要移除每個匹配的元素中的元素,使用:
.empty()
(6)要從文檔中移除每個匹配的元素及其后代元素,但不實際刪除它們,使用:
.remove()
相關(guān)文章
這篇文章主要介紹了jquery ajax 請求小技巧,結(jié)合實例形式分析了jquery ajax請求操作相關(guān)配置與使用技巧,需要的朋友可以參考下2019-11-11
jquery實現(xiàn)textarea輸入字符控制(仿微博輸入控制字符)
首先獲取輸入框的值然后獲取輸入框的值;如果字?jǐn)?shù)大于500、發(fā)布按鈕禁用否從發(fā)布按鈕啟用，感興趣的朋友可以詳細(xì)了解下哈2013-04-04
ajax無刷新動態(tài)調(diào)用股票信息(改良版)
今日閑來無事，把上次寫的代碼稍微改了改。增加了動態(tài)追加和刪除股票信息的功能（代碼基于jquery運行：http://jquery.com/） 。由于對Ajax技術(shù)的認(rèn)識還只是在初級階段，總覺得這么些有點別扭，希望大蝦能夠指點一二。2008-11-11
這篇文章主要介紹了jQuery中的jQuery()方法用法,以實例形式較為詳細(xì)的分析jQuery()方法的四種常見語法結(jié)構(gòu)與用法技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
本篇文章是對jQuery中的尺寸調(diào)整組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
很簡單的一個效果插件,但不是經(jīng)常用,怕忘了,以后在用又要去看文檔,所以現(xiàn)在把筆記寫下來,方便以后2010-08-08
使用jquery.validate自定義方法實現(xiàn)"手機(jī)號碼或者固話至少填寫一個"的邏輯驗證
這篇文章主要介紹了使用jquery.validate自定義方法實現(xiàn)"手機(jī)號碼或者固定電話"的邏輯驗證，解決了手機(jī)號碼或者固定電話字至少填寫一個的驗證問題，分享給大家2014-09-09
BootStrap 標(biāo)題設(shè)置跨行無效的解決方法
這篇文章主要介紹了BootStrap 標(biāo)題設(shè)置跨行無效的解決方法,需要的朋友可以參考下2017-10-10
獲取頁面某一元素的絕對X,Y坐標(biāo)，可以用offset()方法：（body屬性設(shè)置margin :0;padding:0;）2010-02-02
詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
這篇文章主要詳細(xì)介紹了jQuery操縱DOM元素屬性 attr()和removeAtrr()方法，非常的全面細(xì)致，在這里推薦給小伙伴們。2015-01-01