2018年7月17日筆記

阿新 • • 發佈：2018-07-19

大小 focus head -c read fad slow ... css

jQuery

jQuery 是一個 JavaScript 庫。

jQuery 極大地簡化了 JavaScript 編程。

jQuery 很容易學習。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script 
>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

jQuery 是一個“寫的更少，但做的更多”的輕量級 JavaScript 庫。

基本上，您將學習到如何選取 HTML 元素，以及如何對它們執行類似隱藏、移動以及操作其內容等任務。

在您開始學習 jQuery 之前，您應該對以下知識有基本的了解：

HTML
CSS
JavaScript

jQuery簡介

jQuery 庫可以通過一行簡單的標記被添加到網頁中。

jQuery 庫 - 特性

jQuery 是一個 JavaScript 函數庫。

jQuery 庫包含以下特性：

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

向您的頁面添加 jQuery 庫

jQuery 庫位於一個 JavaScript 文件中，其中包含了所有的 jQuery 函數。

可以通過下面的標記把 jQuery 添加到網頁中：

<head>
<script type="text/javascript" src="jquery.js" 
></script>
</head>

註意，<script> 標簽應該位於頁面的 <head> 部分。

下面的例子演示了 jQuery 的 hide() 函數，隱藏了 HTML 文檔中所有的 <p> 元素。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

庫的替代

Google 和 Microsoft 對 jQuery 的支持都很好。

如果您不願意在自己的計算機上存放 jQuery 庫，那麽可以從 Google 或 Microsoft 加載 CDN jQuery 核心文件。

使用 Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

jQuery安裝

把 jQuery 添加到您的網頁

如需使用 jQuery，您需要下載 jQuery 庫（會在下面為您講解），然後把它包含在希望使用的網頁中。

jQuery 庫是一個 JavaScript 文件，您可以使用 HTML 的 <script> 標簽引用它：

<head>
<script src="jquery.js"></script>
</head>

註意，<script> 標簽應該位於頁面的 <head> 部分。

提示：您是否很疑惑為什麽我們沒有在 <script> 標簽中使用 type="text/javascript" ？

在 HTML5 中，不必那樣做了。JavaScript 是 HTML5 以及所有現代瀏覽器中的默認腳本語言！

下載 jQuery

有兩個版本的 jQuery 可供下載：

Production version - 用於實際的網站中，已被精簡和壓縮。
Development version - 用於測試和開發（未壓縮，是可讀的代碼）

這兩個版本都可以從 jQuery.com 下載。

提示：您可以把下載文件放到與頁面相同的目錄中，這樣更方便使用。

替代方案

如果您不希望下載並存放 jQuery，那麽也可以通過 CDN（內容分發網絡）引用它。

谷歌和微軟的服務器都存有 jQuery 。

如需從谷歌或微軟引用 jQuery，請使用以下代碼之一：

Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

提示：使用谷歌或微軟的 jQuery，有一個很大的優勢：

許多用戶在訪問其他站點時，已經從谷歌或微軟加載過 jQuery。所有結果是，當他們訪問您的站點時，會從緩存中加載 jQuery，這樣可以減少加載時間。同時，大多數 CDN 都可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣也可以提高加載速度。

jQuery語法

jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。

基礎語法是：$(selector).action()

美元符號定義 jQuery
選擇符（selector）“查詢”和“查找” HTML 元素
jQuery 的 action() 執行對元素的操作

示例

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏所有段落

$(".test").hide() - 隱藏所有 class="test" 的所有元素

$("#test").hide() - 隱藏所有 id="test" 的元素

提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。

文檔就緒函數

您也許已經註意到在我們的實例中的所有 jQuery 函數位於一個 document ready 函數中：

$(document).ready(function(){

--- jQuery functions go here ----

});

這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。

如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小

jQuery選擇器

選擇器允許您對元素組或單個元素進行操作。

jQuery 選擇器

在前面的章節中，我們展示了一些有關如何選取 HTML 元素的實例。

關鍵點是學習 jQuery 選擇器是如何準確地選取您希望應用效果的元素。

jQuery 元素選擇器和屬性選擇器允許您通過標簽名、屬性名或內容對 HTML 元素進行選擇。

選擇器允許您對 HTML 元素組或單個元素進行操作。

在 HTML DOM 術語中：

選擇器允許您對 DOM 元素組或單個 DOM 節點進行操作。

jQuery 元素選擇器

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取所有 id="demo" 的 <p> 元素。

jQuery 屬性選擇器

jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href=‘#‘]") 選取所有帶有 href 值等於 "#" 的元素。

$("[href!=‘#‘]") 選取所有帶有 href 值不等於 "#" 的元素。

$("[href$=‘.jpg‘]") 選取所有 href 值以 ".jpg" 結尾的元素。

jQuery CSS 選擇器

jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。

下面的例子把所有 p 元素的背景顏色更改為紅色：

$("p").css("background-color","red");

jQuery事件

jQuery 是為事件處理特別設計的。

jQuery 事件函數

jQuery 事件處理方法是 jQuery 中的核心函數。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”（或“激發”）經常會被使用。

通常會把 jQuery 代碼放到 <head>部分的事件處理方法中：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

在上面的例子中，當按鈕的點擊事件被觸發時會調用一個函數：

$("button").click(function() {..some code... } )

該方法隱藏所有 <p> 元素：

$("p").hide();

單獨文件中的函數

