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

DOM操作筆記

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

jQuery獲取/操作CSS的方法

改變單個css屬性

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

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

---駝峰寫法效果一樣

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

111.png

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

改變多個css屬性

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

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

222.png

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

獲取單個css屬性值

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

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

333.png

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

獲取多個css屬性值

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

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

jQuery操作屬性的方法

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

444.png

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

555.png

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

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

666.png

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

777.png

888.png

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

999.png

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

10.png

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

設置內(nèi)容:          

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

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

11.png

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

12.png

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

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

13.png

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

14.png

該方法返回或者設置被選元素的值

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

15.png

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

16.png

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

jQuery的事件函數(shù)

jQuery的事件方法

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

語法:

$(document).ready(function(){

           

       })

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

blur()     當元素失去焦點 ==onblur

語法:

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

})

17.png

focus()     當元素獲得焦點 ==onfocus

語法:

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

})

18.png

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

語法:

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

})

19.png

click()     點擊事件

語法:

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

})

20.png21.png

dblclick()     雙擊事件

語法:

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

})

22.png

mouseover()       當鼠標指針位于元素上方時會發(fā)生mouseover事件

語法:

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

})

23.png

mouseenter()      當鼠標指針穿過元素時會發(fā)生mouseenter事件,感覺和上面的事件差不多效果

語法:

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

})

25.png

mousemove()       當鼠標指針在指定的元素中移動時,就會發(fā)生該事件,同上兩個效果差不多

語法:

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

})

26.png

mouseleave()      當鼠標指針離開元素時

語法:

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

})

27.png

mouseout()        當鼠標指針從元素上移開時

語法:

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

})

28.png

mousedown()       當鼠標指針移動到元素上方并按下鼠標按鍵時

語法:

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

})

29.png

mouseup()         當在元素上松開鼠標按鍵時

語法:

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

})

30.png

resize()          當調(diào)整當前瀏覽器窗口大小時

語法:

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

})

31.png

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

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

32.png

jQuery的事件切換

hover(over,out)          

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

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

語法:

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

},函數(shù)(){

})

33.png

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

34.png

35.png



Professeur correcteur:天蓬老師Temps de correction:2019-04-12 09:22:09
Résumé du professeur:這類互斥的切換操作, 應該場景很多的, 之前要通過一些函數(shù)來進行, 現(xiàn)在只需要一個方法就可以了, 的確方便多了

Notes de version

Entrées populaires