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)文章
這篇文章主要為大家詳細(xì)介紹了基于jquery二維碼生成插件qrcode的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
下面小編就為大家?guī)硪黄薷腏query Dialog 位置的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JQuery實現(xiàn)的按鈕倒計時效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)修改按鈕屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12
學(xué)習(xí)了jquery,發(fā)現(xiàn)其功能真的很令我驚訝，為表格添加背景色用css也可以實現(xiàn)，卻不得不在<tr>標(biāo)簽里一行一行地添加，但用jquery只需四行代碼，就是這樣精簡的用法，讓我對jquery產(chǎn)生了極大的興趣，也不得不驚嘆新興的技術(shù)所帶來的效率！2010-01-01
這篇文章主要介紹了jQuery中die()方法用法,實例分析了die()方法的功能、定義及移除所有通過live()方法向指定元素添加的一個或多個事件處理程序的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery實現(xiàn)華麗的可折角廣告代碼,涉及jquery鼠標(biāo)hover事件動態(tài)操作頁面元素樣式的技巧,可用于頁面增加廣告的視覺效果,需要的朋友可以參考下2015-09-09
Jquery跨瀏覽器文本復(fù)制插件Zero Clipboard的使用方法
這篇文章主要介紹了Jquery跨瀏覽器文本復(fù)制插件Zero Clipboard的使用方法,需要的朋友可以參考下2016-02-02
下面小編就為大家分享一篇jquery 獲取索引值在一定范圍的列表方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jquery.fileEveryWhere.js 一個跨瀏覽器的file顯示插件
大牛ppk都說過，在從多表單控件中，上傳文件控件的樣式是最難以控制的。見文章Styling an input type="file"。本插件也多是參考此文2011-10-10
jquery和雅虎的yql服務(wù)實現(xiàn)天氣預(yù)報服務(wù)示例
本文介紹一個利用Jquery和雅虎的YQL服務(wù)實現(xiàn)天氣預(yù)報功能,需要的朋友可以參考下2014-02-02