更改jquery的选择范围

Change jquery selection scope

本文关键字：范围 选择 jquery 更改      更新时间：2023-09-26

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

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

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

由于上面的代码行是在home-view后台js文件中使用的，我希望能够做这样的事情:

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

是否有可能做一些事情来解决代码位置特定的选择?

只需修改默认的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属性的原型。

jQuery.extend($, jQuery);

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

你可以这样写:

var container = $('#home-view');
// Will only search elements within #home-view
container.find('#events-cloud');
// Changing container
container = $('#main-view');
// Will only search elements within #main-view
container.find('anotherSelector');

我想你的泛型部分需要通用性，否则你就不会问了。

所以一个泛型代码可以调用$('#selector')而不知道上下文。

最简单的方法:使用自定义函数$$
function $$(selector, context) {
    return $(selector, context ? $(context, $$.stack[0]) : $$.stack[0]);
}
$$.stack = [];
$$.push = function(context){ $$.stack.unshift(context); }
$$.pop = function(){ return $$.stack.shift(); }

在你的通用部分使用$$('#selector')代替$('#selector')

围绕你的泛型代码执行使用:

$$.push('#home-view');
// generic code call using $$
// e.g. $$('#events-cloud') <=> $('#events-cloud', '#home-view') <=> $('#home-view #events-cloud')
$$.pop();
使用这个自定义函数，您可以嵌套上下文，甚至可以使用$$(selector, localcontext)表单。因此，对于泛型代码，当前全局上下文是完全透明的。
相关文章：