Monday, June 3, 2013

Learning jQuery in 24 Hours

jQuery is a JavaScript Library  It simplifies JavaScript programming.

efore you start studying jQuery, you should have a basic knowledge of:

You can use jQuery library online
or from your hard drive by including in the header section on your web page.

To use jQuery from Google, use one of the following:
Google CDN:

<script src="//">

The jQuery library contains the following features:
  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

jQuery Syntax
The jQuery syntax selects HTML elements and perform action on the element(s).

Basic syntax is: $(selector).action()

$ sign is used to define the jQuery
selector is the id of HTML element
action() is the action to be performed on element(s)


$(this).hide() - hides the current element.
$("top").hide() - hides all elements of class="top"
$("p").hide() - hides all <p> elements.
$("#px").hide() - hides the element with id="px".

The element Selector
The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page  with 

When a you click on a button, all <p> elements will be hidden:


The #id Selector
The  #id selector finds a specific element with #id

When a user clicks on #test, it gets hidden


The .class Selector

$("*") Selects all elements
$(this) Selects the current HTML element
$("p.ix") Selects all <p> elements with class="ix"
$("p:first")  Selects the first <p> element
$("ul li:first") Selects the first <li> element of first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]")  Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

An event represents the precise moment when something happens.

Mouse Events
click, dblclick, mouseenter, mouseleave

Keyboard Events
keypress, keydown, keyup

Form Events
submit, change, focus, blur

Document/Window Events
load, resize, scroll, unload

Query Syntax For Event Methods
To assign a click event to all <p>s

The next step is to define what should happen when the event fires.  
You must pass a function to the event:

  // action goes here!!

Common Events 

//--------------------click event


//--------------------double click event


//--------------------mouseenter event

  alert("You entered p1!");

//--------------------mouseleave event

  alert("Bye! You now leave p1!");

//--------------------mousedown event

  alert("Mouse down over p1!");

//--------------------mouseup event

  alert("Mouse up over p1!");

//--------------------hoover event

  alert("You entered p1!");
  alert("Bye! You now leave p1!");

//--------------------focus event


//--------------------blur event


//-----------------------hide event

jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show() methods:



//-------------------- Toggle event

jQuery toggle()


//------------------jQuery Fading Methods




//------------------ jQuery Fading Out Methods


//---------------------jQuery fadeToggle() Method


jQuery fadeTo() Method


jQuery Sliding Methods






JQuery Animations 
The jQuery animate() method is used to create custom animations.



jQuery stop() Method
 stop() method is used to stop an animation or effect


//----------------jQuery Callback Functions
JavaScript statements are executed line by line. 
In effects, the next line of code can be run even though the effect is not finished. 
It can create errors. hence callback functions are used

    alert("The paragraph is now hidden");

//---------------jQuery Method Chaining

//--------Get Content - text(), html(), and val()

  alert("Text: " + $("#test").text());
  alert("HTML: " + $("#test").html());

//------------how to get the value of an input field 

  alert("Value: " + $("#test").val());

//----------------how to get the value of the href attribute in a link:


Callback Function for text(), html(), and val()

    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 

    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")"; 

//------------how to change (set) the value of the href attribute in a link:


//---------- how to set both the href and title attributes at the same time:

    "href" : "",
    "title" : "Welcome to Chat"

//--- The jQuery append() method inserts content AT THE END of the selected HTML elements.

$("p").append("Some appended text.");

//------The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.

$("p").prepend("Some prepended text.");

//-----Add Several New Elements With append() and prepend()

function appendText()
var txt1="<p>Text.</p>";               // Create element with HTML  
var txt2=$("<p></p>").text("Text.");   // Create with jQuery
var txt3=document.createElement("p");  // Create with DOM
$("p").append(txt1,txt2,txt3);         // Append the new elements 

//-----jQuery after() and before() Methods

$("img").after("Some text after");
$("img").before("Some text before");

function afterText()
var txt1="<b>I </b>";                    // Create element with HTML  
var txt2=$("<i></i>").text("love ");     // Create with jQuery
var txt3=document.createElement("big");  // Create with DOM
$("img").after(txt1,txt2,txt3);          // Insert new elements after img

//----The jQuery remove() method removes the selected element(s) and its child elements.


//----jQuery empty() method removes the child elements of the selected element(s).


//---- jQuery addClass() Method

  $("#div1").addClass("important blue");

//---- jQuery removeClass() Method

  $("#div1").removeClass("important blue");

//-------toggleClass() Method

// read and set a CSS property


//multiple CSS set

jQuery - Dimensions


//-------Width & Height

  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();

Outer width & Outer height

  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();

Query AJAX?

AJAX = Asynchronous JavaScript and XML.
AJAX help loading data in the background and display it on the webpage, without reloading the whole page.

jQuery - AJAX load() Method

      alert("External content loaded successfully!");
      alert("Error: "+xhr.status+": "+xhr.statusText);

HTTP Request: GET vs. POST

GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource

//---------------jQuery $.get() Method

    alert("Data: " + data + "\nStatus: " + status);

//---jQuery - The noConflict() Method

The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.

    jQuery("p").text("jQuery is still working!");

Good Animation Examples

Jquery Mobile

No comments:

Post a Comment