jQuery 語(yǔ)法
jQuery 語(yǔ)法是為 HTML 元素的選取編制的弊决，可以對(duì)元素執(zhí)行某些操作搞挣。
基礎(chǔ)語(yǔ)法是：$(selector).action()
- 美元符號(hào)定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執(zhí)行對(duì)元素的操作
示例
$(this).hide() - 隱藏當(dāng)前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
文檔就緒函數(shù)
$(document).ready(function(){
--- jQuery functions go here ----
});
這是為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼。
如果在文檔沒(méi)有完全加載之前就運(yùn)行函數(shù)悬嗓，操作可能失敗蒜绽。下面是兩個(gè)具體的例子：
- 試圖隱藏一個(gè)不存在的元素
- 獲得未完全加載的圖像的大小
jQuery 選擇器
jQuery 元素選擇器和屬性選擇器允許通過(guò)標(biāo)簽名、屬性名或內(nèi)容對(duì) HTML 元素進(jìn)行選擇滋饲。
選擇器允許對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作厉碟。
在 HTML DOM 術(shù)語(yǔ)中：
選擇器允許您對(duì) DOM 元素組或單個(gè) DOM 節(jié)點(diǎn)進(jìn)行操作。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來(lái)選取 HTML 元素屠缭。
$("p") 選取 <p> 元素箍鼓。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p>元素呵曹。
jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來(lái)選擇帶有給定屬性的元素款咖。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素奄喂。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素铐殃。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性跨新。
jQuery 事件
jQuery 是為事件處理特別設(shè)計(jì)的富腊。
jQuery 事件函數(shù)
jQuery 事件處理方法是 jQuery 中的核心函數(shù)。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法域帐。術(shù)語(yǔ)由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會(huì)被使用赘被。
通常會(huì)把 jQuery 代碼放到 <head>部分的事件處理方法中
注意：
由于 jQuery 是為處理 HTML 事件而特別設(shè)計(jì)的，那么當(dāng)遵循以下原則時(shí)肖揣，的代碼會(huì)更恰當(dāng)且更易維護(hù)：
- 把所有 jQuery 代碼置于事件處理函數(shù)中
- 把所有事件處理函數(shù)置于文檔就緒事件處理器中
- 把 jQuery 代碼置于單獨(dú)的 .js 文件中
- 如果存在名稱沖突民假，則重命名 jQuery 庫(kù)
jQuery 文檔操作方法
| 方法 | 描述 |
|---|---|
| addClass()] | 向匹配的元素添加指定的類名。 |
| after() | 在匹配的元素之后插入內(nèi)容龙优。 |
| append() | 向匹配元素集合中的每個(gè)元素結(jié)尾插入由參數(shù)指定的內(nèi)容阳欲。 |
| appendTo() | 向目標(biāo)結(jié)尾插入匹配元素集合中的每個(gè)元素。 |
| attr() | 設(shè)置或返回匹配元素的屬性和值陋率。 |
| before() | 在每個(gè)匹配的元素之前插入內(nèi)容。 |
| clone() | 創(chuàng)建匹配元素集合的副本秽晚。 |
| detach() | 從 DOM 中移除匹配元素集合瓦糟。 |
| empty() | 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類赴蝇。 |
| html() | 設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容菩浙。 |
| insertAfter() | 把匹配的元素插入到另一個(gè)指定的元素集合的后面。 |
| insertBefore() | 把匹配的元素插入到另一個(gè)指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每個(gè)元素開(kāi)頭插入由參數(shù)指定的內(nèi)容劲蜻。 |
| prependTo() | 向目標(biāo)開(kāi)頭插入匹配元素集合中的每個(gè)元素陆淀。 |
| remove() | 移除所有匹配的元素。 |
| removeAttr() | 從所有匹配的元素中移除指定的屬性先嬉。 |
| removeClass() | 從所有匹配的元素中刪除全部或者指定的類轧苫。 |
| replaceAll() | 用匹配的元素替換所有匹配到的元素。 |
| replaceWith() | 用新內(nèi)容替換匹配的元素疫蔓。 |
| text() | 設(shè)置或返回匹配元素的內(nèi)容含懊。 |
| toggleClass() | 從匹配的元素中添加或刪除一個(gè)類。 |
| unwrap() | 移除并替換指定元素的父元素衅胀。 |
| val() | 設(shè)置或返回匹配元素的值岔乔。 |
| wrap() | 把匹配的元素用指定的內(nèi)容或元素包裹起來(lái)。 |
| wrapAll() | 把所有匹配的元素用指定的內(nèi)容或元素包裹起來(lái)滚躯。 |
| wrapinner() | 將每一個(gè)匹配的元素的子內(nèi)容用指定的內(nèi)容或元素包裹起來(lái)雏门。 |
Ajax
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡(jiǎn)短地說(shuō)掸掏，在不重載整個(gè)網(wǎng)頁(yè)的情況下茁影，AJAX 通過(guò)后臺(tái)加載數(shù)據(jù)，并在網(wǎng)頁(yè)上進(jìn)行顯示阅束。
jQuery load() 方法
jQuery load() 方法是簡(jiǎn)單但強(qiáng)大的 AJAX 方法呼胚。
load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中息裸。
語(yǔ)法：
$(selector).load(URL,data,callback);
必需的 URL 參數(shù)規(guī)定希望加載的 URL蝇更。
可選的 data 參數(shù)規(guī)定與請(qǐng)求一同發(fā)送的查詢字符串鍵/值對(duì)集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱呼盆。
這是示例文件（"demo_test.txt"）的內(nèi)容：
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
})
</script>
</head>
<body>
<h3 id="test">請(qǐng)點(diǎn)擊下面的按鈕年扩，通過(guò) jQuery AJAX 改變這段文本。</h3>
<button id="btn1" type="button">獲得外部的內(nèi)容</button>
</body>
</html>
最終例子會(huì)把文件 "demo_test.txt" 的內(nèi)容加載到指定的 <div> 元素中：
