SlideShare a Scribd company logo
1 of 181
Download to read offline
Yearning jQuery
Hi, I’m Remy / @rem

Screencast @
jqueryfordesigners.com

Questions: interrupt me
& ask!
Yearning jQuery
1. Build without jQuery.

2. Design the start and end of your
  effects without jQuery.

3. Add jQuery a little at a time.
(a lot of it is...)


        "all about CSS"

                      Me, to many a colleague
@rem
     Remy Sharp



Dear designer/dev: if you're using
JavaScript to do a job that CSS could have
done perfectly well, you've lost some
points in my book. Sorry
@rem
     Remy Sharp



The day someone loses business because
an animated transition wasn't used to
reveal a screenshot: I'll sell my left nut on
eBay. #cssinstead
What we're covering

• Getting friendly with the $
• DOM navigation & manipulation
• Events
• Ajax
• Tips
APIs         Blogs, tutorials, screencasts,
 docs.jquery.com
                    plugins, development sprints
  api.jquery.com
 visualjquery.com



  Twitter                         forum.jquery.com
  @jquery           Help!
@jquerysites
 @jqueryui
                    IRC channel
             irc.freenode.net/#jquery
jsbin.com
Bling Function
Yearning jQuery
It means no more of this
var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++) {
!   var rows = tables[t].getElementsByTagName('tr');
!   for (var i = 1; i < rows.length; i += 2) {
        if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
            rows[i].className += ' odd';
        }
    }
}
jQuery simplifies


$('table tr:nth-child(odd)').addClass('odd');
jQuery simplifies

jQuery function

$('table tr:nth-child(odd)').addClass('odd');
jQuery simplifies

jQuery function

$('table tr:nth-child(odd)').addClass('odd');


             CSS expression
jQuery simplifies

jQuery function            jQuery method

$('table tr:nth-child(odd)').addClass('odd');


             CSS expression
jQuery simplifies


$('table tr:nth-child(odd)').addClass('odd');
$('just css')
Tools of the Trade
• Firefox: Firebug (& FireQuery*)
• Safari & Chrome: Web Inspector
• Opera: DragonFly
• IE: Web Developer Toolbar
Yearning jQuery
Yearning jQuery
Yearning jQuery
Tip

      $.fn.jquery

        (little 'q')
Let's play.

http://twitter.com
jQuery on every site?
        No Problem.
http://bit.ly/9JAcCj
Let's play.
Installing jQuery
dev or min?
Hosting options
  • Host it yourself (good for offline
    dev)

  • Hotlink it:
   • Media Temple
   • Microsoft
   • Google (my pick)
http://docs.jquery.com/Downloading_jQuery
CDN FTW
Tip: keep a copy on
  your machine
Where does it all go?
• jQuery first
• Then jQuery plugins
• Then your code
• Other JavaScript libraries
• jQuery last library
• Then jQuery plugin scripts
• Then your code
<html>
<head>
  <styles>
  <!-- make me beautiful -->
  </styles>
</head>
<body>
  <content>
  <!-- make me learned -->
  </content>
  <behaviour>
  <!-- ooo, matron -->
  </behaviour>
</body>
</html>
<html>
                 <head>
                   <styles>
 Styles first      <!-- make me beautiful -->
let's the page     </styles>
                 </head>
   render
                 <body>
  without          <content>
   scripts         <!-- make me learned -->
                   </content>
  blocking
                   <behaviour>
                   <!-- ooo, matron -->
                   </behaviour>
                 </body>
                 </html>
<html>
                 <head>
                   <styles>
                   <!-- make me beautiful -->
 Then your         </styles>
  content,       </head>
again so that    <body>
                   <content>
it's delivered
                   <!-- make me learned -->
   to your         </content>
 visitor as        <behaviour>
                   <!-- ooo, matron -->
  early as
                   </behaviour>
  possible       </body>
                 </html>
<html>
               <head>
                 <styles>
                 <!-- make me beautiful -->
                 </styles>
               </head>
               <body>
Finally, add
                 <content>
   your          <!-- make me learned -->
behaviour,       </content>
the jQuery       <behaviour>
                 <!-- ooo, matron -->
 and sexy
                 </behaviour>
magic jazz.    </body>
               </html>
