亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

DOM操作筆記

??? 2019-04-11 17:36:19 234
????:jQuery獲取/操作CSS的方法改變單個(gè)css屬性$('選擇器').css('屬性名稱','屬性值')---$('body').css('background-color','#ccc')---駝峰寫法效果一樣---$('body').css('backgroundColor&

jQuery獲取/操作CSS的方法

改變單個(gè)css屬性

$('選擇器').css('屬性名稱','屬性值')

---$('body').css('background-color','#ccc')

---駝峰寫法效果一樣

---$('body').css('backgroundColor','#ccc')

111.png

--------------------------------------------------------------------------------------------------------------------

改變多個(gè)css屬性

$('選擇器').css({'屬性名稱1':'屬性值1','屬性名稱2':'屬性值2','屬性名稱3':'屬性值3'})

$('p').css({'color':'red','fontSize':'40px;','fontWeight':'bold'})

222.png

--------------------------------------------------------------------------------------------------------------------

獲取單個(gè)css屬性值

$('選擇器').css('屬性名')

$('div').css('width')

333.png

--------------------------------------------------------------------------------------------------------------------

獲取多個(gè)css屬性值

$('選擇器1,選擇器2,選擇器3').css('屬性名')

--------------------------------------------------------------------------------------------------------------------

jQuery操作屬性的方法

$('選擇器').addClass('類名 類名')           該方法向被選中的元素添加一個(gè)或多個(gè)類

444.png

$('選擇器').removeClass('類名 類名')     該方法向被選中的元素移除一個(gè)或多個(gè)類

555.png

$('選擇器').attr('屬性名')              該方法設(shè)置或返回被選中元素的屬性值

$('選擇器').attr('屬性名','屬性值')

666.png

$('選擇器').removeAttr('屬性名')              該方法從被選中的元素中移除屬性

777.png

888.png

$('選擇器').hasClass('屬性值')            該方法檢查被選中的元素是否包含指定的class,是為true,否為false

999.png

$('選擇器1,選擇器2,選擇器3').toggleClass('類名')       該方法對(duì)被選中元素進(jìn)行添加/刪除類的切換操作

10.png

--------------------------------------------------------------------------------------------------------------------

設(shè)置內(nèi)容:          

該方法返回或者設(shè)置被選中的元素的文本內(nèi)容

$('選擇器').text()                      返回

11.png

$('選擇器').text('設(shè)置的內(nèi)容')          設(shè)置

12.png

該方法返回或者設(shè)置被選中的元素的內(nèi)容(類似innerHTML可以包括html標(biāo)簽)

$('選擇器').html()              返回內(nèi)容

13.png

$('選擇器').html('<h1>標(biāo)簽內(nèi)容</h1>')          設(shè)置成其他標(biāo)簽

14.png

該方法返回或者設(shè)置被選元素的值

$('選擇器').val()              返回內(nèi)容

15.png

$('選擇器').val('修改內(nèi)容')          設(shè)置成其內(nèi)容

16.png

--------------------------------------------------------------------------------------------------------------------

jQuery的事件函數(shù)

jQuery的事件方法

ready()    當(dāng)我們的DOM已經(jīng)加載,頁(yè)面已經(jīng)加載完,觸發(fā)的事件==js的onload

語(yǔ)法:

$(document).ready(function(){

           

       })

*不能與<body onload="">一起使用

blur()     當(dāng)元素失去焦點(diǎn) ==onblur

語(yǔ)法:

$('選擇器').blur(函數(shù)(){

})

17.png

focus()     當(dāng)元素獲得焦點(diǎn) ==onfocus

語(yǔ)法:

$('選擇器').focus(函數(shù)(){

})

18.png

change()     當(dāng)元素值發(fā)生改變的時(shí)候

語(yǔ)法:

$('選擇器').change(函數(shù)(){

})

19.png

click()     點(diǎn)擊事件

語(yǔ)法:

$('選擇器').click(函數(shù)(){

})

20.png21.png

dblclick()     雙擊事件

語(yǔ)法:

$('選擇器').dblclick(函數(shù)(){

})

22.png

mouseover()       當(dāng)鼠標(biāo)指針位于元素上方時(shí)會(huì)發(fā)生mouseover事件

語(yǔ)法:

$('選擇器').mouseover(函數(shù)(){

})

23.png

mouseenter()      當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)會(huì)發(fā)生mouseenter事件,感覺(jué)和上面的事件差不多效果

語(yǔ)法:

$('選擇器').mouseenter(函數(shù)(){

})

25.png

mousemove()       當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí),就會(huì)發(fā)生該事件,同上兩個(gè)效果差不多

語(yǔ)法:

$('選擇器').mousemove(函數(shù)(){

})

26.png

mouseleave()      當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)

語(yǔ)法:

$('選擇器').mouseleave(函數(shù)(){

})

27.png

mouseout()        當(dāng)鼠標(biāo)指針從元素上移開(kāi)時(shí)

語(yǔ)法:

$('選擇器').mouseout(函數(shù)(){

})

28.png

mousedown()       當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)

語(yǔ)法:

$('選擇器').mousedown(函數(shù)(){

})

29.png

mouseup()         當(dāng)在元素上松開(kāi)鼠標(biāo)按鍵時(shí)

語(yǔ)法:

$('選擇器').mouseup(函數(shù)(){

})

30.png

resize()          當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)

語(yǔ)法:

$(window).resize(函數(shù)(){

})

31.png

pageX()           屬性是鼠標(biāo)指針的位置,相對(duì)于文檔的左邊緣 event.pageX event:必須 參數(shù)來(lái)自事件綁定函數(shù)

pageY()           屬性是鼠標(biāo)指針的位置,相對(duì)于文檔的上邊緣 event.pageY event:必須 參數(shù)來(lái)自事件綁定函數(shù)

32.png

jQuery的事件切換

hover(over,out)          

over:鼠標(biāo)移上元素上要觸發(fā)的一個(gè)函數(shù)

out:鼠標(biāo)移出元素上要觸發(fā)的一個(gè)函數(shù)

語(yǔ)法:

$('選擇器').hover(函數(shù)(){

},函數(shù)(){

})

33.png

toggle()    如果元素是可見(jiàn)的,就切換為隱藏,否則相反

34.png

35.png



?? ???:天蓬老師?? ??:2019-04-12 09:22:09
???? ??:這類互斥的切換操作, 應(yīng)該場(chǎng)景很多的, 之前要通過(guò)一些函數(shù)來(lái)進(jìn)行, 現(xiàn)在只需要一個(gè)方法就可以了, 的確方便多了

??? ??

?? ??