一、選擇網頁元素

$(document) //選擇整個文件物件

$('#myId') //選擇ID為myId的網頁元素

$('div.myClass') // 選擇class為myClass的div元素

$('input[name=first]') // 選擇name屬性等於first的input元素

$('a:first') //選擇網頁中第一個a元素

$('tr:odd') //選擇表格的奇數行

$('#myForm :input') // 選擇表單中的input元素

$('div:visible') //選擇可見的div元素

$('div:gt(2)') // 選擇所有的div元素，除了前三個

$('div:animated'
 
) // 選擇當前處於動畫狀態的div元素

$('div').has('p'); // 選擇包含p元素的div元素

$('div').not('.myClass'); //選擇class不等於myClass的div元素

$('div').filter('.myClass'); //選擇class等於myClass的div元素

$('div').first(); //選擇第1個div元素

$('div').eq(5); //選擇第6個div元素

$('div').next('p'); //選擇div元素後面的第一個p元素

$('div').parent(); //選擇div元素的父元素

$('div').closest('form'
 
); //選擇離div最近的那個form父元素

$('div').children(); //選擇div的所有子元素

$('div').siblings(); //選擇div的同級元素

二、鏈式操作

每一步的jQuery操作，返回的都是一個jQuery物件，所以不同操作可以連在一起。

$('div') //找到div元素
　　　.find('h3') //選擇其中的h3元素
　　　.eq(2) //選擇第3個h3元素
　　　.html('Hello'); //將它的內容改為Hello

鏈式操作 可以使用 end 回退到上一步的結果集：

$('div')
　　　.find('h3')
　　　.eq(2)
　　　.html('Hello'
 
)
　　　.end() //退回到選中所有的h3元素的那一步
　　　.eq(0) //選中第一個h3元素
　　　.html('World'); //將它的內容改為World

三、元素的操作：取值（getter）和賦值（setter）

$('h1').html(); //html()沒有引數，表示取出h1的值

$('h1').html('Hello'); //html()有引數Hello，表示對h1進行賦值

.html() //取出或設定html內容

.text() //取出或設定text內容

.attr() //取出或設定某個屬性的值

.width() //取出或設定某個元素的寬度

.height() //取出或設定某個元素的高度

.val() //取出某個表單元素的值

需要注意的是，如果結果集包含多個元素，那麼賦值的時候，將對其中所有的元素賦值；取值的時候，則是隻取出第一個元素的值（.text()例外，它取出所有元素的text內容）。

四、元素的操作：移動

$('div').insertAfter($('p')); //把div元素移動p元素後面

$('p').after($('div')); //把p元素加到div元素前面

兩種效果一樣，區別在於返回值的不同： 第一種方法返回div元素，第二種方法返回p元素

.insertAfter()和.after()：在現存元素的外部，從後面插入元素

.insertBefore()和.before()：在現存元素的外部，從前面插入元素

.appendTo()和.append()：在現存元素的內部，從後面插入元素

.prependTo()和.prepend()：在現存元素的內部，從前面插入元素

五、元素的操作：複製、刪除和建立

1. 複製元素使用.clone()。

2. 刪除元素使用.remove()和.detach()。兩者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於重新插入文件時使用。

3. 清空元素內容（但是不刪除該元素）使用.empty()。

六、工具方法

1. $.trim() 去除字串兩端的空格。

2. $.each() 遍歷一個數組或物件。

3. $.inArray() 返回一個值在陣列中的索引位置。如果該值不在陣列中，則返回-1。

   var arr = [ 4, "Pete", 8, "John" ];
   $.inArray( "John", arr );//結果為3
   $.inArray( "Karl", arr );//結果為-1

4. $.grep() 返回陣列中符合某種標準的元素。

   var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
   arr = $.grep(arr, function( n, i ) {
     return ( n !== 5 && i > 4 );
   });
   arr.join( ", " )
   
   //結果為 
   1, 9, 4, 7, 3, 8, 6, 9, 1
   過濾了=5的元素和陣列索引位置小於等於4的元素

