JQuery學習二： DOM操作

一.節點的操作

1.查找節點：

var $var_1=$("htmltype"); //這句話就是獲取所有htmltype節點

如：var $ul_1=$("ul");

2.創建並追加節點：
創建節點：常見的就是直接把這個節點的結構給通過HTML標記字符串描述出來，通過$()函數處理，
var $var_1=$("<htmltype>");//這句話是創建一個節點

$("htmltype2").append($var_1) ; //這句話是把節點插入所有htmltype2節點中
創建流程比較簡單，大體如下：

創建節點(常見的：元素、屬性和文本)
添加節點的一些屬性
加入到文檔中
流程中涉及的一點方法：

創建元素：document.createElement
設置屬性：setAttribute
添加文本：innerHTML
加入文檔：appendChild

var $li_1=$("<li  title="title1">香蕉</li>");

         $("ul").append($li_1);

其中插入方法有以下幾種：
（1）append() 把B追加到A內部
$(".content").append('<div class="append">B追加到A內部</div>')
（2）appendTo() 把A追加到B內部
$('<div class="appendTo">A追加到B內部 </div>').appendTo($(".content"))
簡單來說，append()前面是要選擇的對象，後面是要在對象內插入的元素內容，appendTo()前面是要插入的元素內容，而後面是要選擇的對象

（3）prepend() 把B追加到A內部的內容前，將指定元素插入到匹配元素裏面作爲它的第一個子元素 (如果要作爲最後一個子元素插入用.append()).
$('.aaron1') .prepend('<p>prepend增加的p元素</p>')
（4）prependTo() 把A追加到B的內容前
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))

這裏總結下內部操作四個方法的區別：
append()向每個匹配的元素內部追加內容
prepend()向每個匹配的元素內部前置內容
appendTo()把所有匹配的元素追加到另一個指定元素的集合中
prependTo()把所有匹配的元素前置到另一個指定的元素集合中

（5）after() 在A後追加B
$(".test2").after('<p style="color:blue">在A後追加B', '<p style="color:blue">多參數</p>')
（6）insertAfter() 在B後追加A
$('<p style="color:red">在test2後追加p</p>', '<p style="color:red">多參數</p>').insertAfter($(".test2")) })

（7）before() 在A前追加B
$(".test1").before('<p style="color:red">在test1前追加p','<p style="color:red">多參數</p>')
（8）insertBefore()在B前追加A
$('<p style="color:red">在test1前追加p</p>', '<p style="color:red">多參數</p>').insertBefore($(".test1")) })

$("ul").append("<li>你好</li>");//在ul內部追加li

         $("<li>你好</li>").appendTo("ul");//在ul內部追加li

3.刪除節點

remove() 刪除該元素，remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。
empty() 清空節點，它只移除了指定元素中的所有子節點

$("ul  li:eq[1]").remove(); //獲取ul中的第二個li並刪除
$("ul  li").remove(“li[title="菠蘿"]”);//刪除ul中li元素屬性title="菠蘿"的元素

如果不通過remove方法刪除這個節點其實也很簡單，但是同時需要把事件給銷燬掉，這裏是爲了防止”內存泄漏”，所以前端開發者一定要注意，綁了多少事件，不用的時候一定要記得銷燬

remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點

我們可以通過$()選擇一組相同的元素，然後通過remove（）傳遞篩選的規則，從而這樣處理$("p").remove(":contains('3')")

4.複製節點

clone()深度複製所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點。
如果節點有事件或者數據之類的其他處理，我們需要通過clone(ture)傳遞一個布爾值ture用來指定，這樣不僅僅只是克隆單純的節點結構，還要把附帶的事件與數據給一併克隆了

$("ul  li:eq[1]").clone().appenTo("ul");//複製並追加到ul中，只複製是不會顯示出來的

使用上就是這樣簡單，使用克隆的我們需要額外知道的細節：

