jQuery中selector,context几种调用方式代码实例详解-tutorial js-php.cn

jQuery中selector,context几种调用方式代码实例详解

伊谢尔伦

Lepaskan： 2017-06-19 10:36:36

asal

1211 orang telah melayarinya

首先我们给出下面的HTML代码：

<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>

Salin selepas log masuk

调用方式1：第二个参数context是DOM元素

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

Salin selepas log masuk

这时候第二个参数是DOM对象，打印[p.child, p.child, prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
调用方式2：第二个参数context是jQuery对象

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

Salin selepas log masuk

这时候打印结果和上面第一种情况一样，[p.child, p.child, prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
调用方式3：第二个参数是一个DOM数组

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

Salin selepas log masuk

调用方式4：第二个参数是一个jQuery对象数组

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

Salin selepas log masuk

这种方式的结果和第三种方式是完全一样的!
调用方式5：传入的参数是一个函数，该函数会在ready函数调用的时候调用

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

Salin selepas log masuk

我们现在从源码中分析这几种情况：

如果传入DOM的情况

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

Salin selepas log masuk

如果传入DOM元素，那么直接把元素放在jQuery对象上面，同时把length自增!

如果传入了jQuery对象

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

Salin selepas log masuk

如果传入了jQuery对象，那么也是把参数jQuery的selector和context直接封装到新创建的jQuery对象上面!调用方式如$($(''))这种方式!

如果传入的是一个函数

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

Salin selepas log masuk

如果传入了一个函数，那么直接放在$(document).ready()中等待执行，如果没有ready函数那么直接执行(使用了jQuery框架那么ready是存在的!)
如果是传入了一个DOM数组或者jQuery的对象

return jQuery.makeArray( selector, this );

Salin selepas log masuk

通过jQuery.makeArray我们可以把所有的参数封装到一个对象上面，但是这个函数第二个参数默认是数组对象，但是这里传入了jQuery对象，那么最后返回的结果就是jQuery对象。因此，我们通过这种方式把我们传入的DOM数组或者jQuery对象全部封装到一个新的jQuery对象上面返回!这种方式的调用如下：

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

Salin selepas log masuk

下面这种调用方式是我们最常用的方式，该方式包含选择对象的上下文：

              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 );
			}

Salin selepas log masuk

这种方式就是如$('li',$('ul'))第二个参数如果是jQuery对象，那么直接调用find方法，否则先把第二个参数的DOM对象封装为jQuery对象然后调用find方法进行查找!这种调用方式如下：

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

Salin selepas log masuk

很显然，我们传入的第二个参数是jQuery对象，那么我们调用了Sizzle的find方法来进行查询，如果第二个参数是一个DOM数组，也会该DOM数组封装成为jQuery对象然后以此为上下文进行查询!

这时候我又要提一下这种调用方式(第二个参数可以是DOM数组)

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

Salin selepas log masuk

这时候通过的就是jQuery对象具有的find实例方法来完成的(调用Sizzle来完成)，所以返回的就是DOM数组中每一个DOM对象的所有的满足selector的子元素组成的集合，但是这是去重的!

Atas ialah kandungan terperinci jQuery中selector,context几种调用方式代码实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!