jQueryjQuery入門

Download jQuery for free

備註

jQuery是一個JavaScript庫,它簡化了DOM操作,事件處理,AJAX和動畫。它還處理底層DOM和JavaScript引擎中的許多瀏覽器兼容性問題。

每個版本的jQuery都可以從https://code.jquery.com/jquery/以壓縮(縮小)和未壓縮格式下載。

版本

筆記發布日期
1.0 第一次穩定發布 2006-08-26
1.1 2007-01-14
1.2 2007-09-10
1.3 Sizzle引入了核心 2009-01-14
1.4 2010-01-14
1.5 延遲回調管理,ajax模塊重寫 2011-01-31
1.6 attr()val()方法的性能顯著提升 2011-05-03
1.7 新事件API: on()off() 2011-11-03
1.8 Sizzle改寫,改進了動畫和$(html, props)靈活性。 2012-08-09
1.9 刪除不推薦使用的接口和代碼清理 2013年1月15日
1.10 合併了1.9和2.0 beta週期中報告的錯誤修復和差異 2013年5月24日
1.11 2014年1月24日
1.12 2016年1月8日
2.0 IE 6-8降低了對性能改進和縮小尺寸的支持 2013年4月18日
2.1 2014年1月24日
2.2 2016年1月8日
3.0 一些jQuery自定義選擇器的大規模加速 2016年6月9日
3.1 沒有更多的無聲錯誤 2016年7月7日

入門

使用以下內容創建文件hello.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>
 

JSBin現場演示

在Web瀏覽器中打開此文件。因此,您將看到一個包含以下文本的頁面: Hello, World!

代碼說明

  1. 從jQuery CDN加載jQuery庫:

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
     

    這引入了$ global變量,它是jQuery 函數和命名空間的別名。

    請注意,包含jQuery時最常見的錯誤之一是在任何其他可能依賴或使用它的腳本或庫之前未能加載庫。

  1. 當jQuery檢測到DOM( 文檔對像模型 )被“準備好”時,推遲執行的函數:

    // When the `document` is `ready`, execute this function `...`
    $(document).ready(function() { ... });
     
    // A commonly used shorthand version (behaves the same as the above)
    $(function() { ... });
     
  1. 一旦DOM準備就緒,jQuery就會執行上面顯示的回調函數。在我們的函數內部,只有一個調用可以執行兩個主要操作:

    1. 獲取id 屬性等於hello 的元素(我們的選擇器 #hello )。使用選擇器作為傳遞參數是jQuery功能和命名的核心;整個庫基本上是從擴展document.querySelectorAll MDN演變而來的。

    2. 將所選元素中的text() 設置為Hello, World!

      #    ↓ - Pass a `selector` to `$` jQuery, returns our element
      $('#hello').text('Hello, World!');
      #             ↑ - Set the Text on the element
       

有關更多信息,請參閱jQuery - Documentation頁面。

避免命名空間衝突

除了jQuery之外的庫也可以使用$ 作為別名。這可能會導致這些庫和jQuery之間的干擾。

要釋放$ 以用於其他庫:

jQuery.noConflict();
 

調用此函數後, $ 不再是jQuery 的別名。但是,您仍然可以使用變量jQuery 本身來訪問jQuery函數:

jQuery('#hello').text('Hello, World!');
 

或者,您可以將另一個變量指定為jQuery的別名:

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');
 

相反,為了防止其他庫干擾jQuery,您可以將jQuery代碼包裝在一個立即調用的函數表達式(IIFE)中,並傳入jQuery 作為參數:

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);
 

在這個IIFE中, $ 只是jQuery的別名。

另一種保護jQuery的$ 別名並確保DOM準備就緒的簡單方法:

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});
 

總結一下,

  • jQuery.noConflict()$ 不再引用jQuery,而變量jQuery 則引用jQuery
  • var jQuery2 = jQuery.noConflict() - $ 不再引用jQuery,而變量jQuery 也是如此,變量jQuery2 也是如此。

現在,存在第三種情況 - 如果我們希望jQuery 僅在jQuery2 可用jQuery2 怎麼jQuery2 ?使用,

