資訊專欄INFORMATION COLUMN
摘要：已存在節(jié)點(diǎn)是移動(dòng)，新節(jié)點(diǎn)是新增。鏈?zhǔn)讲僮鲗?duì)象為。將他們的父節(jié)點(diǎn)移除。從中刪除所有匹配的元素。一個(gè)布爾值或者指示事件處理函數(shù)是否會(huì)被復(fù)制。以上版本默認(rèn)值是一個(gè)布爾值，指示是否對(duì)事件處理程序和克隆的元素的所有子元素的數(shù)據(jù)應(yīng)該被復(fù)制。
前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。
上一節(jié)我們講了 jQuery 的基本使用。這節(jié)我們講元素節(jié)點(diǎn)相關(guān)的內(nèi)容。
內(nèi)容目錄選擇器
文檔處理
篩選
選擇器選擇器在初級(jí)的時(shí)候就講過(guò)了。上節(jié)也簡(jiǎn)單的列了一下。這節(jié)就找一點(diǎn)騷東西說(shuō)一說(shuō)吧。
Sizzle 選擇器引擎先問(wèn)問(wèn)DOM的API查找性能，有不知道的嗎？由快到慢 ID > Class > Name > Tag。
CSS 選擇器匹配的順序，有不知道的嗎？從左往右
jQuery的選擇器匹配的順序，有沒(méi)有不知道的？Sizzle 選擇器引擎從左往右，當(dāng)然，既然人家優(yōu)秀肯定有道理。如果支持更快querySelector會(huì)選擇更快的方法。如果有id選擇器，他會(huì)先進(jìn)行id選擇，縮小范圍。感興趣可以去看看Sizzle選擇器引擎介紹，有能力讀源碼當(dāng)然更好了。
舉個(gè)栗子
查詢語(yǔ)句：
$("div span")
代碼結(jié)構(gòu)：
div div div span div span
先查div的話，我們需要遍歷多少次？?jī)纱慰梢詥幔康侨绻炔?b>span，那我們parent去找直到找到頭就完事了。
再說(shuō)另一個(gè)，子節(jié)點(diǎn)只有一個(gè)父節(jié)點(diǎn)。但是父節(jié)點(diǎn)會(huì)有很多子節(jié)點(diǎn)。
文檔處理 append、appendTo 和 prepend、prependTo操作的是父子節(jié)點(diǎn)，效果也等同于原生的api。已存在節(jié)點(diǎn)是移動(dòng)，新節(jié)點(diǎn)是新增。
parent.append(child) 是將child添加到parent的最后面。鏈?zhǔn)讲僮鲗?duì)象為parent。對(duì)應(yīng)原生appendChild
child.appendTo(parent) 是將child添加到parent的最后面。鏈?zhǔn)讲僮鲗?duì)象為child。
parent.prepend(child) 是將child添加到parent的最前面。鏈?zhǔn)讲僮鲗?duì)象為parent。
child.prependTo(parent) 是將child添加到parent的最前面。鏈?zhǔn)讲僮鲗?duì)象為child。
insertAfter、after 和 insertBefore、before操作的是兄弟節(jié)點(diǎn)，效果同上。
A.after(B) 是在A后面增加B。鏈?zhǔn)讲僮鲗?duì)象為A
B.insertAfter(A) 是把B增加到A后面。鏈?zhǔn)讲僮鲗?duì)象為B
A.before(B) 是在A前面增加B。鏈?zhǔn)讲僮鲗?duì)象為A
B.insertBefore(A) 是把B增加到A前面。鏈?zhǔn)讲僮鲗?duì)象為B
wrap、unwrap、wrapall、wrapInner、replaceWith、replaceAll說(shuō)實(shí)話這幾個(gè)我用都沒(méi)用過(guò)。
$("a").wrap("") 是指，將所有a標(biāo)簽，用后面的節(jié)點(diǎn)包起來(lái)。
$("li").unwrap()將他們的父節(jié)點(diǎn)移除。也就是說(shuō)所有子節(jié)點(diǎn)占據(jù)了原來(lái)父級(jí)的位置。
$("a").wrapAll("") 是指，將所有到標(biāo)簽都合并到第一個(gè)位置，并且包裹起來(lái)。
$("a").wrapInner("")是指，講a標(biāo)簽的內(nèi)容，用b標(biāo)簽包裹起來(lái)。
$("a").replaceWith(" 將所有的a標(biāo)簽，用新標(biāo)簽替換。那么鏈?zhǔn)讲僮鲗?duì)象是誰(shuí)？
$(" 用新標(biāo)簽替換，把所有的a標(biāo)簽替換。那么鏈?zhǔn)讲僮鲗?duì)象是誰(shuí)？
empty、remove、detach$("a").empty() 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。
$("a").remove() 從DOM中刪除所有匹配的元素。這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來(lái)再使用這些匹配的元素。但除了這個(gè)元素本身得以保留之外，其他的比如綁定的事件，附加的數(shù)據(jù)等都會(huì)被移除。
$("a").detach() 從DOM中刪除所有匹配的元素。這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來(lái)再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來(lái)。
clone([Event[,deepEven]])克隆一個(gè)副本出來(lái)。我們知道，如果這個(gè)元素是文檔內(nèi)的，那么上面的方法會(huì)變成移動(dòng)。當(dāng)我們不想移動(dòng)的時(shí)候，就需要clone。
event: 一個(gè)布爾值（true 或者 false）指示事件處理函數(shù)是否會(huì)被復(fù)制。V1.5以上版本默認(rèn)值是：false
deepEven: 一個(gè)布爾值，指示是否對(duì)事件處理程序和克隆的元素的所有子元素的數(shù)據(jù)應(yīng)該被復(fù)制。
篩選hasClass(class) 判斷當(dāng)前元素有沒(méi)有對(duì)應(yīng)class。比如我們?cè)谀M復(fù)選框，我們需要判斷當(dāng)前的狀態(tài)。$(this).hasClass("checked")
filter(class) 比如我們現(xiàn)有一個(gè)所有復(fù)選框的合集，我們要過(guò)濾出所有選中狀態(tài)的。
next() 獲取下一個(gè)元素
nextAll() 獲取后面所有元素
nextUntil() 獲取后面所有元素，可以設(shè)置終止條件。
parent()、prev() 基本有next()相識(shí)的方法
siblings() 獲取所有兄弟元素
end() 我覺(jué)得這個(gè)方法就很厲害，把當(dāng)前的鏈?zhǔn)讲僮鲗?duì)象移交給上次。
$("p").find("span").end()目前操作對(duì)象是$("p")
等等…… 我就列舉這些常用的吧。
微信公眾號(hào)：前端linong 初級(jí)階段文章目錄前端培訓(xùn)-初級(jí)階段（17） - 數(shù)據(jù)存儲(chǔ)（cookie、session、stroage）
前端培訓(xùn)-初級(jí)階段（13） - 正則表達(dá)式
前端培訓(xùn)-初級(jí)階段（13） - 類、模塊、繼承
前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （內(nèi)置對(duì)象、函數(shù)）
前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （語(yǔ)法、變量、值、類型、運(yùn)算符、語(yǔ)句）
前端培訓(xùn)-初級(jí)階段（13、18）
前端培訓(xùn)-初級(jí)階段（9 -12）
前端培訓(xùn)-初級(jí)階段（5 - 8）
前端培訓(xùn)-初級(jí)階段（1 - 4）
中級(jí)階段文章目錄前端培訓(xùn)-中級(jí)階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
前端培訓(xùn)-中級(jí)階段（3） - DOM 文檔對(duì)象模型（2019-06-27期）
前端培訓(xùn)-中級(jí)階段（4）- BOM 瀏覽器對(duì)象模型（2019-07-04期）
前端培訓(xùn)-中級(jí)階段（5）- jQuery的概念與基本使用（2019-07-11期）
資料前端培訓(xùn)目錄、前端培訓(xùn)規(guī)劃、前端培訓(xùn)計(jì)劃
jQuery 速查地址
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/105118.html
摘要：已存在節(jié)點(diǎn)是移動(dòng)，新節(jié)點(diǎn)是新增。鏈?zhǔn)讲僮鲗?duì)象為。將他們的父節(jié)點(diǎn)移除。從中刪除所有匹配的元素。一個(gè)布爾值或者指示事件處理函數(shù)是否會(huì)被復(fù)制。以上版本默認(rèn)值是一個(gè)布爾值，指示是否對(duì)事件處理程序和克隆的元素的所有子元素的數(shù)據(jù)應(yīng)該被復(fù)制。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/...
摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS）...
摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS）...
摘要：前端最基礎(chǔ)的就是。對(duì)應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對(duì)父元素的偏移。返回的對(duì)象包含兩個(gè)整型屬性和。一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合動(dòng)畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動(dòng)畫。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...
摘要：前端最基礎(chǔ)的就是。對(duì)應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對(duì)父元素的偏移。返回的對(duì)象包含兩個(gè)整型屬性和。一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合動(dòng)畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動(dòng)畫。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...
閱讀 1418·2021-09-23 11:21
閱讀 3117·2019-08-30 14:14
閱讀 3199·2019-08-30 13:56
閱讀 4149·2019-08-30 11:20
閱讀 1958·2019-08-29 17:23
閱讀 2772·2019-08-29 16:14
閱讀 1704·2019-08-28 18:18
閱讀 1496·2019-08-26 12:14
