linking jquery in html

jquery

216404 просмотра

5 ответа

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..

my html(file name: "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"):

#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"):

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

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

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

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

which also failed miserably...

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

Автор: Miles Bardan Источник Размещён: 12.11.2019 09:56

Ответы (5)


48 плюса

Решение

In this case, your test.js will not run, because you're loading it before jQuery. put it after 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>
Автор: kennypu Размещён: 31.12.2012 11:49

3 плюса

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

Автор: AgnosticDev Размещён: 31.12.2012 11:49

1 плюс

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

in your test.html file you have written

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

see where you have written

type="css/text"

there you need to change into

type="text/css"

so it will look like that

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

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

Автор: user2686227 Размещён: 15.08.2013 02:32

0 плюса

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

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.

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>
Автор: almost a beginner Размещён: 20.11.2016 05:29

0 плюса

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

for change the CDN check this website.

the first one is JQuery

Автор: Alejandro Serret Размещён: 21.01.2016 12:19
Вопросы из категории :
32x32