1. 程式人生 > >《鋒利的jQuery》之四

《鋒利的jQuery》之四

strong class ont window 有關 err bsp ror 一次

1、原生JS中window.onload 和jQuery中$(document).ready()的區別:

  window.onload 方法是在網頁中所有元素(包括元素的所有關聯文件)完全加載到瀏覽器後才執行,即JS此時才可以訪問網頁中的任何元素。

  $(document).ready() 方法註冊的事件處理程序,在DOM完全就緒時就可以被調用。此時,網頁中的所有元素對jQuery而言都是可以訪問的,但是,這並不意味著這些元素關聯的文件都已經下載完畢。

  註意:在$(document).ready()方法內註冊事件,例如與圖片有關的HTML下載完畢,並且已經解析為DOM樹了,但很有可能圖片還未下載完畢,所以圖片的高度和寬度這些屬性都不一定有效,解決這個問題,可以使用jQuery中的load()。 $(window).load(function(){  }).

2、事件綁定:

  要為元素綁定事件完成某些操作,用

bind(type [, data] , fn)

第一個參數是事件類型,類型包括:blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup 和 error。

第二個參數為可選參數。

第三個參數是用來綁定的處理函數。

3、鼠標懸停事件:

hover(enter , leave)

當光標移到元素上時,會觸發第一個函數(enter),當光標移出這個元素時,會觸發第二個函數(leave)。

4、鼠標連續單擊事件:

toggle(fn1 , fn2 , ... , fnN)

作用一:第一次單擊元素,觸發指定的第一個函數(fn1),當再次單擊同一元素時,觸發指定的第二個函數(fn2),如果有更多的函數,則依次觸發,直到最後一個。隨後的每次單擊都重復對著幾個函數的輪番調用。

$(function(){
            $("#panel h5.head").toggle(function () {
                $(
this).next("div.content").hide(); },function(){ $(this).next("div.content").show(); }) });

作用二:切換元素的可見狀態。如果元素是可見的,單擊元素後是隱藏的;如果元素是隱藏的,單擊元素後是可見的。

  

《鋒利的jQuery》之四