- What is JQuery?
- JQuery makes it easy to navigate a document and select DOM elements.
- JQuery handles events effectively.
- 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.
- 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 tags as shown below:XHTML1<script>---</script>
- 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:
- 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 :
- 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:
The .addClass() action will add the class “myClass” to all div tags.
The .css() action will let us add css style to an element.
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:
- 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:
- Key down
- Show/Hide Elements
- We can show and hide elements with JQuery.
- These methods are shown below:
- We can also add animations to elements with JQuery.
- Some of the methods are shown below:
- 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.
- 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.
- 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.
// all jquery code goes here
// do something when a link i.e. anchor tag is clicked.
//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.
//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.
//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.
//Do something when slidedown is finished
//Do something when slideup is finished
//Do something when slide up/down is finished
Thus we finished an overview of JQuery fundamentals.