In this post I will be denonstrating the different ways to import jQuery and showing a quick way to check if it is working – by toggling the visibilty of a dom element

Here are some basic but useful jQuery implementation

Testing if jQuery.js is linked correctly

first thing to do in any new jquery project is check if the jQuery.js library is properly linked.
This can be done by testing the hide(); function of a basic paragraph element.

Note the linkage of jquery before the closing of the body tag as opposed to within the header, this is a better approach as it allows jquery.js to fully load first.

to use jQuery you must first import it. This can be done by either importing the jquery library from a local folder, or by getting the desired/latest version from the jquery server (note the latter will require an active internet connection for your page to work)


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> // you can target specific versions based on required compatability

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> //The latest version from the jquery server

<script type="text/javascript" src="js/jquery.js"></script>  //or locally from you computer

The best location to import the jQuery library is often debated. Often you will see it between the <head> </head> tags, however many ‘experts’ will tell you that linking right before the closing </body> will ensure that
the jquery file has been fully loaded before a script attempts to access it.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">

</head>

<body>

<p onclick="$(this).hide();">this is a paragraph </p>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>

</html>