文章目錄
JQ原理：
1.jQuery的本質是一個閉包
2.jQuery爲什麼要使用閉包來實現?
爲了避免多個框架的衝突
3.jQuery如何讓外界訪問內部定義的局部變量
window.xxx = xxx;
4.jQuery爲什麼要給自己傳遞一個window參數?
爲了方便後期壓縮代碼
爲了提升查找的效率
5.jQuery爲什麼要給自己接收一個undefined參數?
爲了方便後期壓縮代碼
IE9以下的瀏覽器undefined可以被修改, 爲了保證內部使用的undefined不被修改, 所以需要接收一個正確的undefined
在window域下undefined不能修改，在局部變量中可以修改
jquery入口函數的測試：
1.傳入 '' null undefined NaN 0 false, 返回空的jQuery對象
'' null undefined NaN 0 false經過！後都變成false,直接返回創建的新對象即可
2.字符串:
代碼片段:會將創建好的DOM元素存儲到jQuery對象中返回
選擇器: 會將找到的所有元素存儲到jQuery對象中返回
3.數組:
會將數組中存儲的元素依次存儲到jQuery對象中立返回
4.除上述類型以外的:
會將傳入的數據存儲到jQuery對象中返回
apply和call方法的作用:
專門用於修改方法內部的this
格式:
call(對象, 參數1, 參數2, ...);
apply(對象, [數組]);
真僞數組的轉換：
僞數組轉換成真數組：[].push.apply(真數組名，僞數組名);
真數組轉換成僞數組：[].slice.call(真數組名);
slice()若什麼都沒有傳，會將數組中的元素放到一個真數組中原樣返回
slice(start,end);用於返回數組中的指定元素，從開始到結束，包含開始，不包含結束
join(separator):
將JS數組中的所有元素放入一個字符串中
separator表示分隔符，默認爲逗號
change與propertychange的區別：
change 事件在內容改變（兩次內容有可能還是相等的）且失去焦點時觸發；
propertychange 事件卻是實時觸發，即每增加或刪除一個字符就會觸發。
動畫的顯示、隱藏、切換、創建：
顯示動畫：show(time,easing,fn);
隱藏動畫：hide(time,easing,fn);
切換動畫：toggle(time,easing,fn);
slow歷時600ms,fast歷時200ms;
easing:默認爲swing表示弧線運動，緩動，先慢中間快後慢，也可以爲linear，表示勻速
展開和收起動畫：
sideDown(time,easing,fn);展開動畫
sideUp(time,easing,fn);收起動畫
sideToggle(time,easing,fn);切換動畫
animate(obj,time,easing,fn)
第一個參數: 接收一個對象, 可以在對象中修改屬性
第二個參數: 指定動畫時長
第三個參數: 指定動畫節奏, 默認就是swing
第四個參數: 動畫執行完畢之後的回調函數
可以在對象中修改屬性時注意：
設置寬度高度時width:"200" width:"+=100"
寬度還可以設置爲"hide" "toggle" "show"
delay方法的作用就是用於告訴系統延遲時長
立即停止當前動畫, 繼續執行後續的動畫
$("div").stop();
$("div").stop(false);
$("div").stop(false, false);
立即停止當前和後續所有的動畫
$("div").stop(true);
$("div").stop(true, false);
立即完成當前的, 繼續執行後續動畫
$("div").stop(false, true);
立即完成當前的, 並且停止後續所有的
$("div").stop(true, true);
淡入淡出：
fadeIn(time,easing,fn)淡入
fadeOut(time,easing,fn)淡出
fadeToggle(time,easing,fn)切換
fadeTo(time,opcity,easing,fn)淡入到opcity透明度
jQ原型上的核心方法和屬性：
1、jquery 獲取jQ版本號
2、selector 實例默認的選擇器取值
3、length 實例默認的長度
3、push 給實例添加新元素
4、sort 對實例中的元素進行排序
5、splice 按照指定下標指定數量刪除元素，也可以替換刪除的元素
6、toArray 把實例轉換爲數組返回
即將真數組轉換成僞數組
7、get 獲取指定下標的元素，獲取的是原生DOM
沒傳參數則返回該數組，傳入複數則相當於數組倒數的第幾個，正數就返回第幾個
8、eq 獲取指定下標的元素，獲取的是jQuery類型的實例對象
9、first 獲取實例中的第一個元素，是jQuery類型的實例對象
10、last 獲取實例中的最後一個元素，是jQuery類型的實例對象
11、each 遍歷實例，把遍歷到的數據傳給回調使用
12、map 遍歷實例，把遍歷到的數據傳給回調使用，然後把回調的返回值收集起來組成一個新的數組返回
DOM元素的加載：
onload事件會等到DOM元素加載完畢, 並且還會等到資源也加載完畢纔會執行
DOMContentLoaded事件只會等到DOM元素加載完畢就會執行回調
document.readyState屬性有如下的狀態：
uninitialized - 還未開始載入
loading - 載入中
interactive - 已加載，文檔與用戶可以開始交互
complete - 載入完成
onreadystatechange事件就是專門用於監聽document.readyState屬性的改變的
DOM 操作:
1、empty ==> 清空指定元素中的所有內容
2、remove ==> 刪除所有的元素或指定元素
3、html ==> 設置所有元素的內容，獲取第一個元素的內容
4、text ==> 設置所有元素的文本內容，獲取所有元素的文本內容
5、元素.appendTo.指定元素 ==> 將元素添加到指定元素內部的最後
特點:
1.如果指定元素有多個,會將元素拷貝多份添加到指定元素中
2.給appendTo方法傳遞字符串, 會根據字符串找到所有對應元素後再添加
3.給appendTo方法傳遞jQuery對象,會將元素添加到jQuery對象保存的所有指定元素中
4.給appendTo方法傳遞DOM元素, 會將元素添加到所有指定DOM元素中
6、指定元素.append.元素 ==> 將元素添加到指定元素內部的最後
7、元素.prependTo.指定元素 ==> 將元素添加到指定元素內部的最前面
調用者.insertBefore(插入的元素, 參考的元素);
insertBefore方法, 調用者是誰就會將元素插入到誰裏面
8、指定元素.prepend.元素 ==> 將元素添加到指定元素內部的最前面
9、元素.insertBefore.指定元素 ==>將元素添加到指定元素外部的前面
調用者.insertBefore(插入的元素, 參考的元素);
insertBefore方法, 調用者是誰就會將元素插入到誰裏面
10、next([expr]) 獲取緊鄰的後面同輩元素的元素
11、prev([expr]) 獲取元素緊鄰的前一個同輩元素
實現insertAfter需要用到原生JavaScript的nextSibling屬性
12、元素.insertAfter.指定元素 ==>將元素添加到指定元素外部的後面
指定元素.after.元素 ==>將元素添加到指定元素外部的後面
元素.insertBefore.指定元素 ==>將元素添加到指定元素外部的前面
指定元素.before.元素 ==>將元素添加到指定元素外部的前面
13、元素.replaceAll.指定元素 ==> 替換所有指定元素
14、指定元素.replaceWith.元素 ==> 替換所有指定元素
15、clone ==> 複製節點(true深複製,false淺複製)
nodeType 屬性返回以數字值返回指定節點的節點類型。
如果節點是元素節點，則 nodeType 屬性將返回 1。
如果節點是屬性節點，則 nodeType 屬性將返回 2。
元素的操作：
內部插入：
append(content|fn)
appendTo(content) 注意這兩個To方法使用時是新增的元素. appendTo(選擇器)
會將元素添加到指定元素內部的最後
prepend(content|fn)
prependTo(content)
會將元素添加到指定元素內部的最前面
外部插入：
after(content|fn)
insertAfter(content) 注意這兩個To方法使用時是新增的元素. appendTo(選擇器)
會將元素添加到指定元素外部的後面
before(content|fn)
insertBefore(content)
會將元素添加到指定元素外部的前面
刪除元素：
remove([expr]) / detach([expr])
刪除指定元素
區別：
利用remove刪除之後再重新添加,原有的事件無法響應
利用detach刪除之後再重新添加,原有事件可以響應
empty()
刪除指定元素的內容和子元素, 指定元素自身不會被刪除
替換元素：
replaceWith(content|fn)
replaceAll(selector) 注意這個方法使用時是新增的元素. replaceAll(選擇器)
替換所有匹配的元素爲指定的元素
複製元素：
clone([Even[,deepEven]])
如果傳入false就是淺複製, 如果傳入true就是深複製
淺複製只會複製元素, 不會複製元素的事件
深複製會複製元素, 而且還會複製元素的事件
nth-child()的用法:
nth-child(-n+x)就是前x項
nth-child(2n)就是偶數項
nth-child(2n-1)就是奇數項
nth-child(x)就是第x項
有關索引的幾種方法：
index()獲取當前對象的索引
eq(x)獲取索引爲x的元素，並將其封裝成對象返回
get(x)獲取索引爲x的元素，不會其封裝成對象，而是直接返回成對象
父、子元素的選擇：
children(.selected)通過可選的表達式來過濾所匹配的子元素，只考慮子元素而不考慮所有後代元素
find(.selected)通過可選的表達式來過濾所匹配的後代元素
parent(.selected)將查找過濾所匹配的所有父元素
parents()將查找過濾所匹配的所有祖輩元素
jQery屬性相關的操作：
1.attr(): 設置或者獲取元素的屬性節點值
2.prop(): 設置或者獲取元素的屬性值
3.css(): 設置獲取樣式
4.val(): 獲取設置value的值
5.hasClass(): 判斷元素中是否包含指定類
6.addClass(): 給元素添加一個或多個指定的類
7.removeClass(): 刪除元素中一個或多個指定的類
8.toggleClass(): 沒有則添加,有則刪除
jQuery事件操作的相關方法：
1.on(type, callback): 註冊事件
1.註冊多個相同類型事件, 後註冊的不會覆蓋先註冊的
2.註冊多個不同類型事件, 後註冊的不會覆蓋先註冊的
2.off(type, callback): 移出事件
1.不傳參, 會移除所有事件
2.傳遞一個參數, 會移除對應類型所有事件
3.傳遞兩個參數, 會移除對應類型對應事件
看到這裏，那麼說明你的JQ就學習的差不多了，不妨自己動手做幾個實例，測試一下看自己是否真正掌握這些知識點。 over!