$(document).ready(function () {

      // < YOU >

});
$(document).ready(function () {

      // < YOU >

});
$(function () {

      // < YOU >

});
Tip
jQuery(function ($) {

      // < YOU >

});

       Useful when giving code to a client
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>My first jQuery page</title>
</head>
<body>
<h1>Remy woz 'ere</h1>
<p>Lorem ipsum dolor sit amet.</p>
<script src="jquery.min.js"></script>
<script>
$(function () {
    // < YOU >
});
</script>
</body>
</html>
Is it jQuery or $?
It's both.
$('table tr:nth-child(odd)')
jQuery('table tr:nth-child(odd)')
$('table tr:nth-child(odd)')
∞∞∞ Chaining ∞∞∞
$('div').show().hide().slideUp().slideDown();
$('div').show().hide().slideUp().slideDown();



            Get the divs,
$('div').show().hide().slideUp().slideDown();



          and show them,
$('div').show().hide().slideUp().slideDown();



          now hide them,
$('div').show().hide().slideUp().slideDown();



    and then slide them up,
$('div').show().hide().slideUp().slideDown();



then finally slide them down.
Can't chain text getters




.val() .html() .text() .css(prop) .attr(prop), etc
Gotc ha
  & Tip

  if ( $('foo') ) {
    doAmazing();
  }
1) $('foo')
2) $()
3) []
4) [].join(',') // works
if ( $('foo') ) {
  doAmazing();
}
if ( $('foo').length ) {
  doAmazing();
}
$('el').doStuff
        vs
  $.doStuff
$('el').doStuff
 runs against
  everything
   matched.
$.doStuff
is a utility.
Deprecated

$.browser.version
$.browser.msie
$.browser.safari
$.browser.webkit
Doing stuff
$('a').click(function () {
  alert('I got clicked');
  return false;
});
$('a').click(function () {
  alert('I got clicked');
  return false;
});


      Find the anchors
$('a').click(function () {
  alert('I got clicked');
  return false;
});


    when they're clicked
$('a').click(function () {
  alert('I got clicked');
  return false;
});

run this function - don't worry
   about the crazy syntax.
$('a').click(function () {
  alert('I got clicked');
  return false;
});

 Cancel the browser's default
 action, which is to redirect.
$('a').click(function(event){
   event.preventDefault();
   alert('I got clicked');
 });

Same thing as cancelling (almost),
  this is useful for debugging.
• click, dblclick
• mousedown, mouseup, mousemove
  mouseover, mouseout, mouseenter
  mouseleave

• keydown, keypress, keyup
• submit, change, blur, focus, select
• scroll, resize, load, error
Tabs freakin' everywhere!
Yearning jQuery
Yearning jQuery
Yearning jQuery
Yearning jQuery
You get the idea.
A tabbing system is...

• A group of "panels"
• Tabs (or links) pointing to a panel
• Clicking tab, hides all panels, then
  shows just one
...the content can
 also be be Ajaxy
A few words on this
this is the element
that the event is
happening to.
$('a').click(function () {
  console.log(this);
});


this is the anchor element, not the jQuery
wrapped element.
Common mistake
$('a').click(function () {
  setTimeout(function () {
    $(this).text("I'm alive!");
  }, 1000);
});
Common mistake
$('a').click(function () {
  setTimeout(function () {
    $(this).text("I'm alive!");
  }, 1000);
});


this is the window object, not the link
Common mistake
$('a').click(function () {
  var el = this;
  setTimeout(function () {
    $(el).text("I'm alive!");
  }, 1000);
});
Live codin' time!

     tabs.html
Events
$('input').keydown(function (event) {
  // what's the event arg?
});
•.keyup(fn), .click(fn), etc
•.bind(type, fn)
•.trigger(type), unbind(type)
•.one(type, fn)
Tip

      Clickables
$.event.special.click = {
   setup: function() {
      $(this).css('cursor','pointer');
      return false;
   },
   teardown: function() {
      $(this).css('cursor','');
      return false;
   }
};

                 All credit to David Walsh
Problem
<h1>Super Ted</h1>
               <img src="superted.jpg">
 When the
               <img src="spotty.jpg">
 page has      <img src="txspete.jpg">
 finished      <script src="jquery.js">
               <script>
loading, the
               $('img').click(function(){
jQuery runs      showDetails(this);
               });
               </script>
<h1>Super Ted</h1>
  Clicking     <img src="superted.jpg">
               <img src="spotty.jpg">
these images
               <img src="txspete.jpg">
  "shows       <script src="jquery.js">
  details"     <script>
               $('img').click(function(){
                 showDetails(this);
               });
               </script>
<h1>Super Ted</h1>
                <img src="superted.jpg">
 Now Ajax       <img src="spotty.jpg">
(or something   <img src="txspete.jpg">
else) add new   <script src="jquery.js">
                <script>
images to the   $('img').click(function(){
    page          showDetails(this);
                });
                </script>
