jQuery學習整理--（1）初識jQuery
jQuery 是一個 JavaScript 庫。jQuery 極大地簡化了 JavaScript 程式設計。jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。jQuery庫包含以下功能：，HTML 元素選取，HTML 元素操作，CSS 操作，HTML 事件函式，JavaScript 特效和動畫，HTML DOM 遍歷和修改，AJAX，Utilities……。
初識jQuery
1.jQuery的安裝或引用
可以通過多種方法在網頁中新增 jQuery。 您可以使用以下方法：
- 從 jquery.com 下載 jQuery 庫使用
- 從 CDN 中載入 jQuery, 如從 Google 中載入 jQuery
下載使用：
用起來主要是比較麻煩，而且要保證你的伺服器足夠的效能，否則可能效果不如引用來的好。可以從 jquery.com上下載，Production version - 用於實際的網站中，已被精簡和壓縮。Development version - 用於測試和開發（未壓縮，是可讀的程式碼）。使用方法如下：
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
CDN引用使用：
例如從百度CDN上引用使用
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
2.jQuery語法
jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。
基礎語法： $(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢"和"查詢” HTML 元素
- jQuery 的 action() 執行對元素的操作
為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼，即在 DOM 載入完成後才可以對 DOM 進行操作。
如果在文件沒有完全載入之前就執行函式，操作可能失敗，所以我們將所有 jQuery 函式位於一個 document ready 函式中：
//標準寫法如下：
$(document).ready(function(){
// 開始寫 jQuery 程式碼...
});
//簡單寫法如下：
$(function(){
// 開始寫 jQuery 程式碼...
});
3.jQuery 選擇器
jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基於元素的 id、類、型別、屬性、屬性值等"查詢"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭：$()。
元素選擇器
jQuery 元素選擇器基於元素名選取元素。
//所有 <p> 元素都隱藏
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id 選擇器
jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
$("#test")
.class 選擇器
jQuery 類選擇器可以通過指定的 class 查詢元素。
$(".test")
更多例項
| 語法 | 描述 |
|---|---|
| $("*") | 選取所有元素 |
| $(“p.intro”) | 選取 class 為 intro 的 元素 |
| $("[href]") | 選取帶有 href 屬性的元素 |
| $(“a[target=’_blank’]”) | 選取所有 target 屬性值等於 “_blank” 的 元素 |
4.jQuery 事件
jQuery 是為事件處理特別設計的。在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
常用的 jQuery 事件方法
click() , dblclick()
$("p").click(function(){
// 動作觸發後執行的程式碼!!
});
mouseenter()
當滑鼠指標穿過元素時，會發生 mouseenter 事件。
$("#p1").mouseenter(function(){
alert('您的滑鼠移到了 id="p1" 的元素上!');
});
hover()
hover()方法用於模擬游標懸停事件。
$("#p1").hover(
function(){
alert("你進入了 p1!");
},
function(){
alert("拜拜! 現在你離開了 p1!");
}
);