Learn jquery from beginners to advanced level - part 1

In this programming tutorial we will learn jquery from beginners to advanced level.
Jquery is the widely used javascript library now and nowadays it is being widely used by web developers. So let's start.

What’s the problem with JavaScript?
JavaScript was an initially introduced in Netscape 2.0B3 in Dec 1995, a.k.a. Mocha, LiveScript, Jscript; however, its official name is ECMAScript.

JavaScript is a C-family, world’s worst named, extremely powerful language (not a script), totally unrelated to Java.

JavaScript is a weakly typed, classless, prototype based OO language that can also be used outside the browser. It is not a browser DOM.

The world’s most misunderstood programming language.

Browser DOM really sucks, and this is where jQuery comes to rescue.

Why use Javascript Libraries?

• Cross browser javascript handling
• Better selection and manipulation
• Event binding and triggering
• Ajax

Introduction to jQuery

A Quality of Life by jQuery:

$("#firstName").text("Joe Black");
$("button").click(function() {alert "Clicked";});
$(".content").hide();
$("#main").load("content.htm");
$("<div/>").html("Loading…").appendTo("#content");

Very compact and fluent programming model

What is jQuery?

jQuery is a lightweight, open-source JavaScript library that simplifies interaction between HTML and JavaScript.

It was and still being developed by John Resig from Mozilla and was first announced in January 2006.

It has a great community, great documentation, tons of plug-ins, and it was recently adopted by Microsoft.

A fast, concise, javascript library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.

– Concise (19 KB after minified and gzipped)
– Traverse HTML documents (selectors, traversing, manipulation )
– Events (binding and triggering events)
– Animation (predefined, UI)
– AJAX



The current version is 1.6.2 as of august 2011.

Getting Started

Download the latest version from http://jquery.com

To enable itellisense in VS 2008 SP1 install the –vsdoc hotfix:
VS90SP1-KB958502-x86.exe

Copy the jquery.js and the jquery-vsdoc.js into your application folder

Reference it in your markup

<script src="jquery.js"/>

jQuery Core Concepts

The Magic $() function

Create HTML elements on the fly

var el = $("<div/>")

Manipulate existing DOM elements

$(window).width()
Selects document elements (more in a moment…)

$("div").hide();
$("div", $("p")).hide();

Fired when the document is ready for programming.

$(function(){…});

Better use the full syntax:

$(document).ready(function(){…});

The full name of $() function is

jQuery("div");

It may be used in case of conflict with other frameworks/libraries. avoid jquery conflict with other javascript libraries

The library is designed to be isolated

(function(){
var 
jQuery=window.jQuery=window.$=function(){
// … 
};
})();

jQuery uses closures for isolation


Avoid $() conflict with other frameworks

var foo = jQuery.noConflict();
// now foo() is the jQuery main function
foo("div").hide();
// remove the conflicting $ and jQuery
var foo = jQuery.noConflict(true);

jQuery's programming philosophy is: GET >> ACT

$("div").hide()
$("<span/>").appendTo("body")
$(":button").click()

Almost every function returns in jQuery, which provides a fluent programming interface and chain-ability:

$("div").show().addClass("main").html("Hello jQuery");

Three Major Concepts of jQuery
1) The $() function
2) Get > Act
3) Chainability

jQuery Selectors

All Selector

$("*") 		// find everything

Selectors return a pseudo-array of jQuery elements

Basic Selectors
By Tag:

$("div") 
// <div>Hello jQuery</div>

By ID:

$("#usr")
// <span id="usr">John</span>

By Class:

$(".menu")	
// <ul class="menu">Home</ul>

Yes, jQuery implements CSS Selectors!

More Precise Selectors

$("div.main") 	// tag and class
$("table#data")	// tag and id

Combination of Selectors

// find by id + by class
$("#content, .menu")
// multiple combination
$("h1, h2, h3, div.content")

Hierarchy Selectors

$("table td") 		// descendants
$("tr > td") 		// children
$("label + input") 	// next
$("#content ~ div") 	// siblings

Selection Index Filters

$("tr:first")	// first element
$("tr:last")	// last element
$("tr:lt(2)") 	// index less than
$("tr:gt(2)") 	// index gr. than 
$("tr:eq(2)") 	// index equals

Visibility Filters

$("div:visible")	// if visible
$("div:hidden")	// if not

Attribute Filters

$("div[id]")			// has attribute
$("div[dir='rtl']")		// equals to
$("div[id^='main']") 	// starts with
$("div[id$='name']") 	// ends with
$("a[href*='msdn']") 	// contains

Forms Selectors

$("input:checkbox")	// checkboxes
$("input:radio")		// radio buttons
$(":button") 		// buttons
$(":text") 			// text inputs

Forms Filters

$("input:checked")	// checked
$("input:selected")	// selected
$("input:enabled")	// enabled
$("input:disabled")	// disabled

Find Dropdown Selected Item

<select name="cities">
<option value="1">Islamabad</option>
<option value="2" selected="selected">Tokyo</option>
<option value="3">London</option>
</select>

$("select[name='cities'] option:selected").val()

So that's it. Other parts of this tutorial series are coming soon. Stay tuned.