在介紹選擇器之前，我們首先來了解一下JQuery中的ready(fn)函數。這是事件子產品中最重要的一個函數，因為它可以極大地提高web應用程式的響應速度。
簡單地說，這個方法純粹是對向window.load事件注冊事件的替代方法。通過使用這個方法，可以在DOM載入就緒能夠讀取并操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。
有一個參數－－對jQuery函數的引用－－會傳遞到這個ready事件處理函數中。可以給這個參數任意起一個名字，并是以可以不再擔心命名沖突而放心地使用$别名。請確定在元素的onload事件中沒有注冊函數，否則不會觸發$(document).ready()事件。可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函數會按照（代碼中的）先後順序依次執行。
下面舉一個簡單的例子來加以說明。
<html>
<head>
<title>My JSP 'jquerydemo1.jsp' starting page</title>
//首先引入jquery所需要的js檔案
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
alert("JQuery第一個案例!");
});
</script>
</head>
<body>
<br>
<br>
<h2 align="center" style="color: #333333;">
第一個JQuery案例
</h2>
</body>
</html>
接下來我們繼續介紹JQuery的基本選擇器與層級選擇器。
一、JQuery基本選擇器
#id 根據給定的ID比對一個元素。
HTML 代碼:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代碼:
$("#myDiv");
結果:
[ <div id="myDiv">id="myDiv"</div> ]
element 根據給定的元素名比對所有元素
HTML 代碼:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代碼:
$("div");
結果:
[ <div>DIV1</div>, <div>DIV2</div> ]
.class 根據給定的類比對元素。
HTML 代碼:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代碼:
$(".myClass");
結果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
* 比對所有元素，多用于結合上下文來搜尋。
HTML 代碼:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代碼:
$("*")
結果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
selector1,selector2,selectorN 将每一個選擇器比對到的元素合并後一起傳回。你可以指定任意多個選擇器，并将比對到的元素合并到一個結果内。
HTML 代碼:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代碼:
$("div,span,p.myClass")
結果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
二、層級選擇器
ancestor descendant 在給定的祖先元素下比對所有的後代元素
找到表單中所有的 input 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("form input")
結果:
[ <input name="name" />, <input name="newsletter" /> ]
parent > child 在給定的父元素下比對所有的子元素，用以比對元素的選擇器，并且它是第一個選擇器的子元素。
比對表單中所有的子級input元素。
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("form > input")
結果:
[ <input name="name" /> ]
prev + next 比對所有緊接在 prev 元素後的 next 元素
比對所有跟在 label 後面的 input 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("label + input")
結果:
[ <input name="name" />, <input name="newsletter" /> ]
prev ~ siblings 比對 prev 元素之後的所有 siblings 元素
找到所有與表單同輩的 input 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("form ~ input")
結果:
[ <input name="none" /> ]
三、基本過濾器
: first 比對找到的第一個元素
查找表格的第一行
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:first")
結果:
[ <tr><td>Header 1</td></tr> ]
:last 比對找到的最後一個元素
查找表格的最後一行
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:last")
結果:
[ <tr><td>Value 2</td></tr> ]
:not 去除所有與給定選擇器比對的元素
在jQuery 1.3中，已經支援複雜選擇器了（例如:not(div a) 和 :not(div,a)）
查找所有未選中的 input 元素
HTML 代碼:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代碼:
$("input:not(:checked)")
結果:
[ <input name="apple" /> ]
:even 比對所有索引值為偶數的元素，從 0 開始計數
查找表格的1、3、5...行（即索引值0、2、4...）
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:even")
結果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
:odd 比對所有索引值為奇數的元素，從 0 開始計數
查找表格的2、4、6行（即索引值1、3、5...）
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:odd")
結果:
[ <tr><td>Value 1</td></tr> ]
:eq 比對一個給定索引值的元素
查找第二行
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:eq(1)")
結果:
[ <tr><td>Value 1</td></tr> ]
:gt 比對所有大于給定索引值的元素
查找第二第三行，即索引值是1和2，也就是比0大
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:gt(0)")
結果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
:lt 比對所有小于給定索引值的元素
查找第一第二行，即索引值是0和1，也就是比2小
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:lt(2)")
結果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
:header 比對如 h1, h2, h3之類的标題元素
給頁面内所有标題加上背景色
HTML 代碼:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
jQuery 代碼:
$(":header").css("background", "#EEE");
結果:
[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
:animated 比對所有正在執行動畫效果的元素
隻有對不在執行動畫效果的元素執行一個動畫特效
HTML 代碼:
<button id="run">Run</button><div></div>
jQuery 代碼:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)