var jQuery2 = jQuery.noConflict(true)

這導致$jQuery 都沒有引用jQuery。

當多個版本的jQuery要加載到同一頁面上時,這很有用。

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>
 

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

在HTML頁面的頭部包含腳本標記

要從官方CDN加載jQuery ,請轉到jQuery 網站 。您將看到可用的不同版本和格式的列表。

jQuery CDN頁面陳述了jQuery的可用版本

現在,複製你要加載的jQuery版本的源代碼。假設,你想加載jQuery 2.X ,點擊未壓縮縮小的標籤,它會顯示如下:

彈出了jQuery版本的腳本標籤

複製完整代碼(或單擊複製圖標)並將其粘貼到html的<head><body> 中。

最佳實踐是使用async 屬性在head標記處加載任何外部JavaScript庫。這是一個演示:

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>
 

當使用async 屬性時要有意識,因為javascript庫然後會被異步加載並儘快執行。如果包含兩個庫,其中第二個庫依賴於第一個庫,則如果第二個庫在第一個庫之前加載並執行,那麼它可能會拋出錯誤並且應用程序可能會中斷。

jQuery命名空間(“jQuery”和“$”)

jQuery 是編寫任何jQuery代碼的起點。它可以用作函數jQuery(...) 或變量jQuery.foo

$jQuery 的別名,兩者通常可以相互交換(除非使用了jQuery.noConflict(); - 請參閱避免命名空間衝突 )。

假設我們有這個HTML片段 -

<div id="demo_div" class="demo"></div>
 

我們可能想使用jQuery為這個div添加一些文本內容。為此,我們可以使用jQuery text() 函數。這可以使用jQuery$ 編寫。即 -

jQuery("#demo_div").text("Demo Text!");
 

要么 -

$("#demo_div").text("Demo Text!");
 

兩者都會產生相同的最終HTML -

<div id="demo_div" class="demo">Demo Text!</div>
 

由於$jQuery 更簡潔,因此它通常是編寫jQuery代碼的首選方法。

jQuery使用CSS選擇器,在上面的例子中使用了ID選擇器。有關jQuery 中選擇器的更多信息,請參閱選擇器的類型

通過控制台在沒有它的頁面上加載jQuery。

有時必須使用不使用jQuery 頁面,而大多數開發人員習慣使用jQuery

在這種情況下,可以使用Chrome Developer Tools 控制台( F12 )通過運行以下命令在加載的頁面上手動添加jQuery

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);
 

您想要的版本可能與上面的版本不同( 1.12.4 )您可以在此處獲得所需的鏈接。

加載命名空間的jQuery插件

通常在加載插件時,請確保 jQuery 之後始終包含插件。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>
 

如果你必須使用多個版本的jQuery,那麼確保在所需的jQuery版本之後加載插件,然後加載代碼來設置jQuery.noConflict(true) ;然後加載下一個版本的jQuery及其相關的插件:

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>
 

現在,在初始化插件時,您需要使用關聯的jQuery版本

<script>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</script>
 

可以只使用一個文檔就緒函數來初始化兩個插件,但為了避免混淆以及文檔就緒函數中任何額外的jQuery代碼的問題,最好將引用分開。

jQuery對象

每次調用jQuery時,通過使用$()jQuery() ,在內部它都會創建一個newjQuery 實例。這是顯示新實例的源代碼

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}
 

在內部,jQuery將其原型稱為.fn ,這裡使用的內部實例化jQuery對象的樣式允許暴露該原型而不需要調用者明確使用new

除了設置實例(這是jQuery API的方式,如.eachchildrenfilter 等),內部jQuery還將創建一個類似於數組的結構來匹配選擇器的結果(前提是除了沒有, undefinednull 或類似的東西作為參數傳遞。在單個項目的情況下,此類陣列結構將僅保留該項目。

一個簡單的演示是找到一個帶有id的元素,然後訪問jQuery對像以返回底層DOM元素(當多個元素匹配或存在時,這也將起作用)。

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element
 
CSS操作