Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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]....
Hide divs with pure JavaScript
divs = document.getElementByTagName(‘div’);

for (i = 0; i < divs.length; i++) {
  divs[i]....
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 numbere...
Selector Examples

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

$(“#content”) get element with id content
$(“li:first”) get first list item
$(“tr:odd”) get odd numbere...
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 + “</...
jQuery Methods
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
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...
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(){
  ...
Moving Elements Examples

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

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

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

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

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

Move paragraphs to element with id “foo”
$(“p”) .appendTo(“#foo”);
<html>
 <body>
   <div>jQuery...
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()
...
Attributes


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


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


Get                 Set
.attr(‘id’)         .attr(‘id’, ‘foo’)
.html()             .html(“<p>hi</p>”)
.val() ...
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({
  ...
Attributes
Set border to 1px black
 $(...).css(“border”, “1px solid black”);

Set various css properties.
 $(...).css({
  ...
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...
Attributes

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

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

Replace HTML with a new paragraph.
 $(...).html(“<p>I’m new</p>”);
    <div>whatever</div> turns into
    <div...
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 an...
Events
When a button is clicked, do something.
 $(“button”).click(function(){
   something();
 });
Setup a custom event an...
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 delegati...
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()...
Animation / Effects

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

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

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

Get previous table cells to #myCell.
$(“#myCell”) .prevAll() .andSelf();
  <html>
   <body>
     <tab...
Traversing Examples

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

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

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

Move paragraphs to element with id “foo”
$(“table”) .next().find(“p”);
<html>
 <body>
   <table></tab...
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, ...
Extending jQuery
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
})...
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
})...
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
})...
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
 ...
Led to World Domination

                             jQuery

 http://google.com/trends?q=dojo+javascript,+jquery+javascri...
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
  com...
Support
 jQuery general discussion mailing list
    http://forum.jquery.com

 jQuery discussion docs page
    http://docs....
Books




Learning jQuery 1.3                             jQuery in Action
by Karl Swedberg                               ...
Video Training




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

Twitter: @1Marc
Nächste SlideShare
Wird geladen in …5
×

Moving Elements Examples Get element jQuery Essentials

360.396 Aufrufe

Veröffentlicht am

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>

Veröffentlicht in: Design, Technologie
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { https://urlzs.com/UABbn }
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD TH1S BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

×