clone()方法時，在將它插入到文檔之前，我們可以修改克隆後的元素或者元素內容，如代碼 $(this).clone().css('color','red')增加了一個顏色；
通過傳遞true，將所有綁定在原始元素上的事件處理函數複製到克隆元素上；
clone()方法是jQuery擴展的，只能處理通過jQuery綁定的事件與數據
元素數據（data）內對象和數組不會被複制，將繼續被克隆元素和原始元素共享。要複製所有數據，需要手動複製每一個

5.替換節點

replaceWith(）將B替換所有A
$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')
.replaceAll( target ) ：用A替換所有的B
$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')
功能類似，但是目標和源相反

.replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有數據和事件處理程序
.replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery對象，所以可以和其他方法鏈接使用
返回的jQuery對象引用的是被刪除的節點，而不是通過replaceWith/replaceAll方法替換的節點

6.包裹節點
（1）wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構
$('a').wrap(function() {return '<div class="' + $(this).text() + '" />'; })
（2）warpAll();//用B包裹A ，wrap是針對單個dom元素處理，如果要將集合中的元素用其他元素包裹起來，也就是給他們增加一個父元素
$('a').wrapAll(function() {return '<div></div>' })
$('p').wrapAll('<div></div>');
（3）warpInner();//用B包裹A的內容，增加包裹的HTML結構
可以用個簡單的例子描述下，簡單的看一段代碼：

<p>p元素</p>
<p>p元素</p>

給所有p元素增加一個div包裹$('p').wrapInner('<div></div>')
最後的結構，匹配的p元素的內部元素被div給包裹了

<p>
    <div>p元素</div>
</p>
<p>
    <div>p元素</div>
</p>

（4）unwrap()將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。
看一段簡單案例：

<div>
    <p>p元素</p>
</div>

我要刪除這段代碼中的div，一般常規的方法會直接通過remove或者empty方法$(‘div’).remove();
但是如果我還要保留內部元素p，這樣就意味着需要多做很多處理，步驟相對要麻煩很多，爲了更便捷，jQuery提供了unwarp方法很方便的處理了這個問題$('p').unwarp();找到p元素，然後調用unwarp方法，這樣只會刪除父輩div元素了。這個方法比較簡單，也不接受任何參數

 $('p').unwrap('<div></div>')；
 $('a').unwrap(function() {
            return '<div></div>';
        })

二 .JQuery遍歷操作
1 .children() 獲取html元素的所有子節點，如果想快速查找合集裏面的第一級子元素，此時可以用children()方法。無參數。
$('.div').children().css('border', '3px solid red')
注意：jQuery是一個合集對象，所以通過children是匹配合集中每一給元素的第一級子元素
無參數。但是.children()方法選擇性地接受同一類型選擇器表達式$(“div”).children(“.selected”)如：$('.div').children(':last').css('border', '3px solid blue')

2 . find()方法：快速查找DOM樹中的這些元素的後代元素，這也是開發使用頻率很高的方法。這裏要注意 children與find方法的區別，children是父子關係查找，find是後代關係（包含父子關係，孫子輩都可以）
與其他的樹遍歷方法不同，選擇器表達式對於 .find() 是必需的參數。如果我們需要實現對所有後代元素的取回，可以傳遞通配選擇器 ‘*’。
find只在後代中遍歷，不包括自己。

$(".left").find("li:last").css("border","1px solid blue");
$("p").find($spans).css('color', 'red');})

3.parent()方法:如果想快速查找合集裏面的每一個元素的父元素（這裏可以理解爲就是父親-兒子的關係）
$('.level-3').parent('li').css('border', '1px solid red');
注：只會向上查找一級；
jQuery是一個合集對象，所以通過parent是匹配合集中每一給元素的父元素；
parent()無參數，parent()方法選擇性地接受同一型選擇器表達式，同樣的也是因爲jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式：

$('.item-a').parent(':last').css('border', '1px solid blue');

