[總結]jQuery之常用函數方法參考手冊

w3school參考地址：http://www.w3school.com.cn/jquery/index.asp

runoob參考地址：http://www.runoob.com/jquery/jquery-tutorial.html

jQuery動畫

stop()

stop() 方法用於在動畫或效果完成前對它們進行停止。

• 1、stop([stopAll], [gotoEnd])方法有兩個參數（當然可以不傳或直傳一個），其中stopAll的意思是清除之后的所有動畫。gotoEnd的意思是，執行完當前動畫。
• 2、stopAll == true時，停止隊列中的所有動畫， stopAll ==false時，只停止隊列中的當前動畫，后續動畫繼續執行。
• 3、gotoEnd == true時，立即跳到當前動畫的末尾， gotoEnd ==false時，停在當前狀態。且gotoEnd只有在設置了stopAll的時候才起作用
• 4、在項目中，如果不進行動畫隊列清理，就會產生動畫積累的問題。因此在寫入動畫時，最好先清除隊列中的重復動畫。

 

在項目中，例如做下拉二級導航效果，用到jquery的slideDown()與slideUp()方法，當鼠標快速晃動后，如果不進行動畫隊列清理，就會產生動畫積累，出現問題。
例如：

 

$(".nav li.has_list").hover(function(){
    $(this).children("a").addClass("curr");
    $(this).children("div").stop(true,true).slideDown(400);                            
},function(){
    $(this).children("a").removeClass("curr");
    $(this).children("div").stop(true,true).slideUp(400);   
   }
);

jQuery 文檔操作

clone()

定義和用法：clone() 方法生成被選元素的副本，包含子節點、文本和屬性。

語法：$(selector).clone(includeEvents)。

參數說明：

• includeEvents：可選。布爾值。規定是否復制元素的所有事件處理。默認地，副本中不包含事件處理器。

實例1，克隆並追加一個 p 元素：

$("button").click(function(){
  $("body").append($("p").clone());
});

實例2，創建一個按鈕，他可以復制自己，並且他的副本也有同樣功能：

$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

結果：

<button>Clone Me!</button>
<button>Clone Me!</button>

attr()

如下例子：

$("button").click(function(){
    $("img").attr("width","500");
});

定義和用法：attr() 方法設置或返回被選元素的屬性和值。當該方法用於返回屬性值，則返回第一個匹配元素的值。當該方法用於設置屬性值，則為匹配元素設置一個或多個屬性/值對。

語法：

//返回屬性的值：
$(selector).attr(attribute)

//設置屬性和值：
$(selector).attr(attribute,value)

//使用函數設置屬性和值：
$(selector).attr(attribute,function(index,currentvalue))

//設置多個屬性和值：
$(selector).attr({attribute:value, attribute:value,...})

參數	描述
attribute	規定屬性的名稱。
value	規定屬性的值。
function(index,currentvalue)	規定要返回屬性值到集合的函數 index - 接受集合中元素的 index 位置。 currentvalue - 接受被選元素的當前屬性值。

 prop()

如下例子，添加並移除名為 "color" 的屬性：

$("button").click(function(){
    var $x = $("div");
    $x.prop("color","FF0000");
    $x.append("The color 屬性： " + $x.prop("color"));
    $x.removeProp("color");
});

定義和用法：prop() 方法設置或返回被選元素的屬性和值。當該方法用於返回屬性值時，則返回第一個匹配元素的值。當該方法用於設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。

注意：prop() 方法應該用於檢索屬性值，例如 DOM 屬性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

提示：如需檢索 HTML 屬性，請使用 attr() 方法代替。

提示：如需移除屬性，請使用 removeProp() 方法。

語法：

//返回屬性的值：
$(selector).prop(property)

//設置屬性和值：
$(selector).prop(property,value)

//使用函數設置屬性和值：
$(selector).prop(property,function(index,currentvalue))

//設置多個屬性和值：
$(selector).prop({property:value, property:value,...})

參數	描述
property	規定屬性的名稱。
value	規定屬性的值。
function(index,currentvalue)	規定返回要設置的屬性值的函數。 index - 檢索集合中元素的 index 位置。 currentvalue - 檢索被選元素的當前屬性值。

關於attr()和prop()它們兩個的區別，網上的答案很多。這里談談我的心得，我的心得很簡單：