5. $.extend() 將多個物件，合併到第一個物件。

   var object1 = {
     apple: 0,
     banana: { weight: 52, price: 100 },
     cherry: 97
   };
   var object2 = {
     banana: { price: 200 },
     durian: 100
   };
   
   // Merge object2 into object1
   $.extend( object1, object2 );
   console.log(JSON.stringify( object1 ));
   
   結果為：
   {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

6. $.makeArray() 將物件轉化為陣列。

7. $.type() 判斷物件的類別（函式物件、日期物件、陣列物件、正則物件等等）。

   jQuery.type( undefined ) === "undefined"
   jQuery.type() === "undefined"
   jQuery.type( window.notDefined ) === "undefined"
   jQuery.type( null ) === "null"
   
   jQuery.type( true ) === "boolean"
   jQuery.type( new Boolean() ) === "boolean"
   jQuery.type( 3 ) === "number"
   jQuery.type( new Number(3) ) === "number"
   jQuery.type( "test" ) === "string"
   jQuery.type( new String("test") ) === "string"
   jQuery.type( function(){} ) === "function"
   jQuery.type( [] ) === "array"
   jQuery.type( new Array() ) === "array"
   jQuery.type( new Date() ) === "date"
   jQuery.type( new Error() ) === "error" // as of jQuery 1.9
   jQuery.type( /test/ ) === "regexp"

8. $.isArray() 判斷某個引數是否為陣列。

9. $.isEmptyObject() 判斷某個物件是否為空（不含有任何屬性）。

   jQuery.isEmptyObject({}); // true
   jQuery.isEmptyObject({ foo: "bar" }); // false

10. $.isFunction() 判斷某個引數是否為函式。

    function stub() {}
    var objs = [
      function() {},
      { x:15, y:20 },
      null,
      stub,
      "function"
    ];
    
    jQuery.each( objs, function( i ) {
      var isFunc = jQuery.isFunction( objs[ i ]);
      console.log(isFunc );
    });
    
    結果：
    true
    false
    false
    true
    false

11. $.isPlainObject() 判斷某個引數是否為用”{}”或”new Object”建立的物件。

12. $.support() 判斷瀏覽器是否支援某個特性。

七、事件操作

//為P元素繫結click事件
$('p').click(function(){
alert('Hello');
});

1. .blur() 表單元素失去焦點。

   $( "#target" ).blur(function() {
     alert( "Handler for .blur() called." );
   });

2. .change() 表單元素的值發生變化

   <!--HTML-->
   <form>
     <input class="target" type="text" value="Field 1">
     <select class="target">
       <option value="option1" selected="selected">Option 1</option>
       <option value="option2">Option 2</option>
     </select>
   </form>
   <div id="other">
     Trigger the handler
   </div>
   
   //JS
   $( ".target" ).change(function() {
     alert( "Handler for .change() called." );
   });

3. .click() 滑鼠單擊

4. .dblclick() 滑鼠雙擊
5. .focus() 表單元素獲得焦點
6. .focusin() 子元素獲得焦點
7. .focusout() 子元素失去焦點
8. .hover() 同時為mouseenter和mouseleave事件指定處理函式
9. .keydown() 按下鍵盤（長時間按鍵，只返回一個事件）
10. .keypress() 按下鍵盤（長時間按鍵，將返回多個事件）
11. .keyup() 鬆開鍵盤

12. .load() 元素載入完畢

    $( "img.userIcon" ).load(function() {
      if ( $( this ).height() > 100) {
        $( this ).addClass( "bigImg" );
      }
    });

13. .mousedown() 按下滑鼠

14. .mouseenter() 滑鼠進入（進入子元素不觸發）
15. .mouseleave() 滑鼠離開（離開子元素不觸發）
16. .mousemove() 滑鼠在元素內部移動
17. .mouseout() 滑鼠離開（離開子元素也觸發）
18. .mouseover() 滑鼠進入（進入子元素也觸發）
19. .mouseup() 鬆開滑鼠
20. .ready() DOM載入完成

21. .resize() 瀏覽器視窗的大小發生改變

    $( window ).resize(function() {
      $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
    });

22. .scroll() 滾動條的位置發生變化

23. .select() 使用者選中文字框中的內容
24. .submit() 使用者遞交表單

25. .toggle() 根據滑鼠點選的次數，依次執行多個函式

    $( "td" ).toggle(
      function() {
        $( this ).addClass( "selected" );
      }, function() {
        $( this ).removeClass( "selected" );
      }
    );

26. .unload() 使用者離開頁面

以上這些事件在jQuery內部，都是.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"
　　});

這個事件物件有一些很有用的屬性和方法：

• event.pageX 事件發生時，滑鼠距離網頁左上角的水平距離 　　
• event.pageY 事件發生時，滑鼠距離網頁左上角的垂直距離
• event.type 事件的型別（比如click） 　　
• event.which 按下了哪一個鍵 　
• event.data 在事件物件上繫結資料，然後傳入事件處理函式
• event.target 事件針對的網頁元素
• event.preventDefault() 阻止事件的預設行為（比如點選連結，會自動開啟新頁面）
• event.stopPropagation() 停止事件向上層元素冒泡

　　$('a').click(); //直接使用事件函式
　　$('a').trigger('click'); 

一般用來觸發其他事件，比如點選某個元素觸發另外一個元素的hover事件。

八、特殊效果

$('h1').show(); //展現一個h1標題

　　.fadeIn() 淡入
　　.fadeOut() 淡出
　　.fadeTo() 調整透明度
　　.hide() 隱藏元素 = display:none
　　.show() 顯示元素 
　　.slideDown() 向下展開
　　.slideUp() 向上捲起
　　.slideToggle() 依次展開或捲起某個元素
　　.toggle() 依次展示或隱藏某個元素

除了.show()和.hide()，所有其他特效的預設執行時間都是400ms（毫秒），但是你可以改變這個設定。

$('h1').fadeIn(300); // 300毫秒內淡入
$('h1').fadeOut('slow'); // 緩慢地淡出

在特效結束後，可以指定執行某個函式。

$('p').fadeOut(300, function() { 
    $(this).remove(); 
});

更復雜的特效，可以用.animate()自定義。

    $('div').animate(
　　　　{
　　　　　　left : "+=50", //不斷右移
　　　　　　opacity : 0.25 //指定透明度
　　　　},
　　　　300, // 持續時間
　　　　function() { 
    　　　　alert('done!'); 
    　　} //回撥函式
　　);

.stop()和.delay()用來停止或延緩特效的執行。
$.fx.off如果設定為true，則關閉所有網頁特效。

推薦

整理收集於網際網路
推薦大家看阮一峰的有關jQuery的文章