如果您的網站包含許多頁面，並且您希望您的 jQuery 函數易於維護，那麽請把您的 jQuery 函數放到獨立的 .js 文件中。

當我們在教程中演示 jQuery 時，會將函數直接添加到 <head> 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）：

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名稱沖突

jQuery 使用 $ 符號作為 jQuery 的簡介方式。

某些其他 JavaScript 庫中的函數（比如 Prototype）同樣使用 $ 符號。

jQuery 使用名為 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。

結論

由於 jQuery 是為處理 HTML 事件而特別設計的，那麽當您遵循以下原則時，您的代碼會更恰當且更易維護：

把所有 jQuery 代碼置於事件處理函數中
把所有事件處理函數置於文檔就緒事件處理器中
把 jQuery 代碼置於單獨的 .js 文件中
如果存在名稱沖突，則重命名 jQuery 庫

下面是 jQuery 中事件方法的一些例子：

Event 函數	綁定函數至
$(document).ready(function)	將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function)	觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)	觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)	觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function)	觸發或將函數綁定到被選元素的鼠標懸停事件

jQuery效果

1）隱藏和顯示

jQuery hide() 和 show()

通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

語法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

下面的例子演示了帶有 speed 參數的 hide() 方法：

$("button").click(function(){
  $("p").hide(1000);
});

jQuery toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

$("button").click(function(){
  $("p").toggle();
});

語法：

$(selector).toggle(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 toggle() 方法完成後所執行的函數名稱。

2）淡入淡出

jQuery Fading 方法

通過 jQuery，您可以實現元素的淡入淡出效果。

jQuery 擁有下面四種 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用於淡入已隱藏的元素。

$(selector).fadeIn(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不同參數的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法

jQuery fadeOut() 方法用於淡出可見元素。

$(selector).fadeOut(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不同參數的 fadeOut() 方法：

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。

如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不同參數的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法

jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是該函數完成後所執行的函數名稱。

下面的例子演示了帶有不同參數的 fadeTo() 方法：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

3）滑動

jQuery 滑動方法

通過 jQuery，您可以在元素上創建滑動效果。

jQuery 擁有以下滑動方法：

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用於向下滑動元素。

$(selector).slideDown(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery slideUp() 方法

jQuery slideUp() 方法用於向上滑動元素。

$(selector).slideUp(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();
});

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

如果元素向下滑動，則 slideToggle() 可向上滑動它們。

如果元素向上滑動，則 slideToggle() 可向下滑動它們。

$(selector).slideToggle(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4）動畫

jQuery 動畫 - animate() 方法

jQuery animate() 方法用於創建自定義動畫。

$(selector).animate({params},speed,callback);

必需的 params 參數定義形成動畫的 CSS 屬性。

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成後所執行的函數名稱。

下面的例子演示 animate() 方法的簡單應用；它把 <div> 元素移動到左邊，直到 left 屬性等於 250 像素為止：

$("button").click(function(){
  $("div").animate({left:‘250px‘});
});

提示：默認地，所有 HTML 元素都有一個靜態位置，且無法移動。

如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！

jQuery animate() - 操作多個屬性

請註意，生成動畫的過程中可同時使用多個屬性：

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    opacity:‘0.5‘,
    height:‘150px‘,
    width:‘150px‘
  });
});

提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同時，色彩動畫並不包含在核心 jQuery 庫中。

如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。

jQuery animate() - 使用相對值

也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    height:‘+=150px‘,
    width:‘+=150px‘
  });
});

jQuery animate() - 使用預定義的值

您甚至可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:‘toggle‘
  });
});

jQuery animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。

這意味著如果您在彼此之後編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然後逐一運行這些 animate 調用。

隱藏，如果您希望在彼此之後執行不同的動畫，那麽我們要利用隊列功能：

$("button").click(function(){
  var div=$("div");
  div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
  div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
  div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
  div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
});

下面的例子把 <div> 元素移動到右邊，然後增加文本的字號：

$("button").click(function(){
  var div=$("div");
  div.animate({left:‘100px‘},"slow");
  div.animate({fontSize:‘3em‘},"slow");
});

2018年7月17日筆記

大小 focus head -c read fad slow ... css jQuery jQuery 是一個 JavaScript 庫。 jQuery 極大地簡化了 JavaScript 編程。 jQuery 很容易學習。 <html> <hea

2018年7月17日筆記

jQuery 庫 - 特性

向您的頁面添加 jQuery 庫

庫的替代

使用 Google 的 CDN

使用 Microsoft 的 CDN

把 jQuery 添加到您的網頁

下載 jQuery

替代方案

Microsoft CDN:

示例

文檔就緒函數

jQuery 選擇器

jQuery 元素選擇器

jQuery 屬性選擇器

jQuery CSS 選擇器

jQuery 事件函數

單獨文件中的函數

jQuery 名稱沖突

結論

jQuery hide() 和 show()

jQuery toggle()

jQuery Fading 方法

jQuery fadeIn() 方法

jQuery fadeOut() 方法

jQuery fadeToggle() 方法

jQuery fadeTo() 方法

jQuery 滑動方法

jQuery slideDown() 方法

jQuery slideUp() 方法

jQuery slideToggle() 方法

jQuery 動畫 - animate() 方法

jQuery animate() - 操作多個屬性

jQuery animate() - 使用相對值

jQuery animate() - 使用預定義的值

jQuery animate() - 使用隊列功能

相關推薦