0

0

jQuery对象中的selector和context是怎么使用的?

伊谢尔伦

伊谢尔伦

发布时间:2017-06-16 13:29:37

|

1908人浏览过

|

来源于php中文网

原创

jquery对象的两个属性selector和context,一开始一点都摸不着头脑,然后在百度和谷歌上面查了好久,也没查到个所以然来,后来还是在jquery api文档中发现了这个jquery对象的selector属性和context属性。呵呵~所以说呀~有空的时候,还是先把jquery api文档先翻一遍熟悉一下,也好过像我这样,明明api文档中有的东西,还在网上到处找,还找不到,多郁闷呀~如果看到这篇文章的同学,还不知道这两个属性的意思的话,那正好在此学习一下吧,其实这两个属性的最大的用处是用在编写插件。

API文档中说了:
默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM元素集或jQuery对象,那就会在这个 context 中查找。在jQuery 1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。

Context参数需要是一个正常工作的节点对象(DOM对象,而不jQuery对象)。虽然传递jQuery对象也可以起到限定查找范围的作用,但是这样的话,那么jQuery对象的context属性就会变成整个Document对象。

而$(expression, [context]).selector的值正好就是expression
例如:

 $("div ul").selector//值为“div ul”    
 $("div.test").selector//值为“div.test”    
 $("#test ul li:first").selector//值为“test ul li:first”

也就是说expression是什么,selector就是啥,

jspgou网店系统
jspgou网店系统

JSPGOU一直以来都和jeecms、jeebbs一样,是收费软件,但是从2014年7月12日开始,开始jspgou发布第一个免费版,金磊科技承诺:永远不向使用jspgou免费版用户索取任何费用,为免费用户提供更好的技术支持服务,根据用户提出的完善建议快速完善jspgou系统。 jspgou系统使命:做中国最优秀的免费网店系统,让更多的用户了解和使用java产品。 jspgou免费版适用对象:不限

下载

$(expression, [context]).context是一个DOM对象。关于这个DOM对象,在使用不同的$(expression, [context]),取得的context对象还有不同。

相关示例代码:

function( selector, context, rootjQuery ) {var match, elem, ret, doc;// Handle $(""), $(null), or $(undefined)
        //如果selector为空格,!selector为false
if (!selector) {//此时this为空jQuery对象
return this;
}// Handle $(DOMElement)
        //nodeType节点类型,利用是否有nodeType属性来判断是否是DOM元素
if ( selector.nodeType ) {//将第一个元素和属性context指向selector
this.context = this[0] = selector;this.length = 1;return this;
}// The body element only exists once, optimize finding it
        //因为body只出现一次,利用!context进行优化
if ( selector === "body" && !context && document.body ) {//context指向document对象
this.context = document;this[0] = document.body;this.selector = selector;this.length = 1;return this;
}// Handle HTML strings
if ( typeof selector === "string" ) {    // Are we dealing with HTML string or an ID?
//以<开头以>结尾,且长度大于等于3,这里假设是HTML片段,跳过queckExpr正则检查
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = quickExpr.exec( selector );
}// Verify a match, and that no context was specified for #id
if ( match && (match[1] || !context) ) {// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
doc = ( context ? context.ownerDocument || context : document );// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector );        //如果是单独标签
if (ret) {//如果context是普通对象
    if (jQuery.isPlainObject(context)) {    //之所以放在数组中,是方便后面的jQuery.merge()方法调用
    selector = [document.createElement(ret[1])];    //调用attr方法,传入参数context
jQuery.fn.attr.call( selector, context, true );
} else {
selector = [ doc.createElement( ret[1] ) ];
}        //复杂HTML的处理方法
} else {
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
}return jQuery.merge( this, selector );// HANDLE: $("#id")
} else {
elem = document.getElementById( match[2] );// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {// Handle the case where IE and Opera return items
    // by name instead of ID
    //即使是documen.getElementById这样核心的方法也要考虑到浏览器兼容问题,可能找到的是name而不是id
if ( elem.id !== match[2] ) {return rootjQuery.find( selector );
}// Otherwise, we inject the element directly into the jQuery object
this.length = 1;this[0] = elem;
}this.context = document;this.selector = selector;return this;
}// HANDLE: $(expr, $(...))
//没有指定上下文,执行rootjQuery.find(),制定了上下文且上下文是jQuery对象,执行context.find()
} else if ( !context || context.jquery ) {return ( context || rootjQuery ).find( selector );// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
//如果指定了上下文,且上下文不是jQuery对象
} else {    //先创建一个包含context的jQuery对象,然后调用find方法
return this.constructor( context ).find( selector );
}// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {return rootjQuery.ready( selector );
}        //selector是jquery对象
if ( selector.selector !== undefined ) {this.selector = selector.selector;this.context = selector.context;
}        //合并到当前jQuery对象
return jQuery.makeArray( selector, this );
}

相关专题

更多
Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

9

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

3

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

14

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

windows激活码分享 windows一键激活教程指南
windows激活码分享 windows一键激活教程指南

Windows 10/11一键激活可以通过PowerShell脚本或KMS工具实现永久或长期激活。最推荐的简便方法是打开PowerShell(管理员),运行 irm https://get.activated.win | iex 脚本,按提示选择数字激活(选项1)。其他方法包括使用HEU KMS Activator工具进行智能激活。

2

2026.01.21

excel表格操作技巧大全 表格制作excel教程
excel表格操作技巧大全 表格制作excel教程

Excel表格操作的核心技巧在于 熟练使用快捷键、数据处理函数及视图工具,如Ctrl+C/V(复制粘贴)、Alt+=(自动求和)、条件格式、数据验证及数据透视表。掌握这些可大幅提升数据分析与办公效率,实现快速录入、查找、筛选和汇总。

6

2026.01.21

毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm
毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm

毒蘑菇VOLUMESHADER_BM测试网站网址为https://toolwa.com/vsbm/,该平台基于WebGL技术通过渲染高复杂度三维分形图形评估设备图形处理能力,用户可通过拖动彩色物体观察画面流畅度判断GPU与CPU协同性能;测试兼容多种设备,但中低端手机易卡顿或崩溃,高端机型可能因发热降频影响表现,桌面端需启用独立显卡并使用支持WebGL的主流浏览器以确保准确结果

16

2026.01.21

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

7

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.5万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.6万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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