a毛 jquery 學習記 2(下) 基礎核心


jquery 學習二   (下)            

參考資料:李炎恢老師的視頻   +   銳利的jquery.pdf

                         我自己練習的包也源碼已經上傳到我的csdn,需要參考的可以去下載

            注意:學習jquery需要有一些javascript /html/css基礎,如果完全沒有一點基礎的是沒有辦法學習的;在我以后的筆記本用到的知識點我會寫到,如果有實在看不懂的,給我評論,我會在下次的筆記中有說明。

            今天主要先說一下jquery核心問題,為后面的學習做點鋪墊;

在做練習的時候,把上節的內容三個文件復制一份,建一個2文件夾放進去,都打開,做如下操作

     首先在index.html中:      把<input>標簽換成<div>標簽  代碼如下

  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<title>jquery 基礎核心內容</title>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript" src="dom.js"></script>
</head>
<body>
<div id = "box"> 基礎核心內容</div>
</body>
</html>

接下來開始做我們的一些示例;(對dom.js的操作)

     1、代碼

         在jQuery程序中,不管是頁面元素的選擇、內置的功能函數,都是美元符號“$”來起始的。而這個“$”就是jQuery當中最重要且獨有的對象:jQuery對象,所以我們在頁面元素選擇或執行功能函數的時候可以這么寫:

    $(function () {});                  //執行一個匿名函數
