一.改變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的操作
通過對象的關係,對節點樹中的元素的屬性進行操作的方法有以下:
addClass()該方法向被選中的元素添加一個或者多個類
removeClass()該方法從被選中的元素移除一個或者多個類
attr()該方法設置或者返回被選中元素的屬性值
removeAttr()該方法從被選中的元素中移除屬性
hasClass()該方法檢查被選中的元素是否包含指定class
toggleClass()該方法對被選中元素進行添加/刪除類的切換操作
設置內容:
text()該方法返回或者設置被選中的元素的文本內容
html()該方法返回或者設置被選中的元素的內容(類似innerHtml 可以包含HTML標籤)
val()該方法返回或者設置被選中元素的值
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事件函數
1. ready()當我們的DOM已經加載,頁面已經架在你玩,觸發的事件= =js的onload
語法:
$(document).ready(function(){
})
備註:不能與<body onlad="">一起使用
blur()當元素失去焦點= =onblur
focus()當元素獲得焦點
change()當元素的值發生改變的時候
click()點擊事件
dblclick()雙擊事件
mouseover()當鼠標指針位於元素上方時會發生mouseover事件
mouseenter()當鼠標指針穿過元素時會發生mouseenter事件
mousemove()當鼠標指針在指定的元素中移動時,就會發生該事件
mouseleave()當鼠標指針離開元素時
mouseout()當鼠標指針從元素上移開時
mousedown()當鼠標指針移動到元素上方并按下鼠標按鍵時
mouseup()當再元素上鬆開鼠標按鍵時
resize()當調整當前瀏覽器窗口大小時
pagex()屬性是鼠標指針的位置,相對於文檔的左邊緣event.pagex event:必須 參數來自事件綁定函數
pagey()屬性鼠標指針的位置,相對於文檔的上邊緣event.pagey event:必須 參數來自事件綁定函數
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')
})