jQuery常見面試題之DOM操作詳析
前言
關(guān)于JQ的DOM操作面試問題很多,可以從各個(gè)點(diǎn)問,所以列舉幾個(gè)常見問題,畢竟面試只是過程,重要的是知識(shí)自己掌握了。
面試題一:JQ中html()、text()和val()區(qū)別?
面試題二:JQ中find()、has()和filter()區(qū)別?
面試題三: closet()和parents()區(qū)別?
答案請(qǐng)?jiān)谖闹胁檎?..
DOM操作有三類:DOM-core、HTML-DOM 、CSS-DOM
一、插入節(jié)點(diǎn)
我們用的最多的就是append和apendTo,其實(shí)共有8種方法。

插入節(jié)點(diǎn)
二、刪除節(jié)點(diǎn)
remove() :刪除節(jié)點(diǎn),并刪除元素節(jié)點(diǎn)綁定的事件。
empty() :清空節(jié)點(diǎn)元素的內(nèi)容,類似$().html(' ') 。
三、克?。◤?fù)制)節(jié)點(diǎn)
$().clone() ,只復(fù)制節(jié)點(diǎn),不復(fù)制方法和事件。
添加clone(true) ,不僅復(fù)制節(jié)點(diǎn),也復(fù)制方法,也叫深度克隆。
四、替換節(jié)點(diǎn)
$('new').replaceWith('old') ,返回new元素。
$('old').replaceAll('new') ,返回old元素。
如果在替換之前,已為元素綁定事件,替換后原有綁定事件將會(huì)被替換的元素一起消失,需要在新元素上重新綁定事件。
五、包裹節(jié)點(diǎn)
$('span').wrapAll('<div>') :將所有元素用一個(gè)元素包裹。
wrap() :將所有元素單獨(dú)包裹。
wrapInner:包裹元素內(nèi)容。
unwrap() :刪除包裹,刪除父元素,不包含body。
六、遍歷節(jié)點(diǎn)
children() :只考慮子元素,不考慮后代元素。
next() :同輩緊鄰后面一個(gè)元素。
nextAll() :同輩緊鄰后面所有兄弟元素。
prev() :同輩緊鄰前一個(gè)兄弟元素。
prevAll() :同輩緊鄰前所有兄弟元素。
siblings() :同輩所有兄弟元素。
find('span') :返回被選元素的后代元素,括號(hào)內(nèi)必填寫,如果查找所有后代使用 "*",起查找作用。
filter('div') :指定選擇器的xx元素,括號(hào)內(nèi)必填寫,符合條件的同級(jí)元素,非后代元素,起過濾作用。
has(‘div') :符合條件的后代元素,不包含自身,括號(hào)內(nèi)必填寫,起過濾作用。
parents() :獲取所有祖先元素,參數(shù)為篩選條件。
closest(‘.new') :用來取得最近的匹配元素,包括自身。首選檢查自身是否符合,如果符合返回元素本身;如果不匹配,向上查找父元素,逐級(jí)向上直到匹配到選擇器的元素。如果什么沒找到,返回一個(gè)空的jq對(duì)象。必須填寫篩選條件,且只能找到一個(gè)元素。
parentsUntil() :截止到xx位置的祖先節(jié)點(diǎn)。
七、屬性及樣式操作
$().css() :修改css樣式。設(shè)置后,顯示為內(nèi)聯(lián)樣式。
$().attr('title') :獲取title屬性。
$().removeAttr(title') :刪除title屬性。
$().addClass(‘new') :添加class的名字,不是選擇器,故不是“.new”。
$().removeClass(‘new') :與上相反。
$().toggle() :
$().toggleClass() :
$().hasClass() :判斷某元素是否有某個(gè)class。
八、內(nèi)容操作
$().html() :獲取內(nèi)容,含html標(biāo)簽,可以用于XHTML,但不能用于XML。
$().text() :獲取文本內(nèi)容,不含標(biāo)簽??梢杂糜赬HTML和XML,支持所有瀏覽器,原生innerText火狐不支持。
$().val() :獲取表單元素的內(nèi)容。
下面說說三者的異同點(diǎn):

異同點(diǎn)
九、其它節(jié)點(diǎn)操作
$('div').slice(1,4) ,獲取滿足條件的div。
$('div').add('p').css() ,自由組合添加樣式,給div和p都添加公有的樣式。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
- jQuery的DOM操作之刪除節(jié)點(diǎn)示例
- jQuery學(xué)習(xí)筆記之jQuery的DOM操作
- jQuery DOM操作 基于命令改變頁面
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- jQuery DOM操作小結(jié)與實(shí)例
- 淺談jQuery 選擇器和dom操作
- Jquery基礎(chǔ)教程之DOM操作
- 鋒利的jQuery jQuery中的DOM操作
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jQuery DOM操作實(shí)例
- jQuery中DOM常見操作實(shí)例小結(jié)
相關(guān)文章
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼,需要的朋友可以參考一下2013-06-06
Jquery EasyUI Datagrid右鍵菜單實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Jquery EasyUI Datagrid右鍵菜單的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼(附源碼下載)
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼 的相關(guān)資料,需要的朋友可以參考下2016-02-02
jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開的導(dǎo)航菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開的導(dǎo)航菜單效果,涉及jquery鼠標(biāo)hover事件結(jié)合class樣式動(dòng)態(tài)添加與刪除的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無縫滾動(dòng)切換特效
這篇文章主要介紹了jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無縫滾動(dòng)切換特效,效果非常的棒,而且兼容性也很好,推薦給小伙伴們2015-04-04
jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法,涉及jquery鏈?zhǔn)讲僮骷绊撁嬖貥邮娇刂频南嚓P(guān)技巧,需要的朋友可以參考下2015-07-07
jQuery動(dòng)態(tài)操作表單示例【基于table表格】
這篇文章主要介紹了jQuery動(dòng)態(tài)操作表單,結(jié)合實(shí)例形式分析了jQuery針對(duì)table表格的數(shù)據(jù)添加、刪除、元素修改、提交等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
jQuery樹形插件jquery.simpleTree.js用法分析
這篇文章主要介紹了jQuery樹形插件jquery.simpleTree.js用法,結(jié)合實(shí)例形式分析了jQuery樹形菜單插件jquery.simpleTree.js的功能與基本用法,需要的朋友可以參考下2016-09-09

