SlideShare a Scribd company logo
v2
jQuery Essentials
        by Marc Grabanski
We needed a hero to get
these guys in line
jQuery rescues us by working
the same in all browsers!
Easier to write jQuery than
pure JavaScript
Hide divs with pure JavaScript
divs = document.getElementByTagName(‘div’);

for (i = 0; i < divs.length; i++) {
  divs[i].style.display = ‘none’;
}
Hide divs with pure JavaScript
divs = document.getElementByTagName(‘div’);

for (i = 0; i < divs.length; i++) {
  divs[i].style.display = ‘none’;
}

       Hide divs with jQuery
       $(“div”).hide();
HTML is tied to JavaScript
jQuery Philosophy
jQuery Philosophy

    #1. Find some HTML
jQuery Philosophy

    #1. Find some HTML
    #2. Do something to it
Find
$(“div”)
Find     let’s find some
$(“div”)   elements
Give $() a selector
Give $() a selector

$(“#myId”)
Give $() a selector

$(“#myId”) $(“.myClass”)
Give $() a selector

$(“#myId”) $(“.myClass”) $(“table”)
Selector Examples

$(“#content”) get element with id content
Selector Examples

$(“#content”) get element with id content
$(“li:first”) get first list item
Selector Examples

$(“#content”) get element with id content
$(“li:first”) get first list item
$(“tr:odd”) get odd numbered table rows
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”
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”

$(“form[id^=step]”)
 get all forms who’s id starts with “step”
You can also string selectors together
You can also string selectors together
   $(“#myId, .myClass, table”)
Find
$(“div”)
Find      Do
$(“div”) .addClass(“redbox”);
jQuery API Spice
Two things that make the API HOT
Chain Methods
$(“div”).addClass(“redbox”)
Chain Methods
$(“div”).addClass(“redbox”) .fadeOut();
One Method, Many Uses
$(...).html();
One Method, Many Uses
$(...).html();

$(...).html(“<p>hello</p>”);
One Method, Many Uses
$(...).html();

$(...).html(“<p>hello</p>”);

$(...).html(function(i){
 return “<p>hello “ + i + “</p>”;
});
jQuery Methods
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addClass()
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addClass()
•Events
 bind(), trigger(), unbind(), live(), click()
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addClass()
•Events
 bind(), trigger(), unbind(), live(), click()

•Effects
 show(), fadeOut(), toggle(), animate()
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addClass()
•Events
 bind(), trigger(), unbind(), live(), click()

•Effects
 show(), fadeOut(), toggle(), animate()
•Traversing
 find(), is(), prevAll(), next(), hasClass()
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addClass()
•Events
 bind(), trigger(), unbind(), live(), click()

•Effects
 show(), fadeOut(), toggle(), animate()
•Traversing
 find(), is(), prevAll(), next(), hasClass()
•Ajax
 get(), getJSON(), post(), ajax(), load()
jQuery Factory Method $()

You can also pass $() a function
to run the function after the page loads.
jQuery Factory Method $()

You can also pass $() a function
to run the function after the page loads.

$(function(){

});
jQuery Factory Method $()

You can also pass $() a function
to run the function after the page loads.

$(function(){
 code here will execute after DOM is ready
});
jQuery Factory Method $()

 You can also pass $() a function
 to run the function after the page loads.

 $(function(){
  code here will execute after DOM is ready
 });

Note: This is essentially the same as..
 $(document).ready(function(){ });
jQuery Factory Method $()

 You can also pass $() a function
 to run the function after the page loads.

 $(function(){
  code here will execute after DOM is ready
 });

Note: This is essentially the same as..
  $(document).ready(function(){ });
..you will see this in tutorials around the net
Moving Elements Examples

Get element with ID foo and add some HTML.
 $(“#foo”)
 <html>
  <body>
    <div>jQuery</div>
    <div id=”foo”>example</div>
  </body>
 </html>
Moving Elements Examples

Get element with ID foo and add some HTML.
 $(“#foo”).append(“<p>test</p>”);
 <html>
  <body>
    <div>jQuery</div>
    <div id=”foo”>example</div>
  </body>
 </html>
Moving Elements Examples

Get element with ID foo and add some HTML.
 $(“#foo”).append(“<p>test</p>”);
 <html>
  <body>
    <div>jQuery</div>
    <div id=”foo”>example<p>test</p></div>
  </body>
 </html>
Moving Elements Examples

Move paragraphs to element with id “foo”
$(“p”)
<html>
 <body>
   <div>jQuery
    <p>moving</p>
    <p>paragraphs</p>
   </div>
   <div id=”foo”>example</div>
 </body>
</html>
Moving Elements Examples

Move paragraphs to element with id “foo”
$(“p”) .appendTo(“#foo”);
<html>
 <body>
   <div>jQuery
    <p>moving</p>
    <p>paragraphs</p>
   </div>
   <div id=”foo”>example</div>
 </body>
</html>
Moving Elements Examples

Move paragraphs to element with id “foo”
$(“p”) .appendTo(“#foo”);
<html>
 <body>
   <div>jQuery</div>
   <div id=”foo”>example
    <p>moving</p>
    <p>paragraphs</p>
   </div>
 </body>
</html>
Attributes
Attributes


Get
.attr(‘id’)
Attributes


Get
.attr(‘id’)
.html()
Attributes


Get
.attr(‘id’)
.html()
.val()
Attributes


Get
.attr(‘id’)
.html()
.val()

.css(“top”)
Attributes


Get
.attr(‘id’)
.html()
.val()

.css(“top”)

.width()
Attributes


Get                 Set
.attr(‘id’)         .attr(‘id’, ‘foo’)
.html()
.val()

.css(“top”)

.width()
Attributes


Get                 Set
.attr(‘id’)         .attr(‘id’, ‘foo’)
.html()             .html(“<p>hi</p>”)
.val()

.css(“top”)

.width()
Attributes


Get                 Set
.attr(‘id’)         .attr(‘id’, ‘foo’)
.html()             .html(“<p>hi</p>”)
.val()              .val(“new val”)
.css(“top”)

.width()
Attributes


Get                 Set
.attr(‘id’)         .attr(‘id’, ‘foo’)
.html()             .html(“<p>hi</p>”)
.val()              .val(“new val”)
.css(“top”)         .css(“top”, “80px”)

.width()
Attributes


Get                 Set
.attr(‘id’)         .attr(‘id’, ‘foo’)
.html()             .html(“<p>hi</p>”)
.val()              .val(“new val”)
.css(“top”)         .css(“top”, “80px”)

.width()            .width(60)
Attributes
Attributes
Set border to 1px black
 $(...).css(“border”, “1px solid black”);
Attributes
Set border to 1px black
 $(...).css(“border”, “1px solid black”);

Set various css properties.
 $(...).css({
   “background”: “yellow”,
   “height”: “400px”
 });
Attributes
Set border to 1px black
 $(...).css(“border”, “1px solid black”);

Set various css properties.
 $(...).css({
   “background”: “yellow”,
   “height”: “400px”
 });

Set all link’s href attribute to google.com
 $(“a”).attr(“href”, “http://google.com”);
Attributes
Attributes

Replace HTML with a new paragraph.
 $(...).html(“<p>I’m new</p>”);
Attributes

Replace HTML with a new paragraph.
 $(...).html(“<p>I’m new</p>”);
    <div>whatever</div> turns into
    <div><p>I’m new</p></div>
Attributes

Replace HTML with a new paragraph.
 $(...).html(“<p>I’m new</p>”);
    <div>whatever</div> turns into
    <div><p>I’m new</p></div>
Set checkboxes attribute “checked” to checked.
 $(“:checkbox”).attr(“checked”,”checked”);
Attributes

Replace HTML with a new paragraph.
 $(...).html(“<p>I’m new</p>”);
    <div>whatever</div> turns into
    <div><p>I’m new</p></div>
Set checkboxes attribute “checked” to checked.
 $(“:checkbox”).attr(“checked”,”checked”);

Set input value to 3.
 $(...).val(“3”);
Attributes

Replace HTML with a new paragraph.
 $(...).html(“<p>I’m new</p>”);
    <div>whatever</div> turns into
    <div><p>I’m new</p></div>
Set checkboxes attribute “checked” to checked.
 $(“:checkbox”).attr(“checked”,”checked”);

Set input value to 3.   Get input value.
 $(...).val(“3”);        $(...).val();
Events Examples
Events
Events
When a button is clicked, do something.
 $(“button”).click(function(){
   something();
 });
Events
When a button is clicked, do something.
 $(“button”).click(function(){
   something();
 });
Setup a custom event and trigger it.
  $(“button“).bind(“expand”, function(){
    something();
  });
  $(“button:first“).trigger(“expand”);
Events
When a button is clicked, do something.
 $(“button”).click(function(){
   something();
 });
Setup a custom event and trigger it.
  $(“button“).bind(“expand”, function(){
    something();
  });
  $(“button:first“).trigger(“expand”);
Unbind custom event.
  $(“button“).unbind(“expand”);
Event Delegation
Event Delegation
Attach events to document
$(“button”).live(‘click’, function(){
  something();
});
Event Delegation
Attach events to document
$(“button”).live(‘click’, function(){
  something();
});

Attach event delegation to elements
$(“form“).delegate(“button”, ”click”, function(){
  something();
});
Effects / Animation
     Examples
Animation / Effects

Types of Effects
Animation / Effects

Types of Effects

      #1. Hide and Show
Animation / Effects

Types of Effects

      #1. Hide and Show

      #2. Fade In and Out
Animation / Effects

Types of Effects

      #1. Hide and Show

      #2. Fade In and Out

      #3. Slide Up and Down
Animation / Effects
Animation / Effects

With each click, slide up / slide down a div.
$(...).click(function(){
  $(“div:first”).slideToggle();
});
Animation / Effects

With each click, slide up / slide down a div.
$(...).click(function(){
  $(“div:first”).slideToggle();
});

Animate elements to 300px wide in .5 seconds.
$(...).animate({ “width”: “300px” }, 500);
Animation / Effects

With each click, slide up / slide down a div.
$(...).click(function(){
  $(“div:first”).slideToggle();
});

Animate elements to 300px wide in .5 seconds.
$(...).animate({ “width”: “300px” }, 500);

Take focus off elements by fading them to
30% opacity in .5 seconds
$(...).fadeTo(500, 0.3);
Traversing Examples
Traversing Examples

Get previous table cells to #myCell.
$(“#myCell”)
  <html>
   <body>
     <table><tr>
        <td></td>
        <td></td>
        <td id=”myCell”></td>
        <td></td>
     </tr></table>
   </body>
  </html>
Traversing Examples

Get previous table cells to #myCell.
$(“#myCell”) .prevAll()
  <html>
   <body>
     <table><tr>
        <td></td>
        <td></td>
        <td id=”myCell”></td>
        <td></td>
     </tr></table>
   </body>
  </html>
Traversing Examples

Get previous table cells to #myCell.
$(“#myCell”) .prevAll() .andSelf();
  <html>
   <body>
     <table><tr>
        <td></td>
        <td></td>
        <td id=”myCell”></td>
        <td></td>
     </tr></table>
   </body>
  </html>
Traversing Examples

Move paragraphs to element with id “foo”
$(“table”)
<html>
 <body>
   <table></table>
   <div>
    <p>foo</p>
    <span>bar</span>
   </div>
 </body>
</html>
Traversing Examples

Move paragraphs to element with id “foo”
$(“table”) .next()
<html>
 <body>
   <table></table>
   <div>
    <p>foo</p>
    <span>bar</span>
   </div>
 </body>
</html>
Traversing Examples

Move paragraphs to element with id “foo”
$(“table”) .next()
<html>
 <body>
   <table></table>
   <div>
    <p>foo</p>
    <span>bar</span>
   </div>
 </body>
</html>
Traversing Examples

Move paragraphs to element with id “foo”
$(“table”) .next().find(“p”);
<html>
 <body>
   <table></table>
   <div>
    <p>foo</p>
    <span>bar</span>
   </div>
 </body>
</html>
Ajax Examples
Ajax Examples
Ajax Examples

Post data, “bar” equals “baz” to tag.php using get.
  $(...).get(“tag.php”, { “bar”: “baz” });
Ajax Examples

Post data, “bar” equals “baz” to tag.php using get.
  $(...).get(“tag.php”, { “bar”: “baz” });

Post data, “foo” equals “bar” to send.php, then
alert the response.
  $.post(“send.php”, { foo: ”bar” },
   function(response){
     alert(response);
   });
Extending jQuery
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
});

  <html>
   <body>
     <div></div>
     <div></div>
   </body>
  </html>
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
});
$(“div”).myPlugin();
  <html>
   <body>
     <div></div>
     <div></div>
   </body>
  </html>
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
});
$(“div”).myPlugin();
  <html>
   <body>
     <div>you used myPlugin!</div>
     <div>you used myPlugin!</div>
   </body>
  </html>
Wait, There’s More!
jQuery isn’t only about simpler code
jQuery isn’t only about simpler code
     and being more productive
jQuery isn’t only about simpler code
     and being more productive

It is also about..
jQuery isn’t only about simpler code
     and being more productive

It is also about..
                 great community
   test coverage plugins books
            support
                        tutorials
   open (free) license            speed
               light weight code
Led to World Domination

                             jQuery

 http://google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype
            +javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
Usage Across Top 10,000 Sites




       http://trends.builtwith.com/javascript
Plugins
  jQuery has hundreds of plugins at
  http://plugins.jquery.com/

jQuery UI
  Set of official user interface
  components at:
  http://jqueryui.com
Support
 jQuery general discussion mailing list
    http://forum.jquery.com

 jQuery discussion docs page
    http://docs.jquery.com/Discussion

 jQuery IRC room
   #jquery on FreeNode.net
Books




Learning jQuery 1.3                             jQuery in Action
by Karl Swedberg                                Yahuda Katz
http://www.amazon.com/gp/product/1847196705?    http://www.amazon.com/gp/product/1933988355?
ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&cam   ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&camp
p=1789&creative=9325&creativeASIN=1847196705    =1789&creative=9325&creativeASIN=1933988355
Video Training




http://marcgrabanski.com/article/the-jquery-course-prerelease
Thank you!
Marc Grabanski:
http://marcgrabanski.com

Twitter: @1Marc

More Related Content

What's hot

jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
Edureka!
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
 
Javascript arrays
Javascript arraysJavascript arrays
Javascript arrays
Hassan Dar
 
Php functions
Php functionsPhp functions
Php functions
JIGAR MAKHIJA
 
JavaScript - Chapter 6 - Basic Functions
 JavaScript - Chapter 6 - Basic Functions JavaScript - Chapter 6 - Basic Functions
JavaScript - Chapter 6 - Basic Functions
WebStackAcademy
 
Javascript
JavascriptJavascript
Javascript
Sun Technlogies
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
Yuriy Bezgachnyuk
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
WebStackAcademy
 
Jquery
JqueryJquery
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
Jennifer Estrada
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
 
CSS
CSSCSS
Java script
Java scriptJava script
Java script
Shyam Khant
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Adieu
 
Dom
DomDom
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
Hibernate
HibernateHibernate
Hibernate
Ajay K
 
Document Object Model
Document Object ModelDocument Object Model
Document object model
Document object modelDocument object model
Document object model
Amit kumar
 
jQuery
jQueryjQuery

What's hot (20)

jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Javascript arrays
Javascript arraysJavascript arrays
Javascript arrays
 
Php functions
Php functionsPhp functions
Php functions
 
JavaScript - Chapter 6 - Basic Functions
 JavaScript - Chapter 6 - Basic Functions JavaScript - Chapter 6 - Basic Functions
JavaScript - Chapter 6 - Basic Functions
 
Javascript
JavascriptJavascript
Javascript
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
 
Jquery
JqueryJquery
Jquery
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
CSS
CSSCSS
CSS
 
Java script
Java scriptJava script
Java script
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Dom
DomDom
Dom
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Hibernate
HibernateHibernate
Hibernate
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Document object model
Document object modelDocument object model
Document object model
 
jQuery
jQueryjQuery
jQuery
 

Similar to jQuery Essentials

jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue Adventure
Allegient
 
jQuery
jQueryjQuery
JQuery-Tutorial" />
  JQuery-Tutorial" />  JQuery-Tutorial" />
JQuery-Tutorial" />
tutorialsruby
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentation
guestcf600a
 
Rails Presentation - Technology Books, Tech Conferences
 Rails Presentation - Technology Books, Tech Conferences Rails Presentation - Technology Books, Tech Conferences
Rails Presentation - Technology Books, Tech Conferences
tutorialsruby
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentation
guestcf600a
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
Angel Ruiz
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Jack Franklin
 
jQuery
jQueryjQuery
JQuery
JQueryJQuery
JQuery
DevTalk
 
J query training
J query trainingJ query training
jQuery basics
jQuery basicsjQuery basics
jQuery basics
Stijn Van Minnebruggen
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQuery
orestJump
 
jQuery - Introdução
jQuery - IntroduçãojQuery - Introdução
jQuery - Introdução
Gustavo Dutra
 
JQuery do dia-a-dia Gustavo Dutra
JQuery do dia-a-dia Gustavo DutraJQuery do dia-a-dia Gustavo Dutra
JQuery do dia-a-dia Gustavo Dutra
Tchelinux
 
Jquery 3
Jquery 3Jquery 3
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
musrath mohammad
 
Hooks WCSD12
Hooks WCSD12Hooks WCSD12
Hooks WCSD12
Jeffrey Zinn
 
Working With JQuery Part1
Working With JQuery Part1Working With JQuery Part1
Working With JQuery Part1
saydin_soft
 
J Query Public
J Query PublicJ Query Public
J Query Public
pradeepsilamkoti
 

Similar to jQuery Essentials (20)

jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue Adventure
 
jQuery
jQueryjQuery
jQuery
 
JQuery-Tutorial" />
  JQuery-Tutorial" />  JQuery-Tutorial" />
JQuery-Tutorial" />
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentation
 
Rails Presentation - Technology Books, Tech Conferences
 Rails Presentation - Technology Books, Tech Conferences Rails Presentation - Technology Books, Tech Conferences
Rails Presentation - Technology Books, Tech Conferences
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentation
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
 
jQuery
jQueryjQuery
jQuery
 
JQuery
JQueryJQuery
JQuery
 
J query training
J query trainingJ query training
J query training
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQuery
 
jQuery - Introdução
jQuery - IntroduçãojQuery - Introdução
jQuery - Introdução
 
JQuery do dia-a-dia Gustavo Dutra
JQuery do dia-a-dia Gustavo DutraJQuery do dia-a-dia Gustavo Dutra
JQuery do dia-a-dia Gustavo Dutra
 
Jquery 3
Jquery 3Jquery 3
Jquery 3
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 
Hooks WCSD12
Hooks WCSD12Hooks WCSD12
Hooks WCSD12
 
Working With JQuery Part1
Working With JQuery Part1Working With JQuery Part1
Working With JQuery Part1
 
J Query Public
J Query PublicJ Query Public
J Query Public
 

More from Marc Grabanski

CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
Marc Grabanski
 
Free vs Paid Content
Free vs Paid ContentFree vs Paid Content
Free vs Paid Content
Marc Grabanski
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
 
jQTouch and Titanium
jQTouch and TitaniumjQTouch and Titanium
jQTouch and Titanium
Marc Grabanski
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
Marc Grabanski
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
Marc Grabanski
 

More from Marc Grabanski (8)

CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
 
Free vs Paid Content
Free vs Paid ContentFree vs Paid Content
Free vs Paid Content
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
 
jQTouch and Titanium
jQTouch and TitaniumjQTouch and Titanium
jQTouch and Titanium
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 

Recently uploaded

一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
kmzsy4kn
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
stgq9v39
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
EricHo305923
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
oabn3692
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
xnhwr8v
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
aprhf21y
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
10h6bbc4
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
k4krdgxx
 
My Fashion PPT is my presentation on fashion and Trendss
My Fashion PPT is my presentation on fashion and TrendssMy Fashion PPT is my presentation on fashion and Trendss
My Fashion PPT is my presentation on fashion and Trendss
MedhaRana1
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
qbydc
 
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
yk5hdsnr
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
i990go7o
 

Recently uploaded (20)

一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
 
My Fashion PPT is my presentation on fashion and Trendss
My Fashion PPT is my presentation on fashion and TrendssMy Fashion PPT is my presentation on fashion and Trendss
My Fashion PPT is my presentation on fashion and Trendss
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
 
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
 

jQuery Essentials

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