一、選擇網頁元素

jQuery的基本設計思想和主要用法，就是"選擇某個網頁元素，然後對其進行某種操作"。

• 選擇表達式—CSS選擇器

• 選擇表達式—jQuery特有表達式

二、改變結果集

jQuery設計思想之二，就是提供各種強大的過濾器，對結果集進行篩選，縮小選擇結果。

jQuery也提供了在DOM樹上的一個節點尋找相關其他節點：

三、鏈式操作

jQuery設計思想之三，就是最終選中網頁元素以後，可以對它進行一系列操作，並且所有操作可以連接在一起，以鏈條的形式寫出來。

例如：

• $(“div”).find(“h3”).eq(2).html(“Hello”); //找到div元素，選擇其中的全部h3元素，選取第3個h3元素，將其內容改為hello

• $(“div”).find(“h3”).eq(2).html(“Hello”).end().eq(0).html(“World”); //找到div元素，選擇其中的全部h3元素，選取第3個h3元素，將其內容改為hello，返回選擇全部h3元素這步，選中第1個h3元素，將他的內容改為World

四、元素的操作：取值和賦值

jQuery設計思想之四，就是使用同一個函數，來完成取值（getter）和賦值（setter），即"取值器"與"賦值器"合一。到底是取值還是賦值，由函數的參數決定。

• $(“h1”).html(); //html()沒有參數，表示取出h1的值
• $(“h1”).html(“Hello”); //html()有參數Hello，表示對h1進行賦值

常見的取值和賦值函數

註：如果結果集包含多個元素，那麽賦值的時候，將對其中所有的元素賦值；取值的時候，則是只取出第一個元素的值（除.text()例外，它取出所有元素的text內容）。

五、元素的操作：移動

jQuery設計思想之五，就是提供兩組方法，來操作元素在網頁中的位置移動。一組方法是直接移動該元素，另一組方法是移動其他元素，使得目標元素達到我們想要的位置。

舉例說明.insertAfter()和.after() 差別：

• • $(“div”).insertAfter($(“p”)); //把div元素移動p元素後面
  • $(“p”).after($(“div”)); //把p元素加到div元素前面

六、元素的操作：復制、刪除和創建

元素操作方法：

創建元素

• • $(“<p>Hello</p>”);
  • $(“<li class=‘new’>new list item</li>”);
  • $(“ul”).append(“<li>list item</li>”);

七、工具方法

jQuery設計思想之六：除了對選中的元素進行操作以外，還提供一些與元素無關的工具方法（utility）。不必選中元素，就可以直接使用這些方法。

• 理解工具方法的實質：定義在jQuery構造函數上的方法，即jQuery.method()，可以直接調用。
• 操作元素的方法的實質：定義在構造函數的prototype對象上的方法，即jQuery.prototype.method()，必須生成實例（即選中元素）後使用。

常用的工具方法

八、事件操作

jQuery設計思想之七，就是把事件直接綁定在網頁元素之上。

例如：

　$(“p”).click(function(){

　　　　alert(“Hello”);

　　});

jQuery主要事件

註：以上事件是.bind()的便捷方式可以用.bind()更靈活的控制事件，例如：

• .bind() //綁定多個事件

$(“input”).bind(

　　　　“click change”, //同時綁定click和change事件

　　　　function() {

　　　　　　alert(“Hello”);

　　　　}

　　);

• .one() //只運行一次

$(“p”).one(“click”, function() {

　　　　alert(“Hello”); //只運行一次，以後的點擊不會運行

　　});

• .unbind() //解除事件綁定

$(“p”).unbind(“click”);

所有的事件處理函數，都可以接受一個事件對象（event object）作為參數，比如下面例子中的e：

$(“p”).click(function(e) {

　　　　alert(e.type); // "click"

　　});

事件對象屬性和方法：

在事件處理函數中，可以用this關鍵字，返回事件針對的DOM元素：

$(“a”).click(function(e) {

　　　　if ($(this).attr(“href”).match(“evil”)) { //如果確認為有害鏈接

　　　　　　e.preventDefault(); //阻止打開

　　　　　　$(this).addClass(“evil”); //加上表示有害的class

　　　　}

　　});

.trigger()和riggerHandler()可以自動觸發一個事件

$(“a”).click();

$(“a”).trigger(“click”);

九、特殊效果

jQuery允許對象呈現某些特殊效果。

常用的特殊效果：

註：可以更改默認執行事件，例如:

$(“h1”).fadeIn(300); // 300毫秒內淡入

$(“h1”).fadeOut(“slow”); // 緩慢地淡出

特效結束後可以執行回調函數，例如：

$(“h1”).fadeOut(300, function() { $(this).remove(); });

動畫特效：.animate()

$(“div”).animate(

　　　　{

　　　　　　left : “+=50”, //不斷右移

　　　　　　opacity : 0.25 //指定透明度

　　　　},

　　　　300, // 持續時間

　　　　function() { alert(‘done!‘); } //回調函數

　　);

jQuery教程