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不為XXxxx元素,其中包含沒有class屬性的元素,not中的表達式可加單引號可不加,一般不用加】

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

[attrName!=value] - 獲取包含指定attrName的值不為value的元素(包含沒有該屬性的元素,與not包含一致,not也是包含沒有該屬性的元素)

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

selector1,selector2,......$(onetwo);【組合選擇器】

中間用逗號隔開,全部寫在一個雙引號里,並集)

【隱藏元素的情況】

1.設置為display:none;

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

3.widthheight設置為0

4.隱藏的父元素

7、addClass() - 追加樣式

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

attr()設置樣式 - 無論之前是否包含樣式,設置成當前樣式,如果之前包含樣式,會被覆蓋

8css()方法

        獲取 -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代碼,csshtml是一個引擎加載,js是另一個引擎加載,如果隨意寫js,則引擎切換的次數越多。每一種寫的順序的方式都有自己的好處

4.this是指代DOM,不是jquery對象

5.js的函數不具備重載,叫覆蓋

6.當腳本代碼放在頁面上邊的時候,用一個全局加載ready

12jquery UI提供的功能

    1.效果(Effects)

     animate() - 自定義動畫【jQueryuianimatejQuery 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);}());

方法2function外面加括號

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

方法3function前面加運算符,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示例代碼

   [jquery插件是可以脫離jquery獨立使用的]


本文出自 “Apple” 博客,轉載請與作者聯系!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: