JQ常見面試題之DOM操作詳解

關(guān)于JQ的DOM操作面試問題很多浊服,可以從各個點問,所以列舉幾個常見問題驱证,畢竟面試只是過程,重要的是知識自己掌握了恋腕。

面試題一:JQ中html()抹锄、text()和val()區(qū)別?

面試題二:JQ中find()、has()和filter()區(qū)別伙单?

面試題三: closet()和parents()區(qū)別获高?

答案請在文中查找...

DOM操作有三類:DOM-core、HTML-DOM 吻育、CSS-DOM

1.插入節(jié)點

我們用的最多的就是append和apendTo念秧,其實共有8種方法。

插入節(jié)點

2.刪除節(jié)點

remove():刪除節(jié)點扫沼,并刪除元素節(jié)點綁定的事件出爹。

empty():清空節(jié)點元素的內(nèi)容庄吼,類似$().html(' ')缎除。

3.克隆(復(fù)制)節(jié)點

$().clone()总寻,只復(fù)制節(jié)點器罐,不復(fù)制方法和事件。

添加clone(true)渐行,不僅復(fù)制節(jié)點轰坊,也復(fù)制方法,也叫深度克隆祟印。

4.替換節(jié)點

$('new').replaceWith('old') 肴沫,返回new元素。

$('old').replaceAll('new')蕴忆,返回old元素颤芬。

如果在替換之前,已為元素綁定事件套鹅,替換后原有綁定事件將會被替換的元素一起消失站蝠,需要在新元素上重新綁定事件。

5.包裹節(jié)點

$('span').wrapAll('<div>'):將所有元素用一個元素包裹卓鹿。

wrap():將所有元素單獨包裹菱魔。

wrapInner:包裹元素內(nèi)容。

unwrap():刪除包裹吟孙,刪除父元素澜倦,不包含body。

6.遍歷節(jié)點

children():只考慮子元素杰妓,不考慮后代元素藻治。

next():同輩緊鄰后面一個元素。

nextAll():同輩緊鄰后面所有兄弟元素稚失。

prev():同輩緊鄰前一個兄弟元素栋艳。

prevAll():同輩緊鄰前所有兄弟元素。

siblings():同輩所有兄弟元素句各。

find('span'):返回被選元素的后代元素吸占,括號內(nèi)必填寫晴叨,如果查找所有后代使用 "*",起查找作用矾屯。

filter('div'):指定選擇器的xx元素兼蕊,括號內(nèi)必填寫,符合條件的同級元素件蚕,非后代元素孙技,起過濾作用。

has(‘div’):符合條件的后代元素排作,不包含自身牵啦,括號內(nèi)必填寫,起過濾作用妄痪。

parents():獲取所有祖先元素哈雏,參數(shù)為篩選條件。

closest(‘.new’):用來取得最近的匹配元素衫生,包括自身裳瘪。首選檢查自身是否符合,如果符合返回元素本身罪针;如果不匹配彭羹,向上查找父元素,逐級向上直到匹配到選擇器的元素泪酱。如果什么沒找到派殷,返回一個空的jq對象。必須填寫篩選條件西篓,且只能找到一個元素愈腾。

parentsUntil():截止到xx位置的祖先節(jié)點。

7.屬性及樣式操作

$().css({'background-color':'red'}):修改css樣式岂津。設(shè)置后虱黄,顯示為內(nèi)聯(lián)樣式。如果值為數(shù)字吮成,jq自動轉(zhuǎn)為xx像素橱乱。{'background-color':'red'}也可寫成{backgroundColor:'red'},建議采用前一種方式粱甫,以為其底層就是哈希數(shù)組泳叠。


$().attr('title'):獲取title屬性。

$().removeAttr(title'):刪除title屬性茶宵。

$().addClass(‘new’):添加class的名字危纫,不是選擇器,故不是“.new”。

$().removeClass(‘new’):與上相反种蝶。

$().toggle():

$().toggleClass():

$().hasClass():判斷某元素是否有某個class契耿。

8.內(nèi)容操作

$().html() :獲取內(nèi)容,含html標簽螃征,可以用于XHTML搪桂,但不能用于XML

$().text():獲取文本內(nèi)容盯滚,不含標簽踢械。可以用于XHTML和XML,支持所有瀏覽器魄藕,原生innerText火狐不支持内列。

$().val():獲取表單元素的內(nèi)容。

下面說說三者的異同點:

異同點

9.其它節(jié)點操作

$('div').slice(1,4)泼疑,獲取滿足條件的div德绿。

$('div').add('p').css(),自由組合添加樣式,給div和p都添加公有的樣式退渗。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蕴纳,隨后出現(xiàn)的幾起案子会油,更是在濱河造成了極大的恐慌,老刑警劉巖古毛,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件翻翩,死亡現(xiàn)場離奇詭異,居然都是意外死亡稻薇,警方通過查閱死者的電腦和手機嫂冻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來塞椎,“玉大人桨仿,你說我怎么就攤上這事“负荩” “怎么了服傍?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長骂铁。 經(jīng)常有香客問我吹零,道長,這世上最難降的妖魔是什么拉庵? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任灿椅,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘茫蛹。我一直安慰自己泣懊,他們只是感情好,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布麻惶。 她就那樣靜靜地躺著馍刮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪窃蹋。 梳的紋絲不亂的頭發(fā)上卡啰,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天,我揣著相機與錄音警没,去河邊找鬼匈辱。 笑死,一個胖子當著我的面吹牛杀迹,可吹牛的內(nèi)容都是我干的亡脸。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼树酪,長吁一口氣:“原來是場噩夢啊……” “哼浅碾!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起续语,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤垂谢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后疮茄,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體滥朱,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年力试,在試婚紗的時候發(fā)現(xiàn)自己被綠了徙邻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡畸裳,死狀恐怖缰犁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情躯畴,我是刑警寧澤民鼓,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站蓬抄,受9級特大地震影響丰嘉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜嚷缭,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一饮亏、第九天 我趴在偏房一處隱蔽的房頂上張望耍贾。 院中可真熱鬧,春花似錦路幸、人聲如沸荐开。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晃听。三九已至,卻和暖如春砰识,著一層夾襖步出監(jiān)牢的瞬間能扒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工辫狼, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留初斑,地道東北人。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓膨处,卻偏偏與公主長得像见秤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子真椿,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容

  • DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲取DOM節(jié)點鹃答,從而進行一系列的DOM操作。但實際上...
    阿r阿r閱讀 1,005評論 0 9
  • 第1章 簡介 第2章 DOM節(jié)點的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 802評論 0 8
  • http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js js...
    再見理想冷雨夜閱讀 475評論 0 1
  • 烈風(fēng)西去南陽陵瀑粥, 折戟沉沙漠哀怨挣跋。 邀應(yīng)宇臺望舒影, 一眉橋娘空唱晚狞换。 紅妝梳罷懶依窗, 香玉霓裳醉折凰舟肉。 花碎瑤...
    本家公子閱讀 211評論 0 0
  • 觀念的轉(zhuǎn)變 在傳統(tǒng)的觀念中修噪,人們普遍認為功能越多,產(chǎn)品用途就會越廣路媚,能力自然也就更強黄琼。其實不然,我來舉個例子:平時...
    呆呆丶閱讀 1,383評論 0 11