在兼容模式下正确使用 JQuery

Question

我写了 javascript class 我使用了 JQuery 的特定动态加载版本（版本 3.2.1）。我在兼容模式下使用动态加载的版本。

如果选择器在兼容模式下“生成”并作为参数传递给函数，我不会感到痛苦，也将使用兼容模式（我自己的版本而不是原始版本）。

这里是代码：

function toggleFunction ( jQuerySelectorItem )
{
    //hide all
    $jq_321(".class").hide();
    
    var checkBoxes = $jq_321(".class[rel-data='" + jQuerySelectorItem.attr("rel-data") + "'] input"); // <<<<< is this 'jQuerySelectorItem' still use jQuery 3.2.1 if generated by '$jq_321' selector ?

    if (jQuerySelectorItem.is(":checked")) 
    {
        checkBoxes.toArray().forEach ( item => this.__changeDependantCheckBoxStatus(item, true));
    } 
    else 
    {
        checkBoxes.toArray().forEach ( item => this.__changeDependantCheckBoxStatus(item, false));
    }
    
    $jq_321(".class[rel-data='" + jQuerySelectorItem.attr("rel-data") + "']").show();
}

以下是我如何在使用前以兼容模式动态加载 JQuery 的正确版本：

window.onload = (event) => {
    var jqScriptTag = document.createElement("script");
    jqScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';

    jqScriptTag.onload = function() {
        console.log('Temporary jQuery version : ' + jQuery.fn.jquery);
        $jq_321 = jQuery.noConflict(true);

        console.log('Restored original jQuery version : ' + jQuery.fn.jquery);
        //other code that will indeed call toggleFunction when needed
    };

    document.head.appendChild(jqScriptTag);
};

这里是控制台日志：

Temporary jQuery version : 3.2.1

Restored original jQuery version : 1.4.2

Answer 1

.fn. 是一种在没有 jquery 对象的情况下访问 jquery 方法的方法，您正在调用 选择器“生成” .

您也可以在任何 jquery 对象上调用 .fn. 之后的部分，例如：

console.log($("div").jquery)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

因此您可以很容易地检查您的 jquery 对象（生成的选择器）是哪个版本：

console.log(d331.jquery)
console.log(d123.jquery)

<div id="div1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var d331 = $("#div1");
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script>
var d123 = $("#div1");
</script>

只要您的函数使用 jquery 两者都存在的方法，您就不会遇到问题（在您的函数中）。

在兼容模式下正确使用 JQuery

Correct use of JQuery in compatibility mode

javascript

jquery

compatibility