Jquery Basics

Jquery Basics

jQuery Stucture
$ = jquery, selector is a DOM element and function execute a jquery fuction.
$(selector).function(parameters);

DOM - Document Object Model Wiki

Selectors

-> Select DOM elements eg: $('h1') ,$('div'), $('li')..
-> Select ID : $('#id_name')
-> Select Class : $('.class_name')



1. Click() Event

LINK

2. Hide and Show With Click Event

HIDE

SHOW

SAMPLE HIDE SHOW BOX

Effects

Fading Out and In : $(selector).fadeOut() and $(selector).fadeIn()
Sliding Up and Down : $(selector).slideUp() and $(selector).slideDown()
Sliding Toggle : $(selector).slideToggle()
Custom animation effect : $(selector).animate()


3. Fading Effect

fadeOut()

fadeIn()

A SAMPLE OF FADE OUT FADE IN

Attributes

attr()
attr() method makes it easy to retrieve a property value from the matched element. $(selector).attr(properties); Eg Attributes: id, class, title, src, href, etc

4. attr()

link

5. Change CSS

	
		

		Sample text!

		



		Testing!

	

	



	
Click me

	

	

6. Add/Remove attribute

	
jQuery: Add/Remove attribute

	


	This is my LINK

	

	

		

7. Add css style on clicking the link
$(document).ready(function(){
$("#clickme").click(function(){
$("#content").css({"color":"green","font-size":"20px"});
});
});
<div id="clickme">Click me</div>
<div id="content">
Contents
</div>