主要是遍歷、創(chuàng)建、添加、刪除元素操作。
一、遍歷元素
jQuery 隱式迭代是對(duì)同一類(lèi)元素做了同樣的操作。 如果想要給同一類(lèi)元素做不同操作,就需要用到遍歷。
語(yǔ)法1:
$("div").each(function(index, domEle){ xxx; })
- each() 方法遍歷匹配的每一個(gè)元素。主要用DOM處理。 each:每一個(gè)。
- 里面的回調(diào)函數(shù)有2個(gè)參數(shù): index 是每個(gè)元素的索引號(hào); demEle 是每個(gè)DOM元素對(duì)象,不是jquery對(duì)象
- 所以要想使用jquery方法,需要給這個(gè)dom元素轉(zhuǎn)換為jquery對(duì)象 $(domEle)
語(yǔ)法2:
$.each(object, function(index, element){ xxx; })
-
$.each()方法可用于遍歷任何對(duì)象。主要用于數(shù)據(jù)處理,比如數(shù)組,對(duì)象 - 里面的函數(shù)有2個(gè)參數(shù):
index是每個(gè)元素的索引號(hào);element遍歷內(nèi)容
二、創(chuàng)建元素
語(yǔ)法:
$(''<li></li>'');
動(dòng)態(tài)的創(chuàng)建了一個(gè) <li>
三、添加元素
- 內(nèi)部添加
element.append(''內(nèi)容'')
把內(nèi)容放入匹配元素內(nèi)部最后面,類(lèi)似原生 appendChild。
element.prepend(''內(nèi)容'')
把內(nèi)容放入匹配元素內(nèi)部最前面。
- 外部添加
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)容。