<h1>Super Ted</h1>
                <img src="superted.jpg">
 Now Ajax       <img src="spotty.jpg">
                <img src="txspete.jpg">
(or something
                <img src="mothernature.jpg">
else) add new   <script src="jquery.js">
images to the   <script>
                $('img').click(function(){
    page
                  showDetails(this);
                });
                </script>
<h1>Super Ted</h1>
                <img src="superted.jpg">
                <img src="spotty.jpg">
Clicking this   <img src="txspete.jpg">
image doesn't   <img src="mothernature.jpg">
do anything.    <script src="jquery.js">
                <script>
                $('img').click(function(){
                  showDetails(this);
                });
                </script>
Solution: delegation
<h1>Super Ted</h1>
<img src="superted.jpg">
<img src="spotty.jpg">
<img src="txspete.jpg">
<script src="jquery.js">
<script>
$('#superTed').delegate('img','click',function(){
  showDetails(this);
});
</script>
Yearning jQuery
These images
are loaded after
 the DOM has
loaded via Ajax
We're going to "delegate" the
task of listening for particular
     events to this <div>
We've "delegate" clicks,
looking for the "img" selector
$('div').delegate('img','click',function(){
  /* do funky stuff */
});
Now, any new images inserted in this
<div> can be clicked and will fire the
       "funky stuff" function
Ajax   Warning: wear your tech-hat
No brainer Ajax
.load
Yearning jQuery
Example
$('#detail').load('page.html');
$('#detail').load('page.html #id');
1. Ajax load the page

2. Search for the selector passed
  (#dizzy)

3. Squirt contents found into original
  selector
$('#tabs a').click(function (event) {
  // this.pathname = 'ajax-load-detail.html'
  $('#detail').load(this.pathname);
  return false;
});
this.hash

$('#tabs a').click(function (event) {
  $('#detail').load(this.pathname + ' ' +
this.hash);
  return false;
});
JSON
JavaScript Object
{
    screen_name : "@rem",
    height : "short",
    fingers : 5,
    brit : true
}
JSON
{
    "screen_name": "@rem",
    "height": "short",
    "fingers": 5,
    "brit": true
}
JSONP WTF
JSON+...
{
    "screen_name": "@rem",
    "height": "short",
    "fingers": 5,
    "brit": true
}
JSON+Padding
callback({
 "screen_name": "@rem",
 "height": "short",
 "fingers": 5,
 "brit": true
});
Getting other
people's data
$.getJSON
Remember =?
Twitter
ajax/twitter.html
$(document).ready(function () {
  $.getJSON('http://twitter.com/statuses/user_timeline/rem.json?callback=?',
  function (data) {
    $('#tweets').empty();

    $.each(data, function (i, item) {
      $('#tweets').append('<li class="tweet">' + item.text + '</li>');
    });
  });
});
Loading...




Giving users
 feedback
Ajax order

1. ajaxStart

2. ajaxSuccess (or ajaxError)

3. ajaxComplete


    http://api.jquery.com/?s=ajax
$('#status').ajaxStart(function () {
  $(this).fadeIn();
}).ajaxComplete(function () {
  $(this).fadeOut();
});
Deferreds
$.get('foo.html', function (html) {
var jqXHR = $.get('foo.html');
  $('#latest').append(html);
});
jqXHR.done(function (html) {
  $('#latest').append(html);
});
$.ajax({
  url: 'foo.json',
  dataType: 'json',
  success: function () {
     // this === xhr
  },
  error: function () {

  }
});
$.ajax({
  url: 'foo.json',
  dataType: 'json',
  context: document.body,
  success: function () {
     // this === body element
  },
  error: function () {

  }
});
var jqXHR = $.ajax({
  url: 'foo.json',
  dataType: 'json',
  context: document.body
});

jqXHR.then(success, fail);
var jqXHR = $.ajax({
  url: 'foo.json',
  dataType: 'json',
  context: document.body
});

jqXHR.then(success, fail);

// much later in the code

jqXHR.done(success2);
jqXHR is a
promise
Yearning jQuery
Yearning jQuery
var jqXHR = $.ajax({
  url: 'foo.json',
  dataType: 'json',
  context: document.body
});

// much later in the code

jqXHR.done(success);
.done(ok)   // success
.fail(fail) // error
.always(fn) // complete
.then(ok, fail)
Plugins
What’s a plugin?
A plugin is nothing more than a
custom jQuery method created to
extend the functionality of the jQuery
object


$(‘ul’).myPlugin()
Plugin design in 6 steps
Step 1:
create a private
scope for $ alias
<!DOCTYPE html><html><body>
<script src=”jquery.js”></script>
<script>
(function ($) {

})(jQuery);
</script></body></html>
Step 2:
 attach plugin to fn
alias (aka prototype)
<!DOCTYPE html><html><body>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
  $(this).text(
     $(this).text().replace(/hate/g, ‘love’)
  );
}; // end of plugin
})(jQuery);
</script></body></html>
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
  $(this).text(
     $(this).text().replace(/hate/g, ‘love’)
  );
}; // end of plugin
})(jQuery);

