JQuery Fundamentals

Last time we went through javascript fundamentals. Today we will go through the fundamentals of a javascript library “JQuery”.

• What is JQuery?
• JQuery is a multi-browser javascript library. It is supported by all major browsers including Internet Explorer 6.
• It is nothing more than a bunch of javascript code.
• The purpose of javascript is to make it more easy to use javascript in a website.
• JQuery is just one file that can be downloaded and included in the document. It contains a complicated javascript code in it.
• Many common tasks that require a lot of javascript code to accomplish are wrapped into methods that can be called with a single line of code.
• JQuery makes it easy to navigate a document and select DOM elements.
• JQuery handles events effectively.
• We can use JQuery to create plugins on top of the javascript library.
• Tasks that can be done using JQuery
• Effects and Animations (Slideshows, tabs, etc.)
• Handle events (clicks, toggle, hover, etc.)
• Feature Detection.
• Manipulate the DOM (Document Object Model).
• Develop Ajax applications and work with Ajax etc.

<script type=”text/javascript” src=”jquery.js”></script>

• How to use JQuery?
• We can download JQuery from “jquery.com” site and include it in our html document.
• This downloaded file can be included in the head section of the html document in the

  <script>---</script>

  tags as shown below:

• Next way to use JQuery is CDN (Content Delivery/Distribution Network). CDN is a way to use a library or document hosted by another service.
• We can use a hosted library such as Google and simply include the link in our document as shown below:

<script src=”//ajax.googleapix.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

• This is a quick way of doing it.
• We will find all Google’s libraries at developers.google.com/speed/libraries/
• Document Ready Handler
• Whenever we write a JQuery code in our html document, it should be executed only after the whole website is loaded in the browser i.e. only after the document is ready for it.
• When we include our external JQuery scripts or we add JQuery to the head area, we need to first check if the document is ready. If we don’t do this our JQuery code will run before the rest of the code and hence no action will be performed when required.
• To ensure that the JQuery runs only after the website is ready, the following syntax is used :

$(document).ready(function() {
 // all jquery code goes here
});

• Here, $ stands for JQuery.
• In the above syntax, $(document).ready indicates that the jqury code will execute only after the given document is ready and the function contains all the jquery code.
• Selecting Elements
• One of the reasons that JQuery is so powerful is that we can grab and select virtually anything in the DOM.
• This anything could be divs, lists, paragraphs or any other tags or elements.
• The task of selecting elements is done by wrapping them in $(“”).
• Some examples and their description is shown below:
• $(“div”) – this will select all div tags.
• $(“#myDiv”) – this will select the div tag with id of “myDiv”.
• $(“p.myClass”) – this will select the paragraph with class of “”myClass”.
• JQuery Actions
• Action is performing something with a selected element.
• Once we grab something with a selector, we can do things with it such as calling an action.
• Some action examples are shown below:

• $(“div”).addClass(“myClass”);

  The .addClass() action will add the class “myClass” to all div tags.

• $(“#myClass”).css(“color”,”red”);

  The .css() action will let us add css style to an element.

• var myElement=$(“#myElement”).html();

  We can get all of the html inside an element using .html() action.

• In the above example, .html() action gets all the html code of the element whose idis myElement and stores it in the variable myElement.
• JQuery Events
• We can use JQuery to handle number of events.
• Here is an example demonstrating how to use click event:

$("a”).click(function(){
   // do something when a link i.e. anchor tag is clicked.
});

• In the above example, the click event will occur when the user clicks on any hyperlink and the function written in the click event will execute after the event occurs.
• Some other events are:
• Blur
• Focus
• Hover
• Key down
• load
• Show/Hide Elements
• We can show and hide elements with JQuery.
• These methods are shown below:

$("#myElement”).hide(function(){
	//do something once the element is hidden
});

Here, hide will hide the element with id “myElement” and execute the function written as soon as the element is hidden.

$(“#myElement”).show(function(){
	//do something once the element is shown
});

Here, show will show the element with id “myElement” and execute the function written as soon as the element is shown.

$(“#myElement”).toggle(function(){
	//do something once the element is shown/hidden
});

Here, toggle will show or hide the element with id “myElement” and execute the function written as soon as the element is shown or hidden.

• Animations
• We can also add animations to elements with JQuery.
• Some of the methods are shown below:

$(“#myElement”).slideDown(“fast”,function(){
	//Do something when slidedown is finished
});

• Here, slideDown will allow the element with id “myElement” to slide downwards.
• This method takes parameters as speed and a function to be executed after the element has been slided down completely.
• The value of speed parameter is fast, that means the element will move downwards rapidly.

$(“#myElement”).slideUp(“slow”,function(){
	//Do something when slideup is finished
});

• Here, slideUp will allow the element with id “myElement” to slide upwards.
• function will be executed after the element has been slided upward completely.
• The value of speed parameter is slow, that means the element will move downwards slowly.

$(“#myElement”).slideToggle(“1000”,function(){
	//Do something when slide up/down is finished
});

• Here, slideToggle will allow the element with id “myElement” to slide upwards/downwards.
• function will be executed after the element has been slided upward or downward completely.
• The value of speed parameter is 1000, that means the element will move upwards/downwards according to the value given.
• The speed parameter can be given a numeric value or keywords such as fast/slow etc.

Thus we finished an overview of JQuery fundamentals.