Jquery Essentials
-
Upload
afrizal-kurniawan -
Category
Documents
-
view
16 -
download
0
Transcript of Jquery Essentials
![Page 1: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/1.jpg)
jQuery Essentialsby Marc Grabanski
v2
![Page 2: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/2.jpg)
We needed a hero to get these guys in line
![Page 3: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/3.jpg)
jQuery rescues us by workingthe same in all browsers!
![Page 4: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/4.jpg)
Easier to write jQuery than pure JavaScript
![Page 5: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/5.jpg)
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {divs[i].style.display = ‘none’;
}
Hide divs with pure JavaScript
![Page 6: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/6.jpg)
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {divs[i].style.display = ‘none’;
}
Hide divs with pure JavaScript
$(“div”).hide();
Hide divs with jQuery
![Page 7: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/7.jpg)
HTML is tied to JavaScript
![Page 8: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/8.jpg)
jQuery Philosophy
![Page 9: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/9.jpg)
#1. Find some HTML
jQuery Philosophy
![Page 10: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/10.jpg)
#1. Find some HTML
#2. Do something to it
jQuery Philosophy
![Page 11: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/11.jpg)
$(“div”)
Find
![Page 12: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/12.jpg)
$(“div”)
Find let’s find some elements
![Page 13: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/13.jpg)
Give $() a selector
![Page 14: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/14.jpg)
Give $() a selector
$(“#myId”)
![Page 15: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/15.jpg)
Give $() a selector
$(“#myId”) $(“.myClass”)
![Page 16: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/16.jpg)
Give $() a selector
$(“#myId”) $(“.myClass”) $(“table”)
![Page 17: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/17.jpg)
Selector Examples
$(“#content”) get element with id content
![Page 18: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/18.jpg)
Selector Examples
$(“#content”) get element with id content
$(“li:first”) get first list item
![Page 19: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/19.jpg)
Selector Examples
$(“#content”) get element with id content
$(“li:first”) get first list item
$(“tr:odd”) get odd numbered table rows
![Page 20: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/20.jpg)
Selector Examples
$(“#content”) get element with id content
$(“li:first”) get first list item
$(“tr:odd”) get odd numbered table rows
$(“a[target=_blank]”)get all links who’s target is “_blank”
![Page 21: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/21.jpg)
Selector Examples
$(“#content”) get element with id content
$(“li:first”) get first list item
$(“tr:odd”) get odd numbered table rows
$(“form[id^=step]”)get all forms who’s id starts with “step”
$(“a[target=_blank]”)get all links who’s target is “_blank”
![Page 22: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/22.jpg)
You can also string selectors together
![Page 23: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/23.jpg)
You can also string selectors together
$(“#myId, .myClass, table”)
![Page 24: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/24.jpg)
$(“div”)
Find
![Page 25: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/25.jpg)
Do
.addClass(“redbox”);$(“div”)
Find
![Page 26: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/26.jpg)
jQuery API SpiceTwo things that make the API HOT
![Page 27: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/27.jpg)
$(“div”).addClass(“redbox”)
Chain Methods
![Page 28: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/28.jpg)
$(“div”).addClass(“redbox”)
Chain Methods
.fadeOut();
![Page 29: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/29.jpg)
$(...).html();
One Method, Many Uses
![Page 30: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/30.jpg)
$(...).html();
One Method, Many Uses
$(...).html(“<p>hello</p>”);
![Page 31: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/31.jpg)
$(...).html();
One Method, Many Uses
$(...).html(“<p>hello</p>”);
$(...).html(function(i){
return “<p>hello “ + i + “</p>”;
});
![Page 32: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/32.jpg)
jQuery Methods
![Page 33: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/33.jpg)
jQuery Methods
•Moving Elements: append(), appendTo(), before(), after(),
![Page 34: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/34.jpg)
jQuery Methods
•Moving Elements: append(), appendTo(), before(), after(),
•Attributescss(), attr(), html(), val(), addClass()
![Page 35: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/35.jpg)
jQuery Methods
•Moving Elements: append(), appendTo(), before(), after(),
•Attributescss(), attr(), html(), val(), addClass()
•Eventsbind(), trigger(), unbind(), live(), click()
![Page 36: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/36.jpg)
jQuery Methods
•Moving Elements: append(), appendTo(), before(), after(),
•Attributescss(), attr(), html(), val(), addClass()
•Eventsbind(), trigger(), unbind(), live(), click()
•Effectsshow(), fadeOut(), toggle(), animate()
![Page 37: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/37.jpg)
jQuery Methods
•Moving Elements: append(), appendTo(), before(), after(),
•Attributescss(), attr(), html(), val(), addClass()
•Traversingfind(), is(), prevAll(), next(), hasClass()
•Eventsbind(), trigger(), unbind(), live(), click()
•Effectsshow(), fadeOut(), toggle(), animate()
![Page 38: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/38.jpg)
jQuery Methods
•Moving Elements: append(), appendTo(), before(), after(),
•Attributescss(), attr(), html(), val(), addClass()
•Traversingfind(), is(), prevAll(), next(), hasClass()
•Eventsbind(), trigger(), unbind(), live(), click()
•Ajaxget(), getJSON(), post(), ajax(), load()
•Effectsshow(), fadeOut(), toggle(), animate()
![Page 39: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/39.jpg)
jQuery Factory Method $()
You can also pass $() a functionto run the function after the page loads.
![Page 40: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/40.jpg)
jQuery Factory Method $()
You can also pass $() a functionto run the function after the page loads.
$(function(){
});
![Page 41: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/41.jpg)
jQuery Factory Method $()
You can also pass $() a functionto run the function after the page loads.
$(function(){
});code here will execute after DOM is ready
![Page 42: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/42.jpg)
jQuery Factory Method $()
You can also pass $() a functionto run the function after the page loads.
$(function(){
});
Note: This is essentially the same as..$(document).ready(function(){ });
code here will execute after DOM is ready
![Page 43: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/43.jpg)
jQuery Factory Method $()
You can also pass $() a functionto run the function after the page loads.
$(function(){
});
Note: This is essentially the same as..$(document).ready(function(){ });
code here will execute after DOM is ready
..you will see this in tutorials around the net
![Page 44: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/44.jpg)
$(“#foo”)
Get element with ID foo and add some HTML.
<html><body>
<div>jQuery</div><div id=”foo”>example</div>
</body></html>
Moving Elements Examples
![Page 45: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/45.jpg)
$(“#foo”)
Get element with ID foo and add some HTML.
<html><body>
<div>jQuery</div><div id=”foo”>example</div>
</body></html>
Moving Elements Examples
.append(“<p>test</p>”);
![Page 46: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/46.jpg)
$(“#foo”)
Get element with ID foo and add some HTML.
<html><body>
<div>jQuery</div><div id=”foo”>example<p>test</p></div>
</body></html>
Moving Elements Examples
.append(“<p>test</p>”);
![Page 47: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/47.jpg)
<html><body>
<div>jQuery<p>moving</p> <p>paragraphs</p>
</div><div id=”foo”>example</div>
</body></html>
$(“p”)
Move paragraphs to element with id “foo”
Moving Elements Examples
![Page 48: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/48.jpg)
<html><body>
<div>jQuery<p>moving</p> <p>paragraphs</p>
</div><div id=”foo”>example</div>
</body></html>
$(“p”)
Move paragraphs to element with id “foo”
Moving Elements Examples
.appendTo(“#foo”);
![Page 49: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/49.jpg)
$(“p”)
Move paragraphs to element with id “foo”
<html><body>
<div>jQuery</div><div id=”foo”>example
<p>moving</p> <p>paragraphs</p>
</div></body>
</html>
Moving Elements Examples
.appendTo(“#foo”);
![Page 50: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/50.jpg)
Attributes
![Page 51: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/51.jpg)
Attributes
.attr(‘id’)
Get
![Page 52: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/52.jpg)
Attributes
.attr(‘id’)
Get
.html()
![Page 53: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/53.jpg)
Attributes
.attr(‘id’)
Get
.html()
.val()
![Page 54: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/54.jpg)
Attributes
.attr(‘id’)
Get
.html()
.val()
.css(“top”)
![Page 55: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/55.jpg)
Attributes
.attr(‘id’)
Get
.html()
.val()
.width()
.css(“top”)
![Page 56: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/56.jpg)
Attributes
.attr(‘id’)
Get
.html()
.val()
Set
.attr(‘id’, ‘foo’)
.width()
.css(“top”)
![Page 57: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/57.jpg)
Attributes
.attr(‘id’)
Get
.html()
.val()
.html(“<p>hi</p>”)
Set
.attr(‘id’, ‘foo’)
.width()
.css(“top”)
![Page 58: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/58.jpg)
Attributes
.attr(‘id’)
Get
.html()
.val()
.html(“<p>hi</p>”)
Set
.attr(‘id’, ‘foo’)
.val(“new val”)
.width()
.css(“top”)
![Page 59: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/59.jpg)
Attributes
.attr(‘id’)
Get
.html()
.val()
.html(“<p>hi</p>”)
Set
.attr(‘id’, ‘foo’)
.val(“new val”)
.width()
.css(“top”) .css(“top”, “80px”)
![Page 60: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/60.jpg)
Attributes
.attr(‘id’)
Get
.html()
.val()
.html(“<p>hi</p>”)
Set
.attr(‘id’, ‘foo’)
.val(“new val”)
.width() .width(60)
.css(“top”) .css(“top”, “80px”)
![Page 61: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/61.jpg)
Attributes
![Page 62: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/62.jpg)
$(...).css(“border”, “1px solid black”); Set border to 1px black
Attributes
![Page 63: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/63.jpg)
$(...).css(“border”, “1px solid black”); Set border to 1px black
Set various css properties.$(...).css({
“background”: “yellow”, “height”: “400px”
});
Attributes
![Page 64: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/64.jpg)
$(...).css(“border”, “1px solid black”); Set border to 1px black
Set various css properties.$(...).css({
“background”: “yellow”, “height”: “400px”
});
$(“a”).attr(“href”, “http://google.com”);Set all link’s href attribute to google.com
Attributes
![Page 65: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/65.jpg)
Attributes
![Page 66: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/66.jpg)
$(...).html(“<p>I’m new</p>”); Replace HTML with a new paragraph.
Attributes
![Page 67: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/67.jpg)
$(...).html(“<p>I’m new</p>”); Replace HTML with a new paragraph.
Attributes
<div>whatever</div> turns into<div><p>I’m new</p></div>
![Page 68: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/68.jpg)
$(...).html(“<p>I’m new</p>”); Replace HTML with a new paragraph.
Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);
Attributes
<div>whatever</div> turns into<div><p>I’m new</p></div>
![Page 69: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/69.jpg)
$(...).html(“<p>I’m new</p>”); Replace HTML with a new paragraph.
Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);
$(...).val(“3”);Set input value to 3.
Attributes
<div>whatever</div> turns into<div><p>I’m new</p></div>
![Page 70: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/70.jpg)
$(...).html(“<p>I’m new</p>”); Replace HTML with a new paragraph.
Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);
$(...).val(“3”);Set input value to 3.
$(...).val();Get input value.
Attributes
<div>whatever</div> turns into<div><p>I’m new</p></div>
![Page 71: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/71.jpg)
Events Examples
![Page 72: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/72.jpg)
Events
![Page 73: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/73.jpg)
$(“button”).click(function(){something();
});
When a button is clicked, do something.
Events
![Page 74: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/74.jpg)
$(“button”).click(function(){something();
});
When a button is clicked, do something.
Setup a custom event and trigger it.$(“button“).bind(“expand”, function(){
something();}); $(“button:first“).trigger(“expand”);
Events
![Page 75: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/75.jpg)
$(“button”).click(function(){something();
});
When a button is clicked, do something.
Setup a custom event and trigger it.$(“button“).bind(“expand”, function(){
something();}); $(“button:first“).trigger(“expand”);
Events
$(“button“).unbind(“expand”);Unbind custom event.
![Page 76: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/76.jpg)
Event Delegation
![Page 77: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/77.jpg)
$(“button”).live(‘click’, function(){something();
});
Event Delegation
Attach events to document
![Page 78: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/78.jpg)
$(“button”).live(‘click’, function(){something();
});
Event Delegation
Attach events to document
Attach event delegation to elements
$(“form“).delegate(“button”, ”click”, function(){something();
});
![Page 79: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/79.jpg)
Effects / Animation Examples
![Page 80: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/80.jpg)
Animation / Effects
Types of Effects
![Page 81: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/81.jpg)
Animation / Effects
#1. Hide and Show
Types of Effects
![Page 82: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/82.jpg)
Animation / Effects
#2. Fade In and Out
#1. Hide and Show
Types of Effects
![Page 83: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/83.jpg)
Animation / Effects
#2. Fade In and Out
#1. Hide and Show
#3. Slide Up and Down
Types of Effects
![Page 84: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/84.jpg)
Animation / Effects
![Page 85: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/85.jpg)
$(...).click(function(){$(“div:first”).slideToggle();
});
With each click, slide up / slide down a div.
Animation / Effects
![Page 86: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/86.jpg)
$(...).click(function(){$(“div:first”).slideToggle();
});
With each click, slide up / slide down a div.
Animate elements to 300px wide in .5 seconds.$(...).animate({ “width”: “300px” }, 500);
Animation / Effects
![Page 87: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/87.jpg)
$(...).click(function(){$(“div:first”).slideToggle();
});
With each click, slide up / slide down a div.
Animate elements to 300px wide in .5 seconds.$(...).animate({ “width”: “300px” }, 500);
$(...).fadeTo(500, 0.3);
Take focus off elements by fading them to 30% opacity in .5 seconds
Animation / Effects
![Page 88: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/88.jpg)
Traversing Examples
![Page 89: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/89.jpg)
$(“#myCell”)
Get previous table cells to #myCell.
<html><body>
<table><tr><td></td><td></td><td id=”myCell”></td><td></td>
</tr></table></body>
</html>
Traversing Examples
![Page 90: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/90.jpg)
<html><body>
<table><tr><td></td><td></td><td id=”myCell”></td><td></td>
</tr></table></body>
</html>
$(“#myCell”)
Get previous table cells to #myCell.
Traversing Examples
.prevAll()
![Page 91: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/91.jpg)
$(“#myCell”)
Get previous table cells to #myCell.
Traversing Examples
.prevAll()
<html><body>
<table><tr><td></td><td></td><td id=”myCell”></td><td></td>
</tr></table></body>
</html>
.andSelf();
![Page 92: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/92.jpg)
<html><body>
<table></table><div>
<p>foo</p><span>bar</span>
</div></body>
</html>
$(“table”)
Move paragraphs to element with id “foo”
Traversing Examples
![Page 93: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/93.jpg)
<html><body>
<table></table><div>
<p>foo</p><span>bar</span>
</div></body>
</html>
$(“table”)
Move paragraphs to element with id “foo”
Traversing Examples
.next()
![Page 94: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/94.jpg)
$(“table”)
Move paragraphs to element with id “foo”
<html><body>
<table></table><div>
<p>foo</p><span>bar</span>
</div></body>
</html>
Traversing Examples
.next()
![Page 95: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/95.jpg)
$(“table”)
Move paragraphs to element with id “foo”
Traversing Examples
.next().find(“p”);
<html><body>
<table></table><div>
<p>foo</p><span>bar</span>
</div></body>
</html>
![Page 96: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/96.jpg)
Ajax Examples
![Page 97: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/97.jpg)
Ajax Examples
![Page 98: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/98.jpg)
$(...).get(“tag.php”, { “bar”: “baz” });
Post data, “bar” equals “baz” to tag.php using get.
Ajax Examples
![Page 99: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/99.jpg)
$(...).get(“tag.php”, { “bar”: “baz” });
Post data, “bar” equals “baz” to tag.php using get.
Post data, “foo” equals “bar” to send.php, thenalert the response.
$.post(“send.php”, { foo: ”bar” }, function(response){
alert(response);});
Ajax Examples
![Page 100: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/100.jpg)
Extending jQuery
![Page 101: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/101.jpg)
$.fn.myPlugin = function(){return this.each(function(){
$(this).html(“you used myPlugin!”);});
});
<html><body>
<div></div><div></div>
</body></html>
Plugin Example
![Page 102: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/102.jpg)
$.fn.myPlugin = function(){return this.each(function(){
$(this).html(“you used myPlugin!”);});
});
$(“div”).myPlugin();<html>
<body><div></div><div></div>
</body></html>
Plugin Example
![Page 103: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/103.jpg)
$.fn.myPlugin = function(){return this.each(function(){
$(this).html(“you used myPlugin!”);});
});
<html><body>
<div>you used myPlugin!</div><div>you used myPlugin!</div>
</body></html>
$(“div”).myPlugin();
Plugin Example
![Page 104: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/104.jpg)
Wait, There’s More!
![Page 105: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/105.jpg)
jQuery isn’t only about simpler code
![Page 106: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/106.jpg)
jQuery isn’t only about simpler codeand being more productive
![Page 107: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/107.jpg)
jQuery isn’t only about simpler codeand being more productive
It is also about..
![Page 108: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/108.jpg)
jQuery isn’t only about simpler codeand being more productive
It is also about..great community
support tutorials
plugins
open (free) license
test coverage books
speed
light weight code
![Page 109: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/109.jpg)
http://google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
Led to World Domination
jQuery
![Page 110: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/110.jpg)
Usage Across Top 10,000 Sites
http://trends.builtwith.com/javascript
![Page 111: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/111.jpg)
Plugins
jQuery has hundreds of plugins athttp://plugins.jquery.com/
jQuery UI
Set of official user interface components at:http://jqueryui.com
![Page 112: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/112.jpg)
http://forum.jquery.com
Support
http://docs.jquery.com/Discussion
jQuery general discussion mailing list
jQuery discussion docs page
jQuery IRC room#jquery on FreeNode.net
![Page 113: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/113.jpg)
Books
http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1847196705
http://www.amazon.com/gp/product/1933988355?ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1933988355
Learning jQuery 1.3by Karl Swedberg
jQuery in ActionYahuda Katz
![Page 114: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/114.jpg)
http://marcgrabanski.com/article/the-jquery-course-prerelease
Video Training
![Page 115: Jquery Essentials](https://reader034.fdocuments.in/reader034/viewer/2022042820/55cf99cd550346d0339f43cf/html5/thumbnails/115.jpg)
Thank you!
Marc Grabanski: http://marcgrabanski.com
Twitter: @1Marc