视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery中selector,context几种调用方式代码实例详解
2020-11-27 20:19:33 责编:小采
文档


首先我们给出下面的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>

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

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

这时候第二个参数是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);

这时候打印结果和上面第一种情况一样,[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);

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

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

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

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

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

如果传入DOM的情况

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

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

如果传入了jQuery对象

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

如果传入了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 );
	}

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

return jQuery.makeArray( selector, this );

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

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

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

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

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

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

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

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

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

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

下载本文
显示全文
专题