通過animate方法可以設置元素某屬性值上的動畫,可以設置一個或多個屬性值蚌卤,動畫執(zhí)行完成后會執(zhí)行一個函數(shù)绎橘。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
參數(shù)可以寫成數(shù)字表達式:
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
獲取和設置元素的尺寸:
width()鲫尊、height() 獲取元素width和height
innerWidth()煤辨、innerHeight() 包括padding的width和height
outerWidth()约计、outerHeight() 包括padding和border的width和height
outerWidth(true)诀拭、outerHeight(true) 包括padding和border以及margin的width和height
獲取元素相對頁面的絕對位置:offse()
獲取可視區(qū)高度:$(window).height();
獲取頁面高度:$(document).height();
獲取頁面滾動距離:$(document).scrollTop();
$(document).scrollLeft();
jquery事件 :
blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發(fā)生變化
click() 鼠標單擊
dblclick() 鼠標雙擊
mouseover() 鼠標進入(進入子元素也觸發(fā))
mouseout() 鼠標離開(離開子元素也觸發(fā))
mouseenter() 鼠標進入(進入子元素不觸發(fā))
mouseleave() 鼠標離開(離開子元素不觸發(fā))
hover() 同時為mouseenter和mouseleave事件指定處理函數(shù)
mouseup() 松開鼠標
mousedown() 按下鼠標
mousemove() 鼠標在元素內(nèi)部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 松開鍵盤
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動條的位置發(fā)生變化
select() 用戶選中文本框中的內(nèi)容
submit() 用戶遞交表單
toggle() 根據(jù)鼠標點擊的次數(shù),依次運行多個函數(shù)
unload() 用戶離開頁面
綁定事件的其他方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消綁定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
// $(this).unbind();
$(this).unbind('mouseover');
});
});
主動觸發(fā)與自定義事件 :
主動觸發(fā)
可使用jquery對象上的trigger方法來觸發(fā)對象上綁定的事件煤蚌。
自定義事件
除了系統(tǒng)事件外耕挨,可以通過bind方法自定義事件,然后用tiggle方法觸發(fā)這些事件尉桩。
//給element綁定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//觸發(fā)hello事件
element.trigger("hello");