在 html 中链接 jquery

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14106864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:16:31  来源:igfitidea点击:

linking jquery in html

jquery

提问by Miles Bardan

I can't manage to successfully link jQuery to my html. I have made the most simple jQuery code possible just so I know it's right, and I've tried everything I can think of - searching hasn't been helpful..

我无法成功地将 jQuery 链接到我的 html。我已经使最简单的 jQuery 代码成为可能,所以我知道它是正确的,而且我已经尝试了所有我能想到的 - 搜索没有帮助..

my html(file name: "test.html":

我的 html(文件名:“test.html”:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="css/text" href="test.css"/>
        <script type="text/javascript" src="test.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    </head>
    <body>
        <div id="orange"></div>
    </body>
</html>

my CSS(file name: "test.css"):

我的 CSS(文件名:“test.css”):

#orange {
    height: 100px;
    width: 100px;
    background-color: orange;
    border-radius: 5px;
    border: 3px solid black;
    margin-left: 100px;
    margin-top: 100px;
    display: none;
}

my JS(file name: "test.js"):

我的 JS(文件名:“test.js”):

$(document).ready(function() {
    $('div').fadeIn('slow');
});

The console is showing that the jQuery link is loading in 6.52s.

控制台显示 jQuery 链接在 6.52 秒内加载。

I have also tried to link from the jQuery file I downloaded at

我还尝试从我下载的 jQuery 文件链接

<script src="C:\jQuery\jquery.js"></script> 

which also failed miserably...

也惨败……

I did however manage to link jQuery UI somehow and run ".accordion()"... =/

然而,我确实设法以某种方式链接 jQuery UI 并运行“.accordion()”... =/

回答by kennypu

In this case, your test.jswill not run, because you're loading it before jQuery. put it after jQuery:

在这种情况下,您test.js将不会运行,因为您在 jQuery 之前加载它。把它放在 jQuery 之后:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="test.js"></script>

回答by AgnosticDev

Add your test.js file after the jQuery libraries. This way your test.js file can use the libraries.

在 jQuery 库之后添加您的 test.js 文件。这样你的 test.js 文件就可以使用这些库了。

回答by user2686227

Seeing the answers I have nothing else to add but one more thing:

看到答案我没有别的补充,只有一件事:

in your test.html file you have written

在您编写的 test.html 文件中

link rel="stylesheet" type="css/text" href="test.css"/

链接 rel="stylesheet" type="css/text" href="test.css"/

see where you have written

看看你写的地方

type="css/text"

类型=“CSS/文本”

there you need to change into

在那里你需要变成

type="text/css"

类型=“文本/CSS”

so it will look like that

所以它看起来像那样

link rel="stylesheet" type="text/css" href="test.css"/

链接 rel="stylesheet" type="text/css" href="test.css"/

and in this case the CSS file will be linked to HTML file

在这种情况下,CSS 文件将链接到 HTML 文件

回答by Alejandro Serret

<script
 src="CDN">
</script>

for change the CDN check thiswebsite.

如需更改 CDN,请查看网站。

the first one is JQuery

第一个是 JQuery

回答by almost a beginner

I had a similar issue, but in my case, it was my CSS file.

我有一个类似的问题,但就我而言,这是我的 CSS 文件。

I had loaded my CSS file before the JQuery library, since my jquery function was interaction with my css file, my jquery function wasn't working. I found this weird, but when I loaded the CSS file after loading the JQuery library, it worked.

我在 JQuery 库之前加载了我的 CSS 文件,因为我的 jquery 函数与我的 css 文件交互,我的 jquery 函数不起作用。我发现这很奇怪,但是当我在加载 JQuery 库后加载 CSS 文件时,它起作用了。

This might not be directly related to the Question, but it may help others who might be facing a similar problem.

这可能与问题没有直接关系,但它可能会帮助可能面临类似问题的其他人。

My issue:

我的问题:

    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="slider.js"></script>

My solution:

我的解决方案:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="slider.js"></script>