jQuery Simplified

jQuery                                                                    
  • jQuery is a Lightweight and CrossBrowser Javacript Library.
  • jQuery has simplified javascript programming
  • It reduces the lines of code written in javascript
  • It Provides great UI affects.
  • helps to Traverse HTML DOM.
  • provides Animation
  • Add Ajax interactions.
  • Manipulate Page content.

jQuery helps in

  • Selection of the HTML elements
  •  Manipulation of the HTML elements
  •  Helps in CSS manipulation
  •  Helps in COOL UI effect and animations.
  •  Traversal of HTML DOM and manipulation
  • Ajax
jQuery can be added to webpage like

<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0″></scri
pt>
jQuery library comes in a single javascript file
There are two ways of using the jQuery library in project
1) download the latest version of jQuery file (.js ) from www.jQuery.com
2) Refer to the external URL
  • <head>
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
    </head>
  • OR
  • <head>
    <script type=”text/javascript” src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js”></script>
    </head>
Get Started with jQuery
Most of the jQuery is contained in the “Document Ready” handler.
$(document).ready(function() {
// all jQuery code goes here
});
This ensure that jQuery code does not run until the DOM is ready to avoid any error in the scenario the element being accessed doesnt actually exists.jQuery Selector
In jQuery , its selects the HTML elements and perform action on them
HTML element is selected by wrapping then in $(“”) i.e jQuery Wrapper.
$ sign here is an alias of jQuery or define jQuery.
Few Examples of jQuery Select :
$(“div”) – selects all the HTML div elements on the page
$(“#element1″) – selects the element having ID “element1″ from the page
$(“.cssClass”) – Selects the HTML having the CSS class “.cssClass”
$(“p#element1) – Selects the paragraph containing the element with ID “element1″few examples of jQuery Attribute selector
$(“[href]“) – Selects all elements with “href” attribute
$(“[href='#']“) – Selects all elements with “href” value equals to #
$(“[href='.jpg']“) – Selects all elements with “href” attribute that ends with “.jpg”Few jQuery Actions to be performed on the elements

$(this).hide() – hides the current element
$(“#element1″).hide() – hides the element having ID “element1″ from the page
$(“.cssClass”).hide() – hides the HTML having the CSS class “.cssClass”
$(“p#element1).hide() – hides the paragraph containing the element with ID “element1″jQuery Selector helps to select and manipulates a single HTMLelement or a group of elements


Jquery helps you to add,remove and toggle CSS classes.

  • $(“div”).addClass(“cssClassName”);
    • - Add CSS class “cssClassname” to all <div> element.
  • $(“div”).removeClass(“cssClassName”);
    • - Removed CSS class “cssClassname” from all <div>element.
  • $(“div”).toggleClass(“cssClassName”);
    • - Toggle CSS class “cssClassname” to all <div> element. ( i.e adds if there is no Class , remove if class is specified for the <div>)
  • $(“#element1).hasClass(“cssClassName”)
    •  – this verifies if the mentioned element has the CSS specified or not.
jQuery can be used to manipulate CSS styles as well
$(“p”).css(“width”, “400px”); // adds a width to all paragraphs
$(“#element1″).css(“color”, “blue”) // makes text color blue on element#element1
$(“ul”).css(“border”, “solid 1px #ccc”) // adds a border to all lists
jQuery Events
 
jQuery also handles the event raised by any action performed on the screen
All the event handling code is written inside Handler methods written within the <script> tag within<head>
Sample code to explain event handling – Click to see the final output
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0″></script>
<script type=”text/javascript”>
$(document).ready(function(){
  $(“p”).click(function(){
    $(this).hide();
  });
});
$(document).ready(function(){
$(“#button1″).click(function(){
$(“p”).hide();
  });
});
$(document).ready(function(){
$(“#button2″).click(function(){
$(“p”).toggle();
  });
});
$(document).ready(function(){
 $(“.cssClass”).click(function(){
$(“p”).toggle();
});
});
$(document).ready(function(){
 $(“#button3″).click( function() {
  $(“.cssClassHide”).hide(“1000″);
  });
});
$(document).ready(function(){
 $(“#button4″).click(function() {
  $(“.cssClassHide”).toggle(“1000″);
  });
});
$(document).ready(function(){
 $(“#button5″).click(function() {
  $(“#fade”).fadeIn(“fast”);
  });
});
$(document).ready(function(){
 $(“#button6″).click(function() {
  $(“#fade”).fadeOut(“slow”);
  });
});
$(document).ready(function(){
 $(“#button7″).click(function() {
  $(“#fade”).fadeTo(200,0.4);
  });
});
$(document).ready(function(){
 $(“#button8″).click(function() {
  $(“#slide”).slideDown(“fast”);
  });
});
$(document).ready(function(){
 $(“#button9″).click(function() {
  $(“#slide”).slideUp(“slow”);
  });
});
$(document).ready(function(){
 $(“#button10″).click(function() {
  $(“#slide”).slideToggle(“slow”);
  });
});
$(document).ready(function(){
  $(“#button11″).click(function(){
    $(“#divanimate”).animate({height:300},”slow”);
    $(“#divanimate”).animate({width:300},”slow”);
    $(“#divanimate”).animate({height:100},”slow”);
    $(“#divanimate”).animate({width:100},”slow”);
  });
});
</script>
<style type=”text/css”>
div.panel,p.cssClass,p.cssClassHide,p.cssClassShow
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<p>Click to make be disappear</p>
<p>Click me away!</p>
<button id=”button1″>Click me to hide the paragraph</button>
<button id=”button2″>Click me to toggle (hide/show)</button>
<p> Selecting element by cssClass<p>
<p> Sample to Show Slow hide/show<p>
<p> Sample to Show Slow show/show<p>
<button id=”button3″>Slow Hiding</button>
<button id=”button4″>Fast Showing</button>
<div id=”fade” style=”background:yellow;width:300px;height:300px”></div>
<button id=”button5″>Fade In</button>
<button id=”button6″>Fade Out</button>
<button id=”button7″>Fade to</button>
<div id=”slide” style=”background:red;width:200px;height:200px”></div>
<button id=”button8″>Slide Down</button>
<button id=”button9″>Slide Up</button>
<button id=”button10″>Slide Toggle</button>
<p><button id=”button11″>Animate</button></p>
<div id=”divanimate” style=”background:black;width:200px;height:200px”></div>
</body>
</html>
** we can keep the jQuery functions in separate .js file and can call in different pages.
Show and Hide elements with Jquery
The syntax for showing, hiding an element (or toggling show/hide) is:
$(“#element1″).hide(“slow”, function() {
$(“.cssClassHide”).hide(“1000″);
}
$(“#element1″).show(“fast”, function() {
$(“.cssClassHide”).toggle(“1000″);
}
$(“#element1″).toggle(1000, function() {
$(“.cssClassHide”).toggle(“1000″);
}
You can also specifically choose to fade an element in or out, which is always done by animation:
$(document).ready(function(){
$(“#button5″).click(function() {
$(“#fade”).fadeIn(“fast”);
  });
});

$(document).ready(function(){
$(“#button6″).click(function() {
$(“#fade”).fadeOut(“slow”);
});
});

To fade an element only partially, either in or out:

$(document).ready(function(){
$(“#button7″).click(function() {
$(“#fade”).fadeTo(200,0.4);
});
});

The second parameter (0.4) represents “opacity”

jQuery Animations and Effects

$(document).ready(function(){
$(“#button8″).click(function() {
$(“#slide”).slideDown(“fast”);
});
});

$(document).ready(function(){
$(“#button9″).click(function() {
$(“#slide”).slideUp(“slow”);
});
});

$(document).ready(function(){
$(“#button10″).click(function() {
$(“#slide”).slideToggle(“slow”);
});
});

Animate 

$(document).ready(function(){
$(“#button11″).click(function(){
$(“#divanimate”).animate({height:300},”slow”);
$(“#divanimate”).animate({width:300},”slow”);
$(“#divanimate”).animate({height:100},”slow”);
$(“#divanimate”).animate({width:100},”slow”);
});
});

No Comments Yet.

Leave a comment