jump to navigation

Easy Steps for Embedding JQuery-code into your HTML-code September 1, 2011

Posted by Tournas Dimitrios in JQuery.

These instructions are to help all  jQuery newbies out there who might want to use  jQuery for the first time and are wondering “how do I set jQuery up ?”. Well there are a two different ways to do this .The first way is to self host your jQuery package on your host account . Just download the latest release of the JQuery package from the official website , Save the content in a folder called “js” and upload the folder into your host . There are 2 versions of jQuery :  a minified version and a source version . I recommend that you use the minified version as it’s smaller in size and will make your web page load faster.  The main difference between these two version  is that the jQuery source version is human readable for you to check how the various jQuery functions are put together .

  • Between the html < h ead> < / head> tags write the following code :
    javascript” language=”javascript” src=”/js/jquery-1.x.x.min.js”>
  • The second way is to load your jQuery package “on the fly” . A number of large enterprises provide hosted copies of jQuery on existing CDN networks that are available for public use. Three leaders in the Internet industry provide CDN-hosted copies of jQuery that you may hotlink to . The code in the HTML page will reference the library as follows :
    <script  type=”text/javascript” language=”javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script&gt;

If you want an event to work on your page, you should call it inside the $(document).ready() function  . Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded . Just before the closing < / b ody>  tag write the following code :

<script type="text/javascript">


// Here goes all the jquery logic


Happy coding 🙂



1. allinorbit - July 16, 2012

Perhaps you can include the tag in the code above? Nice & simple post. Cheers!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s