• 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
• 對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

來看個例子：

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

 這個例子里<a>元素的DOM屬性有“href、target和class"，這些屬性就是<a>元素本身就帶有的屬性，也是W3C標准里就包含有這幾個屬性，或者說在IDE里能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用prop方法。

<a href="#" id="link1" action="delete">刪除</a>

這個例子里<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個是固有屬性，而后面一個“action”屬性是我們自己自定義上去的，<a>元素本身是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法。

 

wrap(),unwrap(),wrapAll(),wrapInner(),unwrap()

• wrap() 方法把每個被選元素放置在指定的 HTML 內容或元素中。
• wrapAll() 在指定的 HTML 內容或元素中放置所有被選的元素。
• wrapInner() 方法使用指定的 HTML 內容或元素，來包裹每個被選元素中的所有內容 (inner HTML)。
• unwrap() 方法刪除被選元素的父元素。

下面舉例子：

<div class="content"> <p>我是第一條文本內容。</p> <p>我是第二條文本內容。</p> </div>

使用wrap()方法：

$("p").wrap("<strong></strong>");

結果：

<div class="content"> <strong><p>我是第一條文本內容。</p></strong> <strong><p>我是第二條文本內容。</p></strong> </div>

使用wrapAll()方法：

$("p").wrapAll("<strong></strong>");

結果：

<div class="content"> <strong><p>我是第一條文本內容。</p><p>我是第二條文本內容。</p></strong> </div>

使用wrapInner()方法：

$("p").wrapInner("<strong></strong>");

結果：

<div class="content"> <p><strong>我是第一條文本內容。</strong></p> <p><strong>我是第二條文本內容。</strong></p> </div>

使用unwrap()方法：

$("p").unwrap();

結果：

<p>我是第一條文本內容。</p> <p>我是第二條文本內容。</p>

在來一個例子，每隔4個label用一個class為same的div元素包裹，html代碼：

<div class="city"> <label>北京</label> <label>上海</label> <label>北京</label> <label>上海</label> <label>北京</label> <label>上海</label> <label>北京</label> <label>上海</label> <label>北京</label> <label>上海</label> <label>北京</label> <label>上海</label> <label>北京</label> <label>上海</label> </div>

js代碼：

$(function(){ $(".city label").each(function(i){ $(".city label").slice(i*4,i*4+4).wrapAll("<div class='same'></div>"); }); })

結果：

<div class="city"> <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div> <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div> <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div> <div class="same"><label>北京</label><label>上海</label></div> </div>

 

 

jQuery 遍歷

map()

定義和用法：map() 把每個元素通過函數傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 對象。

語法：

.map(callback(index,domElement))

參數說明：

callback(index,domElement)：對當前集合中的每個元素調用的函數對象。

注：由於返回值是 jQuery 封裝的數組，使用 get() 來處理返回的對象以得到基礎的數組。

.map() 方法對於獲得或設置元素集的值特別有用。請思考下面這個帶有一系列復選框的表單：

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

我們能夠獲得復選框 ID 組成的逗號分隔的列表：

var result = $(':checkbox').map(function() {
     return this.id;
}).get().join(',');
console.log(result); //two,four,six,eight

each()

定義和用法：each() 方法規定為每個匹配元素規定運行的函數。

注：返回 false 可用於及早停止循環。

語法：$(selector).each(function(index,element))

參數說明：

function(index,element)：必需。為每個匹配元素規定運行的函數。

•  index - 選擇器的 index 位置；
• element - 當前的元素（也可使用 "this" 選擇器）。

<input type ="hidden" value="hidden1"/>
<input type ="hidden" value="hidden2"/>
<script type="text/javascript">    
$(function(){
     //方式一
     $.each($("input:hidden"), function(i,val){  
        console.log(i,val);  
     }); 
     
     //方式二:
     $("input:hidden").each( function(i,val){  
         console.log(i,val);  
     })
});

//打印結果:
// 0  <input type ="hidden" value="hidden1"/>
// 1  <input type ="hidden" value="hidden2"/>

當然$.each()也可以遍歷數組，如下代碼：

 $.each([1,2,3],function(i,val){
    console.log(i,val)
 })

結果：

0 1
1 2
2 3

