????: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')
--------------------------------------------------------------------------------------------------------------------
改變多個(gè)css屬性
$('選擇器').css({'屬性名稱1':'屬性值1','屬性名稱2':'屬性值2','屬性名稱3':'屬性值3'})
$('p').css({'color':'red','fontSize':'40px;','fontWeight':'bold'})
--------------------------------------------------------------------------------------------------------------------
獲取單個(gè)css屬性值
$('選擇器').css('屬性名')
$('div').css('width')
--------------------------------------------------------------------------------------------------------------------
獲取多個(gè)css屬性值
$('選擇器1,選擇器2,選擇器3').css('屬性名')
--------------------------------------------------------------------------------------------------------------------
jQuery操作屬性的方法
$('選擇器').addClass('類名 類名') 該方法向被選中的元素添加一個(gè)或多個(gè)類
$('選擇器').removeClass('類名 類名') 該方法向被選中的元素移除一個(gè)或多個(gè)類
$('選擇器').attr('屬性名') 該方法設(shè)置或返回被選中元素的屬性值
$('選擇器').attr('屬性名','屬性值')
$('選擇器').removeAttr('屬性名') 該方法從被選中的元素中移除屬性
$('選擇器').hasClass('屬性值') 該方法檢查被選中的元素是否包含指定的class,是為true,否為false
$('選擇器1,選擇器2,選擇器3').toggleClass('類名') 該方法對(duì)被選中元素進(jìn)行添加/刪除類的切換操作
--------------------------------------------------------------------------------------------------------------------
設(shè)置內(nèi)容:
該方法返回或者設(shè)置被選中的元素的文本內(nèi)容
$('選擇器').text() 返回
$('選擇器').text('設(shè)置的內(nèi)容') 設(shè)置
該方法返回或者設(shè)置被選中的元素的內(nèi)容(類似innerHTML可以包括html標(biāo)簽)
$('選擇器').html() 返回內(nèi)容
$('選擇器').html('<h1>標(biāo)簽內(nèi)容</h1>') 設(shè)置成其他標(biāo)簽
該方法返回或者設(shè)置被選元素的值
$('選擇器').val() 返回內(nèi)容
$('選擇器').val('修改內(nèi)容') 設(shè)置成其內(nèi)容
--------------------------------------------------------------------------------------------------------------------
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ù)(){
})
focus() 當(dāng)元素獲得焦點(diǎn) ==onfocus
語(yǔ)法:
$('選擇器').focus(函數(shù)(){
})
change() 當(dāng)元素值發(fā)生改變的時(shí)候
語(yǔ)法:
$('選擇器').change(函數(shù)(){
})
click() 點(diǎn)擊事件
語(yǔ)法:
$('選擇器').click(函數(shù)(){
})
dblclick() 雙擊事件
語(yǔ)法:
$('選擇器').dblclick(函數(shù)(){
})
mouseover() 當(dāng)鼠標(biāo)指針位于元素上方時(shí)會(huì)發(fā)生mouseover事件
語(yǔ)法:
$('選擇器').mouseover(函數(shù)(){
})
mouseenter() 當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)會(huì)發(fā)生mouseenter事件,感覺(jué)和上面的事件差不多效果
語(yǔ)法:
$('選擇器').mouseenter(函數(shù)(){
})
mousemove() 當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí),就會(huì)發(fā)生該事件,同上兩個(gè)效果差不多
語(yǔ)法:
$('選擇器').mousemove(函數(shù)(){
})
mouseleave() 當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)
語(yǔ)法:
$('選擇器').mouseleave(函數(shù)(){
})
mouseout() 當(dāng)鼠標(biāo)指針從元素上移開(kāi)時(shí)
語(yǔ)法:
$('選擇器').mouseout(函數(shù)(){
})
mousedown() 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
語(yǔ)法:
$('選擇器').mousedown(函數(shù)(){
})
mouseup() 當(dāng)在元素上松開(kāi)鼠標(biāo)按鍵時(shí)
語(yǔ)法:
$('選擇器').mouseup(函數(shù)(){
})
resize() 當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
語(yǔ)法:
$(window).resize(函數(shù)(){
})
pageX() 屬性是鼠標(biāo)指針的位置,相對(duì)于文檔的左邊緣 event.pageX event:必須 參數(shù)來(lái)自事件綁定函數(shù)
pageY() 屬性是鼠標(biāo)指針的位置,相對(duì)于文檔的上邊緣 event.pageY event:必須 參數(shù)來(lái)自事件綁定函數(shù)
jQuery的事件切換
hover(over,out)
over:鼠標(biāo)移上元素上要觸發(fā)的一個(gè)函數(shù)
out:鼠標(biāo)移出元素上要觸發(fā)的一個(gè)函數(shù)
語(yǔ)法:
$('選擇器').hover(函數(shù)(){
},函數(shù)(){
})
toggle() 如果元素是可見(jiàn)的,就切換為隱藏,否則相反
?? ???:天蓬老師?? ??:2019-04-12 09:22:09
???? ??:這類互斥的切換操作, 應(yīng)該場(chǎng)景很多的, 之前要通過(guò)一些函數(shù)來(lái)進(jìn)行, 現(xiàn)在只需要一個(gè)方法就可以了, 的確方便多了