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
SHOWSAMPLE 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
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>