$(‘p’).notHate();
</script></body></html>
Step 3:
add implicit iteration
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
  this.each(function () {
    $(this).text(
       $(this).text().replace(/hate/g, ‘love’)
    );
  });
}; // end of plugin
})(jQuery);

$(‘p’).notHate();
</script></body></html>
Step 4:
enable chaining
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
  return this.each(function () {
    $(this).text(
       $(this).text().replace(/hate/g, ‘love’)
    );
  });
}; // end of plugin
})(jQuery);

$(‘p’).notHate().hide();
</script></body></html>
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
 this == jQuery
(function ($) {
$.fn.notHate = function () {
  return this.each(function () {
     $(this).text(
        $(this).text().replace(/hate/g, ‘love’)
     );
  });
}; // end of plugin
})(jQuery);

$(‘p’).notHate().hide();
</script></body></html>
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
 this == jQuery
(function ($) {
$.fn.notHate = function () {
  return this.each(function () {
     $(this).text(
        $(this).text().replace(/hate/g, ‘love’)
     );
  });
}; // end of == DOM element
           this plugin
})(jQuery);

$(‘p’).notHate().hide();
</script></body></html>
Step 5:
add default options
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
  return this.each(function () {
    $(this).text(
       $(this).text().replace(/hate/g,
       ➥ $.fn.notHate.defaults.text)
    );
  });
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);

$(‘p’).notHate();
</script></body></html>
Step 6:
add custom options
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
  return this.each(function () {
    $(this).text(
       $(this).text().replace(/hate/g,
       ➥ $.fn.notHate.defaults.text)
    );
  });
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);

$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function (options) {
  return this.each(function () {
    $(this).text(
       $(this).text().replace(/hate/g,
       ➥ $.fn.notHate.defaults.text)
    );
  });
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);

$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function (options) {
  var settings = $.extend({},
  ➥ $.fn.notHate.defaults, options);

  return this.each(function () {
    $(this).text(
       $(this).text().replace(/hate/g,
       ➥ $.fn.notHate.defaults.text)
    );
  });
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);

$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
<!DOCTYPE html><html><body>     http://jsbin.com/ifuga/edit
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function (options) {
  var settings = $.extend({},
  ➥ $.fn.notHate.defaults, options);

  return this.each(function () {
    $(this).text(
       $(this).text().replace(/hate/g,
       ➥ settings.text)
    );
  });
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);

$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
Yearning jQuery
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function (options) {
  var settings = $.extend({},
  ➥ $.fn.notHate.defaults, options);

  return this.each(function () {
    $(this).text(
       $(this).text().replace(/hate/g,
       ➥ settings.text)
    );
  });
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);

$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function (options) {
  var settings = $.extend({},
  ➥ $.fn.notHate.defaults, options);

  return this.text(function (i, text) {
    return text.replace(/hate/g,
      ➥ settings.text);
  });
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);

$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
Poorly
designed
 plugins
$.fn.myplugin = function () {
  var me = $(this).each(function() {
    return $(this).bind('someEvent', function () {
      // does something
    });
  });

  return me;
};
$.fn.myplugin = function () {
  var me = $(this).each(fn);

  return me;
};
$.fn.myplugin = function () {
  return $(this).each(fn);
};
$.fn.myplugin = function () {
  return $(this).each(function() {
    return $(this).bind('someEvent', function () {
      // does something
    });
  });
};
$.fn.myplugin = function () {
  return $(this).each(function() {
    return $(this).bind('someEvent', function () {
      // does something
    });
  });
};
$.fn.myplugin = function () {
  return this.each(function() {
    return $(this).bind('someEvent', function () {
      // does something
    });
  });
};
$.fn.myplugin = function () {
  return this.each(function() {
    return $(this).bind('someEvent', function () {
      // does something
    });
  });
};
$.fn.myplugin = function () {
  return this.each(function() {
    $(this).bind('someEvent', function () {
      // does something
    });
  });
};
$.fn.myplugin = function () {
  return this.each(function() {
    $(this).bind('someEvent', function () {
      // does something
    });
  });
};
$.fn.myplugin = function () {
   return this.bind('someEvent', function () {
     // does something
  });
};
(function ($) {
  $.fn.myplugin = function () {
    return this.bind('someEvent', function () {
       // does something
     });
  };
})(jQuery);
Questions?
      To contact me after my presentation
      – text NHT to INTRO (46876)


      Or --
      remy@leftlogic.com
      @rem

