JQUERY Position

Click Here

The JQUERY code can be placed in 2 different positions:

1.- JQUERY code placed in the same HTML document

JQUERY source code is placed directly in the head section of the HTML document.

Example HTML document JQUERY code:

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("p").hide(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>

Explaining the example

The document indicates where the library JQUERY is

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

JQUERY source inserted between <script> and </script>

$(document).ready(function() {
$("button").click(function() { $("p").hide(); }); });

To indicate that the JQUERY code will run when the HTML page is fully loaded in the browser (recommended).

To indicate that you are performing a function to "click" on the "button"

$("button").click(function() {

To indicate that it will hide all <p> paragraphs of HTML document


2.- JQUERY code placed in a separate file

To make it easier to keep our JQUERY code, we are placed in a separate file from the HTML file.

For example JQUERY place our code in the file "jquery1.js"

$(document).ready(function() { $("button").click(function() { $("p").hide(); }); });

Now in our HTML page, we refer to our JQUERY file created before.

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery1.js"></script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>

Click Here