javascript - 如何检查给定的 Web 应用程序中是否使用了 jQuery？

Question

这似乎是一个荒谬的问题，但作为 JS/JQuery 的新手，我一直在愉快地创建一个简单的 .js 文件来创建一个两列菜单，主要是从这里获取建议和一些代码。我刚刚遇到了我需要的解决方案，我需要根据我使用的是 JS 还是 Jquery 使用不同的代码 - 我不知道我在使用什么!在我开始这一切之前，我已经包含了用于 bxSlider 的 JQuery 库(见下文)，这让我感到困惑。

如果我完全误解了这里的一些基本内容，我深表歉意。

这是我的 HTML 头部的相关区域:

<!-- jQuery library (served from Google)-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />

<!--Other javascript-->
<script src="<?php bloginfo('template_directory'); ?>/js/menu-two-cols.js"></script>

到目前为止，这是我的“menu-two-cols.js”文件:

function menuTwoCols() {

var browserH = $(window).height();

if (browserH > 630) {
    //do nothing - menu can stay as a single column
}else{
    //do everything below

//make width auto for measurement for this child
$('.menu-header li:nth-child(6) li').css({'width':'auto'});

var maxOdd = 0;
var maxEven = 0;
var listItemNum = $(".menu-header li:nth-child(6) li").length;

console.log("First level menu (6) ODD num widths");
$('.menu-header ul li:nth-child(6) ul li:nth-child(odd)').each(function() {
    var $this = $(this);
    var colWidth = $this.outerWidth();
    if (colWidth > maxOdd) {
        maxOdd = colWidth;
    }
console.log(colWidth);   
});
console.log("Max Odd = " + maxOdd);

console.log("First level menu (6) EVEN num widths");
$('.menu-header ul li:nth-child(6) ul li:nth-child(even)').each(function() {
    var $this = $(this);
    var colWidth = $this.outerWidth();
    if (colWidth > maxEven) {
        maxEven = colWidth;
    }
console.log(colWidth);   
});

console.log("Max Even = " + maxEven);    

var maxBoth = maxOdd + maxEven;
var maxOddPc = ((maxOdd / maxBoth) * 100)+"%";
var maxEvenPc = ((maxEven / maxBoth) * 100)+"%";

console.log("Max BothPx = " + maxBoth + '\n' +
            "Max Odd% = " + maxOddPc + '\n' +
            "Max Even% = " + maxEvenPc + '\n' +
            "List Item Num = " + listItemNum + '\n');

console.log("Text content");
console.log($('.menu-header ul li:nth-child(6) ul').text() + ' _ ');

//make changes to widths if no space for single column
$('.menu-header ul li:nth-child(6) > ul').css('width', maxBoth);
$('.menu-header li:nth-child(6) li:nth-child(odd)').css('width', maxOddPc);
$('.menu-header li:nth-child(6) li:nth-child(even)').css('width', maxEvenPc);
$('.menu-header ul li:nth-child(6) ul li:nth-child(2)').css({'border-top':'5px solid #fff'}); //top white line

}//end of if statement

}

Answer 1

jQuery 是最有用和最常用的库之一，可用于 javascript。 Javascript是前端开发中常用的一种语言。但是，浏览器之间存在很多不一致之处，关于它们为执行不同任务而公开的 API。因此，在那个时候，jQuery 出现了，它抽象了跨浏览器的 API 差异并提供了一个通用的接口(interface)来使用。因此，您的代码不再关心不同浏览器相关的 API 问题。希望对你有帮助。有关详细信息，请参阅 https://en.wikipedia.org/wiki/JQuery .

通常，包含 jQuery 的代码会大量使用“$”，它是 jQuery 选择器函数的别名。

例如。在您的代码中，有几个选择器，例如

$('.menu-header li:nth-child(6) li')
$('.menu-header ul li:nth-child(6) ul li:nth-child(even)')

除了上述指标外，您还可以使用以下技巧来查找 jQuery 库是否是您的运行时环境的一部分:-

按 F12。转到控制台。键入 jQuery 并按回车键。

如果您的应用未使用 jQuery，则会出现错误。