jQuery操作元素節(jié)點
更新時間：2022年05月04日 11:39:17 作者：.NET開發(fā)菜鳥
這篇文章介紹了jQuery操作元素節(jié)點的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
jQuery中節(jié)點操作主要分為以下幾種：
- 查找節(jié)點。
- 創(chuàng)建節(jié)點。
- 插入節(jié)點。
- 替換節(jié)點。
- 復(fù)制節(jié)點。
- 刪除節(jié)點。
一、查找節(jié)點
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>節(jié)點操作</title>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 查找節(jié)點
// 獲取h2標(biāo)簽，并將其隱藏
$("h2").hide();
// 獲取Li元素，并添加背景色
$("li").css("background-color","red");
});
</script>
</head>
<body>
<h2>熱門動畫排行</h2>
<ul>
<li>名偵探柯南</li>
<li>阿拉蕾</li>
<li>海賊王</li>
</ul>
</body>
</html>效果：
二、創(chuàng)建和插入節(jié)點
1、創(chuàng)建節(jié)點
工廠函數(shù)$()用于獲取或創(chuàng)建節(jié)點，語法如下：
例如：
2、插入子節(jié)點
元素內(nèi)部插入子節(jié)點，語法如下：
3、插入同輩節(jié)點
元素外部插入同輩節(jié)點，語法如下：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>節(jié)點操作</title>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 查找節(jié)點
// 獲取h2標(biāo)簽，并將其隱藏
$("h2").hide();
// 獲取Li元素，并添加背景色
$("li").css("background-color","red");
// 創(chuàng)建節(jié)點
var $newNode=$("<li>火影忍者</li>"); // 創(chuàng)建含文本的li元素節(jié)點
// 追加子節(jié)點
$("ul").append($newNode);
$($newNode).appendTo($("ul"));
// 前置插入子節(jié)點 添加到第一個位置
$("ul").prepend($newNode);
$($newNode).prependTo($("ul"));
// 元素之后插入同輩節(jié)點
// 創(chuàng)建ul標(biāo)簽
var $newheader=$("<h2>熱門電影排行</h2>");
$("h2").after($newheader);
$($newheader).insertAfter($("h2"));
// 元素之前插入同輩節(jié)點
$("h2").before($newheader);
$($newheader).insertBefore($("h2"));
});
</script>
</head>
<body>
<h2>熱門動畫排行</h2>
<ul>
<li>名偵探柯南</li>
<li>阿拉蕾</li>
<li>海賊王</li>
</ul>
</body>
</html>三、替換節(jié)點
replaceWith()和replaceAll()用于替換節(jié)點，例如：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>節(jié)點操作</title>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 查找節(jié)點
// 獲取h2標(biāo)簽，并將其隱藏
$("h2").hide();
// 獲取Li元素，并添加背景色
$("li").css("background-color","red");
// 創(chuàng)建節(jié)點
var $newNode=$("<li>火影忍者</li>"); // 創(chuàng)建含文本的li元素節(jié)點
// 追加子節(jié)點
$("ul").append($newNode);
$($newNode).appendTo($("ul"));
// 前置插入子節(jié)點 添加到第一個位置
$("ul").prepend($newNode);
$($newNode).prependTo($("ul"));
// 元素之后插入同輩節(jié)點
// 創(chuàng)建ul標(biāo)簽
var $newheader=$("<h2>熱門電影排行</h2>");
$("h2").after($newheader);
$($newheader).insertAfter($("h2"));
// 元素之前插入同輩節(jié)點
$("h2").before($newheader);
$($newheader).insertBefore($("h2"));
// 替換節(jié)點
$("ul li:eq(1)").replaceWith($newNode);
$($newNode).replaceAll($("ul li:eq(1)"));
});
</script>
</head>
<body>
<h2>熱門動畫排行</h2>
<ul>
<li>名偵探柯南</li>
<li>阿拉蕾</li>
<li>海賊王</li>
</ul>
</body>
</html>四、復(fù)制節(jié)點
clone()用于復(fù)制節(jié)點，語法如下：
注意：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>節(jié)點操作</title>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 查找節(jié)點
// 獲取h2標(biāo)簽，并將其隱藏
$("h2").hide();
// 獲取Li元素，并添加背景色
$("li").css("background-color","red");
// 創(chuàng)建節(jié)點
var $newNode=$("<li>火影忍者</li>"); // 創(chuàng)建含文本的li元素節(jié)點
// 追加子節(jié)點
$("ul").append($newNode);
$($newNode).appendTo($("ul"));
// 前置插入子節(jié)點 添加到第一個位置
$("ul").prepend($newNode);
$($newNode).prependTo($("ul"));
// 元素之后插入同輩節(jié)點
// 創(chuàng)建ul標(biāo)簽
var $newheader=$("<h2>熱門電影排行</h2>");
$("h2").after($newheader);
$($newheader).insertAfter($("h2"));
// 元素之前插入同輩節(jié)點
$("h2").before($newheader);
$($newheader).insertBefore($("h2"));
// 替換節(jié)點
$("ul li:eq(1)").replaceWith($newNode);
$($newNode).replaceAll($("ul li:eq(1)"));
// 復(fù)制節(jié)點
$("ul li:eq(1)").clone(true).appendTo("ul");
// 輸出元素本身html
alert($("<div></div>").append($("ul li:eq(1)").clone(true)).html()) ;
});
</script>
</head>
<body>
<h2>熱門動畫排行</h2>
<ul>
<li>名偵探柯南</li>
<li>阿拉蕾</li>
<li>海賊王</li>
</ul>
</body>
</html>五、刪除節(jié)點
jQuery提供了三種刪除節(jié)點的辦法：
例如：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>節(jié)點操作</title>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 查找節(jié)點
// 獲取h2標(biāo)簽，并將其隱藏
$("h2").hide();
// 獲取Li元素，并添加背景色
$("li").css("background-color","red");
// 創(chuàng)建節(jié)點
var $newNode=$("<li>火影忍者</li>"); // 創(chuàng)建含文本的li元素節(jié)點
// 追加子節(jié)點
$("ul").append($newNode);
$($newNode).appendTo($("ul"));
// 前置插入子節(jié)點 添加到第一個位置
$("ul").prepend($newNode);
$($newNode).prependTo($("ul"));
// 元素之后插入同輩節(jié)點
// 創(chuàng)建ul標(biāo)簽
var $newheader=$("<h2>熱門電影排行</h2>");
$("h2").after($newheader);
$($newheader).insertAfter($("h2"));
// 元素之前插入同輩節(jié)點
$("h2").before($newheader);
$($newheader).insertBefore($("h2"));
// 替換節(jié)點
$("ul li:eq(1)").replaceWith($newNode);
$($newNode).replaceAll($("ul li:eq(1)"));
// 復(fù)制節(jié)點
$("ul li:eq(1)").clone(true).appendTo("ul");
// 輸出元素本身html
alert($("<div></div>").append($("ul li:eq(1)").clone(true)).html()) ;
// 刪除節(jié)點
$("ul li:eq(1)").remove();
$("ul li:eq(1)").detach();
$("ul li:eq(1)").empty(); // 只清空節(jié)點內(nèi)容
});
</script>
</head>
<body>
<h2>熱門動畫排行</h2>
<ul>
<li>名偵探柯南</li>
<li>阿拉蕾</li>
<li>海賊王</li>
</ul>
</body>
</html>到此這篇關(guān)于jQuery操作元素節(jié)點的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JQuery常見節(jié)點操作實例分析
- jQuery替換節(jié)點元素的操作方法
- jQuery中 DOM節(jié)點操作方法大全
- JQuery 選擇器、DOM節(jié)點操作練習(xí)實例
- JQuery Ajax 異步操作之動態(tài)添加節(jié)點功能
- jQuery插件zTree實現(xiàn)的基本樹與節(jié)點獲取操作示例
- jquery插入兄弟節(jié)點的操作方法
- jquery對dom節(jié)點的操作【推薦】
- 有關(guān)jquery與DOM節(jié)點操作方法和屬性記錄
- jQuery遍歷DOM節(jié)點操作之filter()方法詳解
- jQuery DOM插入節(jié)點操作指南
相關(guān)文章
完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動特效
本文是作者學(xué)習(xí)jQuery之后練手之作，兼容各大瀏覽器，非常的精美實用，這里放出來給小伙伴們，有需要的直接拿走，別跟我客氣^_^2014-11-11
jquery 實現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))
jquery 實現(xiàn)全選，反選，全不選等功能，下面直接以例子進(jìn)行說明,需要的朋友可以參考下2012-10-10
jQuery實現(xiàn)html可聯(lián)動的百分比進(jìn)度條
這篇文章主要介紹了jQuery實現(xiàn)html可聯(lián)動的百分比進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了jquery獲取選中的文本和值的方法,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jQuery簡單驗證上傳文件大小及類型的方法,結(jié)合實例形式分析了jQuery針對上傳文件的類型與大小運算操作相關(guān)技巧,需要的朋友可以參考下2016-06-06
遍歷每一行的同時一定要記住這里是gridviewrow不是datarow，找到這個選中項在執(zhí)行刪除2013-04-04
jquery插件開發(fā)基礎(chǔ)：開發(fā)jQuery 插件的基本格式,開發(fā)全局函數(shù)的基本格式，接下來為您詳細(xì)介紹，感興趣的朋友可以了解哦2013-01-01
基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果
這篇文章主要介紹了基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果,需要的朋友可以參考下2015-12-12
jQuery中$.ajax()和$.getJson()同步處理詳解
這篇文章主要介紹了jQuery中$.ajax()和$.getJson()同步處理詳解的相關(guān)資料，非常的細(xì)致全面，有需要的小伙伴可以參考下。2015-08-08
前幾天看到事件委托的時候，關(guān)于live()方法講的不是很詳細(xì)，就去搜了一下關(guān)于live()和delegate()的，最后看源碼發(fā)現(xiàn)bind()和delegate()都是由on()實現(xiàn)的，感興趣的朋友可以了解下，或許本文對你有所幫助2013-02-02