(转)jQuery 基础
生活随笔
收集整理的這篇文章主要介紹了
(转)jQuery 基础
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
[初探]
jQuery 怎麼用來(lái)「快速選取元素」並且「做一些事情」呢？請(qǐng)看看程式碼： $("div").addClass("special"); 錢記號(hào) $ 是 jQuery 的物件，使用 $("div") 就是用 jQuery 來(lái)選取元素，這個(gè)範(fàn)例可以選取文件內(nèi)所有的 <div> 元素。後面接著的 .addClass("special") 就是用來(lái)做一些事情，這個(gè)範(fàn)例是將先前所選取到的所有元素都加上一個(gè)名為 "special" 的 class。也就是透過(guò) $("div").addClass("special") 的語(yǔ)法，可以讓你一次幫文件上有的 <div> 元素都加入 special 的 class。
請(qǐng)注意喔，剛剛的例子可以針對(duì)已選取的多個(gè)元素做批次的操作，也就是說(shuō)如果文件上有三個(gè) <div>，那就會(huì)一次找出三個(gè) <div> 並且全部套用後續(xù)的動(dòng)作。這和你原本自己使用 JavaScript 來(lái)寫程式有很大的差異，原本自己寫可能會(huì)需要用到迴圈之類的語(yǔ)法，而 jQuery 的函數(shù)大多具有批次處理的功能，光是這點(diǎn)就可以讓你的程式更簡(jiǎn)潔了。
關(guān)於錢記號(hào) $ 將會(huì)是你學(xué)習(xí)及使用 jQuery 的過(guò)程中最重要的物件（或者你要把 $ 當(dāng)成一個(gè)函數(shù)也可以，事實(shí)上也是這樣)，使用方式就像剛剛你看到的，用來(lái)找元素用的，把參數(shù)帶入即可。或許你不習(xí)慣錢記號(hào)也可以當(dāng)成函數(shù)名稱，那麼你也可以用 jQuery 這個(gè)名字，錢記號(hào)其實(shí)是被當(dāng)成 jQuery 的縮寫，讓你的函數(shù)看起來(lái)更簡(jiǎn)潔一些，如果你要自己設(shè)定另外一個(gè)縮寫，例如 $j，也是可以的，這部份後續(xù)再解釋，先看看已下的範(fàn)例，結(jié)果將會(huì)和上面的範(fàn)例是一模一樣的： jQuery("div").addClass("special");
[選取元素]
前面的例子使用 $("div") 來(lái)選取元素，帶入的參數(shù) div 是表示你要找的元素，這是 CSS 選擇器(CSS Selector) 的語(yǔ)法，就如同 CSS 在做排版和外觀所使用的選擇器語(yǔ)法一樣。jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及仍未正式發(fā)佈的 CSS3，此外透過(guò) plugin 還可支援常用的 XPath 語(yǔ)法，善用這些 CSS、XPath 語(yǔ)法就可以很容易地找到你要處理的網(wǎng)頁(yè)元素，底下來(lái)看看更多的範(fàn)例。
這是一段原始的 HTML：<div?id="body">?? ??<h2>Some?Header</h2>?? ??<div?class="contents">?? ????<p>...</p>?? ????<p>...</p>?? ??</div>?? </div>?? <div id="body"><h2>Some Header</h2><div class="contents"><p>...</p><p>...</p></div>
</div> 以下用一連串的範(fàn)例，以藍(lán)色字體展示一些基本的語(yǔ)法並且以深色字顯示文件中會(huì)被選取的元素。
$("div")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取所有 <div>
$("#body")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取 id 為 body 的元素
$("div#body")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取 id 為 body 的 <div>
$("div.contents p")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取 class 為 contents 的 <div> 所包住的所有下層的 <p>
$("div > div")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取被 <div> 包住的下一層 <div>
$("div:has(div)")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：和前一個(gè)範(fàn)例相反，這邊是選取至少有包住一個(gè) <div> 的 <div>
[做一些事情]
前一段的教學(xué)中介紹了如何使用 jQuery 來(lái)選取元素，其中大部份的語(yǔ)法都是可以讓你快速地一次選取多個(gè)元素，接下來(lái)當(dāng)然就是要來(lái)對(duì)這些選取到的元素做些改變囉。透過(guò) jQuery 內(nèi)建的函數(shù)，你可以：
[範(fàn)例1] 選取所有有 target 屬性的 <a>，並且在其節(jié)點(diǎn)下加入一段文字。 $("a[target]").append(" (Opens in New Window)"); 這是一段原始的 HTML :<a?href="http://jsgears.com">jsGears</a>?? <a?href="http://google.com"?target="_blank">Google</a>?? <a?href="http://amazon.com"?target="_blank">Amazon</a>?? <a href="http://jsgears.com">jsGears</a>
<a href="http://google.com" target="_blank">Google</a>
<a href="http://amazon.com" target="_blank">Amazon</a> 選取有 target 屬性並加入文字後的結(jié)果： <a?href="http://jsgears.com">jsGears</a>?? <a?href="http://google.com"?target="_blank">Google?(Opens?in?New?Window)</a>?? <a?href="http://amazon.com"?target="_blank">Amazon?(Opens?in?New?Window)</a>?? <a href="http://jsgears.com">jsGears</a>
<a href="http://google.com" target="_blank">Google (Opens in New Window)</a>
<a href="http://amazon.com" target="_blank">Amazon (Opens in New Window)</a> [範(fàn)例2] 選取 id 為 body 的元素，並且修改兩個(gè) css 屬性。 $("#body").css({border: "1px solid green",height: "40px"
}); 這是一段原始的 HTML : <div?id="body">?? ??... ?? </div>?? <div id="body">...
</div> 選取 id 為 body 的元素並修改 css 後的結(jié)果(示意)： <div?id="body"?style="border:?1px?solid?green;?height:?40px">?? ??... ?? </div>?? <div id="body" style="border: 1px solid green; height: 40px">...
</div> [範(fàn)例3] 在網(wǎng)頁(yè)上的表單送出時(shí)加入一個(gè)判斷，如果 username 這個(gè)欄位是空值的話，就顯示 help 這個(gè)區(qū)塊內(nèi)的文字。 $("form").submit(function() {if ($("input#username").val() == "")$("span.help").show();
}); 可作用在類似以下的 HTML，一開(kāi)始 span.help 是隱藏的，如果沒(méi)有輸入 username，才會(huì)顯示： <style?type="text/css">?? ??.help?{display:?none} ?? </style>?? <form>?? ??<label?for="username">請(qǐng)輸入大名</label>?? ??<input?type="text"?id="username"?name="username"?/>?? ??<span?class="help">這個(gè)欄位必填喔</span>?? </form>?? <style type="text/css">.help {display: none}
</style>
<form><label for="username">請(qǐng)輸入大名</label><input type="text" id="username" name="username" /><span class="help">這個(gè)欄位必填喔</span>
</form> [範(fàn)例4] 當(dāng) user 點(diǎn)選 id 為 open 的連結(jié)時(shí)，顯示 id 為 menu 的區(qū)塊，並回傳 false 避免瀏覽器真的換頁(yè)。 $("a#open").click(function() {$("#menu").show();return false;
}); 可作用在類似以下的 HTML： <style?type="text/css">?? ??#menu?{display:?none} ?? </style>?? <a?id="open"?href="#">控制面板</a>?? <ul?id="menu">?? ??<li><a?href="#1">控制面板首頁(yè)</a></li>?? ??<li><a?href="#2">編輯個(gè)人資料</a></li>?? ??<li><a?href="#3">個(gè)人空間管理</a></li>?? </ul>?? <style type="text/css">#menu {display: none}
</style>
<a id="open" href="#">控制面板</a>
<ul id="menu"><li><a href="#1">控制面板首頁(yè)</a></li><li><a href="#2">編輯個(gè)人資料</a></li><li><a href="#3">個(gè)人空間管理</a></li>
</ul> [範(fàn)例5] 將 id 為 menu 的區(qū)塊以下拉布幕的動(dòng)態(tài)效果快速顯示： $("#menu").slideDown("fast"); 可作用在類似以下的 HTML，原本隱藏的選單會(huì)以動(dòng)態(tài)下拉的方式顯示出來(lái)： <style?type="text/css">?? ??#menu?{display:?none} ?? </style>?? <ul?id="menu">?? ??<li><a?href="#1">控制面板首頁(yè)</a></li>?? ??<li><a?href="#2">編輯個(gè)人資料</a></li>?? ??<li><a?href="#3">個(gè)人空間管理</a></li>?? </ul>?? <style type="text/css">#menu {display: none}
</style>
<ul id="menu"><li><a href="#1">控制面板首頁(yè)</a></li><li><a href="#2">編輯個(gè)人資料</a></li><li><a href="#3">個(gè)人空間管理</a></li>
</ul> [範(fàn)例6] 將所有的 <div> 漸變?yōu)閷?300px、文字與邊界寬 20px $("div").animate({width: '300px',padding: '20px'}, 'slow'); 可作用在類似以下的 HTML： <div?style="width:?100px;?border:?solid?1px?red;">?? ??Hello?world! ?? </div>?? <div style="width: 100px; border: solid 1px red;">Hello world!
</div> PS. jQuery 核心程式的 animate 函數(shù)能改變的元素屬性並不多，但是可以透過(guò)其他 plugin 提供更多的動(dòng)態(tài)效果。
[範(fàn)例7] 動(dòng)態(tài)效果的 callback 的範(fàn)例，將所有的 <div> 以 0.5 秒的動(dòng)態(tài)效果隱藏後，再以 0.5 秒的動(dòng)態(tài)效果顯示。hide() 的第二個(gè)參數(shù)就是一個(gè) callback 函數(shù)，其中 $(this) 是原本程式所處理的各個(gè)元素。 $("div").hide(500, function(){// $(this) 是每一個(gè)各別的 <div>$(this).show(500); }); 可作用在類似以下的 HTML：<div?style="width:?100px;?border:?solid?1px?red;">?? ??Hello?world! ?? </div>?? <div?style="width:?100px;?border:?solid?1px?red;">?? ??jsGears.com! ?? </div>?? <div style="width: 100px; border: solid 1px red;">Hello world!
</div>
<div style="width: 100px; border: solid 1px red;">jsGears.com!
</div> [範(fàn)例8] 取得 sample.html 並將找出文件內(nèi)所有 <div> 下一層的 <h1> 填入原本文件 id 為 body 的元素內(nèi) $("#body").load("sample.html div > h1"); 這是一段原始的 HTML : <div?id="body"></div>?? <div id="body"></div> sample.html 的片段： <div>?? ??<h1>Hello?world!</h1>?? ??<h2>This?is?H2</h2>?? ??<h1>jsGears.com!</h1>?? </div>?? <div><h1>Hello world!</h1><h2>This is H2</h2><h1>jsGears.com!</h1>
</div> 執(zhí)行程式碼之後的結(jié)果： <div?id="body">?? ??<h1>Hello?world!</h1>?? ??<h1>jsGears.com!</h1>?? </div>?? <div id="body"><h1>Hello world!</h1><h1>jsGears.com!</h1>
</div> [範(fàn)例9] 透過(guò) getJSON() 取得 JSON 格式的資料，並透過(guò) callback 函數(shù)處理資料 $.getJSON("test.json", function(data){for (var idx in data)$("#menu").append("<li>" + data[idx] + "</li>");
}); 這是一段原始的 HTML： <ul?id="menu">?? ??<li>項(xiàng)目1</li>?? </ul>?? <ul id="menu"><li>項(xiàng)目1</li>
</ul> test.json 的內(nèi)容： ["Hello world!","jsGears.com!"
] 執(zhí)行程式碼之後的結(jié)果： <ul?id="menu">?? ??<li>項(xiàng)目1</li>?? ??<li>Hello?world!</li>?? ??<li>jsGears.com!</li>?? </ul>?? <ul id="menu"><li>項(xiàng)目1</li><li>Hello world!</li><li>jsGears.com!</li>
</ul>
[連續(xù)使用函數(shù)]
jQuery 很重要的一個(gè)特性是可以連續(xù)地使用函數(shù)(Chaining)，當(dāng)你選取了一個(gè)或一組的元素後，可以連續(xù)對(duì)這些元素進(jìn)行多個(gè)處理。以下範(fàn)例會(huì)將所有的 <div> 隱藏，修改文字顏色為藍(lán)色，再將 <div> 以下拉布幕的效果顯示出來(lái)： $("div").hide(); $("div").css("color", "blue"); $("div").slideDown(); 這樣的三行程式碼可以用以下一行的程式碼取代，結(jié)果會(huì)是完全相同的： $("div").hide().css("color", "blue").slideDown(); 是否感到很神奇呢？在 jQuery 的架構(gòu)設(shè)計(jì)上，大部分的函數(shù)都會(huì)在處理完該做的事情後，再將原本傳入的元素給回傳回去，因此函數(shù)都可以連續(xù)這樣一個(gè)接著一個(gè)的使用。還記得一開(kāi)始所說(shuō)的 jQuery 可以讓你的程式碼更精簡(jiǎn)嗎？看了上面的一些範(fàn)例後，現(xiàn)在應(yīng)該有點(diǎn)感覺(jué)了吧。
講到 jQuery 的函數(shù)連續(xù)使用，有兩個(gè)很重要的函數(shù)必須在此介紹一下。第一個(gè)是 end()，這個(gè)函數(shù)執(zhí)行後，會(huì)回傳「前一組找到的元素」。另一個(gè)是 find()，這個(gè)函數(shù)的用法如同使用 $() 找文件內(nèi)的元素一樣是帶入 CSS 選擇器，執(zhí)行後回傳找到的元素，不同的是 $() 是找整個(gè)文件，而 find() 是根據(jù)先前找到的元素再找其底下的元素，像是一個(gè)再過(guò)濾的功能。 $("ul.open")? ?? ?? ?? ?? ? // [ ul, ul, ul ].children("li")? ?? ?? ???// [ li, li, li ].addClass("open")? ?? ?? ?// [ li, li, li].end()? ?? ?? ?? ?? ?? ???// [ ul, ul, ul ].find("a")? ?? ?? ?? ?? ? // [ a, a, a ].click(function(){$(this).next().toggle();return false;})? ?? ?? ?? ?? ?? ?? ?? ?// [ a, a, a ].end();? ?? ?? ?? ?? ?? ? // [ ul, ul, ul ] 上面這一段程式碼連續(xù)使用多個(gè)函數(shù)，且透過(guò) end() 和 find() 來(lái)分別對(duì)不同的元素進(jìn)行操作，詳細(xì)的步驟解釋如下：
[document ready 事件]
有些時(shí)候，我們必須在網(wǎng)頁(yè)下載完成之後立即執(zhí)行一些程式，可能是想要把游標(biāo)放在預(yù)設(shè)的輸入框，或是馬上顯示一些歡迎訊息等等。過(guò)去你可能用過(guò) window.onload 來(lái)處理，或是直接在 <body> 標(biāo)籤上加入 onload 的事件處理函數(shù)，但是 jQuery 提供了另一種選擇，請(qǐng)參考下面的範(fàn)例： $(document).ready(function() {alert('您好，歡迎來(lái)到 jsGears.com ～'); }); 先透過(guò) $() 取得 document 物件，接著使用 ready() 帶入一個(gè)函數(shù)，就可以在網(wǎng)頁(yè)下載完成後立即執(zhí)行。jQuery 的 document ready 事件是模擬 W3C DOM 標(biāo)準(zhǔn)的 DOMContentLoaded 事件，DOMContentLoaded 和 window.onlad 的差異在於前者是在 DOM 文件下載完成後觸發(fā)，而後者是文件和所有文件內(nèi)的元件，包含圖檔等等全部下載完成後才會(huì)觸發(fā)，因此通常 window.onload 的發(fā)生時(shí)間要比 DOMContentLoaded 晚一點(diǎn)(如果你的網(wǎng)頁(yè)內(nèi)確實(shí)有用到一些圖檔)，有時(shí)候你所需要執(zhí)行的程式並不需要等所有圖檔都下載完成，因此，放到 DOMContentLoaded 事件內(nèi)處理是比較合適的。但是，IE 目前的版本 6 和 7 並不支援 DOMContentLoaded 事件，所以 jQuery 用了一些技巧來(lái)達(dá)到模擬 DOMContentLoaded 的事件，而成果就是上面看到的這個(gè)例子的用法。
DOMContentLoaded 和 window.onlad 的另一個(gè)差異在於 window.onload 並沒(méi)有辦法多次指定不同的函數(shù)來(lái)執(zhí)行，最後指定的那個(gè)函數(shù)會(huì)複寫掉先前的，例如以下範(fàn)例： window.onload = function() {alert('Hello world!'); }; window.onload = function() {alert('您好，歡迎來(lái)到 jsGears.com ～'); }; 上面的例子在同一個(gè)頁(yè)面上用了兩次 window.onload，結(jié)果將會(huì)是後面的函數(shù)會(huì)被執(zhí)行到，前面的函數(shù)將消失無(wú)影蹤，當(dāng)然，只要你稍具 JavaScript 處理 Event 的技巧，真要連續(xù)指定兩個(gè)函數(shù)來(lái)執(zhí)行也不是太困難，不過(guò)用 jQuery 會(huì)更容易，看看以下相同的範(fàn)例： $(document).ready(function() {alert('Hello world!'); }); $(document).ready(function() {alert('您好，歡迎來(lái)到 jsGears.com ～'); }); 相同的例子使用 jQuery 的 document ready 函數(shù)，則帶入的兩個(gè)函數(shù)都會(huì)被執(zhí)行到，很簡(jiǎn)單吧，完全不需用到什麼技巧。再提供一個(gè)精簡(jiǎn)的語(yǔ)法， document ready 函數(shù)也可以這樣用： $(function() {alert('您好，歡迎來(lái)到 jsGears.com ～'); }); 直接把函數(shù)放到 $() 裡面就可以了，是不是超精簡(jiǎn)啊。
[$() 別名]
前面用到了很多 $()，包含剛介紹的 document ready 及先前的選取功能，都是透過(guò)這個(gè)簡(jiǎn)短的錢記號(hào)來(lái)達(dá)成，其實(shí)這個(gè)錢記號(hào)是 「jQuery」這個(gè)物件的縮寫，也就是剛剛所有你看到用 $() 的地方，都可以改寫成用 jQuery()，例如： jQuery(document).ready(function() {jQuery("div").addClass("special"); }); 沒(méi)事應(yīng)該不會(huì)有人想用比較長(zhǎng)的名稱來(lái)寫程式，簡(jiǎn)短的 $ 不是挺好的。但是，某些情況可能你無(wú)法使用 $()，例如你進(jìn)行中的專案已經(jīng)使用了其他的 JavaScript Library，而 $ 這個(gè)名稱已經(jīng)被使用了，例如另一套知名的 prototype，也使用了 $() 這樣的函數(shù)名稱，這時(shí)如果你需要再搭配使用 jQuery 的話，jQuery 本身有提供一個(gè)方式來(lái)避免 $() 的衝突： jQuery.noConflict(); jQuery(document).ready(function() {jQuery("div").addClass("special"); }); 使用 jQuery 前，先下達(dá) jQuery.noConflict() 這樣就可以避免掉 $() 衝突的問(wèn)題，接著再用 jQuery 物件來(lái)進(jìn)行操作即可。此外，你也可以自行幫 jQuery 這個(gè)物件設(shè)定另一個(gè)別名，例如： var $j = jQuery.noConflict(); $j(document).ready(function() {$j("div").addClass("special"); }); 使用一個(gè)變數(shù)來(lái)接 jQuery.noConflict() 的回傳值，這個(gè)變數(shù)就可以做為 jQuery 的一個(gè)別名，透過(guò)這個(gè)別名不但避免了和其他 Library 錢記號(hào)的衝突，也可以將函數(shù)名稱縮短，算是 jQuery 一個(gè)蠻貼心的設(shè)計(jì)。 與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖
jQuery 怎麼用來(lái)「快速選取元素」並且「做一些事情」呢？請(qǐng)看看程式碼： $("div").addClass("special"); 錢記號(hào) $ 是 jQuery 的物件，使用 $("div") 就是用 jQuery 來(lái)選取元素，這個(gè)範(fàn)例可以選取文件內(nèi)所有的 <div> 元素。後面接著的 .addClass("special") 就是用來(lái)做一些事情，這個(gè)範(fàn)例是將先前所選取到的所有元素都加上一個(gè)名為 "special" 的 class。也就是透過(guò) $("div").addClass("special") 的語(yǔ)法，可以讓你一次幫文件上有的 <div> 元素都加入 special 的 class。
請(qǐng)注意喔，剛剛的例子可以針對(duì)已選取的多個(gè)元素做批次的操作，也就是說(shuō)如果文件上有三個(gè) <div>，那就會(huì)一次找出三個(gè) <div> 並且全部套用後續(xù)的動(dòng)作。這和你原本自己使用 JavaScript 來(lái)寫程式有很大的差異，原本自己寫可能會(huì)需要用到迴圈之類的語(yǔ)法，而 jQuery 的函數(shù)大多具有批次處理的功能，光是這點(diǎn)就可以讓你的程式更簡(jiǎn)潔了。
關(guān)於錢記號(hào) $ 將會(huì)是你學(xué)習(xí)及使用 jQuery 的過(guò)程中最重要的物件（或者你要把 $ 當(dāng)成一個(gè)函數(shù)也可以，事實(shí)上也是這樣)，使用方式就像剛剛你看到的，用來(lái)找元素用的，把參數(shù)帶入即可。或許你不習(xí)慣錢記號(hào)也可以當(dāng)成函數(shù)名稱，那麼你也可以用 jQuery 這個(gè)名字，錢記號(hào)其實(shí)是被當(dāng)成 jQuery 的縮寫，讓你的函數(shù)看起來(lái)更簡(jiǎn)潔一些，如果你要自己設(shè)定另外一個(gè)縮寫，例如 $j，也是可以的，這部份後續(xù)再解釋，先看看已下的範(fàn)例，結(jié)果將會(huì)和上面的範(fàn)例是一模一樣的： jQuery("div").addClass("special");
[選取元素]
前面的例子使用 $("div") 來(lái)選取元素，帶入的參數(shù) div 是表示你要找的元素，這是 CSS 選擇器(CSS Selector) 的語(yǔ)法，就如同 CSS 在做排版和外觀所使用的選擇器語(yǔ)法一樣。jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及仍未正式發(fā)佈的 CSS3，此外透過(guò) plugin 還可支援常用的 XPath 語(yǔ)法，善用這些 CSS、XPath 語(yǔ)法就可以很容易地找到你要處理的網(wǎng)頁(yè)元素，底下來(lái)看看更多的範(fàn)例。
這是一段原始的 HTML：
$("div")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取所有 <div>
$("#body")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取 id 為 body 的元素
$("div#body")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取 id 為 body 的 <div>
$("div.contents p")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取 class 為 contents 的 <div> 所包住的所有下層的 <p>
$("div > div")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：選取被 <div> 包住的下一層 <div>
$("div:has(div)")
<div id="body">
??<h2>Some Header</h2>
??<div class="contents">
? ? <p>...</p>
? ? <p>...</p>
??</div>
</div>
解釋：和前一個(gè)範(fàn)例相反，這邊是選取至少有包住一個(gè) <div> 的 <div>
[做一些事情]
前一段的教學(xué)中介紹了如何使用 jQuery 來(lái)選取元素，其中大部份的語(yǔ)法都是可以讓你快速地一次選取多個(gè)元素，接下來(lái)當(dāng)然就是要來(lái)對(duì)這些選取到的元素做些改變囉。透過(guò) jQuery 內(nèi)建的函數(shù)，你可以：
- 對(duì) DOM 進(jìn)行操作，例如對(duì)文件節(jié)點(diǎn)的新增或修改
- 添加事件處理
- 做一些基本的視覺(jué)效果，例如隱藏、顯示、下拉顯示、淡出淡入等等
- 使用 AJAX 傳送表單內(nèi)容或取得遠(yuǎn)端文件
[範(fàn)例1] 選取所有有 target 屬性的 <a>，並且在其節(jié)點(diǎn)下加入一段文字。 $("a[target]").append(" (Opens in New Window)"); 這是一段原始的 HTML :
[範(fàn)例7] 動(dòng)態(tài)效果的 callback 的範(fàn)例，將所有的 <div> 以 0.5 秒的動(dòng)態(tài)效果隱藏後，再以 0.5 秒的動(dòng)態(tài)效果顯示。hide() 的第二個(gè)參數(shù)就是一個(gè) callback 函數(shù)，其中 $(this) 是原本程式所處理的各個(gè)元素。 $("div").hide(500, function(){// $(this) 是每一個(gè)各別的 <div>$(this).show(500); }); 可作用在類似以下的 HTML：
[連續(xù)使用函數(shù)]
jQuery 很重要的一個(gè)特性是可以連續(xù)地使用函數(shù)(Chaining)，當(dāng)你選取了一個(gè)或一組的元素後，可以連續(xù)對(duì)這些元素進(jìn)行多個(gè)處理。以下範(fàn)例會(huì)將所有的 <div> 隱藏，修改文字顏色為藍(lán)色，再將 <div> 以下拉布幕的效果顯示出來(lái)： $("div").hide(); $("div").css("color", "blue"); $("div").slideDown(); 這樣的三行程式碼可以用以下一行的程式碼取代，結(jié)果會(huì)是完全相同的： $("div").hide().css("color", "blue").slideDown(); 是否感到很神奇呢？在 jQuery 的架構(gòu)設(shè)計(jì)上，大部分的函數(shù)都會(huì)在處理完該做的事情後，再將原本傳入的元素給回傳回去，因此函數(shù)都可以連續(xù)這樣一個(gè)接著一個(gè)的使用。還記得一開(kāi)始所說(shuō)的 jQuery 可以讓你的程式碼更精簡(jiǎn)嗎？看了上面的一些範(fàn)例後，現(xiàn)在應(yīng)該有點(diǎn)感覺(jué)了吧。
講到 jQuery 的函數(shù)連續(xù)使用，有兩個(gè)很重要的函數(shù)必須在此介紹一下。第一個(gè)是 end()，這個(gè)函數(shù)執(zhí)行後，會(huì)回傳「前一組找到的元素」。另一個(gè)是 find()，這個(gè)函數(shù)的用法如同使用 $() 找文件內(nèi)的元素一樣是帶入 CSS 選擇器，執(zhí)行後回傳找到的元素，不同的是 $() 是找整個(gè)文件，而 find() 是根據(jù)先前找到的元素再找其底下的元素，像是一個(gè)再過(guò)濾的功能。 $("ul.open")? ?? ?? ?? ?? ? // [ ul, ul, ul ].children("li")? ?? ?? ???// [ li, li, li ].addClass("open")? ?? ?? ?// [ li, li, li].end()? ?? ?? ?? ?? ?? ???// [ ul, ul, ul ].find("a")? ?? ?? ?? ?? ? // [ a, a, a ].click(function(){$(this).next().toggle();return false;})? ?? ?? ?? ?? ?? ?? ?? ?// [ a, a, a ].end();? ?? ?? ?? ?? ?? ? // [ ul, ul, ul ] 上面這一段程式碼連續(xù)使用多個(gè)函數(shù)，且透過(guò) end() 和 find() 來(lái)分別對(duì)不同的元素進(jìn)行操作，詳細(xì)的步驟解釋如下：
- 找出文件內(nèi)所有 class 為 open 的 <ul>
- 過(guò)濾出下一層的所有 <li>
- 對(duì)這些 <li> 新增一個(gè) class
- 回前一次搜尋的結(jié)果，也就是所有的 <ul>
- 再找出底下所有的 <a>
- 對(duì) <a> 新增事件處理
- 回前一次搜尋的結(jié)果
[document ready 事件]
有些時(shí)候，我們必須在網(wǎng)頁(yè)下載完成之後立即執(zhí)行一些程式，可能是想要把游標(biāo)放在預(yù)設(shè)的輸入框，或是馬上顯示一些歡迎訊息等等。過(guò)去你可能用過(guò) window.onload 來(lái)處理，或是直接在 <body> 標(biāo)籤上加入 onload 的事件處理函數(shù)，但是 jQuery 提供了另一種選擇，請(qǐng)參考下面的範(fàn)例： $(document).ready(function() {alert('您好，歡迎來(lái)到 jsGears.com ～'); }); 先透過(guò) $() 取得 document 物件，接著使用 ready() 帶入一個(gè)函數(shù)，就可以在網(wǎng)頁(yè)下載完成後立即執(zhí)行。jQuery 的 document ready 事件是模擬 W3C DOM 標(biāo)準(zhǔn)的 DOMContentLoaded 事件，DOMContentLoaded 和 window.onlad 的差異在於前者是在 DOM 文件下載完成後觸發(fā)，而後者是文件和所有文件內(nèi)的元件，包含圖檔等等全部下載完成後才會(huì)觸發(fā)，因此通常 window.onload 的發(fā)生時(shí)間要比 DOMContentLoaded 晚一點(diǎn)(如果你的網(wǎng)頁(yè)內(nèi)確實(shí)有用到一些圖檔)，有時(shí)候你所需要執(zhí)行的程式並不需要等所有圖檔都下載完成，因此，放到 DOMContentLoaded 事件內(nèi)處理是比較合適的。但是，IE 目前的版本 6 和 7 並不支援 DOMContentLoaded 事件，所以 jQuery 用了一些技巧來(lái)達(dá)到模擬 DOMContentLoaded 的事件，而成果就是上面看到的這個(gè)例子的用法。
DOMContentLoaded 和 window.onlad 的另一個(gè)差異在於 window.onload 並沒(méi)有辦法多次指定不同的函數(shù)來(lái)執(zhí)行，最後指定的那個(gè)函數(shù)會(huì)複寫掉先前的，例如以下範(fàn)例： window.onload = function() {alert('Hello world!'); }; window.onload = function() {alert('您好，歡迎來(lái)到 jsGears.com ～'); }; 上面的例子在同一個(gè)頁(yè)面上用了兩次 window.onload，結(jié)果將會(huì)是後面的函數(shù)會(huì)被執(zhí)行到，前面的函數(shù)將消失無(wú)影蹤，當(dāng)然，只要你稍具 JavaScript 處理 Event 的技巧，真要連續(xù)指定兩個(gè)函數(shù)來(lái)執(zhí)行也不是太困難，不過(guò)用 jQuery 會(huì)更容易，看看以下相同的範(fàn)例： $(document).ready(function() {alert('Hello world!'); }); $(document).ready(function() {alert('您好，歡迎來(lái)到 jsGears.com ～'); }); 相同的例子使用 jQuery 的 document ready 函數(shù)，則帶入的兩個(gè)函數(shù)都會(huì)被執(zhí)行到，很簡(jiǎn)單吧，完全不需用到什麼技巧。再提供一個(gè)精簡(jiǎn)的語(yǔ)法， document ready 函數(shù)也可以這樣用： $(function() {alert('您好，歡迎來(lái)到 jsGears.com ～'); }); 直接把函數(shù)放到 $() 裡面就可以了，是不是超精簡(jiǎn)啊。
[$() 別名]
前面用到了很多 $()，包含剛介紹的 document ready 及先前的選取功能，都是透過(guò)這個(gè)簡(jiǎn)短的錢記號(hào)來(lái)達(dá)成，其實(shí)這個(gè)錢記號(hào)是 「jQuery」這個(gè)物件的縮寫，也就是剛剛所有你看到用 $() 的地方，都可以改寫成用 jQuery()，例如： jQuery(document).ready(function() {jQuery("div").addClass("special"); }); 沒(méi)事應(yīng)該不會(huì)有人想用比較長(zhǎng)的名稱來(lái)寫程式，簡(jiǎn)短的 $ 不是挺好的。但是，某些情況可能你無(wú)法使用 $()，例如你進(jìn)行中的專案已經(jīng)使用了其他的 JavaScript Library，而 $ 這個(gè)名稱已經(jīng)被使用了，例如另一套知名的 prototype，也使用了 $() 這樣的函數(shù)名稱，這時(shí)如果你需要再搭配使用 jQuery 的話，jQuery 本身有提供一個(gè)方式來(lái)避免 $() 的衝突： jQuery.noConflict(); jQuery(document).ready(function() {jQuery("div").addClass("special"); }); 使用 jQuery 前，先下達(dá) jQuery.noConflict() 這樣就可以避免掉 $() 衝突的問(wèn)題，接著再用 jQuery 物件來(lái)進(jìn)行操作即可。此外，你也可以自行幫 jQuery 這個(gè)物件設(shè)定另一個(gè)別名，例如： var $j = jQuery.noConflict(); $j(document).ready(function() {$j("div").addClass("special"); }); 使用一個(gè)變數(shù)來(lái)接 jQuery.noConflict() 的回傳值，這個(gè)變數(shù)就可以做為 jQuery 的一個(gè)別名，透過(guò)這個(gè)別名不但避免了和其他 Library 錢記號(hào)的衝突，也可以將函數(shù)名稱縮短，算是 jQuery 一個(gè)蠻貼心的設(shè)計(jì)。 與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖
總結(jié)
以上是生活随笔為你收集整理的(转)jQuery 基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 小吃怎么样 品尝小吃的口感和特色？
- 下一篇： 解決“无法解决 equal to 操作的