jquery學習之重要知識點

1、javascript類庫，即js庫，預封裝了很多函式和物件，為了簡化我們的js開發，最大的特點是相容各大瀏覽器，即不需要考慮相容性問題，鏈式操作——方法鏈方式大大簡化了程式碼的書寫。

2、jquery-1.11.3.js——正常檔案：有註釋、空行和縮排

jquery-1.11.3.min.js——壓縮檔案：採用GZIP壓縮技術，沒有註釋、空行和縮排

注：開發時為了加快載入速度，採用壓縮版本，平時學習練習研發使用正常版本

3、jquery物件與DOM物件區分

jquery物件：封裝DOM物件後產生的物件

DOM物件：通過DOM獲取的元素，稱之為DOM物件

4、jquery九大選擇器

基本選擇器、層級選擇器、過濾選擇器（基本過濾選擇器、子元素過濾選擇器、可見性過濾選擇器、內容過濾選擇器、屬性過濾選擇器、表單物件屬性過濾選擇器、）

5、可見性過濾選擇器

：visible  獲取可見元素（不常用）

：hidden  獲取不可見元素（常用）

注：對visibility:hidden不起作用

6、【重點記憶】

 :not(expr) – 獲取不包含指定表示式的元素

【獲取class不為XX的xxx元素，其中包含沒有class屬性的元素，not中的表示式可加單引號可不加，一般不用加】

 :has(selector) – 獲取含有匹配選擇器的元素的父元素

[attrName!=value] – 獲取包含指定attrName的值不為value的元素（包含沒有該屬性的元素，與not包含一致，not也是包含沒有該屬性的元素）

[attrName][attrName] – 組合屬性過濾選擇器(交集)(與基本選擇器的並集不一樣）

selector1,selector2,……（$(“one，two”)；【組合選擇器】

中間用逗號隔開，全部寫在一個雙引號裡,並集）

【隱藏元素的情況】

1．設定為display:none;

2．帶有type=“hidden”的表單元素

3．width和height設定為0

4．隱藏的父元素

7、addClass() – 追加樣式

無論之前是否包含樣式，在此基礎上追加一個新的樣式，如果之前包含樣式，依舊存在

attr（）設定樣式 – 無論之前是否包含樣式，設定成當前樣式，如果之前包含樣式，會被覆蓋

8、css()方法

        獲取 -css(attrName)

        設定：【設定單個】

   css(attrName, attrValue)

  注意：attrName必須是字串型別

    【設定多個】

  css({

 attrName : attrValue,

 attrName : attrValue,

 … …

   })

  注意 – attrName直接定義，不需要編寫成字串型別，值不加單位

9、children()與find()的區別：find是找所有後代元素，children是隻找子元素

10、替換元素

    被替換元素 . replaceWith($(“替換元素”))

    replaceAll() – 實際上就是顛倒了的replaceWith()

  刪除元素

    remove() – 刪除自身及後代節點[自殺式，與原生DOM的原理完全不同]

      empty() – 刪除後代節點，保留自身節點(特別適合：清空)

   插入元素

     內部插入 – 子元素(指定元素內)

     append() – 作為最後一個子元素插入到指定元素中

 【插入在指定元素的後面】

 【顯示出來是在後面，作為子元素出現，保留各自前面的li點】

     prepend() – 作為第一個子元素插入到指定元素中

    【插入在指定元素的前面】

 【顯示出來是在前面，作為子元素出現，不保留原來li前面的點】

   appendTo()

     prependTo()【只是上述操作的反操作，前後元素顛倒】

     外部插入 – 兄弟元素(指定元素外)

     before() – 作為指定元素的上一個兄弟元素插入

     after() – 作為指定元素的下一個兄弟元素插入

    【只是上述操作的反操作】

     insertBefore()

     insertAfter()

11、【注意問題】

1． 在js操作css的時候用駝峰。

2． 只要是加小括號的，一定是函式或方法的呼叫

3． 從載入上來說：寫程式碼時不要隨意位置寫Js程式碼，css和html是一個引擎載入，js是另一個引擎載入，如果隨意寫js，則引擎切換的次數越多。每一種寫的順序的方式都有自己的好處

4．this是指代DOM，不是jquery物件

5．js的函式不具備過載，叫覆蓋

6．當指令碼程式碼放在頁面上邊的時候，用一個全域性載入ready

12、jquery UI提供的功能

    1.效果(Effects)

     animate() – 自定義動畫【jQueryui的animate是jQuery animate的補充】

     JQUERY中的animate()無法使用的CSS屬性,在這都能用

    【 animate()方法

  當前HTML頁面既引入JQUERY也引入JQUERY UI

  兩者都提供了animate()方法

  如何保證呼叫的animate()一定是JQUERY UI提供的?

  原因 – JQUERY是先引入的,animate()方法被覆蓋

    JavaScript的函式不具備“過載”而是“覆蓋”，後面的代替了前面的】   

2.互動(Interactions)

3.元件(Widgets)

  dialog，對話方塊是開發中比較重要的元素

13、自調函式 – 儘量避免全域性變數和函式(物件)

      原則 – 將全域性改為區域性

      自調函式

       (function(){

          // 定義程式碼

       }());//解決全域性問題

 自調函式的寫法至少13種以上【可自己查】

 所有全域性變數都在瀏覽器記憶體裡，會影響效能。

方法1：最前最後加括號

(function(){alert(1);}());

方法2：function外面加括號

(function(){alert(1);})();

方法3：function前面加運算子，void

void function(){alert(2);}(); //據說效率最高~

4：帶引數

(function(o) {

alert(o);

})(`water`);

5 ：匿名函式的鏈式呼叫

(function(o) {

alert(o);

return arguments.callee;

})(`water`)(`down`);

6：~(function(){

alert(`water`);

})();

7：+function(){

alert(`water`);

}();

8：-function(){

alert(`water`);

}();

9：~function(){

alert(`water`);

}();

10：!function(){alert(1);}();

14、【JQUERY的外掛必須掌握！！！】

   如何學習JQUERY外掛？

   外掛官方提供的幫助文件

   外掛提供的Demo示例程式碼

本文轉自 蓓蕾心晴 51CTO部落格，原文連結：http://blog.51cto.com/beileixinqing/1862030，如需轉載請自行聯絡原作者