Intellij IDEA ReferenceError: $ is not defined

Question

我正在使用 Intellij IDEA 14.1.4 并收到“ReferenceError: $ is not defined”消息。现在我已经进行了一个多小时的搜索，并阅读了许多建议人们首先运行 jquery 脚本的帖子。我已经这样做了，页面在浏览器窗口中加载良好。一切都在那里工作。这是 Intellij IDEA 的一个问题。我下载了 JQUERY 和 JQUERY UI 库，并用我硬盘上的绝对路径链接到它们。我也尝试过链接到在线的。我不知道如何搜索我需要的东西，因为有太多误报，所以这就是我发布的原因。

"C:\Program Files (x86)\JetBrains\IntelliJ IDEA 14.1.4\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" lightbox.js c:\Users\Aaron\IdeaProjects\DataStructures\Treehouse\src\js\lightbox.js:4 var $overlay = $(''); //创建jquery obj， ^ ReferenceError: $ 未定义 在对象。 (c:\Users\Aaron\IdeaProjects\DataStructures\Treehouse\src\js\lightbox.js:4:16) 在 Module._compile (module.js:460:26) 在 Object.Module._extensions..js (module.js:478:10) 在 Module.load (module.js:355:32) 在 Function.Module._load (module.js:310:12) 在 Function.Module.runMain (module.js:501:10) 启动时 (node.js:129:16) 在 node.js:814:3

进程以退出代码 1 结束

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
    <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
    <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
    <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
    <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
    <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
    <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
    <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
    <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
    <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
    <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
    <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
</ul>
<script src="C:\Users\Aaron\.IntelliJIdea14\system\extLibs\http_code.jquery.com_jquery-2.0.0.js" charset="utf-8"></script>
<script src="C:\Users\Aaron\.IntelliJIdea14\system\extLibs\http_ajax.googleapis.com_ajax_libs_jqueryui_1.10.2_jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lightbox.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

这是 JAVASCRIPT 代码

var $overlay = $('<div id="overlay"><div></div></div>'); //creates jquery obj, $ is naming convention
var $image = $("<img>");
var $caption = $("<p></p>");
var $index= 0; //Will keep track of image endex from prev/next
var $galleryLength = $("#imageGallery li").length; //store total number of images

//Setup overlay
$overlay.children("div").append($image);//Adds image to the overlay jquery object
$overlay.children("div").append($caption); //Adds caption to the overlay, AFTER the image.
$overlay.children("div").append("<button id='btnPrev'><h4> < </h4></button>"); //create prev button
$overlay.children("div").append("<button id='btnNext'><h4> > </h4></button>"); //create next button
$("body").append($overlay); //adds tag to end of <body>, css for overlay contained in <div>

//updates the image
var updateImage = function(imageLoc, captionText){
    $image.attr("src", imageLoc); //sets $image object to loc of img so its added to overlay
    $caption.text(captionText); //Adds alt attribute text to caption so its displayed below img
};

//captures the click event, when an image is clicked
$("#imageGallery a").click(function(event){
    event.preventDefault(); //prevents browser frop opening img in new window
    var imageLoc = $(this).attr("href"); //stores attribute in var. ex: "images/space-juice.png"
    var captionText = $(this).children("img").attr("alt"); //Store text from alt attr of img's

    $index = $(this).parent().index(); //update index to current selected image
    console.log($index);
    updateImage(imageLoc, captionText); //Passes loc and caption info to update image
    $overlay.slideDown(imageLoc); //display overlay when img clicked
});

//Button Click Events
$("#btnNext").click(function(event){
    button(true);
});

$("#btnPrev").click(function(event){
    button(false);
});

var button = function(next){

    if(next == true){ //if next is true move forward an image
        $index++;
    }
    else{ //otherwise go to previous image
        $index--;
    }

    //If index is out of bounds reset to first image or last image as needed
    if($index < 0){
        $index = $galleryLength - 1;
    }
    else if($index > $galleryLength - 1){
        $index = 0;
    }

    //selects the element by index and then gets the link to the image
    var newImage = $("#imageGallery li").get($index).getElementsByTagName("a");
    //Store link information in variables
    var imageLoc = $(newImage).attr("href");
    var captionText = $(newImage).children("img").attr("alt");
    //Update the current image with new image information
    updateImage(imageLoc, captionText);

};

//captures the click event, when the overlay is clicked
$overlay.click(function(event){
    if(event.target.id == "overlay"){
        $(this).slideUp("fast");
    }
});

Answer 1

您可以轻松地为 jquery 和任何其他框架执行此操作（在 idea Ultimate 2019.2 中测试）

1. 转到文件 |设置 |语言和框架 | JavaScript |图书馆
2. 点击下载...
3. 选择jQuery（可以输入“jquery”快速找到）
4. 下载安装

通常，IDEA 现在应该能够识别 jquery 并提供文档。您可以在 IDEA 底部的检查弹出窗口（警察图标）中验证这一点