Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

linking jquery in html

Tags:

jquery

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()"... =/

like image 423
Miles Bardan Avatar asked Dec 31 '12 23:12

Miles Bardan


People also ask

How do I link jQuery to my HTML?

By downloading the jQuery library locally 0. min. js file in a directory of your website, e.g. /jquery. We can link jQuery in an HTML page by using a script tag and providing the downloaded jQuery library file address as the src attribute.

How does jQuery work with HTML?

At its core, jQuery is used to connect with HTML elements in the browser via the DOM. The Document Object Model (DOM) is the method by which JavaScript (and jQuery) interact with the HTML in a browser. To view exactly what the DOM is, in your web browser, right click on the current web page select “Inspect”.


2 Answers

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> 
like image 200
kennypu Avatar answered Sep 20 '22 07:09

kennypu


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

like image 36
AgnosticDev Avatar answered Sep 20 '22 07:09

AgnosticDev