jQuery系列第二章 jQuery框架使用準備

時間 2019-11-05

原文原文鏈接

第二章 jQuery框架使用準備

　　　　2.1 jQuery框架和JavaScript加載模式對比

jQuery框架的加載模式html

1 <script>
2     window.onload = function () {
3         console.log("window.onload——1")
4     };
5     window.onload = function () {
6         console.log("window.onload——2")
7     }
8 </script>

打印結果：window.onload——2jquery

JavaScript的加載模式api

1 <script src="jquery-3.2.1.js"></script>
2 <script>
3     $(document).ready(function () {
4         console.log("$().ready——1")
5     });
6     $(document).ready(function () {
7         console.log("ready——2")
8     })
9 </script>

　　　　打印結果：ready——1 ready——2閉包

兩種加載模式對比app

① 監聽時機不相同

window.onload方法須要等全部的資源（CSS\JS\圖片等）都加載完畢後執行包裹代碼。

jQuery框架的ready方法等DOM結構加載完畢後執行包裹代碼。

② 執行次數不相同

window.onload方法，N次只會執行一次，後面的會把前面的覆蓋。

jQuery框架的ready方法，N次會執行N次，不存在覆蓋的問題。

③ 簡寫方式不相同

   jQuery框架中的加載方式能夠簡寫爲： 
 

   $().ready( 
  function () {}） 
 

   $( 
  function () {}) 
 
2.2 jQuery框架解決衝突在實際的開發中，咱們的項目中可能須要用到並引入多個第三方框架，若是這些框架自己在設計的時候，沒有命名空間的約束，那麼庫與庫之間發生衝突將在所不免。框架
jQuery框架在設計的使用，使用閉包的形式在全部的代碼都封裝到一個當即調用函數中，對外僅僅提供了美圓符號和jQuery做爲框架的入口。函數
jQuery當中全部的操做都是使用美圓符號或者是jQuery對象進行的。假如，咱們在使用jQuery框架以前已經在頁面的代碼中用到了美圓符號，那麼這種狀況下，咱們再按照常規的方式使用jQuery就可能會發生錯誤。ui
爲了不這種狀況的發生，jQuery框架使用noConflict方法,能夠在使用以前把美圓符號替換成其它的標識符，至關因而給jQuery對象換個其餘的名字。spa
代碼示例prototype
 
   1 <script src="jquery-3.1.1.js"></script>
2 <script>
3     var $ = "文頂頂";
4     $(function () {
5         console.log("DOM加載完畢");
6     })
7 </script> 
  
代碼說明
若是直接執行上面的代碼，那麼會報錯。
報錯信息：Uncaught TypeError: $ is not a function
報錯緣由：美圓符號被定義爲字符串，jQuery框架中美圓符號被覆蓋。
解決衝突（給jQuery框架安排新的代言人）
 
    1 <script>
 2     //在$符號被定義以前使用noConflict方法來從新設置名稱
 3     var jq = $.noConflict();
 4     // $符號可能被定義爲字符串或其餘數據
 5     var $ = "文頂頂";
 6     //解決衝突以後,使用新設置的名稱來操做
 7     jq(function () {
 8         console.log("DOM加載完畢");
 9     })
10 </script> 
  
2.3 jQuery對象和DOM對象的相互轉換DOM對象：每一個HTML頁面都是一個 DOM對象(Document Object Model，文本對象模型)，經過傳統的JavaScript方法訪問頁面中的元素，就是訪問 DOM 對象。
jQuery對象：在 jQuery框架中，經過自己自帶的方法獲取頁面元素的對象，稱爲 jQuery 對象 ;
備註：其實jQuery自己只是個工廠函數，咱們一般意義上所說的jQuery實例對象實際上是jQuery的原型對象上面的init方法建立出來的實例對象。即 jQuery對象 = new jQuery.prototype.init() , 只是由於init方法和jQuery構造函數共用相同的原型對象，所以咱們纔會稱init構造函數建立出來的對象爲jQuery實例。
代碼示例
 
    1 <body>
 2 <div class="box">我是div</div>
 3 <script src="jquery-3.2.1.js"></script>
 4 <script>
 5     //經過DOM提供的api獲取頁面中全部class爲box的標籤
 6     var oDiv = document.getElementsByClassName("box");
 7     console.log(oDiv);
 8     //經過jQuery提供的方法獲取頁面中全部class爲box的標籤
 9     var ojQueryObj = $("div");
10     console.log(ojQueryObj);
11 </script>
12 </body> 
  
DOM對象和jQuery對象的轉換
DOM對象能夠理解爲標籤對象，咱們在操做這些標籤的時候，有不少標籤自帶的方法能夠使用，如innerHTML、innerText屬性，或者是appendChild方法等。
jQuery對象能夠理解爲jQuery初始化方法這個構造函數建立的實例化對象，由於它的原型對象爲jQuery.prototype，所以全部的jQuery實例對象均可以訪問jQuery原型對象上面的成員[屬性或方法]，如html、text方法等。
注意： DOM對象不能直接訪問jQuery原型對象上面的成員，jQuery對象也不能直接訪問標籤對象上面的成員，如需訪問則應該先進行轉換。
DOM標籤對象 -> jQuery實例對象 $(DOM標籤對象)
jQuery實例對象 -> DOM標籤對象 jQuery對象.get(index) | jQuery對象[index]
 
代碼示例
 
    1 <body>
 2 <div class="box">我是div</div>
 3 <script src="jquery-3.1.1.js"></script>
 4 <script>
 5     //經過DOM提供的api獲取頁面中全部class爲box的標籤
 6     var oDiv = document.getElementsByClassName("box")[0];
 7     //經過jQuery提供的方法獲取頁面中全部class爲box的標籤
 8     var ojQueryObj = $("div");
 9     //DOM -> jQuery
10     console.log($(oDiv).html());
11     //jQuery -> DOM
12     console.log(ojQueryObj.get(0));
13     console.log(ojQueryObj[0]);
14 </script>
15 </body> 
  
 
Posted by 博客園·文頂頂 ~ 文頂頂的我的博客_花田半畝
聯繫做者 簡書·文頂頂 新浪微博·文頂頂
原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 | 文頂頂