1. 程式人生 > 其它 >jQuery學習筆記(1)

jQuery學習筆記(1)

1.jQuery的簡介(Write less,do more)

一個優秀的JS庫,主要的作用是簡化對DOM物件的查詢工作(本身的名字就是JS Query(查詢)的縮寫),並且同時實現了鏈式呼叫和讀寫合一的功能;

其本質是一個封裝起來的自呼叫函式,其中大部分的方法都放在了jQuery這個量上,然後暴露jQuery和$(兩者相等)作為全域性屬性來方便被呼叫;

jQuery和$都是函式,在呼叫時根據這兩個時根據傳參的不同會有不同的效果,而且會返回這個函式的例項物件,無論是函式物件還是例項物件都被添加了各自的方法(函式物件的方法相當於建構函式的靜態資料)

2.如何使用jQuery

引入:一般開發的時候使用未壓縮的版本(字尾帶min的是壓縮版本)

(1.)直接複製程式碼到js檔案中,然後再通過script標籤引入;

(2.)通過CDN遠端伺服器引入(比如BootCDN)

(3.)如果有Node環境,可以直接下載jQuery模組

使用:(1.)$和jQuery這兩個等同的函式物件

(2.)jQuery物件

------------------------------------------------------------------------------------------------------------------------------------------------------------------

jQuery核心函式部分

3.jQuery核心函式

(1.)作為函式呼叫

傳參為函式時,DOM(文件)載入完畢後執行此函式,相當於window.onload()=function來繫結文件載入完成的監聽

引數為選擇器字串(相比css的選擇器會有所拓展)時,查詢所有匹配的元素,會返回對應DOM元素的jQuery物件(內有陣列形式);

引數為DOM元素時,將Dom物件封裝為jQuery物件並返回;

引數為html標籤時(得是帶著尖括號的標籤),建立標籤物件並封裝成jQuery物件,此時還沒有在頁面裡面,如果想在網頁中顯示需要把它加入到文件中;

              

(2.)作為物件被呼叫方法                       

 一般是$.xxx(xxx)

比如$.each(陣列或物件,回撥函式)來實現對陣列或者物件的遍歷,每次遍歷都會呼叫回撥函式,並向它傳參,第一個引數是下標,第二個是數值;

$.trim()向其傳入字串引數,消除兩端的空格並返回;

具體功能查詢文件;

4.關於this問題

(1.)JS原則上,誰呼叫函式誰就是函式中的this,但如果同時呼叫了某些改變this的方法如call()和apply(),this就會被改變;

(2.)在用jQuery物件繫結事件的回撥函式時,函式中的this是被綁上事件的DOM元素,可以理解為在繫結事件時,jquery物件給其內部的DOM元素綁定了事件回撥函式,所以時間觸發時,是DOM物件呼叫的回撥函式;

在遍歷jquery物件時,函式中的this是DOM物件,可以這樣理解比如$xxx.each(funcion())的形式,在each函式呼叫的那層jQuery物件是this,但在回撥函式function中的this是DOM元素;

(3.)在呼叫某些方法時,this會發生變化(比如委派事件)

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

JQuery物件部分(即執行jQuery核心函式返回的物件)

jQuery內部是包含了DOM元素的偽陣列(可能只有一個元素),可以用新增下標的方式來得到具體DOM元素;

JQuery物件的基本行為有:size()/length;[index]/get(index) (得到DOM元素);each()遍歷傳入回撥函式,第一個引數是索引,第二個引數是DOM元素這時回撥函式的this是DOM物件;index()得到在所在兄弟元素中的下標;

5.選擇器

6.屬性

7.css

8.事件

9.效果

10.文件

11.篩選