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.篩選