More Related Content

What's hot

JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)jeresig
 
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQueryRemy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuerydeimos
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryRemy Sharp
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)jeresig
 
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web componentsPolymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web componentspsstoev
 
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KThomas Fuchs
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingDoug Neiner
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todaygerbille
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.jsjeresig
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
 
jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jeresig
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQueryRemy Sharp
 

What's hot (20)

JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)
 
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQueryRemy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)
 
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web componentsPolymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web components
 
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
 
YouDrup_in_Drupal
YouDrup_in_DrupalYouDrup_in_Drupal
YouDrup_in_Drupal
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.js
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 

Viewers also liked

predefined and user defined functions
predefined and user defined functionspredefined and user defined functions
predefined and user defined functionsSwapnil Yadav
 
Database Systems - SQL - DDL Statements (Chapter 3/2)
Database Systems - SQL - DDL Statements (Chapter 3/2)Database Systems - SQL - DDL Statements (Chapter 3/2)
Database Systems - SQL - DDL Statements (Chapter 3/2)Vidyasagar Mundroy
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
TIAA Traditional Annuity: Adding Safety and Stability to Retirement Portfolios
 TIAA Traditional Annuity: Adding Safety and Stability to Retirement Portfolios TIAA Traditional Annuity: Adding Safety and Stability to Retirement Portfolios
TIAA Traditional Annuity: Adding Safety and Stability to Retirement Portfoliosfinance9
 
Javascript jQuery jQuery Ui
Javascript jQuery jQuery UiJavascript jQuery jQuery Ui
Javascript jQuery jQuery UiTom Friedhof
 

Viewers also liked (9)

predefined and user defined functions
predefined and user defined functionspredefined and user defined functions
predefined and user defined functions
 
Database Systems - SQL - DDL Statements (Chapter 3/2)
Database Systems - SQL - DDL Statements (Chapter 3/2)Database Systems - SQL - DDL Statements (Chapter 3/2)
Database Systems - SQL - DDL Statements (Chapter 3/2)
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
TIAA Traditional Annuity: Adding Safety and Stability to Retirement Portfolios
 TIAA Traditional Annuity: Adding Safety and Stability to Retirement Portfolios TIAA Traditional Annuity: Adding Safety and Stability to Retirement Portfolios
TIAA Traditional Annuity: Adding Safety and Stability to Retirement Portfolios
 
Javascript jQuery jQuery Ui
Javascript jQuery jQuery UiJavascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
 
Fundamental JQuery
Fundamental JQueryFundamental JQuery
Fundamental JQuery
 
HTTP & HTML & Web
HTTP & HTML & WebHTTP & HTML & Web
HTTP & HTML & Web
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 

Similar to Yearning jQuery

Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
Client-side Transformations
Client-side TransformationsClient-side Transformations
Client-side TransformationsJohn Boxall
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Treeadamlogic
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsRachael L Moore
 
jQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't KnowjQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't Knowgirish82
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.jsTechExeter
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricksambiescent
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentationMevin Mohan
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created itPaul Bearne
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Jack Franklin
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax pluginsInbal Geffen
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax pluginsInbal Geffen
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshowsblackman
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibilityEb Styles
 

Similar to Yearning jQuery (20)

Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Client-side Transformations
Client-side TransformationsClient-side Transformations
Client-side Transformations
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Tree
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
 
jQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't KnowjQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't Know
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
J query
J queryJ query
J query
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
jQuery Basic API
jQuery Basic APIjQuery Basic API
jQuery Basic API
 
Jquery
JqueryJquery
Jquery
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created it
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax plugins
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax plugins
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 

More from Remy Sharp

Forget the Web
Forget the WebForget the Web
Forget the WebRemy Sharp
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction ImplementationRemy Sharp
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the newRemy Sharp
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsRemy Sharp
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the webRemy Sharp
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIsRemy Sharp
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless AppsRemy Sharp
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009Remy Sharp
 

More from Remy Sharp (14)

Forget the Web
Forget the WebForget the Web
Forget the Web
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction Implementation
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the web
 
TwitterLib.js
TwitterLib.jsTwitterLib.js
TwitterLib.js
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIs
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009
 

Recently uploaded

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 

Recently uploaded (20)

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 

Yearning jQuery