jQuery的操作

1.jQuery 樣式操作

1. 1jQuery 操作css的方法

1.1.1 添加行內(nèi)樣式:$('h4').css('color','red')

1.1.2?添加多個行內(nèi)樣式:$('h4').css({'color','red','border'})

注:添加行內(nèi)樣式直接獲取到需要添加的標(biāo)簽,在后面加上css部分即可,css內(nèi)樣式需用''包括,用逗號隔開

1.1.3?$.each(要遍歷的對象,回調(diào)函數(shù),兩個形參,第一個形參是索引,第二個形參是值) jQuery提供的遍歷方法

1.2?設(shè)置類樣式方法(添加,刪除,切換)(add,remove,toggle)

2. jQuery 屬性操作

jQuery 常用屬性操作有三種:prop() / attr() / data() ;

2.1 元素固有屬性值 prop()

prop():操作標(biāo)簽固有的屬性,例如herf,src,type..。傳一個參(屬性名).獲取該屬性的屬性值。傳兩個參(屬性名.屬性值)設(shè)置該屬性為指定屬性值

獲取屬性語法:prop("屬性")

設(shè)置屬性語法:prop("屬性","屬性值?" )

注:prop()相對普通屬性的操作,更適合操作表單屬性

2.2元素自定義屬性值 attr()

attr():操作標(biāo)簽的自定義屬性,除了操作自定義屬性標(biāo)簽固有屬性,除了(checked,disabled,selected,autofocus...這些值為布爾類型的屬性)也可以操作,傳參同上

獲取屬性語法:attr("屬性")? //類似原生的getattribute()

設(shè)置屬性語法:attr("屬性",?"屬性值"?)? //類似原生的setattribute()?

注:attr()相對普通屬性的操作,更適合操作自定義屬性

2.3 有關(guān)data

data方法,自定義屬性,并不會顯示在html結(jié)構(gòu)里

附加數(shù)據(jù)語法:data("name","value")//向背選取的元素附加數(shù)據(jù)

獲取數(shù)據(jù)語法:data("name")? //向被選取元素獲取數(shù)據(jù)

注意:還可以讀取 HTML5 自定義屬性 data-index ,得到的是數(shù)字型

3. jQuery 文本操作

jQuery的文本屬性值常見操作有三種:html() / text() / val() ; 分別對應(yīng)JS中的 innerHTML 、innerText 和 value 屬性

3.1?普通元素內(nèi)容html,相當(dāng)于原生innerHTML

html()? //獲取元素內(nèi)容

html("內(nèi)容")? //設(shè)置元素內(nèi)容

3.2text():獲取設(shè)置文本標(biāo)簽內(nèi)容,傳值同上,相當(dāng)于原生innerText

text()? //獲取元素的文本內(nèi)容

text("內(nèi)容")? //設(shè)置元素的文本內(nèi)容

3.3val():獲取,設(shè)置表單標(biāo)簽的value屬性。不傳值:獲取value屬性值。傳值,設(shè)置value屬性值,相當(dāng)于原生value

val()? // 獲取表單的值

val("內(nèi)容")? // 設(shè)置表單的值

4. jQuery 元素操作

用jQuery方法,操作標(biāo)簽的遍歷、創(chuàng)建、添加、刪除等操作

4.1 遍歷元素

4.1.1??$(“div").each(function(index,domEle){}),each()方法遍歷匹配的每一個元素,主要用DOM處理,里面的回調(diào)函數(shù)有兩個參數(shù),index是索引號,domEle是每個DOM元素對象,不是jQuery對象,要使用jQuery方法,要把這個DOM元素轉(zhuǎn)化為jQuery對象$(domEle)

4.1.2? $.each(object,function(index,element{})$each()方法課用于遍歷所有對象,主要用于數(shù)據(jù)處理,比如數(shù)組,對象,里面的兩個參數(shù):index是索引號,element遍歷內(nèi)容?

4.2 創(chuàng)建元素

以創(chuàng)建一個li為例:$("<li></li>")

4.3? 添加元素

4.3.1? 內(nèi)部添加:最后追尾添加:element.append("內(nèi)容");開頭添加:emelent.prepend("內(nèi)容")

4.3.2? 外部添加:目標(biāo)元素后添加:element.after("內(nèi)容");目標(biāo)元素前加:element.before("內(nèi)容")

注:區(qū)別在于內(nèi)部添加生成后元素為父子關(guān)系二外部添加生成后為兄弟關(guān)系

4.4 刪除元素

4.4.1??element.remove():刪除本身匹配的元素

4.4.2? element.empty():刪除匹配的元素集合中所有的子節(jié)點,清空

4.4.3??element.html(""):清空匹配的元素內(nèi)容

4.4.4??empty與html("")的區(qū)別:empty為徹底清空,html后續(xù)還可以設(shè)置內(nèi)容

5. jQuery 尺寸位置操作

5.1?

?width、height 元素的寬高,只計算寬高

innerWidth、innerHeight 元素寬高 包含padding

outerWidth、outerHeight 元素寬高 包含padding border

outerWidth(true)、outerHeight(true) 元素寬高,包含padding border margin

5.2??

offset():獲取目標(biāo)元素相對于文檔的距離,也可以用來設(shè)置

position():獲取目標(biāo)元素相對于父元素的距離(translate,定位left/top,不包含內(nèi)外間距)只能獲取

scrollLeft():獲取目標(biāo)元素向左卷曲的值,可以設(shè)置卷取值

clone():復(fù)制節(jié)點,如果傳true值,那么復(fù)制出的節(jié)點會包含原節(jié)點事件

scrolltop():獲取目標(biāo)元素向上卷曲的值,可以設(shè)置卷取值

6. jQuery 節(jié)點操作

6.1? 創(chuàng)建節(jié)點:document.createElement('li')

6.2? 放置節(jié)點:

6.2.1??末尾追加:父節(jié)點.append(新節(jié)點);新節(jié)點.appendTo(父節(jié)點)

6.2.2??首位添加:父節(jié)點.prepend(新節(jié)點);新節(jié)點.prependTo(父節(jié)點)

6.2.3?指定標(biāo)簽前一位:節(jié)點.before(新節(jié)點)

6.2.4 指定標(biāo)簽后一位:節(jié)點.after(新節(jié)點)

6.2.5?使用新節(jié)點替換指定節(jié)點:舊節(jié)點.replaceWith(新節(jié)點);新節(jié)點.replaceAll(舊節(jié)點)

6.3 刪除節(jié)點

6.3.1?remove():誰調(diào)用刪除誰

6.3.2?empty():誰調(diào)用清空誰

最后編輯于
?著作權(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)容

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