JQuery 17

jQuery中的DOM操作

DOM操作的分類

DOM操作分為3個方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。

JavaScript中的getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法,這些都是DOM Core的組成部分。

each()

為每個匹配元素規(guī)定運行的函數(shù)。返回 false 可用于及早停止循環(huán)。

$(selector).each(function(index,element))

參數(shù)描述:

index - 選擇器的 index 位置

element - 當前的元素(也可使用 "this" 選擇器)

html():設(shè)置或返回所選元素的內(nèi)容(等同于js中的innerHTML)

text():設(shè)置或返回所選元素的文本內(nèi)容(等同于js中的innerText)

val():設(shè)置或返回表單字段的值(等同于js中的value)

獲取元素的屬性

attr(name)

設(shè)置元素的屬性

1 attr(key,value) 設(shè)置指定key屬性的屬性值為value

語法:$(selector).attr(attribute,value)

2 設(shè)置多個屬性/值對

語法:$(selector).attr({attribute:value, attribute:value ...})

刪除元素的屬性

removeAttr(name)? : 刪除指定的屬性

操作元素的樣式

1、直接設(shè)置樣式屬性:? css()方法

2、獲取樣式和設(shè)置樣式

獲?。?(“#nav”).attr(“class”)

設(shè)置:$(“#nav”).attr(“class”,”nav2”)

3、增加樣式

addClass(class)

說明:參數(shù)class為樣式名稱,也可以同時增加多個樣式,只需要用空格將其隔開即可。

addClass(class1 class2…)

4、移除樣式

removeClass([class])

可選。規(guī)定要移除的 class 的名稱。如需移除若干類,請使用空格來分隔類名。如果不設(shè)置該參數(shù),則會移除所有類。

5、樣式切換

toggleClass(class)

說明:參數(shù)class為樣式名稱。其功能是當元素中含有名稱為class的樣式時,刪除該樣式,否則,增加該樣式。

6、判斷是否含有某個樣式

hasClass(class)

說明:參數(shù)class為樣式名稱。該方法用來判斷元素中是否含有某個class,如果有,則返回true,

否則返回false。

attr()和addClass()的區(qū)別


創(chuàng)建節(jié)點

語法:$(html字符串) 創(chuàng)建Dom節(jié)點,并返回一個jQuery對象 Eg: $(“搜狐”)

append()

向每個匹配的元素內(nèi)部追加內(nèi)容。(類似appendChild)

語法:$(selector).append(content)

content:必需。規(guī)定要插入的內(nèi)容(可包含 HTML 標簽)。

appendTo()

appendTo() 方法在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容。 (和append()方法顛倒)

語法:$(content).appendTo(selector)

content : 必需。規(guī)定要插入的內(nèi)容(可包含 HTML 標簽)。

prepend()

向每個匹配的元素內(nèi)部前置內(nèi)容。

語法: $(selector).prepend(content)

content:必需。規(guī)定要插入的內(nèi)容(可包含 HTML 標簽)。

prependTo()

把所有匹配的元素前置到另一個、指定的元素元素集合中。

語法: $(content).prependTo(selector)

after()

在每個匹配的元素之后插入內(nèi)容。

insertAfter()

把所有匹配的元素插入到另一個、指定的元素元素集合的后面。(顛倒了常規(guī)的$(A).after(B)的操作)

before()

在每個匹配的元素之前插入內(nèi)容。

insertBefore()

把所有匹配的元素插入到另一個、指定的元素集合的前面。

clone()

生成被選元素的副本,包含子節(jié)點、文本和屬性。

語法:$(selector).clone(includeEvents)

includeEvents 可選。布爾值。規(guī)定是否復制元素的所有事件處理。默認地,副本中不包含事件處理器。

empty()

刪除匹配的元素集合中所有的子節(jié)點。將節(jié)點清空

remove()

刪除選中的節(jié)點,并返回被刪除的節(jié)點對象,可以繼續(xù)使用被刪除的對象。

replaceWith(content)

將選中的元素替換成content

wrap(html)

將所選的元素用指定的html包裹起來 $("strong").wrap("");//用元素把元素包裹起來

wrapInner(html)

將所選的元素的子內(nèi)容用指定的html包裹起來

wrapAll()

語法: $(selector).wrapAll(wrapper)

該方法會將所有匹配的元素用一個元素來包裹。他不同于wrap()方法,wrap()方法是將所有的元素進行單獨的包裹。

君樂雨兮啟傘枝,

君樂晝兮林蔽日,

君樂風兮欄帳起,

君樂吾兮吾心噬。

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

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

  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,683評論 0 44
  • 第一章 認識jQuery jQuery 能做什么 1. 取得文檔中的元素 2. 修改頁面的外觀 CSS雖然為影響文...
    七弦桐語閱讀 554評論 0 1
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進階之旅閱讀 16,960評論 18 503
  • 天上云卷云舒,地上人來人往,望一縷炊煙繚繞,看幾波車水馬龍,四季照常不停輪回,春秋依舊交相更迭,匆匆之間穿梭了冬夏...
    篇篇情書寄往事閱讀 796評論 0 0
  • 常提水壺行于街邊 時不時飲一口以窺星光流蘇 常置黑紙步于天邊 時不時墨一光以望海闊星空 夜是黑色的,無奈疲倦雙眼喜...
    吹吧呃呃呃閱讀 198評論 3 1

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