注：jquery的each方法遍歷后會返回遍歷的jquery DOM對象列表。

jquery each實現（網絡摘抄）：

function (object, callback, args) {
    //該方法有三個參數:進行操作的對象obj，進行操作的函數fn，函數的參數args
    var name, i = 0,length = object.length;
    if (args) {
        if (length == undefined) {
            for (name in object) {
                if (callback.apply(object[name], args) === false) {
                    break;
                }
            }
        } else {
            for (; i < length;) {
                if (callback.apply(object[i++], args) === false) {
                    break;
                }
            }
        }
    } else {
        if (length == undefined) {
            for (name in object) {
                if (callback.call(object[name], name, object[name]) === false) {
                    break;
                }
            }
        } else {
        for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
        /*object[0]取得jQuery對象中的第一個DOM元素，通過for循環，
        得到遍歷整個jQuery對象中對應的每個DOM元素，通過 callback.call( value,i,value);
        將callback的this對象指向value對象，並且傳遞兩個參數,i表示索引值，value表示DOM元素；
        其中callback是類似於 function(index, elem) { ... } 的方法。
        所以就得到 $("...").each(function(index, elem){ ... });
        */
        }
    }
    return object;
}

 add()

定義和用法：add() 方法把元素添加到已存在的元素組合中。該方法把元素添加到整個文檔上，如果規定了 context 參數則只添加到上下文元素內部。

語法：$(selector).add(element,context)。

參數說明：

• element：必需。規定要添加到已存在的元素集合的選擇器表達式、jQuery 對象、一個或多個元素、HTML 片段。
• context：可選。規定選擇器表達式在文檔中開始進行匹配的位置。

實例1，把 <p> 和 <span> 元素添加到已存在的元素組合中（<h1>）：

$("h1").add("p").add("span")

 實例2，給body集合中添加一段html代碼：

$("body").add("<div class='test'>test</div>");

not()

not() 方法返回不符合一定條件的元素。

例如，從包含所有段落的集合中刪除 id 為 "selected" 的段落：

<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p id="selected">This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>

<script>
$("p").not("#selected").css('background-color', 'red');
</script>

結果如圖：

has()

has() 方法返回擁有匹配指定選擇器的一個或多個元素在其內的所有元素。

提示：如需選取擁有多個元素在其內的元素，請使用逗號分隔（參見下面的實例）。

語法：

$(selector).has(element)

例如：

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

<script>
$('li').has('ul').css('background-color', 'red');
</script>

該調用的結果是，項目 2 的背景被設置為紅色，這是因為該項目是后代中唯一擁有 <ul> 的 <li>。

is()

定義：is() 根據選擇器、元素或 jQuery 對象來檢測匹配元素集合，如果這些元素中至少有一個元素匹配給定的參數，則返回 true。

與其他篩選方法不同，.is() 不創建新的 jQuery 對象。相反，它允許我們在不修改 jQuery 對象內容的情況下對其進行檢測。這在 callback 內部通常比較有用，比如事件處理程序。

假設我們有一個列表，其中兩個項目包含子元素：

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

您可以向 <ul> 元素添加 click 處理程序，然后把代碼限制為只有當列表項本身，而非子元素，被點擊時才進行觸發：

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

第二種用法：使用函數

該方法的第二種用法是，對基於函數而非選擇器的相關元素的表達式進行求值。對於每個元素來說，如果該函數返回 true，則 .is() 也返回 true。例如，下面是稍微復雜的 HTML 片段：

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

您可以向每個 <li> 添加 click 處理程序，以計算在被點擊的 <li> 內部 <strong> 元素的數目：

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

 

 jQuery 事件方法

$.proxy()

$.proxy 方法接受一個已有的函數，並返回一個帶特定上下文的新的函數。

該方法通常用於向上下文指向不同對象的元素添加事件。

整體參數說明：

• function：要被調用的已有的函數。
• context：函數所在的對象的名稱。
• name：已有的函數，其上下文將被改變（應該是 context 對象的屬性）。

語法1：

$(selector).proxy(function,context) 

實例：

<div>這是一個 div 元素。</div>
$(document).ready(function(){
    test=function(){ 
        this.txt="這是一個對象屬性";
        $("div").click($.proxy(this.myClick,this));
    };

    test.prototype.myClick = function(event){
        console.log(this.txt);
        console.log(event.currentTarget.nodeName);
    };

    var x = new test();
});

