abstrakt:一.改變css樣式 $(document).ready(function(){ 改變單個(gè)css屬性 $(選擇器).css(&
一.改變css樣式
$(document).ready(function(){
改變單個(gè)css屬性
$(選擇器).css('屬性名','屬性值')
$('body').css('background-color','PLUM')
改變多個(gè)css屬性
$('選擇器').css({'屬性名1':'屬性值1','屬性名2','屬性值2','屬性名3','屬性值3'})
$("p").css({'color':'red','font-size':'40px','font-weight':'bold'});
獲取單個(gè)css的屬性值
$('選擇器').css('屬性名')
alert($('div').css('width'))
alert($('div').css('height'))
二.jquery操作屬性的方法
jquery的操作屬性其原理還是對(duì)於dom的操作
通過(guò)對(duì)象的關(guān)係,對(duì)節(jié)點(diǎn)樹(shù)中的元素的屬性進(jìn)行操作的方法有以下:
addClass()該方法向被選中的元素添加一個(gè)或者多個(gè)類
removeClass()該方法從被選中的元素移除一個(gè)或者多個(gè)類
attr()該方法設(shè)置或者返回被選中元素的屬性值
removeAttr()該方法從被選中的元素中移除屬性
hasClass()該方法檢查被選中的元素是否包含指定class
toggleClass()該方法對(duì)被選中元素進(jìn)行添加/刪除類的切換操作
設(shè)置內(nèi)容:
text()該方法返回或者設(shè)置被選中的元素的文本內(nèi)容
html()該方法返回或者設(shè)置被選中的元素的內(nèi)容(類似innerHtml 可以包含HTML標(biāo)籤)
val()該方法返回或者設(shè)置被選中元素的值
ex;
$(document).ready(function(){
$('p').addClass('box main') //d多個(gè)類,用空格隔開(kāi)
$('p').removeClass('box main')
alert($('p').attr('title'))
$('p').attr('title','你好')
alert($('p').attr('title'))
$('p').remove()
$('button').click(function(){
$('img').removeAttr('src')
})
$('button').click(function(){
alert($('div').hasClass('one'));
})
$(document).ready(function(){
$('button').click(function(){
$('span,b,p').toggleClass('bb')
alert($('p').text())
$('b').text('flow')
alert($('p').html())
$('p').html('<h1>hel</h1>')
alert($('input').val())
$('input').val('我是被修改的值')
三.jquery事件函數(shù)
1. ready()當(dāng)我們的DOM已經(jīng)加載,頁(yè)面已經(jīng)架在你玩,觸發(fā)的事件= =js的onload
語(yǔ)法:
$(document).ready(function(){
})
備註:不能與<body onlad="">一起使用
blur()當(dāng)元素失去焦點(diǎn)= =onblur
focus()當(dāng)元素獲得焦點(diǎn)
change()當(dāng)元素的值發(fā)生改變的時(shí)候
click()點(diǎn)擊事件
dblclick()雙擊事件
mouseover()當(dāng)鼠標(biāo)指針位於元素上方時(shí)會(huì)發(fā)生mouseover事件
mouseenter()當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)會(huì)發(fā)生mouseenter事件
mousemove()當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí),就會(huì)發(fā)生該事件
mouseleave()當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)
mouseout()當(dāng)鼠標(biāo)指針從元素上移開(kāi)時(shí)
mousedown()當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
mouseup()當(dāng)再元素上鬆開(kāi)鼠標(biāo)按鍵時(shí)
resize()當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
pagex()屬性是鼠標(biāo)指針的位置,相對(duì)於文檔的左邊緣event.pagex event:必須 參數(shù)來(lái)自事件綁定函數(shù)
pagey()屬性鼠標(biāo)指針的位置,相對(duì)於文檔的上邊緣event.pagey event:必須 參數(shù)來(lái)自事件綁定函數(shù)
ex;
$(document).ready(function(){
$('input').blur(function(){
$('input').css('background','red')
})
$('input').focus(function(){
$('input').css('background','green')
})
$('input').change(function(){
$('input').css('background','plum')
})
$('button').click(function(){
$('div').css('background','yellow')
})
Korrigierender Lehrer:西門大官人Korrekturzeit:2019-04-20 13:45:21
Zusammenfassung des Lehrers:總結(jié)的不錯(cuò),很全面。不過(guò)文字怎么是繁體字呢。