$(‘#box’); //進行執行的ID元素選擇
$(‘#box’).css(‘color’, ‘red’); //執行功能函數
// 整體寫到一塊也就是這樣
$(function(){
  $('#box').css('color','red'); // #box就是選擇屬性的id .css添加一個行內的CSS 樣式
});

       以上代碼 要實現的功能就是:選擇id = box的屬性,給他加css樣式是 red

        在jquery 中   “$”就是一個jQuery對象;它有一個原本的對象就叫“jQuery”  它就是jQuery的縮寫形式;

也就是說:($ === jQuery) 是恆成立的

     執行如下代碼:看一下效果,與上面那斷代碼顯示是否一樣

注意:執行前先把上面代碼給注釋掉;以下操作都一樣,執行一段新寫的代碼把舊的先注釋掉,方便我們看效果;

 jQuery(function(){
jQuery('#box').css('color','red');
})

         也可以執行如下代碼看效果:最終頁面顯示效果是,true

 alert ($ === jQuery);

     在執行功能函數的時候,我們發現.css()這個功能函數並不是直接被“$”或jQuery對象調用執行的,而是先獲取元素后,返回某個對象再調用.css()這個功能函數。那么也就是說,這個返回的對象其實也就是jQuery對象。


      做下面的示例看一下具體顯示效果;在加深理解一下上面這段話的含意

   alert($); //顯示返回的是jquery的內部;

alert($()); //顯示返回的是jquery的對象

alert($().css('color', 'red')); //顯示返回的也是jquery的對象

$().css(‘color’, ’red’); //理論上合法,但實際上缺少元素而報錯

 

 下面同樣;

jQuery(function(){
alert($);
alert($());
alert($('#box'));
alert($('#box').css('color','red'));

})

 

    值得一提的是,執行了.css()這個功能函數后,最終返回的還是jQuery對象,那么也就是說,jQuery的代碼模式是采用的連綴方式,可以不停的連續調用功能函數。

    $('#box').css('color', 'red').css('font-size', '50px'); //連綴
alert($('#box').css('color','red').css('fontSize','100').css('fontWeight','bold')); //連綴

 
 
       jQuery中代碼注釋和JavaScript是保持一致的,有兩種最常用的注釋:單行使用“//...” ,多行使用“/* ... */” 。 

     

     2、加載模式

       我們在之前的代碼一直在使用$(function () {});這段代碼進行首尾包裹,那么為什么必須要包裹這段代碼呢?

   原因是我們jQuery庫文件是在body元素之前加載的,我們必須等待所有的DOM元素加載后,延遲支持DOM操作,否則就無法獲取到。

       做一個示例如下:     

$(function(){

});
$('#box').css('color','red');
  顯示結果發現,字體顏色沒有變,這是為什么呢:

  這里是因為:

  查看一下html知道,當前頁面dom.js是在html頁面中引入的,html頁面的執行順序是一行一行的執行;當把上面的代碼寫到方法外面的時,執行到 <script type="text/javascript" src="dom.js"></script>這行代碼時就會去dom.js中逐行執行;而執行到 $('#box').css('color','red');時就會去.html找相應的元素,而此時html以下代碼還沒執行呢,所以當顯示出來時,頁面上顯示的文字沒有效果;

       加下面一段代碼繼續查看效果

      windows.onload = function(){ }    //當網頁內容都加載完成的時候執行function里面的代碼

 window.onload = function(){
$('#box').css('color','red')
};
但是這樣寫真的好嗎?具體原因看一下如下對比

   
   
 
          在實際應用中,我們都很少直接去使用window.onload,因為他需要等待圖片之類的大型元素加載完畢后才能執行JS代碼。所以,最頭疼的就是網速較慢的情況下,頁面已經全面展開,圖片還在緩慢加載,這時頁面上任何的JS交互功能全部處在假死狀態。並且只能執行單次在多次開發和團隊開發中會帶來困難。

     3、對象互換

    jQuery對象雖然是 jQuery 庫獨有的對象,但它也是通過 JavaScript 進行封裝而來的。 我們可以直接輸出來得到它的信息。
            alert($);//jQuery對象方法內部
            alert($());//jQuery對象返回的對象,還是jQuery
            alert($('#box'));//包裹ID元素返回對象,還是jQuery

    從上面三組代碼我們發現:只要使用了包裹后,最終返回的都是 jQuery 對象。這樣的好處顯而易見,就是可以連綴處理。但有時,我們也需要返回原生的DOM對象:

   

  $(function(){
      alert($('#box'));   //顯示的是jquery的對象
      alert(document.getElementById('box')); //返回原生DOM對象 (javascript寫法) [object HTMLDivElement]
      
      alert($('#box').get(0));  //  返回原生DOM對象 (jQuery寫法) [object HTMLDivElement]
      
      alert($(document.getElementById('box'))); //再把原生對象包裹成jQuery 對象     
  });
    以上也就是jQuery跟javascript的互換;   


     4、多個庫之間的沖突

    當一個項目中引入多個第三方庫的時候,由於沒有命名空間的約束(命名空間就好比同一個目錄下的文件夾一樣,名字相同就會產生沖突) ,庫與庫之間發生沖突在所難免。那么,既然有沖突的問題,為什么要使用多個庫呢?原因是 jQuery 只不過是 DOM 操作為主的庫,方便我們日常 Web 開發。但有時,我們的項目有更多特殊的功能需要引入其他的庫,比如用戶界面 UI 方面的庫,游戲引擎方面的庫等等一系列。而很多庫,比如 prototype、還有我們 JavaScript 課程開發的 Base 庫,都使用“$”作為基准起始符,如果想和共容有兩種方法:


     方法一:

     將 jQuery 庫在 Base 庫之前引入,那么“$”的所有權就歸 Base 庫所有,而 jQuery 可以直接用 jQuery 對象調用,或者創建一個“$$”符給 jQuery 使用。(下面直接在此寫入代碼總是有問題,半個小時也沒解決,所以以下我只好截圖來解決)

      首先在html中引入 base.js/tool.js庫,置於jQuery庫的后面,然后執行如下代碼(base.js/tool.js庫可以從我的csdn中源碼處獲取,源碼我已經上傳)

dom.js如下

   


以下是我測試的一些結果,大家可以參考一下;

    $(function(){
    剛才我們已經用過 alert($('#box').get(0)),說明jquery中是有get方法;我們打印試試
    如果打印成功就表示是'$'是jquery庫的,如果失敗就表示'$'已經是base 庫的了
    alert($('#box').get(0));

    以上驗證結果是失敗 最后通過驗證得到:將 jQuery 庫在 Base 庫之前引入,那么“$”的所有權就歸 Base 庫所有
    base 庫中有一個 ge()方法,我們引入試試,查看結果如何
    alert($('#box').ge(0)); //最后結果輸出了 [object HTMLDivElement]
    如果想要正確輸出結果應該怎么辦呢?我們也可以這樣寫
    alert(jQuery('#box').get(0));
    如果覺得麻煩也可以這樣做 在方法外部定義jquery:

   var $$= jQuery 
    於是代碼便可以這樣寫 

   

  alert($$('#box').get(0));

 

});

    方法二:

     如果將 jQuery 庫在 Base 庫之后引入,那么“$”的所有權就歸 jQuery 庫所有,而 Base庫將會沖突而失去作用。這里,jQuery 提供了一個方法:

         首先在html中將jQuery庫放置到base.js/tool.js庫后面,然后執行如下代碼

   

  jQuery.noConflict(); //將jQuery 的 '$' 符所有權剔除掉 
   當執行上面代碼的時候,'$'的使用權便又交到了base手中了,然后我們在根據上面方法,定義一個$$即可實現自己想要的了,代碼如下:

      

這就是基礎核心的一些內容,從下次開始便正式學習jquery知識點


注意!

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



 
粤ICP备14056181号  © 2014-2020 ITdaan.com