Question

我一直在网上搜索，例如here，关于如何实际定义jquery $函数。那就是如何使用普通的javascript实现jquery选择器的相同功能？

据说jquery使用document.querySelectorAll()。那是$可能定义如下：

function $(mystring) {
  return document.querySelectorAll(mystring);
}

这是一个很好的解释。但是我的问题是当j querySelectorAll在浏览器中没有使用时jquery使用了什么？如果没有querySelector，如何选择像css一样的元素？例如。 css中的.container .row { ... }选择具有类row的每个元素，该元素位于具有container类的元素内。但在纯JavaScript中，我们只有document.getElementById或document.getElementsByClassName。

我看到jquery唯一的选择就是使用正则表达式或将mystring传递给各种条件，例如检查第一个字符是#还是.，blankspace中是否有>，~，mystring关键字，然后使用{{ 1}}相应地返回适当的元素。

Answer 1

由于注释状态jQuery是基于具有复杂选择器算法的Sizzle JS引擎构建的。

你可以在jQuery 1中看到这个：

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

搜索Expr = Sizzle.selectors = {

即使现在jQuery只使用Sizzle，但是Sizzle考虑使用querySelectorAll变得更加复杂。

Answer 2

@ Curt链接的重要部分位于底部。它在浏览器窗口中设置jQuery和$对象，为依赖注入设置数组，并创建初始jQuery函数。

它还确保与我们$的其他图书馆没有冲突。然后它将窗口上的jQuery和$设置为窗口上的jQuery。这会在最后一行返回时公开库。

window.jQuery = window.$ = jQuery;

文件的底部。

// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.

// Note that for maximum portability, libraries that are not jQuery should
// declare themselves as anonymous modules, and avoid setting a global if an
// AMD loader is present. jQuery is a special case. For more information, see
// https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    });
}




var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$;

jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

    return jQuery;
};

// Expose jQuery and $ identifiers, even in
// AMD (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( typeof noGlobal === strundefined ) {
    window.jQuery = window.$ = jQuery;
}




return jQuery;

如何在querySelector不可用之前定义jquery $ selector？

2 个答案: