SlideShare ist ein Scribd-Unternehmen logo
1 von 115
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
HTML X CSS
HTML X CSSHTML X CSS
HTML X CSS
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
Javascript essentials
Javascript essentialsJavascript essentials
Javascript essentials
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
 
jQuery
jQueryjQuery
jQuery
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
HTML5
HTML5HTML5
HTML5
 
Cookie and session
Cookie and sessionCookie and session
Cookie and session
 
CSS
CSSCSS
CSS
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 

Ähnlich wie jQuery Essentials

jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue AdventureAllegient
 
Rails Presentation - Technology Books, Tech Conferences
 Rails Presentation - Technology Books, Tech Conferences Rails Presentation - Technology Books, Tech Conferences
Rails Presentation - Technology Books, Tech Conferencestutorialsruby
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentationguestcf600a
 
JQuery-Tutorial" />
  JQuery-Tutorial" />  JQuery-Tutorial" />
JQuery-Tutorial" />tutorialsruby
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentationguestcf600a
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQueryAngel Ruiz
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Jack Franklin
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQueryorestJump
 
jQuery - Introdução
jQuery - IntroduçãojQuery - Introdução
jQuery - IntroduçãoGustavo 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 DutraTchelinux
 
Working With JQuery Part1
Working With JQuery Part1Working With JQuery Part1
Working With JQuery Part1saydin_soft
 

Ähnlich wie jQuery Essentials (20)

jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue Adventure
 
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
 
JQuery-Tutorial" />
  JQuery-Tutorial" />  JQuery-Tutorial" />
JQuery-Tutorial" />
 
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
 
jQuery
jQueryjQuery
jQuery
 

Mehr von Marc Grabanski

CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsMarc 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 AllMarc 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
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 

Mehr von 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
 

Kürzlich hochgeladen

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 

Kürzlich hochgeladen (19)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 

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