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.
