jQuery 簡介
jQuery 極大地簡化了 JavaScript 編程轻猖。
jQuery 庫可以通過一行簡單的標(biāo)記被添加到網(wǎng)頁中帆吻。
jQuery 是一個 JavaScript 函數(shù)庫。
jQuery 庫包含以下特性：
?HTML 元素選取
?HTML 元素操作
?CSS 操作
?HTML 事件函數(shù)
?JavaScript 特效和動畫
?HTML DOM 遍歷和修改
?AJAX
?Utilities
[if !supportLists]??[endif]jQuery 語法
通過jQuery蜕依，您可以選任Τ（查詢琉雳，query） HTML 元素样眠，并對它們執(zhí)行“操作”（actions）。
1.jQuery語法實例
$(this).hide()
演示jQuery hide() 函數(shù)翠肘，隱藏當(dāng)前的 HTML 元素檐束。
$("#test").hide()
演示jQuery hide() 函數(shù)，隱藏 id="test" 的元素束倍。
$("p").hide()
演示jQuery hide() 函數(shù)被丧，隱藏所有
元素盟戏。
$(".test").hide()
演示jQuery hide() 函數(shù)，隱藏所有 class="test" 的元素甥桂。
2.jQuery 語法
jQuery 語法是為 HTML 元素的選取編制的柿究，可以對元素執(zhí)行某些操作。
基礎(chǔ)語法是：$(selector).action()
?美元符號定義 jQuery
?選擇符（selector）“查詢”和“查找” HTML 元素
?jQuery 的 action() 執(zhí)行對元素的操作
示例
$(this).hide() - 隱藏當(dāng)前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
我們的實例中的所有jQuery 函數(shù)位于一個 document ready 函數(shù)中：
$(document).ready(function(){
--- jQuery functions go here ----
});
這是為了防止文檔在完全加載（就緒）之前運行jQuery 代碼黄选。
[if !supportLists]??[endif]jQuery 選擇器
選擇器允許您對元素組或單個元素進(jìn)行操作蝇摸。
1.jQuery 選擇器
在前面的章節(jié)中，我們展示了一些有關(guān)如何選取HTML 元素的實例办陷。
jQuery 元素選擇器和屬性選擇器允許您通過標(biāo)簽名貌夕、屬性名或內(nèi)容對 HTML 元素進(jìn)行選擇。
選擇器允許您對HTML 元素組或單個元素進(jìn)行操作民镜。
在HTML DOM 術(shù)語中：
選擇器允許您對DOM 元素組或單個 DOM 節(jié)點進(jìn)行操作啡专。
2.jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素制圈。
$("p.intro") 選取所有 class="intro" 的 <p> 元素们童。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
3.jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來選擇帶有給定屬性的元素离唐。
$("[href]") 選取所有帶有 href 屬性的元素病附。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素亥鬓。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素完沪。
4.jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
下面的例子把所有p 元素的背景顏色更改為紅色：
$("p").css("background-color","red");
jQuery 事件
jQuery 是為事件處理特別設(shè)計的嵌戈。
1.jQuery 事件函數(shù)
jQuery 事件處理方法是 jQuery 中的核心函數(shù)覆积。
事件處理程序指的是當(dāng)HTML 中發(fā)生某些事件時所調(diào)用的方法。術(shù)語由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會被使用熟呛。
通常會把jQuery 代碼放到 部分的事件處理方法中：
??$("button").click(function(){
????$("p").hide();
??});
在上面的例子中宽档，當(dāng)按鈕的點擊事件被觸發(fā)時會調(diào)用一個函數(shù)：
$("button").click(function() {..some code... } )
該方法隱藏所有
元素：
$("p").hide();
2.單獨文件中的函數(shù)
如果您的網(wǎng)站包含許多頁面，并且您希望您的jQuery 函數(shù)易于維護庵朝，那么請把您的 jQuery 函數(shù)放到獨立的 .js 文件中吗冤。
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
3.jQuery名稱沖突
jQuery 使用 $ 符號作為jQuery 的簡介方式。
某些其他JavaScript 庫中的函數(shù)（比如 Prototype）同樣使用 $ 符號九府。
jQuery 使用名為 noConflict() 的方法來解決該問題椎瘟。
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如jq）來代替 $ 符號侄旬。
由于jQuery 是為處理 HTML 事件而特別設(shè)計的肺蔚，那么當(dāng)您遵循以下原則時，您的代碼會更恰當(dāng)且更易維護：
把所有jQuery 代碼置于事件處理函數(shù)中
把所有事件處理函數(shù)置于文檔就緒事件處理器中
把jQuery 代碼置于單獨的 .js 文件中
如果存在名稱沖突儡羔，則重命名jQuery 庫
$(document).ready(function)將函數(shù)綁定到文檔的就緒事件（當(dāng)文檔完成加載時）
$(selector).click(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點擊事件
$(selector).dblclick(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
$(selector).focus(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點事件
$(selector).mouseover(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件
[if !supportLists]??[endif]jQuery - 獲得內(nèi)容和屬性
jQuery 擁有可操作 HTML 元素和屬性的強大方法宣羊。
jQuery DOM 操作
jQuery 中非常重要的部分璧诵，就是操作 DOM 的能力。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標(biāo)準(zhǔn)：
三個簡單實用的用于DOM 操作的 jQuery 方法：
?text() - 設(shè)置或返回所選元素的文本內(nèi)容
?html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
?val() - 設(shè)置或返回表單字段的值
下面的例子演示如何通過jQuery text() 和 html() 方法來獲得內(nèi)容：
$("#btn1").click(function(){
??alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
??alert("HTML: " + $("#test").html());
});
下面的例子演示如何通過jQuery val() 方法獲得輸入字段的值：
$("#btn1").click(function(){
??alert("Value: " + $("#test").val());
});
獲取屬性- attr()
jQuery attr() 方法用于獲取屬性值仇冯。
下面的例子演示如何獲得鏈接中href 屬性的值：
$("button").click(function(){
??alert($("#w3s").attr("href"));
});
[if !supportLists]??[endif]jQuery - 設(shè)置內(nèi)容和屬性
設(shè)置內(nèi)容- text()之宿、html() 以及 val()
我們將使用前一章中的三個相同的方法來設(shè)置內(nèi)容：
?text() - 設(shè)置或返回所選元素的文本內(nèi)容
?html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
?val() - 設(shè)置或返回表單字段的值
下面的例子演示如何通過text()、html() 以及 val() 方法來設(shè)置內(nèi)容：
$("#btn1").click(function(){
??$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
??$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
??$("#test3").val("Dolly Duck");
});
text()苛坚、html() 以及 val() 的回調(diào)函數(shù)
上面的三個jQuery 方法：text()澈缺、html() 以及 val()，同樣擁有回調(diào)函數(shù)炕婶〗闵模回調(diào)函數(shù)由兩個參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值柠掂。然后以函數(shù)新值返回您希望使用的字符串项滑。
設(shè)置屬性- attr()
jQuery attr() 方法也用于設(shè)置/改變屬性值。
attr() 方法也允許您同時設(shè)置多個屬性涯贞。
下面的例子演示如何同時設(shè)置href 和 title 屬性：
$("button").click(function(){
??$("#w3s").attr({
????"href" : "http://www.w3school.com.cn/jquery",
????"title" : "W3School jQuery Tutorial"
??});
});
attr() 的回調(diào)函數(shù)
jQuery 方法 attr()枪狂，也提供回調(diào)函數(shù)∷斡妫回調(diào)函數(shù)由兩個參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)州疾，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串皇拣。
[if !supportLists]??[endif]jQuery - 添加元素
通過jQuery严蓖，可以很容易地添加新元素/內(nèi)容。
我們將學(xué)習(xí)用于添加新內(nèi)容的四個jQuery 方法：
?append() - 在被選元素的結(jié)尾插入內(nèi)容
?prepend() - 在被選元素的開頭插入內(nèi)容
?after() - 在被選元素之后插入內(nèi)容
?before() - 在被選元素之前插入內(nèi)容
jQuery append() 方法
jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容氧急。
$("p").append("Some appended text.");
jQuery prepend() 方法
jQuery prepend() 方法在被選元素的開頭插入內(nèi)容颗胡。
$("p").prepend("Some prepended text.");
通過append() 和 prepend() 方法添加若干新元素
append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素》园樱可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣）毒姨，或者通過 JavaScript 代碼和 DOM 元素。
在下面的例子中钉寝，我們創(chuàng)建若干個新元素弧呐。這些元素可以通過text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建嵌纲。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：
function appendText()
{
var txt1="<p>Text.</p>"; ??????????????// 以 HTML 創(chuàng)建新元素
var txt2=$("<p></p>").text("Text."); ??// 以 jQuery 創(chuàng)建新元素
var txt3=document.createElement("p"); ?// 以 DOM 創(chuàng)建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); ????????// 追加新元素
}
jQuery after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內(nèi)容俘枫。
jQuery before() 方法在被選元素之前插入內(nèi)容。
$("img").after("Some text after");
$("img").before("Some text before");
通過after() 和 before() 方法添加若干新元素
after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素疹瘦”懒ǎ可以通過 text/HTML巡球、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素言沐。
在下面的例子中邓嘹，我們創(chuàng)建若干新元素。這些元素可以通過text/HTML险胰、jQuery 或者 JavaScript/DOM 來創(chuàng)建汹押。然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：
function afterText()
var txt1="<b>I </b>"; ???????????????????// 以 HTML 創(chuàng)建新元素
var txt2=$("<i></i>").text("love "); ????// 通過 jQuery 創(chuàng)建新元素
var txt3=document.createElement("big"); ?// 通過 DOM 創(chuàng)建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); ?????????// 在 img 之后插入新元素
[if !supportLists]??[endif]jQuery - 刪除元素
通過jQuery，可以很容易地刪除已有的 HTML 元素隙畜。
如需刪除元素和內(nèi)容档押，一般可使用以下兩個jQuery 方法：
?remove() - 刪除被選元素（及其子元素）
?empty() - 從被選元素中刪除子元素
$("#div1").remove();
$("#div1").empty();
過濾被刪除的元素
jQuery remove() 方法也可接受一個參數(shù)纲辽，允許您對被刪元素進(jìn)行過濾。
該參數(shù)可以是任何jQuery 選擇器的語法妙痹。
下面的例子刪除class="italic" 的所有
元素：
$("p").remove(".italic");