語法2：

$(selector).proxy(context,name) 

實例：

$(document).ready(function(){
  var objPerson = {
    name: "John Doe",
    age: 32,
    test: function(){
      $("p").after("Name: " + this.name + "<br> Age: " + this.age);
    }
  };
  $("button").click($.proxy(objPerson,"test"));
});

源碼：

// A global GUID counter for objects
    guid: 1,

    // Bind a function to a context, optionally partially applying any
    // arguments.
    proxy: function( fn, context ) {
        var tmp, args, proxy;
        if ( typeof context === "string" ) {
            tmp = fn[ context ];
            context = fn;
            fn = tmp;
        }

        // Quick check to determine if target is callable, in the spec
        // this throws a TypeError, but we will just return undefined.
        if ( !jQuery.isFunction( fn ) ) {
            return undefined;
        }

        // Simulated bind
        args = slice.call( arguments, 2 );
        proxy = function() {
            return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
        };

        // Set the guid of unique handler to the same of original handler, so it can be removed
        proxy.guid = fn.guid = fn.guid || jQuery.guid++;
        return proxy;
    }

 

jQuery 實用工具

jQuery.extend()與jQuery.fn.extend()

• $.extend():將一個或多個對象的內容合並到目標對象
• $.fn.extend():為jQuery擴展一個或多個實例屬性和方法

$.extend()

定義和用法：jQuery.extend() 函數用於將一個或多個對象的內容合並到目標對象。

注意：1. 如果只為$.extend()指定了一個參數，則意味着參數target被省略。此時，target就是jQuery對象本身。通過這種方式，我們可以為全局對象jQuery添加新的函數。
2. 如果多個對象具有相同的屬性，則后者會覆蓋前者的屬性值。

語法：

$.extend( target [, object1 ] [, objectN ] ) 

指示是否深度合並：

$.extend( [deep ], target, object1 [, objectN ] ) 

警告: 不支持第一個參數傳遞 false 。

參數說明：

• deep：可選。 Boolean類型 指示是否深度合並對象，默認為false。如果該值為true，且多個對象的某個同名屬性也都是對象，則該"屬性對象"的屬性也將進行合並。
• target：Object類型 目標對象，其他對象的成員屬性將被附加到該對象上。
• object1：可選。 Object類型 第一個被合並的對象。
• objectN：可選。 Object類型 第N個被合並的對象。

實例1，object2 合並到 object1 中：

var object1 = {
        apple: 0,
        banana: {weight: 52, price: 100},
        cherry: 97
    };
    var object2 = {
        banana: {price: 200},
        durian: 100
    };
    /* object2 合並到 object1 中 */
    $.extend(object1, object2);  
    console.log(object1); //{apple: 0, banana: {…}, cherry: 97, durian: 100}

實例2，只傳遞一個參數，為全局對象jquery添加新函數，如下：

$.extend({
    hello:function(){console.log('hello');}
});
$.hello();

擴展實例，在jquery全局對象中擴展一個net命名空間：

$.extend({net:{}});

然后將hello方法擴展到之前擴展的Jquery的net命名空間中去：

$.extend($.net,{
     hello:function(){alert('hello');}
 })

runoob參考地址：jQuery.extend()方法

$.fn.extend()

定義和用法：$.fn.extend() 函數為jQuery擴展一個或多個實例屬性和方法(主要用於擴展方法)。

提示：jQuery.fn是jQuery的原型對象，其extend()方法用於為jQuery的原型添加新的屬性和方法。這些方法可以在jQuery實例對象上調用。

語法：

$.fn.extend( object ) 

參數說明：

• object：Object類型 指定的對象，用來合並到jQuery的原型對象上。

<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
<script>
$(function () { 
    $.fn.extend({
        check: function() {
            return this.each(function() {
                this.checked = true;
            });
        },
        uncheck: function() {
            return this.each(function() {
                this.checked = false;
            });
        }
    });
    // 使用新創建的.check() 方法
    $( "input[type='checkbox']" ).check();
})
</script>

runoob參考地址：jQuery.fn.extend()方法

jQuery.extend = jQuery.fn.extend實現源碼

