JQuery是什麼？
JQuery 是一套JavaScript庫， 使用它，可以很方便的進行 JavaScript的編程。比如： 獲取頁面元素， 修改頁面元素的CSS樣式等等都可以以很簡單的語法完成。節省代碼行數和減少開發的時間。
物理上來看就是一份.js的文件。
如何獲取和使用？
JQuery 的官方網址是： http://jquery.com/ 。 從這裏可以獲取JQuery的最新版本.(目前最新版是 V1.9.1)。
使用的話，就是導入這份js文件。導入方式是在頁面的head部分通過<script>標籤導入
<head> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> </head>
導入以上的js 庫之後，就可以使用JQuery的語法了。
因爲JQuery 其實就是一些js 的函數來操作HTML的元素， 所以JQuery就需要在頁面完全加載之後運行。(l類似於HTML body的onload 這樣的處理方式 )
JQuery的文檔就緒函數是：
$(document).ready(function(){
--- jQuery functions go here ---- http://keleyi.com
});
JQuery選擇器
JavaScript 語言，我們要想獲取頁面元素基本上都會使用：document.getElmentById("");
document.getElmentsByName("");
document.getElmentsByTagName("");
在JQuery 中獲取頁面元素就比較簡單了。主要有以下方式。
1. 元素選擇器
$("span") 選取 <span> 元素
$("p.intro") 選取所有 class="intro" 的 <p> 元素
$("p#demo") 選取 id="demo" 的第一個 <p> 元素。
2.屬性選擇器
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
3. CSS選擇器
$("p").css("background-color","red");
把所有 p 元素的背景顏色更改爲紅色：| 語法 | 描述 |
|---|---|
| $(this) | 當前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的第一個元素 |
| $("ul li:first") | 每個 <ul> 的第一個 <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結尾的 href 屬性的屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
| $("#intro #subintro") | id="intro" 的第一個元素 下的 id="subintro"的第一個元素 |
JQuery 事件函數
事件函數就是當 HTML的元素髮生某些事件時觸發執行函數。比如：
| Event 函數 | 綁定函數至 |
|---|---|
| $(document).ready(function) |
文檔的就緒事件 （當 HTML 文檔就緒可用） |
| $(selector).click(function) | 被選元素的點擊事件 |
| $(selector).dblclick(function) | 被選元素的雙擊事件 |
| $(selector).focus(function) | 被選元素的獲得焦點事件 |
| $(selector).mouseover(function) | 被選元素的鼠標懸停事件 |
JQuery 效果
| 函數 | 描述 |
|---|---|
| $(selector).hide() | 隱藏被選元素 |
| $(selector).show() | 顯示被選元素 |
| $(selector).toggle() | 切換（在隱藏與顯示之間）被選元素 |
| $(selector).slideDown() | 向下滑動（顯示）被選元素 |
| $(selector).slideUp() | 向上滑動（隱藏）被選元素 |
| $(selector).slideToggle() | 對被選元素切換向上滑動和向下滑動 |
| $(selector).fadeIn() | 淡入被選元素 |
| $(selector).fadeOut() | 淡出被選元素 |
| $(selector).fadeTo() | 把被選元素淡出爲給定的不透明度 |
| $(selector).animate() | 對被選元素執行自定義動畫 |
特別說明一下callback函數。callback 參數是一個在 hide 操作完成後被執
$(selector).hide(speed,callback)
| CSS 屬性 | 描述 |
|---|---|
| $(selector).css(name,value) | 爲匹配元素設置樣式屬性的值 |
| $(selector).css({properties}) | 爲匹配元素設置多個樣式屬性 |
| $(selector).css(name) | 獲得第一個匹配元素的樣式屬性值 |
| $(selector).height(value) | 設置匹配元素的高度 |
| $(selector).width(value) | 設置匹配元素的寬度 |
jQuery AJAX 請求
| 請求 | 描述 |
|---|---|
| $(selector).load(url,data,callback) | 把遠程數據加載到被選的元素中 |
| $.ajax(options) | 把遠程數據加載到 XMLHttpRequest 對象中 |
| $.get(url,data,callback,type) | 使用 HTTP GET 來加載遠程數據 |
| $.post(url,data,callback,type) | 使用 HTTP POST 來加載遠程數據 |
| $.getJSON(url,data,callback) | 使用 HTTP GET 來加載遠程 JSON 數據 |
| $.getScript(url,callback) | 加載並執行遠程的 JavaScript 文件 |
完整的API參照：
http://api.jquery.com/