jQuery（三）

瀛洲小李發表於2018-05-15
jQuery

jquery鏈式呼叫

jquery物件的方法會在執行完後返回這個jquery物件，所有jquery物件的方法可以連起來寫：

$(`#div1`) // id為div1的元素
.children(`ul`) //該元素下面的ul子元素
.slideDown(`fast`) //高度從零變到實際高度來顯示ul元素
.parent()  //跳到ul的父元素，也就是id為div1的元素
.siblings()  //跳到div1元素平級的所有兄弟元素
.children(`ul`) //這些兄弟元素中的ul子元素
.slideUp(`fast`);  //高度實際高度變換到零來隱藏ul元素

jquery動畫

通過animate方法可以設定元素某屬性值上的動畫，可以設定一個或多個屬性值，動畫執行完成後會執行一個函式。

$(`#div1`).animate({
    width:300,
    height:300
},1000,swing,function(){
    alert(`done!`);
});

引數可以寫成數字表示式：

$(`#div1`).animate({
    width:`+=100`,
    height:300
},1000,swing,function(){
    alert(`done!`);
});

尺寸相關、滾動事件

1、獲取和設定元素的尺寸

width()、height()    獲取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、獲取元素相對頁面的絕對位置

offse()

3、獲取可視區高度

$(window).height();

4、獲取頁面高度

 

$(document).height();

5、獲取頁面滾動距離

$(document).scrollTop();  
$(document).scrollLeft();

6、頁面滾動事件

$(window).scroll(function(){  
    ......  
})

jquery事件

事件函式列表：

blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發生變化
click() 滑鼠單擊
dblclick() 滑鼠雙擊
mouseover() 滑鼠進入（進入子元素也觸發）
mouseout() 滑鼠離開（離開子元素也觸發）
mouseenter() 滑鼠進入（進入子元素不觸發）
mouseleave() 滑鼠離開（離開子元素不觸發）
hover() 同時為mouseenter和mouseleave事件指定處理函式
mouseup() 鬆開滑鼠
mousedown() 按下滑鼠
mousemove() 滑鼠在元素內部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 鬆開鍵盤
load() 元素載入完畢
ready() DOM載入完成
resize() 瀏覽器視窗的大小發生改變
scroll() 滾動條的位置發生變化
select() 使用者選中文字框中的內容
submit() 使用者遞交表單
toggle() 根據滑鼠點選的次數，依次執行多個函式
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`);

    });
});

 

 

相關文章