-
append(content) 向每個匹配的元素內部追加內容
appendTo(content) 向所有匹配的內容追加另一個，指定的元素集合中
append 和 appendTo 兩者功能相同，語法和對應的內容不同。
查看全部 -
內部插入是創建子元素，外部插入創建的是兄弟元素
查看全部 -
jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進行一系列的操作。比如我們操作$("li").css('') 給所有的li設置style值，因為jQuery是一個合集對象，所以css方法內部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程。要一個一個給合集中每一個li設置顏色，這里方法就是each
.each() 方法就是一個for循環的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數
所以大體上了解3個重點：
each是一個for循環的包裝迭代器 each通過回調的方式處理，并且會有2個固定的實參，索 引與元素 each回調方法中的this指向當前迭代的dom元素
看一個簡單的案例
<ul> ????<li>慕課網</li> ????<li>Aaron</li> </ul>
開始迭代li，循環2次
$("li").each(function(index,?element)?{ ?????index?索引?0,1 ?????element是對應的li節點?li,li ?????this?指向的是li })這樣可以在循環體會做一些邏輯操作了，如果需要提前退出，可以以通過返回 false以便在回調函數內中止循
查看全部 -
add方法，用來創建一個新的jQuery對象 ，元素添加到匹配的元素集合中
.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(目標 ?位置)查看全部 -
快速查找指定元素集合中每一個元素的同輩元素，此時可以用siblings()方法
理解節點查找關系：
如下藍色的class="item-2"的li元素，紅色的節點就是它的siblings兄弟節點
<ul?class="level-3">????<li?class="item-1">1</li> ????<li?class="item-2">2</li> ????<li?class="item-3">3</li></ul>
siblings()無參數
取得一個包含匹配的元素集合中每一個元素的同輩元素的元素集合
注意：jQuery是一個合集對象，所以通過siblings是匹
配合集中每一個元素的同輩元素siblings()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合
集對象進行一定的篩選，找出目標元素，所以允許傳一
個選擇器的表達式查看全部 -
快速查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合，此時可以用prev()方法
理解節點查找關系：
如下藍色的class="item-2"的li元素，紅色的節點就是它的prev兄弟節點
<ul?class="level-3">????<li?class="item-1">1</li> ????<li?class="item-2">2</li> ????<li?class="item-3">3</li> </ul>
prev()無參數
取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
注意：jQuery是一個合集對象，所以通過prev是匹配合
集中每一個元素的上一個兄弟元素prev()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合
集對象進行一定的篩選，找出目標元素，所以允許傳一
個選擇器的表達式查看全部 -
快速查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合，此時可以用next()方法
理解節點查找關系：
如下class="item-1"元素就是紅色部分，那藍色的class="item-2"就是它的兄弟元素
<ul?class="level-3">????<li?class="item-1">1</li> ????<li?class="item-2">2</li> ????<li?class="item-3">3</li> </ul>
next()無參數
允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，并根據匹配的元素創建一個新的 jQuery 對象。
注意：jQuery是一個合集對象，所以通過next匹配合集
中每一個元素的下一個兄弟元素next()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集 對象進行一定的篩選，找出目標元素，所以允許傳一個選 擇器的表達式
查看全部 -
以選定的元素為中心，往上查找，也就是查找當前元素的父輩祖輩元素，closest()方法，這個方法類似parents但是又有一些細微的區別，屬于使用頻率很高的方法
closest()方法接受一個匹配元素的選擇器字符串
從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素
例如：在div元素中，往上查找所有的li元素，可以這樣表達
$("div").closet("li')注意：jQuery是一個合集對象，所以通過closest是匹配合集中每一個元素的祖先元素
closest()方法給定的jQuery集合或元素來過濾元素
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個jQuery的對象
注意事項：在使用的時候需要特別注意下
粗看.parents()和.closest()是有點相似的，都是往上遍歷祖輩元素，但是兩者還是有區別的，否則就沒有存在的意義了
起始位置不同：.closest開始于當前元素 .parents開始于父元素
遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合
結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象
查看全部 -
快速查找合集里面的每一個元素的所有祖輩元素，此時可以用parents()方法
其實也類似find與children的區別，parent只會查找一級，parents則會往上一直查到查找到祖先節點
理解節點查找關系：
<div?class="div"> ????<ul?class="son"> ????????<li?class="grandson">1</li> ????</ul> </div>
在li節點上找到祖 輩元素div， 這里可以用$("li").parents()方法
parents()無參數
parents()方法允許我們能夠在DOM樹中搜索到這些元素的祖先元素，從有序的向上匹配元素，并根據匹配的元素創建一個新的 jQuery 對象;
返回的元素秩序是從離他們最近的父級元素開始的
注意：jQuery是一個合集對象，所以通過parent是匹配
合集中所有元素的祖輩元素parents()方法選擇性地接受同一型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集 對象進行一定的篩選，找出目標元素，所以允許傳一個選 擇器的表達式
注意事項：
1?.parents()和.parent()方法是相似的，但后者只是 進行了一個單級的DOM樹查找 2??$(?"html"?).parent()方法返回一個包含document 的集合，而$(?"html"?).parents()返回一個空集合。
查看全部 -
快速查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關系），此時可以用parent()方法
因為是父元素，這個方法只會向上查找一級
理解節點查找關系：
<div?class="div"> ????<ul?class="son"> ????????<li?class="grandson">1</li> ????</ul> </div>
查找ul的父元素div, $(ul).parent()，就是這樣簡單的表達
parent()無參數
parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素，從有序的向上匹配元素，并根據匹配的元素創建一個新的 jQuery 對象
注意：jQuery是一個合集對象，所以通過parent是匹配 合集中每一個元素的父元素
parent()方法選擇性地接受同一型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集 對象進行一定的篩選，找出目標元素，所以允許傳一個選 擇器的表達式
查看全部 -
快速查找DOM樹中的這些元素的后代元素，此時可以用find()方法,children是父子關系查找，find是后代關系（包含父子關系）
理解節點查找關系：
<div?class="div"> ????<ul?class="son"> ????????<li?class="grandson">1</li> ????</ul> </div>
代碼如果是$("div").find("li")，此時，li與div是祖輩關系，通過find方法就可以快速的查找到了。
.find()方法要注意的知識點：
find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
與其他的樹遍歷方法不同，選擇器表達式對于 .find() 是必需的參數。如果我們需要實現對所有后代元素的取回，可以傳遞通配選擇器 '*'。
find只在后代中遍歷，不包括自己。
選擇器 context 是由 .find() 方法實現的；因此，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。
注意重點：
.find()和.children()方法是相似的 1.children只查找第一級的子節點 2.find查找范圍包括子節點的所有后代節點
查看全部 -
.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關系）
理解節點查找關系：
<div?class="div"> ????<ul?class="son"> ????????<li?class="grandson">1</li> ????</ul> </div>
代碼如果是$("div").children()，那么意味著只能找到ul，因為div與ul是父子關系，li與div是祖輩關系，因此無法找到。
children()無參數
允許我們通過在DOM樹中對這些元素的直接子元素進行搜索，并且構造一個新的匹配元素的jQuery對象
注意：jQuery是一個合集對象，所以通過children是匹配合集中每一給元素的第一級子元素
.children()方法選擇性地接受同一類型選擇器表達式
$("div").children(".selected")同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式
查看全部 -
如果要將合集中的元素內部所有的子元素用其他元素包裹起來，并當作指定元素的子元素，針對這樣的處理，JQuery提供了一個wrapInner方法
.wrapInner( wrappingElement )：給集合中匹配的元素的內部，增加包裹的HTML結構
聽起來有點繞，可以用個簡單的例子描述下，簡單的看一段代碼：
<div>p元素</div> <div>p元素</div>
給所有元素增加一個p包裹
$('div').wrapInner('<p></p>')最后的結構，匹配的di元素的內部元素被p給包裹了
<div> ????<p>p元素</p> </div> <div> ????<p>p元素</p> </div>
.wrapInner( function )?：允許我們用一個callback函數做參數，每次遇到匹配元素時，該函數被執行，返回一個DOM元素，jQuery對象，或者HTML片段，用來包住匹配元素的內容
以上面案例為例，
$('div').wrapInner(function()?{ ????return?'<p></p>';? })以上的寫法的結果如下，等同于第一種處理了
<div> ????<p>p元素</p> </div> <div> ????<p>p元素</p> </div>
注意：
?當通過一個選擇器字符串傳遞給.wrapInner()?函數， ?其參數應該是格式正確的?HTML，并且?HTML?標簽應該是 ?被正確關閉的。
查看全部 -
wrap是針對單個dom元素處理，如果要將集合中的元素用其他元素包裹起來，也就是給他們增加一個父元素，針對這樣的處理，JQuery提供了一個wrapAll方法
.wrapAll( wrappingElement )：給集合中匹配的元素增加一個外面包裹HTML結構
簡單的看一段代碼：
<p>p元素</p> <p>p元素</p>
給所有p元素增加一個div包裹
$('p').wrapAll('<div></div>')最后的結構，2個P元素都增加了一個父div的結構
<div> ????<p>p元素</p> ????<p>p元素</p> </div>
.wrapAll( function )?：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象
通過回調的方式可以單獨處理每一個元素
以上面案例為例，
$('p').wrapAll(function()?{ ????return?'<div><div/>';? })以上的寫法的結果如下，等同于warp的處理了
<div> ????<p>p元素</p> </div> <div> ????<p>p元素</p> </div>
注意：
.wrapAll()函數可以接受任何字符串或對象，可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套多層，但是最內層只能有一個元素。所有匹配元素將會被當作是一個整體，在這個整體的外部用指定的 HTML 結構進行包裹
查看全部 -
刪除選中元素的父元素
unwrap() ，作用與wrap方法是相反的。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。
看一段簡單案例：
<div> ????<p>p元素</p> </div>
我要刪除這段代碼中的div，一般常規的方法會直接通過remove或者empty方法
$('div').remove();但是如果我還要保留內部元素p，這樣就意味著需要多做很多處理，步驟相對要麻煩很多，為了更便捷，jQuery提供了unwrap方法很方便的處理了這個問題
$('p').unwrap();找到p元素，然后調用unwrap方法，這樣只會刪除父輩div元素了
結果：
<p>p元素</p>
這個方法比較簡單，也不接受任何參數
查看全部
舉報