深入學習jquery原始碼之add()和andSelf()

add(expr|ele|html|obj[,con])

概述

把與表示式匹配的元素新增到jQuery物件中。這個函式可以用於連線分別與兩個表示式匹配的元素結果集。

jQuery 1.4 中， .add()方法返回的結果將始終以元素在HTML文件中出現的順序來排序，而不再是簡單的新增。

引數

expr String

一個用於匹配元素的選擇器字串。

elements DOMElement

DOM元素。

html String

HTML片段新增到匹配的元素。

jQuery object 

一個jqeruy物件增加到匹配的元素

expr,context Element, jQuery

expr:用於匹配元素並新增的表示式字串，或者用於動態生成的HTML程式碼，如果是一個字串陣列則返回多個元素

context:作為待查詢的 DOM 元素集、文件或 jQuery 物件。

新增一個新元素到一組匹配的元素中，並且這個新元素能匹配給定的表示式。

<p>Hello</p><span>Hello Again</span>

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

[ <p>Hello</p>, <span>Hello Again</span> ]
 

動態生成一個元素並新增至匹配的元素中

<p>Hello</p>

$("p").add("<span>Again</span>")

[ <p>Hello</p>, <span>Hello Again</span> ]

為匹配的元素新增一個或者多個元素

<p>Hello</p><p><span id="a">Hello Again</span></p>

$("p").add(document.getElementById("a"))
 

[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]

andSelf()

概述

加入先前所選的加入當前元素中

對於篩選或查詢後的元素，要加入先前所選元素時將會很有用。

選取所有div以及內部的p，並加上border類

<div><p>First Paragraph</p><p>Second Paragraph</p></div>

$("div").find("p").andSelf().addClass("border");

<div class="border">
    <p class="border">First Paragraph</p>
    <p class="border">Second Paragraph</p>
</div>

jquery原始碼

    jQuery = function (selector, context) {
            // The jQuery object is actually just the init constructor 'enhanced'
            // Need init if jQuery is called (just allow error to be thrown if not included)
            return new jQuery.fn.init(selector, context);
	}
	
	init = jQuery.fn.init = function (selector, context) {
	
	}
	
	jQuery.fn = jQuery.prototype = {
        // The current version of jQuery being used
        jquery: version,

        constructor: jQuery,

        // Start with an empty selector
        selector: "",

        // The default length of a jQuery object is 0
        length: 0,

        toArray: function () {
            return slice.call(this);
        },
		// Take an array of elements and push it onto the stack
        // (returning the new matched element set)
        pushStack: function (elems) {

            // Build a new jQuery matched element set
            var ret = jQuery.merge(this.constructor(), elems);

            // Add the old object onto the stack (as a reference)
            ret.prevObject = this;
            ret.context = this.context;

            // Return the newly-formed element set
            return ret;
        }
		// For internal use only.
        // Behaves like an Array's method, not like a jQuery method.
        push: push,
        sort: deletedIds.sort,
        splice: deletedIds.splice
    };

	jQuery.fn.andSelf = jQuery.fn.addBack;
	
	jQuery.fn.extend({
        add: function (selector, context) {
            return this.pushStack(
                jQuery.unique(
                    jQuery.merge(this.get(), jQuery(selector, context))
                )
            );
        },

        addBack: function (selector) {
            return this.add(selector == null ?
                this.prevObject : this.prevObject.filter(selector)
            );
        }
    });