No.37 jQuery元素操作

主要是遍歷、創(chuàng)建、添加、刪除元素操作。

一、遍歷元素

jQuery 隱式迭代是對(duì)同一類(lèi)元素做了同樣的操作。 如果想要給同一類(lèi)元素做不同操作,就需要用到遍歷。

語(yǔ)法1:
$("div").each(function(index, domEle){ xxx; })

  1. each() 方法遍歷匹配的每一個(gè)元素。主要用DOM處理。 each:每一個(gè)。
  2. 里面的回調(diào)函數(shù)有2個(gè)參數(shù): index 是每個(gè)元素的索引號(hào); demEle 是每個(gè)DOM元素對(duì)象,不是jquery對(duì)象
  3. 所以要想使用jquery方法,需要給這個(gè)dom元素轉(zhuǎn)換為jquery對(duì)象 $(domEle)

語(yǔ)法2:
$.each(object, function(index, element){ xxx; })

  1. $.each()方法可用于遍歷任何對(duì)象。主要用于數(shù)據(jù)處理,比如數(shù)組,對(duì)象
  2. 里面的函數(shù)有2個(gè)參數(shù): index 是每個(gè)元素的索引號(hào); element 遍歷內(nèi)容

二、創(chuàng)建元素

語(yǔ)法:
$(''<li></li>'');
動(dòng)態(tài)的創(chuàng)建了一個(gè) <li>

三、添加元素

  1. 內(nèi)部添加

element.append(''內(nèi)容'')
把內(nèi)容放入匹配元素內(nèi)部最后面,類(lèi)似原生 appendChild。

element.prepend(''內(nèi)容'')
把內(nèi)容放入匹配元素內(nèi)部最前面。

  1. 外部添加
    element.after(''內(nèi)容'') // 把內(nèi)容放入目標(biāo)元素后面
    element.before(''內(nèi)容'') // 把內(nèi)容放入目標(biāo)元素前面

①內(nèi)部添加元素,生成之后,它們是父子關(guān)系。
②外部添加元素,生成之后,他們是兄弟關(guān)系。

四、刪除元素

element.remove() // 刪除匹配的元素(本身)
element.empty() // 刪除匹配的元素集合中所有的子節(jié)點(diǎn)
element.html('''') // 清空匹配的元素內(nèi)容

①remove 刪除元素本身。
②empty() 和 html('''') 作用等價(jià),都可以刪除元素里面的內(nèi)容,只不過(guò) html 還可以設(shè)置內(nèi)容。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,506評(píng)論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,274評(píng)論 0 1
  • jQuery模塊 選擇器、DOM操作、事件、AJAX與動(dòng)畫(huà) 匿名函數(shù)自執(zhí)行 作用:解決命名空間與變量污染的問(wèn)題 總...
    青青玉立閱讀 1,000評(píng)論 0 0
  • 1.DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性 創(chuàng)建流程比較簡(jiǎn)單,大體如下: 創(chuàng)建節(jié)點(diǎn)(常見(jiàn)的:元素、屬性和文本) 添加節(jié)點(diǎn)的一些屬...
    染染有個(gè)小虎牙閱讀 833評(píng)論 0 0
  • 第一章 入門(mén) 基本功能:訪問(wèn)和操作 dom 元素,控制頁(yè)面樣式,對(duì)頁(yè)面的事件處理,與ajax完美結(jié)合,有豐富的插件...
    X_Arts閱讀 1,148評(píng)論 0 2

友情鏈接更多精彩內(nèi)容