Detailed explanation of code examples for several calling methods of selector and context in jQuery

First we give the following HTML code:

<p id="parent" class="parent">
	 <p class="child">
	  child1
	</p>
	<p class="child">
	child2
	</p>
</p>
<p id="parent1" class="parent">
	 <p class="child">
	  child1
	</p>
	<p class="child">
	child2
	</p>
</p>

Calling method 1: The second parameter context is the DOM element

var doms=$(".child",$("#parent")[0]);
console.log(doms);

At this time the second parameter is the DOM object , print [p.child, p.child, prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
Calling method 2: The second parameter context is the jQuery object

var doms=$(".child",$($("#parent")[0]));
console.log(doms);

The printing result at this time is the same as the first case above, [p.child, p.child, prevObject: jQuery.fn.init[1 ], context: p#parent, selector: ".child"]
Calling method 3: The second parameter is a DOM array

var doms=$(".child",[document.getElementById("#parent"),document.getElementById("#parent1")]) 
console.log(doms);

Calling method 4: The second parameter is an array of jQuery objects

var doms=$(".child",$(".parent")) 
console.log(doms);

The result of this method is exactly the same as the third method!
Calling method 5: The parameter passed in is a function, which will be called when the ready function is called

 $(function()
  {
    console.log("dom ready");
  })

We now analyze these situations from the source code:

If DOM is passed in

else if ( selector.nodeType ) {
		this.context = this[0] = selector;
		this.length = 1;
		return this;
		// HANDLE: $(function)
		// Shortcut for document ready
		}

If DOM elements are passed in, then the elements are placed directly in jQuery On the object, the length is incremented at the same time!

If a jQuery object is passed in

if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}

If a jQuery object is passed in, the selector and context parameters of jQuery are also directly encapsulated into the newly created On the jQuery object! The calling method is like $($(''))!

If a function is passed in

 else if ( jQuery.isFunction( selector ) ) {
			return typeof rootjQuery.ready !== "undefined" ?
			rootjQuery.ready( selector ) :
				// Execute immediately if ready is not present
				selector( jQuery );
		}

If a function is passed in, then put it directly Wait for execution in $(document).ready(). If there is no ready function, execute it directly (if the jQuery framework is used, ready exists!)
If a DOM array or jQuery object is passed in

return jQuery.makeArray( selector, this );

Through jQuery.makeArray we can encapsulate all parameters into an object, but the second parameter of this function is an array object by default, but if a jQuery object is passed in here, the final returned result is a jQuery object. Therefore, in this way, we encapsulate all the DOM array or jQuery object we passed in to a new jQuery object and return it! The call in this way is as follows:

 var $doms=$([document.getElementById('ql'),document.getElementById('fkl')]);
   //把上面的DOM数组封装到新创建的jQuery对象上
   console.log($doms);

The following calling method is our most popular method Commonly used method, this method contains the context of the selected object:

              else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );
			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return this.constructor( context ).find( selector );
			}

This method is like $('li',$('ul')) If the second parameter is a jQuery object, then call it directlyfind method, otherwise, first encapsulate the DOM object of the second parameter into a jQuery object and then call the find method to search! This calling method is as follows:

 var doms=$(".child",$(".parent")) ;
   //这时候我们会选择class为parent元素下的所有的class为child的元素集合
   //作为jQuery对象返回
   console.log(doms);

Obviously, the third parameter we passed in The two parameters are jQuery objects, then we call Sizzle's find method to perform query. If the second parameter is a DOM array, the DOM array will be encapsulated into a jQuery object and then used as the context. Query!

At this time I would like to mention this calling method again (the second parameter can be a DOM array)

var doms=$(".child",$(".parent")) 
console.log(doms);

At this time, it is completed through the find instance method of the jQuery object. (call Sizzle to complete), so what is returned is a collection of all child elements that satisfy the selector of each DOM object in the DOM array, but this is deduplication!

The above is the detailed content of Detailed explanation of code examples for several calling methods of selector and context in jQuery. For more information, please follow other related articles on the PHP Chinese website!