4.parents()方法快速查找合集裏面的每一個元素的所有祖輩元素，返回的元素秩序是從離他們最近的父級元素開始的
$(".item-b").parents().css("border",'1px solid red');
注意：$( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合。
parents()無參數，parents()方法選擇性地接受同一型選擇器表達式$('.item-b').parents('.first-div').css('border', '2px solid blue')

5 .closest()方法：從元素本身開始，在DOM 樹上逐級向上級元素匹配，並返回最先匹配的祖先元素，使用頻率很高的方法
注意：jQuery是一個合集對象，所以通過closest是匹配合集中每一個元素的祖先元素

$('.item-1').closest($('.level-2 li')).css("border","1px solid #f00");

.parents()和.closest()是有點相似的，都是往上遍歷祖輩元素，但是兩者還是有區別的，否則就沒有存在的意義了：

起始位置不同：.closest開始於當前元素 .parents開始於父元素
遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，知道找到一個匹配就停止查找，parents一直查找到根元素，並將匹配的元素加入集合
結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象

6.next()方法：指定元素集合中每一個元素緊鄰的後面同輩元素的元素集合

 $('.item-2').next(':first').css('border', '1px solid blue')//每一個元素緊鄰的後面同輩元素的元素集合中篩選出第一個

7.prev()方法：緊鄰的前面同輩元素的元素集合
8.siblings()：緊鄰的前面後面同輩元素
9.add()方法：用來創建一個新的jQuery對象，元素添加到匹配的元素集合中$('li').add('<p>新的p元素</p>').appendTo($('.right')) })
.add()的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用。
簡單的看一個案例：

操作：選擇所有的li元素，之後需要把p元素也加入到li的合集中

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>

處理一：傳遞選擇器

$('li').add('p')

處理二：傳遞dom元素

$('li').add(document.getElementsByTagName('p')[0])

還有一種方式，就是動態創建P標籤加入到合集，然後插入到指定的位置，但是這樣就改變元素的本身的排列了

$('li').add('<p>新的p元素</p>').appendTo(目標位置)

10.each()方法就是一個for循環的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作爲參數(從0開始計數）

$("li").each(function(index) {
            if (index % 2) {
                $(this).css('color','blue')
            }
        })

each通過回調的方式處理，並且會有2個固定的實參，索引與元素
each回調方法中的this指向當前迭代的dom元素
可以在循環體會做一些邏輯操作，如果需要提前退出，可以以通過返回 false以便在回調函數內中止循環

三.屬性操作

1.attr（）獲取和設置屬性，通過參數個數來實現不同功能

var $var_1=$("p");`//這句話是獲取節點P
var $p_1=$var_1.attr("title");`//獲取節點P的title屬性
var $p_2=$var_1.attr("title","你好");`//設置節點P的title屬性爲"你好"

2.removeAttr（）刪除屬性

$("p").removeAttr("title");//刪除節點P的Title屬性

四.樣式操作

1.attr(“class”)獲取和設置樣式

var $var_class=$("p").attr("class");//獲取節點P的class屬性

$("p").attr("class","class1");設置節點P的class屬性爲樣式表類class1

2.addClass() 追加樣式到A

$("p").addClass("another");添加樣式表類another類到P

3.移除樣式
removeClass() 移除類

4.切換樣式
toggleClass() 切換clss屬性類爲新的類

5.判斷某個樣式是否存在
hasClass()

其他常用方法：

1.html() 該方法獲取html元素的內容，如：var var1=$("p").html();//獲取P元素內的內容 
2.text() 獲取或設置某個html元素的內容 
3.val() 獲取元素的Value值 
4.$("p").css("color","red");//設置P的css屬性{color:red;}

JQuery學習二： DOM操作

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

2020年上半年數據庫系統工程師考試

基於 Milvus + LlamaIndex 實現高級 RAG

【2024-05-21】以茶會友

sublime Text

CSS知識點總結(二)單位

Angularjs 學習筆記（二）MVC與作用域

ES6學習筆記（七）Iterator和for...of循環

JS中的call、apply方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結