javascript - 更改 jquery 选择范围

Question

当我在特定页面的 javascript 中编写 jQuery 选择器时，我希望能够使用简化的(范围内的)选择机制。

要引用当前我需要使用完整选择器的元素:

$('#home-view #events-cloud')'

由于上面的代码行是在主视图支持 js 文件中使用的，所以我希望能够执行如下操作:

$.SetSelectorPrefix('#home-view');
$('#events-cloud');

是否有可能采取一些措施来解决代码位置特定的选择问题？

Answer 1

只需修改默认的 jQuery init 函数，以便上下文是您选择的那个:

jQuery.noConflict();
$ = function (selector, context) {
    return new jQuery.fn.init(selector, context || document.getElementById('home-view'));
};
$.fn = $.prototype = jQuery.fn;
jQuery.extend($, jQuery);
console.log($('#events-cloud'));

解释:

jQuery.noConflict();

此行阻止 jQuery 默认分配给 $。

$ = function (selector, context) {
    return new jQuery.fn.init(selector, context || document.getElementById('wrapper'));
};

将新的修改函数分配给 $，该函数将返回一个新的 jQuery 实例，并根据您的目的修改了上下文(这是脚本的线索)!

$.fn = $.prototype = jQuery.fn;

为 $ 函数创建一个新属性 fn，并将其分配给从 jQuery.fn 继承属性的原型(prototype)。

jQuery.extend($, jQuery);

使用 jQuery 函数扩展创建的对象，因此您可以像 jQuery 一样使用它。

查看 working fiddle这个片段的。