// 合並兩個或更多對象的屬性到第一個對象中，jQuery后續的大部分功能都通過該函數擴展
// 通過jQuery.fn.extend擴展的函數，大部分都會調用通過jQuery.extend擴展的同名函數

// 如果傳入兩個或多個對象，所有對象的屬性會被添加到第一個對象target

// 如果只傳入一個對象，則將對象的屬性添加到jQuery對象中。
// 用這種方式，我們可以為jQuery命名空間增加新的方法。可以用於編寫jQuery插件。
// 如果不想改變傳入的對象，可以傳入一個空對象：$.extend({}, object1, object2);
// 默認合並操作是不迭代的，即便target的某個屬性是對象或屬性，也會被完全覆蓋而不是合並
// 第一個參數是true，則會迭代合並
// 從object原型繼承的屬性會被拷貝
// undefined值不會被拷貝
// 因為性能原因，JavaScript自帶類型的屬性不會合並

// jQuery.extend( target, [ object1 ], [ objectN ] )
// jQuery.extend( [ deep ], target, object1, [ objectN ] )

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
       target = arguments[0] || {},
       i = 1,
       length = arguments.length,
       deep = false;

    // Handle a deep copy situation
    // 如果第一個參數是boolean型，可能是深度拷貝
    if ( typeof target === "boolean" ) {
       deep = target;
       target = arguments[1] || {};

       // skip the boolean and the target
       // 跳過boolean和target，從第3個開始
       i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    // target不是對象也不是函數，則強制設置為空對象
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
       target = {};
    }

    // extend jQuery itself if only one argument is passed
    // 如果只傳入一個參數，則認為是對jQuery擴展
    if ( length === i ) {
       target = this;
       --i;
    }
 
    for ( ; i < length; i++ ) {
       // Only deal with non-null/undefined values
       // 只處理非空參數
       if ( (options = arguments[ i ]) != null ) {
           // Extend the base object
           for ( name in options ) {
              src = target[ name ];
              copy = options[ name ];

              // Prevent never-ending loop
              // 避免循環引用
              if ( target === copy ) {
                  continue;
              }

              // Recurse if we're merging plain objects or arrays
              // 深度拷貝且值是純對象或數組，則遞歸
              if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

                  // 如果copy是數組
                  if ( copyIsArray ) {
                     copyIsArray = false;

                     // clone為src的修正值
                     clone = src && jQuery.isArray(src) ? src : [];
                
                  } else { // 如果copy的是對象
                     // clone為src的修正值
                     clone = src && jQuery.isPlainObject(src) ? src : {};
                  }

                  // Never move original objects, clone them
                  // 遞歸調用jQuery.extend
                  target[ name ] = jQuery.extend( deep, clone, copy );

              // Don't bring in undefined values
              // 不能拷貝空值
              } else if ( copy !== undefined ) {
                  target[ name ] = copy;
              }
           }
       }
    }
    // Return the modified object
    // 返回更改后的對象
    return target;
};

jQuery其它

jQuery noConflict()

語法：

jQuery.noConflict(removeAll)

removeAll：布爾值。指示是否允許徹底將 jQuery 變量還原。
noConflict() 方法讓渡變量 的jQuery控制權。該方法釋放jQuery對變量的控制。該方法也可用於為 jQuery 變量規定新的自定義名稱。

方式1：全名替代簡寫的方式來使用 jQuery

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

方式2：noConflict() 可返回對 jQuery 的引用，您可以把它存入變量，以供稍后使用

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
})

方式3：如果你的 jQuery 代碼塊使用 $ 簡寫，並且您不願意改變這個快捷方式，那么您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外，依舊不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

 源碼：

var

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$;

jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

    return jQuery;
};

 $.expr自定義偽類選擇器

<div id="con1"></div>
<div id="con2"></div>
<div id="con3"></div>

$(function() {
        //初始測試數據
        var init=function(){
            $("#con1").add("#con3").data("key","10001");
        };
        init();
        var select="newSelect";
        var name="key";
        //定義一個新選擇器
        $.expr[ ":" ][ select ] = function( elem ) {
            return $.data( elem, name );
        };
        //使用
        $("div:newSelect").each(function(){
            console.log(this.id);//結果:con1 con3
        })
    });