Presented By: Sony Jain
What is jQuery
Javascript Library Fast and Concise
Simplifies the interaction between HTML and JavaScript
Why jQuery ?
Cross Browser
(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
Light Weight
Supports AJAX Animation Rich UI
Embed in your page
<html> <head> <script src=path/to/[Link] "> </script> <script> $(document).ready(function(){ // Start here }); </script> </head> <body> </body> </html>
jQuery philosophy
Find Some Elements
$(div).addClass(xyz);
Do something with them
jQuery Object
A Basic Example
$(p).addClass(red);
Selects all paragraphs. Adds a class to them.
This avoids<body> <div> <p class=red>I m a paragraph -1</p> <p class=red>I m a paragraph -2</p> </div> <p class=red>I m another paragraph</p> </body>
Selector Basics
Selecting By Id $(#header) Selecting By Class $(.updated) Selecting by tag name $(table) Combine them $([Link]-list) $(#footer [Link] li)
(In the div with id=footer find li under list with class=menu)
Basic Selector Example
$([Link] li) <body> <div id=header> <span id=logo>Logo here</span> <ul class=menu> <li>user name</li> .. <li>logout</li> </ul> </div> </body>
Jquery Events
click(), bind(), unbind(), change(), keyup(), keydown, ..and many more Start when DOM is ready
$(document).ready(function(){
$(selector).eventName(function(){});
});
Event Example
$(document).ready(function(){
$(#message).click(function(){ $(this).hide(); }) }); <span id=message onclick=> blah blah </span>
Iterating thro Elements
.each() To iterate, exclusively, over a jQuery object
$.each() To iterate over any collection, whether it is a map (JavaScript object) or an array.
.each() Example
<script type="text/javascript"> $(document).ready(function () { $("span").click(function () { $("li").each(function () { $(this).toggleClass("example"); }); }); }); </script>
$.each() Example
var arr = ["one", "two", "three", "four", "five"]; var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $(document).ready(function () { [Link](arr, function () { $("#" + this).text("Mine is " + this + "."); return (this != "three"); // will stop running after "three" }); [Link](obj, function (i, val) { $("#" + i).append([Link](" - " + val)); }); });
$.extend()
Merge the contents of two or more objects together into the first object. Syntax $.extend( [ deep ], target, object1, [ objectN ] )
deep target - If true, the merge becomes recursive. - The object to extend. It will receive the new properties.
object1 - An object containing additional properties to merge in. objectN - Additional objects containing properties to merge in.
$.extend() - Example
Merge two objects, modifying the first
var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" };
[Link](settings, options);
Result: settings == { validate: true, limit: 5, name: "bar" }
$.extend() - Example
Merge two objects recursively, modifying the first.
var settings = { validate: false, font: {family: Arial, size: 12px}, name: abc" }; var options = { validate: true, font: {family: Verdana}, name: xyz" }; [Link]( true, settings, options); Result: settings == { validate: true, font: {family: Verdana, size: 12px}, name: xyz" }
$.extend() - Example
Merge defaults and options, without modifying the defaults. This is a common plugin development pattern.
var empty = {} var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options); Result: settings == { validate: true, limit: 5, name: "bar" } empty == { validate: true, limit: 5, name: "bar" }
$.[Link]()
Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
Syntax
need an anonymous function to wrap around your function to avoid conflict
//You
(function($){
//Attach this new method to jQuery
$.[Link]({
//This is where you write your plugin's name
pluginname: function() {
//Iterate over the current set of matched elements
return [Link](function() {
//code to be inserted here
} });
});
$.[Link]() - Example
Reverse Text of Odd rows
<script type="text/javascript">
$(document).ready(function () { $('ul li:odd').reverseText({ minlength: 6, maxlength: 10 }); });
</script> <body> <form id="form1" runat="server"> <div> <ul id="menu"> <li>Home</li> <li>Posts</li> <li>About</li> <li>Contact Us</li> </ul> </div> </form> </body>
Desired Result
$.[Link]() - Example
(function($) { // jQuery plugin definition $.[Link] = function(params) { //$.[Link]({ reverseText: function(params) {
// merge default and user parameters params = $.extend( {minlength: 0, maxlength: 99999}, params); // traverse all nodes [Link](function() {
// express a single node as a jQuery object var $t = $(this);
// find text var origText = $[Link](), newText = ''; // text length within defined limits? if ([Link] >= [Link] && [Link] <= [Link]) { // reverse text for (var i = [Link]-1; i >= 0; i--) newText += [Link](i, 1); $[Link](newText); } }); // allow jQuery chaining return this; }; });
Jquery and AJAX
[Link]() or $.ajax()
Performs an asynchronous HTTP (Ajax) request.
[Link]()
The $.ajax() function underlies all Ajax requests sent by jQuery At its simplest, the $.ajax() function can be called with no arguments:
$.ajax();
Note: Default settings can be set globally by using the $.ajaxSetup() function
Several higher-level alternatives like $.get() and .load() are available and are easier to use. If less common options are required, though, $.ajax() can be used more flexibly.
[Link]()
Syntax
$.ajax({ type: type, url: url, data: data, success: success, dataType: dataType });
Type that describes whether the request if GET or POST URL of the HTTPHandler Data specifying the querystring
Success defining a function which manipulates the response from the handler
DataType Different data handling can be achieved by using the dataType option. The dataType can be plain xml, html, json, jsonp, script, or text.
[Link]() : Example
Save some data to the server and notify the user once it's complete.
$.ajax({ type: "POST", url: "[Link]", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
Thank You
