サマリー:一.改變css樣式 $(document).ready(function(){ 改變單個css屬性 $(選擇器).css(&
一.改變css樣式
$(document).ready(function(){
改變單個css屬性
$(選擇器).css('屬性名','屬性值')
$('body').css('background-color','PLUM')
改變多個css屬性
$('選擇器').css({'屬性名1':'屬性值1','屬性名2','屬性值2','屬性名3','屬性值3'})
$("p").css({'color':'red','font-size':'40px','font-weight':'bold'});
獲取單個css的屬性值
$('選擇器').css('屬性名')
alert($('div').css('width'))
alert($('div').css('height'))
二.jquery操作屬性的方法
jquery的操作屬性其原理還是對於dom的操作
通過對象的關(guān)係,對節(jié)點樹中的元素的屬性進(jìn)行操作的方法有以下:
addClass()該方法向被選中的元素添加一個或者多個類
removeClass()該方法從被選中的元素移除一個或者多個類
attr()該方法設(shè)置或者返回被選中元素的屬性值
removeAttr()該方法從被選中的元素中移除屬性
hasClass()該方法檢查被選中的元素是否包含指定class
toggleClass()該方法對被選中元素進(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多個類,用空格隔開
$('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)加載,頁面已經(jīng)架在你玩,觸發(fā)的事件= =js的onload
語法:
$(document).ready(function(){
})
備註:不能與<body onlad="">一起使用
blur()當(dāng)元素失去焦點= =onblur
focus()當(dāng)元素獲得焦點
change()當(dāng)元素的值發(fā)生改變的時候
click()點擊事件
dblclick()雙擊事件
mouseover()當(dāng)鼠標(biāo)指針位於元素上方時會發(fā)生mouseover事件
mouseenter()當(dāng)鼠標(biāo)指針穿過元素時會發(fā)生mouseenter事件
mousemove()當(dāng)鼠標(biāo)指針在指定的元素中移動時,就會發(fā)生該事件
mouseleave()當(dāng)鼠標(biāo)指針離開元素時
mouseout()當(dāng)鼠標(biāo)指針從元素上移開時
mousedown()當(dāng)鼠標(biāo)指針移動到元素上方并按下鼠標(biāo)按鍵時
mouseup()當(dāng)再元素上鬆開鼠標(biāo)按鍵時
resize()當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時
pagex()屬性是鼠標(biāo)指針的位置,相對於文檔的左邊緣event.pagex event:必須 參數(shù)來自事件綁定函數(shù)
pagey()屬性鼠標(biāo)指針的位置,相對於文檔的上邊緣event.pagey event:必須 參數(shù)來自事件綁定函數(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')
})
添削の先生:西門大官人添削時間:2019-04-20 13:45:21
先生のまとめ:總結(jié)的不錯,很全面。不過文字怎么是繁體字呢。