登录  /  注册
首页 > web前端 > js教程 > 正文

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

伊谢尔伦
发布: 2017-06-19 10:36:36
原创
1042人浏览过

首先我们给出下面的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(&#39;ql&#39;),document.getElementById(&#39;fkl&#39;)]);
   //把上面的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的子元素组成的集合,但是这是去重的!

以上就是jQuery中selector,context几种调用方式代码实例详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号