JQuery - 3

1. What is Jquery?

jQuery is a JavaScript library which has a wide range of actions such as event handling, animation, HTML document traversing, and AJAX interaction for web development. jQuery simplifies JavaScript programming.

2. $(document).ready Method

 

The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics are not loaded yet.

$(document).ready(function() {
    alert("document is ready");
}); 

 

3. Selectors

 

jQuery provides a simple way to select single element or group of elements. You can access element by type (div, span, p), id, CSS class and attribute, etc. I have explained the basic selectors here. You can find some other selectors in the attached project with examples.

jQuery	Example Code	Description
$('element')	$('blockquote').css('color','red');	It selects all elements with the given tag name. In this example, it will return all <blockquote> elements in the document.
$('#id')	$('#item1').css('color','red');	It selects single element with the given id. If more than one element has been assigned the same id, first match result will be returned.
$('.class')	$('.myCss').css('color','red');	It selects all the elements with given class.

 

4. Sliding Effect

 

jQuery provides three methods to show or hide elements in sliding behavior.

1. SlideDown(speed, callback): This method gradually increases the height of the elements, from hidden to visible.
2. SlideUp(speed, callback): This method gradually decreases the height of the elements, from visible to hidden.
3. SlideToggle(speed, callback): This method toggles between SildeUp() and SlideDown() for selected elements.

All three methods has "Speed" and "callback" parameters. The Speed parameter can have the following values:

• slow
• normal
• fast
• milliseconds, e.g., 100, 500, 1000, etc.