jQuery基礎教程學習筆記(一)DOM操作(1)

寫代碼培廓,沒案例,簡直就是耍流氓春叫,為了方便大家學習交流肩钠,每個知識點都會配上對應的案例!文章最下邊有福利喲....

jQuery節(jié)點創(chuàng)建與屬性的處理

創(chuàng)建節(jié)點:$("

")

創(chuàng)建為本節(jié)點:$("

我是文本節(jié)點

")

創(chuàng)建為屬性節(jié)點:$("

我是文本節(jié)點

")

例子:var div = $("

動態(tài)創(chuàng)建DIV元素節(jié)點

")

$body.append(div)

DOM內部插入append()與appendTo()

append(content)向每個匹配的元素內部追加內容暂殖,這個操作與對指定的元素執(zhí)行原生的appendChild方法价匠,將它們添加到文檔中的情況類似。

appendTo(content)把所有匹配的元素追加到另一個呛每、指定的元素集合中踩窖,實際上,使用這個方法是顛倒了常規(guī)的$(A).append(B)的操作晨横,即不是把B追加到A中洋腮,而是把A追加到B中。

DOM外部插入after()與before()

.after(content) 在匹配元素集合中的每個元素后面插入指定內容手形,作為兄弟節(jié)點

.before(content) 在匹配的元素前面插入內容

1啥供、before與after都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點

2、2個方法都是都可以接收HTML字符串库糠,DOM 元素滤灯,元素數(shù)組,或者jQuery對象曼玩,用來插入到集合中每

個匹配元素的前面或者后面

3鳞骤、2個方法都支持多個參數(shù)傳遞after(div1,div2,....)

DOM內部插入prepend()與prependTo()

.prepend() 向每個匹配元素的內部前置內容 和append()類型

.prependTo() 把所有匹配的元素前置到另一個指定的元素集合中

四個區(qū)別:

append()向每個匹配的元素內部追加內容

prepend()向每個匹配的元素內部前置內容

appendTo()把所有匹配的元素追加到另一個指定元素的集合中

prependTo()把所有匹配的元素前置到另一個指定的元素集合中

DOM外部插入insertAfter()與insertBefore()

insertBefore() 在目標元素前面插入集合中每個匹配的元素(不支持多參數(shù))

insertAfter() 在目標元素后面插入集合中每個匹配的元素(不支持多參數(shù))

.before()和.insertBefore()實現(xiàn)同樣的功能。主要的區(qū)別是語法——內容和目標的位置黍判。 對于

before()選擇表達式在函數(shù)前面豫尽,內容作為參數(shù),而.insertBefore()剛好相反顷帖,內容在方法前面美旧,它將

被放在參數(shù)里元素的前面

例:$(".test1").before('

before,在匹配元素之前增加

')

$('

測試insertBefore方法增加

').insertBefore($(".test1"))

DOM節(jié)點刪除之empty()

empty()這個方法不僅移除子元素(和其他后代元素),同樣移除元素里的文本

例:$('.hello').empty() //刪除.hello里邊的所有內容

DOM節(jié)點刪除之remove()的有參用法和無參用法

remove與empty一樣贬墩,都是移除元素的方法榴嗅,但是remove會將元素自身移除,同時也會移除元素內部的一切陶舞,包括綁定的事件及與該元素相關的jQuery數(shù)據嗽测。

例:$('.hello').remove()

$("p").remove(":contains('3')")//找到包含3文本的節(jié)點刪除

DOM節(jié)點刪除之保留數(shù)據的刪除操作detach()

detach()讓一個web元素托管。即從當前頁面中移除該元素,但保留這個元素的內存模型對象唠粥。

例: $("p:first").detach()

DOM拷貝clone()

.clone()方法深度 復制所有匹配的元素集合疏魏,包括所有匹配元素、匹配元素的下級元素晤愧、文字節(jié)點大莫。

.clone(ture) 表示不僅僅克隆節(jié)點,還把附帶的數(shù)據和事件一并克隆了官份!

1只厘、clone()方法時,在將它插入到文檔之前舅巷,我們可以修改克隆后的元素或者元素內容羔味,

$(this).clone().css('color','red') 表示增加了一個顏色

2、通過傳遞true悄谐,將所有綁定在原始元素上的事件處理函數(shù)復制到克隆元素上

3介评、clone()方法是jQuery擴展的库北,只能處理通過jQuery綁定的事件與數(shù)據

4爬舰、元素數(shù)據(data)內對象和數(shù)組不會被復制,將繼續(xù)被克隆元素和原始元素共享寒瓦。深復制的所有數(shù)據情屹,需要手動復制每一個

例: $(".aaron1").on('click', function() {

$(".left").append( $(this).clone().css('color','red') )

})//只克隆節(jié)點不克隆事件

DOM替換replaceWith()和replaceAll()

.replaceWith( newContent ):用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合

例:$("p:eq(1)").replaceWith('替換第二段的內容')

.replaceAll( target ) :用集合的匹配元素替換每個目標元素 目標和源和replaceWith相反

例:$('替換第二段的內容').replaceAll('p:eq(1)')

DOM包裹wrap()方法

.wrap( wrappingElement ):在集合中匹配的每個元素周圍包裹一個HTML結構,即增加父元素

p元素

增加:$('p').wrap('

') 變成了

p元素

.wrap( function ) :一個回調函數(shù)杂腰,返回用于包裹匹配元素的 HTML 內容或 jQuery 對象

例:$('p').wrap(function() {

return '

'; //與第一種類似垃你,只是寫法不一樣

})

DOM包裹unwrap()方法

unwarp()方法 ,作用與wrap方法是相反的喂很。將匹配元素集合的父級元素刪除惜颇,保留自身(和兄弟元素,如果存在)在原來的位置少辣。

例:$('p').unwarp(); //刪除p的父節(jié)點

DOM包裹wrapAll()方法

.wrapAll( wrappingElement ):給集合中匹配的元素增加一個外面包裹HTML結構

.wrapAll( function ) :一個回調函數(shù)凌摄,返回用于包裹匹配元素的 HTML 內容或 jQuery 對象通過回調的方式可以單獨處理每一個元素

例:$('p').wrapAll('

') 結果:

p元素

p元素

//給所有的p增加父元素,增加一個漓帅,不是每個單獨增加父元素

$('p').wrapAll(function() {

return '

';

})該方法返回結果是:

p元素

p元素

什么情況锨亏? 兩個例子中的結果為什么不一樣呢?小伙伴們自己查查咋回事呢忙干?

注意:.wrapAll()函數(shù)可以接受任何字符串或對象器予,可以傳遞給$()工廠函數(shù)來指定一個DOM結構。這種

結構可以嵌套多層捐迫,但是最內層只能有一個元素乾翔。所有匹配元素將會被當作是一個整體,在這個整體的外部用指定的 HTML 結構進行包裹施戴。

DOM包裹wrapInner()方法

.wrapInner( wrappingElement ):給集合中匹配的元素的內部末融,增加包裹的HTML結構

例:

p元素

p元素

執(zhí)行:$('div').wrapInner('')變成了:

p元素

p元素

.wrapInner( function ) :允許我們用一個callback函數(shù)做參數(shù)钧惧,每次遇到匹配元素時,該函數(shù)被執(zhí)行勾习,返回一個DOM元素浓瞪,jQuery對象,或者HTML片段巧婶,用來包住匹配元素的內容

例:$('div').wrapInner(function() {

return '';

})

學累了吧乾颁,來點實惠的?

下面推薦一下我學習前端編程的技術交流群艺栈,大家如果不知道怎么學習HTML5的可以來我的前端群250777811英岭,源碼已上傳群文件,不管你是小白還是大牛湿右,小編都歡迎诅妹,群不定期分享干貨,歡迎初學和進階中的小伙伴

1+1=毅人?

不要往下看了吭狡,下面真的沒內容了

.......

.......

哈哈 ,適可而止吧

前端javascript學習群4994115298

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末丈莺,一起剝皮案震驚了整個濱河市划煮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缔俄,老刑警劉巖弛秋,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異俐载,居然都是意外死亡蟹略,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進店門遏佣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挖炬,“玉大人,你說我怎么就攤上這事贼急∶┟” “怎么了?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵太抓,是天一觀的道長空闲。 經常有香客問我闸英,道長待诅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任平窘,我火速辦了婚禮,結果婚禮上跌榔,老公的妹妹穿的比我還像新娘异雁。我一直安慰自己,他們只是感情好僧须,可當我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布纲刀。 她就那樣靜靜地躺著,像睡著了一般担平。 火紅的嫁衣襯著肌膚如雪示绊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天暂论,我揣著相機與錄音面褐,去河邊找鬼。 笑死取胎,一個胖子當著我的面吹牛展哭,可吹牛的內容都是我干的。 我是一名探鬼主播闻蛀,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼匪傍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了循榆?” 一聲冷哼從身側響起析恢,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤墨坚,失蹤者是張志新(化名)和其女友劉穎秧饮,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泽篮,經...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡盗尸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了帽撑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泼各。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖亏拉,靈堂內的尸體忽然破棺而出扣蜻,到底是詐尸還是另有隱情,我是刑警寧澤及塘,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布莽使,位于F島的核電站,受9級特大地震影響笙僚,放射性物質發(fā)生泄漏芳肌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望亿笤。 院中可真熱鬧翎迁,春花似錦、人聲如沸净薛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽肃拜。三九已至揍异,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間爆班,已是汗流浹背衷掷。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留柿菩,地道東北人戚嗅。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像枢舶,于是被迫代替她去往敵國和親懦胞。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內容

  • 寫代碼凉泄,沒案例躏尉,簡直就是耍流氓,為了方便大家學習交流后众,每個知識點都會配上對應的案例胀糜!文章最下邊有福利喲.... j...
    DarkSpy13閱讀 148評論 0 0
  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,386評論 0 44
  • 第1章 簡介 第2章 DOM節(jié)點的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 816評論 0 8
  • 1:jQuery節(jié)點創(chuàng)建與屬性的處理 創(chuàng)建元素節(jié)點:可以有幾種方式蒂誉,后面會慢慢接觸教藻。常見的就是直接把這個節(jié)點的結構...
    碼農小楊閱讀 606評論 0 1
  • 忘了是什么時候知道七堇年是一個黃昏收集者了,好似是在她的公眾號里右锨。忘了括堤,罷了,總之我是因為她開始記錄黃昏绍移。 我...
    阿央_閱讀 1,085評論 0 0