jQuery學習筆記-1-基礎知識
基礎知識
本章主要記錄jQuery基本操作和資訊，這些內容來自學習的網上的一些資料。
一.簡介：
1.jQuery 是一個 JavaScript 庫。
2.jQuery 極大地簡化了 JavaScript 程式設計。
3.jQuery 很容易學習。
4.jQuery 庫可以通過一行簡單的標記被新增到網頁中。
二.學習前提：
對以下基礎知識有了解：
HTML
CSS
JavaScript
三.特點：
jQuery是一個JavaScript函式庫。
jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。
jQuery庫包含以下功能：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities
提示： 除此之外，Jquery還提供了大量的外掛。
四.jQuery 安裝：
可以通過多種方法在網頁中新增 jQuery。 您可以使用以下方法：
從 jquery.com 下載 jQuery 庫
從 CDN 中載入 jQuery, 如從 Google 中載入 jQuery
jQuery 庫是一個 JavaScript 檔案，您可以使用 HTML 的<script> 標籤引用它：
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
如果您不希望下載並存放 jQuery，那麼也可以通過 CDN（內容分發網路） 引用它。
Staticfile CDN:
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
百度 CDN:
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
又拍雲 CDN:
<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>
新浪 CDN:
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
五.語法
通過 jQuery，您可以選取（查詢，query） HTML 元素，並對它們執行"操作"（actions）。
基礎語法： $(selector).action()
-
美元符號定義 jQuery
-
選擇符（selector）“查詢"和"查詢” HTML 元素
-
jQuery 的 action() 執行對元素的操作
例項:
-
$(this).hide() - 隱藏當前元素
-
$(“p”).hide() - 隱藏所有
元素
-
$(“p.test”).hide() - 隱藏所有 class=“test” 的
元素
-
$("#test").hide() - 隱藏所有 id=“test” 的元素
文件就緒事件
$(document).ready(function(){
// 開始寫 jQuery 程式碼...
});
jQuery 函式位於一個 document ready 函式中，這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼，即在 DOM 載入完成後才可以對 DOM 進行操作。
如果在文件沒有完全載入之前就執行函式，操作可能失敗。
jQuery 入口函式:
$(document).ready(function(){
// 執行程式碼
});
或者
$(function(){
// 執行程式碼
});
JavaScript 入口函式:
window.onload = function () {
// 執行程式碼
}
六.jQuery 選擇器
jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基於元素的 id、類、型別、屬性、屬性值等"查詢"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭：$()。
元素選擇器
**
jQuery 元素選擇器基於元素名選取元素。
**
在頁面中選取所有
元素:
$("p")
例：當用戶點選按鈕後，所有
元素都隱藏
<script>
$(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<p>這是一個段落</p>
<p>段落都會被隱藏</p>
#id 選擇器
jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如下：
$("#test")
例子：
當用戶點選按鈕後，有 id=“test” 屬性的元素將被隱藏：
<script>
$(function(){
$("button").click(function(){
$("#test").hdie();
});
});
</script>
<p id="test">這個段落會被隱藏</p>
<button>點選按鈕會隱藏上面的段落</button>
.class 選擇器
jQuery 類選擇器可以通過指定的 class 查詢元素。
語法如下：
$(".test")
例子：
使用者點選按鈕後所有帶有 class=“test” 屬性的元素都隱藏：
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
<h3 class="test">這是一個標題</h3>
<p class="test">這一個段落</p>
<button>點選會隱藏標題和段落</button>
更多例項
| 語法 | 描述 |
|---|---|
| $("*") | 選取所有元素 |
| $(this) | 選取當前HTML元素 |
| $(“p.intro”) | 選擇class為intro的<p>元素 |
| $(“p:first”) | 選擇第一個<p>元素 |
| $(“ul li:first”) | 選擇第一個<ul>元素和第一個<li>元素 |
| $("[href]") | 選取帶有href屬性的元素 |
| $(":button") | 選取所有 type=“button” 的 <input> 元素 和 <button> 元素 |
| $(“tr:even”) | 選取偶數位置的<tr> 元素 |
| $(“tr:odd”) | 選取奇數位置的 <tr> 元素 |
獨立檔案中使用 jQuery 函式
如果您的網站包含許多頁面，並且您希望您的 jQuery 函式易於維護，那麼請把您的 jQuery 函式放到獨立的 .js 檔案中。
當我們在教程中演示 jQuery 時，會將函式直接新增到 部分中。不過，把它們放到一個單獨的檔案中會更好，就像這樣（通過 src 屬性來引用檔案）：
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
七.jQuery 事件
jQuery 是為事件處理特別設計的。
什麼是事件？
頁面對不同訪問者的響應叫做事件。
事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。
例項：
- 在元素上移動滑鼠。
- 選取單選按鈕
- 點選元素
jQuery 事件方法語法
在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
頁面中指定一個點選事件：
$("p").click();
下一步是定義什麼時間觸發事件。您可以通過一個事件函式實現：
$("p").click(function(){
// 動作觸發後執行的程式碼!!
});
常用的 jQuery 事件方法
click()
click() 方法是當按鈕點選事件被觸發時會呼叫一個函式。
該函式在使用者點選 HTML 元素時執行。
在下面的例項中，當點選事件在某個
元素上觸發時，隱藏當前的
元素：
<script>
$(document).ready(function(){
$("p").click(function(){ //點選1、2、3，對應數字會消失（元素選擇器 $("元素名")）
//$("#demo").click(function(){ //點選2,2會消失 （id選擇器 $("#id")）
//$(".test").click(function(){ //點選3,3會消失 （類選擇器 $(".class")）
$(this).hide();
});
});
</script>
<p>1</p>
<p id="demo">2</p>
<p class="test">3</p>
dblclick()
當雙擊元素時，會發生 dblclick 事件。
dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時執行的函式：
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
當滑鼠指標穿過元素時，會發生 mouseenter 事件。
mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時執行的函式：
$("#p1").mouseenter(function(){
alert('您的滑鼠移到了 id="p1" 的元素上!');
});
mouseleave()
當滑鼠指標離開元素時，會發生 mouseleave 事件。
mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時執行的函式：
$("#p1").mouseleave(function(){
alert("再見，您的滑鼠離開了該段落。");
});
mousedown()
當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件。
mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時執行的函式：
$("#p1").mousedown(function(){
alert("滑鼠在該段落上按下！");
});
mouseup()
當在元素上鬆開滑鼠按鈕時，會發生 mouseup 事件。
mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時執行的函式：
$("#p1").mouseup(function(){
alert("滑鼠在段落上鬆開。");
});
hover()
hover()方法用於模擬游標懸停事件。
當滑鼠移動到元素上時，會觸發指定的第一個函式(mouseenter);當滑鼠移出這個元素時，會觸發指定的第二個函式(mouseleave)。
$("#p1").hover(
function(){
alert("你進入了 p1!");
},
function(){
alert("拜拜! 現在你離開了 p1!");
}
);
focus()
當元素獲得焦點時，發生 focus 事件。
當通過滑鼠點選選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。
focus() 方法觸發 focus 事件，或規定當發生 focus 事件時執行的函式：
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
當元素失去焦點時，發生 blur 事件。
blur() 方法觸發 blur 事件，或規定當發生 blur 事件時執行的函式：
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});