jQuery from the very beginning
-
Upload
anis-ahmad -
Category
Technology
-
view
21.387 -
download
3
description
Transcript of jQuery from the very beginning
![Page 1: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/1.jpg)
phpXperts - 09
![Page 2: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/2.jpg)
phpXperts - 09
What is jQuery
Javascript Library
Fast and concise
Simplifies the interaction between HTML and JavaScript
![Page 3: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/3.jpg)
phpXperts - 09
Why jQuery?
Lightweight : 19KB in size (Minified and Gzipped)
CSS1 - 3 Complaint
Cross Browser (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
![Page 4: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/4.jpg)
phpXperts - 09
Why jQuery?
Lightweight : 19KB in size (Minified and Gzipped)
CSS1 - 3 Complaint
Cross Browser (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
Great Community Plugins
Tutorials TestCoverage
Open (free) license Books
![Page 5: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/5.jpg)
phpXperts - 09
A ajax and DOM manipulation exampleif (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1;
document.ATTRIBUTE_NODE = 2; document.TEXT_NODE = 3; document.CDATA_SECTION_NODE = 4; document.ENTITY_REFERENCE_NODE = 5; document.ENTITY_NODE = 6; document.PROCESSING_INSTRUCTION_NODE = 7; document.COMMENT_NODE = 8; document.DOCUMENT_NODE = 9; document.DOCUMENT_TYPE_NODE = 10; document.DOCUMENT_FRAGMENT_NODE = 11; document.NOTATION_NODE = 12; } document._importNode = function(node, allChildren) { switch (node.nodeType) { case document.ELEMENT_NODE: var newNode = document.createElement(node » .nodeName); /* does the node have any attributes to add? */ if (node.attributes && node.attributes » .length > 0) for (var i = 0; il = node.attributes.length; » i < il) newNode.setAttribute(node.attributes » .nodeName, node.getAttribute(node.attributes[i++] » .nodeName)); /* are we going after children too, and does » the node have any? */ if (allChildren && node.childNodes && » node.childNodes.length > 0) for (var i = 0; il = node.childNodes.length; » i < il) newNode.appendChild(document._importNode » (node.childNodes[i++], allChildren)); return newNode; break; case document.TEXT_NODE: case document.CDATA_SECTION_NODE: case document.COMMENT_NODE: return document.createTextNode(node.nodeValue); break; } };
http://www.alistapart.com/articles/crossbrowserscripting
![Page 6: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/6.jpg)
phpXperts - 09
It’s just a single line in jQuery$(“#content”).load(“page.html #content”);
![Page 7: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/7.jpg)
phpXperts - 09
Who’s using jQuery?
http://docs.jquery.com/Sites_Using_jQuery
![Page 8: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/8.jpg)
phpXperts - 09
Dominating the world
Google trends comparison of last JS framework 12 months
http://www.google.com/trends?q=jQuery%2C+prototype%2C+yui%2C+dojo%2C+mootools&ctab=0&geo=all&date=ytd&sort=0
![Page 9: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/9.jpg)
phpXperts - 09
Let’s Start
Download jQuery
http://docs.jquery.com/Downloading_jQuery
![Page 10: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/10.jpg)
phpXperts - 09
Embed in you page
<html>
<head>
<script src=“path/to/jquery-x.x.js"></script>
</head>
<body> … </body>
</html>
![Page 11: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/11.jpg)
phpXperts - 09
Embed in you page
<html>
<head>
<script src="path/to/jquery-x.x.js"></script>
<script>
$(document).ready(function(){
// Start here
});
</script>
</head>
<body> … </body>
</html>
![Page 12: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/12.jpg)
phpXperts - 09
$(“div”).addClass(“xyz”);
Find Some Elements
Do something with them
{
}jQuery Object
jQuery philosophy
![Page 13: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/13.jpg)
phpXperts - 09
A Basic Example
<body> <div>
<p>I m a paragraph 1</p> <p>I m a paragraph 2</p>
</div><p>I m another paragraph</p>
</body>
![Page 14: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/14.jpg)
phpXperts - 09
A Basic Example
<body> <div>
<p>I m a paragraph 1</p> <p>I m a paragraph 2</p>
</div><p>I m another paragraph</p>
</body>
Select all paragraphs. $(“p”)
![Page 15: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/15.jpg)
phpXperts - 09
A Basic Example
<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>
Select all paragraphs. Add a class to them.$(“p”).addClass(“red”);
![Page 16: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/16.jpg)
phpXperts - 09
Selector Basics
Just pass a selector to $()
What is selector?
Use any CSS selector
![Page 17: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/17.jpg)
phpXperts - 09
Selector Basics
Think about your simplest css file.
#header{margin : 0 auto;
}div{
margin : 0px;padding : 0px
}ul.menu li{
…..}
![Page 18: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/18.jpg)
phpXperts - 09
Selector Basics
The red colored items are selectors
#header{margin : 0 auto;
}div{
margin : 0px;padding : 0px
}ul.menu li{
…..}
![Page 19: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/19.jpg)
phpXperts - 09
Selector Basics
Selecting By Id $(“#header”)
Selecting using selectors
![Page 20: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/20.jpg)
phpXperts - 09
Selector Basics
Selecting By Id $(“#header”)
Selecting By Class $(“.updated”)
Selecting using selectors
![Page 21: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/21.jpg)
phpXperts - 09
Selector Basics
Selecting By Id $(“#header”)
Selecting By Class $(“.updated”)
Selecting by tag name $(“table”)
Selecting using selectors
![Page 22: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/22.jpg)
phpXperts - 09
Selector Basics
Selecting By Id $(“#header”)
Selecting By Class $(“.updated”)
Selecting by tag name $(“table”)
Combine them $(“table.user-list”) $(“#footer ul.menu li”)
Selecting using selectors
![Page 23: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/23.jpg)
phpXperts - 09
Basic Selector Example
This is my page
<body> <div id=“header”>
<span id=“logo”>Logo here…</span><ul class=“menu”>
<li>user name</li>
…..<li>logout</li>
</ul></div>
……</body>
![Page 24: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/24.jpg)
phpXperts - 09
Basic Selector Example
$(“#header”)
<body> <div id=“header”>
<span id=“logo”>Logo here…</span><ul class=“menu”>
<li>user name</li>
…..<li>logout</li>
</ul></div>……
</body>
![Page 25: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/25.jpg)
phpXperts - 09
Basic Selector Example
$(“ul.menu”)
<body> <div id=“header”>
<span id=“logo”>Logo here…</span><ul class=“menu”>
<li>user name</li>
…..<li>logout</li>
</ul></div>……
</body>
![Page 26: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/26.jpg)
phpXperts - 09
Basic Selector Example
$(“ul.menu li”)
<body> <div id=“header”>
<span id=“logo”>Logo here…</span><ul class=“menu”>
<li>user name</li>
…..<li>logout</li>
</ul></div>……
</body>
![Page 27: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/27.jpg)
phpXperts - 09
Using filters for selecting
Basic Filters :first, :last, :even, :odd, …...
![Page 28: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/28.jpg)
phpXperts - 09
Basic Filters Example
Name Class Roll No. Comment
Raju XII 2 Good
Masud IX 1 Good
Apu XII 3
Mizan XII 5
Karim VI 2 Satisfactory
Student list table. Lets make it zebra.
![Page 29: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/29.jpg)
phpXperts - 09
Basic Filters Example
Name Class Roll No. Comment
Raju XII 2 Good
Masud IX 1 Good
Apu XII 3
Mizan XII 5
Karim VI 2 Satisfactory
$(“#students tr:even”).css(“background-color”, “#dde”)
![Page 30: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/30.jpg)
phpXperts - 09
Using filters for selecting
Basic Filters :first, :last, :even, :odd, …...
Content Filters: :empty , :contains(text), :has(selector), …..
![Page 31: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/31.jpg)
phpXperts - 09
Content Filters Example
Name Class Roll No. Comment
Raju XII 2 Good
Masud IX 1 Good
Apu XII 3 No Comment
Mizan XII 5 No Comment
Karim VI 2 Satisfactory
$(“#students tr:even”).css(“background-color”, “#dde”);$(“#students td.comment:empty”).text(“No Comment”);
![Page 32: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/32.jpg)
phpXperts - 09
Using filters for selecting
Basic Filters :first, :last, :even, :odd, …...
Content Filters: :empty , :contains(text), :has(selector), …..
Attribute Filters: [attribute], [attribute=value], [attribute!=value], …..
![Page 33: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/33.jpg)
phpXperts - 09
Attribute Filters Example
Name Class Roll No. Comment
Raju XII 2 Good
Masud IX 1 Good
Apu XII 3 No Comment
Mizan XII 5 No Comment
Karim VI 2 Satisfactory
$(“#students tr:even”).css(“background-color”, “#dde”);$(“#students td.comment:empty”).text(“No Comment”);$(“#students td[align=‘center']").addClass(“ocean”);
![Page 34: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/34.jpg)
phpXperts - 09
Using filters for selecting
Basic Filters :first, :last, :even, :odd, …...
Content Filters: :empty , :contains(text), :has(selector), …..
Attribute Filters: [attribute], [attribute=value], [attribute!=value], …..
Forms :input, :text, :submit, :password, ….. :enabled, :disabled, :checked, …..
![Page 35: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/35.jpg)
phpXperts - 09
Forms Selector Example
$(":submit").click(function(e){ … });
$("input:disabled").val(“You cannot change me");
$(“#form-id input:checked”).addClass(“selected”);
![Page 36: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/36.jpg)
phpXperts - 09
Now we can SelectLet’s perform some action
![Page 37: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/37.jpg)
phpXperts - 09
jQuery Methods
DOM Manipulation before(), after(), append(), appendTo(), …..
![Page 38: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/38.jpg)
phpXperts - 09
Dom Manipulation Example
Move all paragraphs in div with id “contents”
$(“p”)
<body> <h1>jQuery</h1><p>jQuery is good</p><p>jQuery is better</p><div id=“contents”></div><p>jQuery is the best</p>
</body>
![Page 39: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/39.jpg)
phpXperts - 09
Dom Manipulation Example
Move all paragraphs in div with id “contents”
$(“p”).appendTo(“#contents”);
<body> <h1>jQuery</h1><div id=“contents”>
<p>jQuery is good</p><p>jQuery is better</p><p>jQuery is the best</p>
</div></body>
![Page 40: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/40.jpg)
phpXperts - 09
Dom Manipulation Example
Move all paragraphs in div with id “contents”
$(“p”).appendTo(“#contents”);$(“h1”).append(“ Dom Manipulation”);
<body> <h1>jQuery Dom Manipulation</h1><div id=“contents”>
<p>jQuery is good</p><p>jQuery is better</p><p>jQuery is the best</p>
</div></body>
![Page 41: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/41.jpg)
phpXperts - 09
jQuery Methods
DOM Manipulation before(), after(), append(), appendTo(), …..
Attributes css(), addClass(), attr(), html(), val(), …..
![Page 42: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/42.jpg)
phpXperts - 09
Attributes Example
Make the texts of last paragraph bold
$(“#contents p:last”).css(“color”, “green”);
<body> <h1>jQuery Dom Manipulation</h1><div id=“contents”>
<p >jQuery is good</p><p>jQuery is better</p><p style=“color:green”>jQuery is the
best</p></div>
</body>
![Page 43: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/43.jpg)
phpXperts - 09
More Attributes Example
Setting
$(“img.logo”).attr(“align”, “left”);
$(“p.copyright”).html(“© 2009 ajaxray”);
$(“input#name”).val(“Spiderman”);
![Page 44: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/44.jpg)
phpXperts - 09
More Attributes Example
Setting
$(“img.logo”).attr(“align”, “left”);
$(“p.copyright”).html(“© 2009 ajaxray”);
$(“input#name”).val(“Spiderman”);
Getting
var allignment = $(“img.logo”).attr(“align”);
var copyright = $(“p.copyright”).html();
var username = $(“input#name”).val();
![Page 45: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/45.jpg)
phpXperts - 09
jQuery Methods
DOM Manipulation before(), after(), append(), appendTo(), …..
Attributes css(), addClass(), attr(), html(), val(), …..
Events click(), bind(), unbind(), live(), …..
![Page 46: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/46.jpg)
phpXperts - 09
Event Example
Start when DOM is ready
$(document).ready(function(){
$(selector).eventName(function(){…});
});
![Page 47: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/47.jpg)
phpXperts - 09
Event Example
Bind all interactions on events.
$(document).ready(function(){
$(“#message”).click(function(){$(this).hide();
})
});
<span id=“message” onclick=“…”> blah blah </span>
![Page 48: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/48.jpg)
phpXperts - 09
Event Example
You can fire events manually.
$(document).ready(function(){
$(“span#message”).click(function(){$(this).hide();
})
$(“#form-id:reset”).click();
});
![Page 49: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/49.jpg)
phpXperts - 09
jQuery Methods
DOM Manipulation before(), after(), append(), appendTo(), …..
Attributes css(), addClass(), attr(), html(), val(), …..
Events click(), bind(), unbind(), live(), …..
Effects hide(), fadeOut(), toggle(), animate(), …..
![Page 50: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/50.jpg)
phpXperts - 09
Effects Example
When “show-cart” link clicked, slide up/down “cart” div.
$(“a#show-cart”).click(function(){$(“#cart”).slideToggle(“slow”);
})
![Page 51: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/51.jpg)
phpXperts - 09
Effects Example
Build your custom animation
$(“a#show-cart”).click(function(){$(“#cart”).slideToggle(“slow”);
})
$("#showdown").click(function(){ $("#my-div").animate({
width: "70%", opacity: 0.4, fontSize: "3em“
}, 1200 ); });
![Page 52: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/52.jpg)
phpXperts - 09
jQuery Methods
DOM Manipulation before(), after(), append(), appendTo(), …..
Attributes css(), addClass(), attr(), html(), val(), …..
Events click(), bind(), unbind(), live(), …..
Effects hide(), fadeOut(), toggle(), animate(), …..
Ajax load(), get(), ajax(), getJSON(), …..
![Page 53: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/53.jpg)
phpXperts - 09
Ajax Examples
Load a page in a container
$(“#comments”).load(“/get_comments.php”);
$(“#comments”).load(“/get_comments.php”, {max : 5});
![Page 54: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/54.jpg)
phpXperts - 09
Ajax Examples
Send ajax request with data
$.get(“/edit_comment.php", {id: 102, comment: “I m edited"}
);
![Page 55: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/55.jpg)
phpXperts - 09
Ajax Examples
You can send serialized form as data
$.get(“/edit_comment.php", $(“#edit-comment”).serialize());
id=102&comment=I+m+edited
![Page 56: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/56.jpg)
phpXperts - 09
Ajax Examples
Set a callback function for handling response data
$.get(“edit_comment.php", $(“form#cmm-edit”).serialize(),
function(data){if(data == “success”)
alert(“Comment Edited!”);}
);
![Page 57: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/57.jpg)
phpXperts - 09
Chaining Methods
Most jQuery methods return jQuery object
You can chain them together
![Page 58: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/58.jpg)
phpXperts - 09
Chaining Methods
Most jQuery methods return jQuery object
You can chain them together
$(“#deleted”).addClass(“red”).fadeOut(“slow”);
$(“:button”).val(“Click Me”).click(function(){…})
![Page 59: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/59.jpg)
phpXperts - 09
Chaining Methods
Most jQuery methods return jQuery object
You can chain them together
$(“#deleted”).addClass(“red”).fadeOut(“slow”);
$(“:button”).val(“Click Me”).click(function(){…})
This will not work -
$(“:button”).val().click(function(){…})
This method will return string
![Page 60: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/60.jpg)
phpXperts - 09
jQuery PluginsjQuery is extensible.
![Page 61: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/61.jpg)
phpXperts - 09
jQuery Plugins
jQuery lightBox
http://leandrovieira.com/projects/jquery/lightbox/
![Page 62: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/62.jpg)
phpXperts - 09
jQuery Plugins
Slider Plugins
http://www.hieu.co.uk/blog/index.php/imageswitch/
http://medienfreunde.com/lab/innerfade/
![Page 64: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/64.jpg)
phpXperts - 09
jQuery UIBuild highly interactive web applications
![Page 65: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/65.jpg)
phpXperts - 09
jQuery UI – Interactions (Draggale, Droppable, Resizable, Selectable, Sortable)
![Page 66: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/66.jpg)
phpXperts - 09
jQuery UI – Sortable Example
$("#items").sortable();
![Page 67: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/67.jpg)
phpXperts - 09
jQuery UI – Widgets(Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs)
![Page 68: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/68.jpg)
phpXperts - 09
jQuery UI – Datepicker Example
$("#date").datepicker();
![Page 69: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/69.jpg)
phpXperts - 09
Which one will match your site?
![Page 70: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/70.jpg)
phpXperts - 09
Designing a jQuery UI theme - Themeroller
http://ui.jquery.com/themeroller
![Page 71: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/71.jpg)
phpXperts - 09
Anis uddin AhmadSr. Software Engineer
Right Brain Solution Ltd.
http://ajaxray.com
![Page 72: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/72.jpg)
phpXperts - 09
Questions?
![Page 73: jQuery from the very beginning](https://reader035.fdocuments.us/reader035/viewer/2022062307/554f87edb4c905d25b8b4d89/html5/thumbnails/73.jpg)
phpXperts - 09
THANK YOU