SlideShare a Scribd company logo
1 of 77
Download to read offline
Pimp your site with jQuery!
Pimp your site
    using
About me

  @elliottkember

Freelance developer
   Rails, jQuery
Pimp your site with jQuery!
Why jQuery?

             it's fast
        it's widely-adopted
     its great dev community
its excellent cross-browser support
Getting started
Download from jQuery.com




or host with Google Code
Getting started
Download from jQuery.com
    curl -O http://code.jquery.com/jquery-1.4.2.min.js javascripts




or host with Google Code
    <script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
    google.load("jquery", "1.4.2");
    google.load("jqueryui", "1.8.0");
    google.load("prototype", "1.6.1.0");
    google.load("scriptaculous", "1.8.3");
    google.load("mootools", "1.2.4");
    google.load("dojo", "1.4.1");
    google.load("swfobject", "2.2");
    google.load("yui", "2.8.0r4");
    google.load("ext-core", "3.1.0");
$
First things first
CSS1-2 selectors...

      $(‘#content’)
    $(‘#content div’)
 $(‘#content div.hidden’)
That’s not all...
That’s not all...
 CSS3 selectors!

 $(‘div[rel=external]’) OMF
                           G!
    $(‘div:empty’)
 $(‘div:not(.hidden)’)
Events
$(‘#content div’).click(event);


$(‘#content div’).click(
     function(){ // do things here }
);
More events than
  Foursquare
More events than
          Foursquare
.bind()       .keydown()      .one()
.blur()       .keypress()     .ready()
.change()     .keyup()        .resize()
.click()      .live()         .scroll()
.dblclick()   .load()         .select()
.delegate()   .mousedown()    .submit()
.die()        .mouseenter()   .toggle()
.error()      .mouseleave()   .trigger()
.focus()      .mousemove()    .triggerHandler()
.focusin()    .mouseout()     .unbind()
.focusout()   .mouseover()    .undelegate()
.hover()      .mouseup()      .unload()


http://api.jquery.com/category/events/
More events than
          Foursquare
.bind()           .keydown()       .one()
.blur()           .keypress()      .ready()
.change()         .keyup()         .resize()
.click()          .live()          .scroll()
.dblclick()       .load()          .select()
.delegate()       .mousedown()     .submit()
.die()            .mouseenter()    .toggle()
.error()          .mouseleave()    .trigger()
.focus()          .mousemove()     .triggerHandler()
.focusin()        .mouseout()      .unbind()
.focusout()       .mouseover()     .undelegate()
.hover()          .mouseup()       .unload()


       http://api.jquery.com/category/events/
.click() handler
(it’s like onClick but way way nicer)


    $(this).click(function(){
          alert(‘a’)
    });
but I want TWO
          events!
$(this).toggle(function(){
      alert(‘a’)
}, function(){
      alert(‘b’)
});
what about that AJAX
             thing?
$.ajax()
$.post()
$.get()
$.getScript()
and
$.getJSON()
Using AJAX
$.ajax({
  url: '/notes/new',
  type: 'POST',
  success: function(data){
      alert(data);
  }
Using AJAX
$.get('/notes/new',
function(){
  alert(data);    $.post('/notes/new',
                  function(){
                      alert(data);




                 $.ajax();
.load() is special
$(‘#content’).load('/notes', function(){
   // This is where the magic
happens!
});
.load() is special
$(‘a[rel=browser]’).click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addClass('loading')
    .load($(this).attr('href'),
       function(){
             $('#browser').removeClass('loading')
       });
.load() is special
$('a[href^='/']').click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addClass('loading')
    .load($(this).attr('href'),
       function(){
             $('#browser').removeClass('loading')
       });
.load() is special
$('a[href^='/']').click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addClass('loading')
    .load($(this).attr('href'),
       function(){
             $('#browser').removeClass('loading')
       });
.load() is special
$('a[href^='/']').click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addClass('loading')
    .load($(this).attr('href') + ' #browser',
       function(){
             $('#browser').removeClass('loading')
       });
.load() is special
$('a[href^='/']').click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addClass('loading')
    .load($(this).attr('href') + ' #browser',
       function(){
             $('#browser').removeClass('loading')
       });
.load() is special

$('#browser')


  .load($(this).attr('href') + ' #browser')
  .load('/notes #browser')
.load() is special

$('#browser')


  .load($(this).attr('href') + ' #browser')
  .load('/notes #browser')
.load() is special

$('#browser').load('/notes #browser')
.load() is special




$('#browser').load('/notes
       #browser')
When you’re
         ready...
$( ‘document’).ready(
    function(){
      // This is where the magic
      happens!
    }
);
When you’re
         ready...
$( ‘document’).ready(
                    function(){
     // This is where the magic happens!
} );
When you’re
         ready...
$(function(){
     // This is where the magic happens!
} );
When you’re
         ready...
$(function(){
     // This is where the magic happens!
} );
Functiony goodness

  $(‘#content’).show()
  $(‘#content’).hide()
 $(‘#content’).fadeOut()
 $(‘#content’).fadeIn()
Each!


$(‘ul#items li’).each(...)

    a function goes here!
Each!
$(‘ul#items li’).each(function(){
     // In here, we can do what we want.
     // Use “this” to mess with this <li>.
  // Or $(this) if you want to use jQuery-fu
on it!
     $(this).hide()
})
but wait...



$(this).hide()
jQuery can CHAIN.



$(this).hide()
jQuery can CHAIN.


$(this).hide()
jQuery can CHAIN.


$(this).hide().show()
jQuery can CHAIN.

$
(this).hide().show().css(‘float’,
‘left’)
jQuery can CHAIN.
$(this)
   .hide()
   .show()
   .css(‘float’, ‘left’)
   .wrap(‘<li class=“item”/>’)
   .click(
       function(){
         alert(‘a’)
jQuery can CHAIN.
$(this)
   .hide()                            // hide
   .show()                            // show again
   .css(‘float’, ‘left’)             // Do some CSS
   .wrap(‘<li class=“item”/>’)   // wrap in <li>s
   .click(                            // add a click
handler
      function(){                  // which...
        alert(‘a’)                    // alerts ‘a‘!
I know this looks frightening. It just takes
                 practice.
Pimp your site with jQuery!
A stroll through the
        DOM
  $(‘form.new_item’)
    .parents(‘div.form’)
    .find(‘li.description’)
    .find(‘a.name’)


  .children(‘span.surname’)
A stroll through the
        DOM
  $(‘form.new_item’)
      .parents(‘div.form’)
      .find(‘li.description’)
      .find(‘a.name’)


  .children(‘span.surname’)

  This is called “traversing”.
Pimp your site with jQuery!
jQuery UI
makes things fly around
Pimp your site with jQuery!
.animate()

$(‘li:first’).animate({
  ‘margin-left’ : ‘30px’
}, 1000)
.animate()

$('li:first').animate({
  'margin-left' : '-=150px '
}, 1000)
.animate()

$('li:first').animate({
  'margin-left' : '-=150px'
}, 1000)
$(".block").toggle(function() {
   $(this).animate({
      backgroundColor :
"black"
   }, 1000);
}, function() {
   $(this). animate({
      backgroundColor :
"#68BFEF"
.toggleClass()


$('li:first').toggleClass(class,
            duration)
.toggleClass()


$('li:first').toggleClass('selected',
                1000)
Interactions
   Draggable
   Droppable
   Resizable
   Selectable
   Sortable
Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
disabled           distance
             addClasses         grid
Draggable                       handle
             appendToElement
             axis               helper
Droppable
             cancel             iframeFix
Resizable    connectToSortabl   opacity
             e                  refreshPositions
Selectable   containment        revert
             cursor             revertDuration
Sortable     cursorAtObject     scope
             delay              scroll
Pimp your site with jQuery!
A menu
$(‘li a’).hover(
   function(){
       $(this).fadeTo(1000, 1);
   }, function(){
       $(this).fadeTo(1000, 0.5);
   }
$('ul#menu li').hover(
  function(){
      $(this).find('ul').fadeTo(1000, 1);
  }, function(){
      $(this).find('ul').fadeTo(1000, 0.5);
  }
).find('ul').fadeTo(0, 0.5);
$('ul#menu li').hover(
  function(){
        $(this).find('ul').stop().fadeTo(1000,
1);
  }, function(){
        $(this).find('ul').stop().fadeTo(1000,
0.5);
  }
).find('ul').fadeTo(0, 0.5);
Plugins
are where the magic REALLY happens.

    "Results 1 - 10 of about 2,260,000 for jquery plugins."
Fancybox /
 Facybox
Form Plugin
 Easy validation, AJAXification of forms.


$('#myForm').ajaxForm(function() { 
      alert('Thank you for your comment!'); 
});


 http://jquery.malsup.com/form/#ajaxForm
jquery.example.js
  Gives your input fields default values!




http://github.com/mudge/jquery_example
Using Rails?


     Use jRails!
http://github.com/aaronchi/jrails
CA
VE
CA
VE
BE CAREFUL
BE CAREFUL
jQuery is
like lipstick
don’t
overdo it.
Pimp your site with jQuery!
Pimp your site with jQuery!

More Related Content

What's hot

Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...irwinvifxcfesre
 
Pianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumPianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumirwinvifxcfesre
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for MobileIvano Malavolta
 
Skaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant ParkSkaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant Parkchicagonewsyesterday
 
Drupal Cms Prezentace
Drupal Cms PrezentaceDrupal Cms Prezentace
Drupal Cms PrezentaceTomáš Kafka
 
RxSwift 예제로 감잡기
RxSwift 예제로 감잡기RxSwift 예제로 감잡기
RxSwift 예제로 감잡기Yongha Yoo
 
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax FrameworksJonathan Snook
 
A slew of AACM 50th anniversary celebrations this weekend
A slew of AACM 50th anniversary celebrations this weekendA slew of AACM 50th anniversary celebrations this weekend
A slew of AACM 50th anniversary celebrations this weekendchicagonewsyesterday
 
Chief Keef's hologram can't catch a break, and it's a win for Keef
Chief Keef's hologram can't catch a break, and it's a win for KeefChief Keef's hologram can't catch a break, and it's a win for Keef
Chief Keef's hologram can't catch a break, and it's a win for Keefchicagonewsonlineradio
 
jQueryUI: Rich Interactivity, Simplified
jQueryUI: Rich Interactivity, SimplifiedjQueryUI: Rich Interactivity, Simplified
jQueryUI: Rich Interactivity, Simplifiedmikehostetler
 
Intro to jQuery UI
Intro to jQuery UIIntro to jQuery UI
Intro to jQuery UIappendTo
 
2015 Key Ingredient Cook-Off
2015 Key Ingredient Cook-Off2015 Key Ingredient Cook-Off
2015 Key Ingredient Cook-Offirwinvifxcfesre
 
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...irwinvifxcfesre
 

What's hot (20)

Jquery2
Jquery2Jquery2
Jquery2
 
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
 
Pianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumPianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio album
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for Mobile
 
Jquery Framework
Jquery FrameworkJquery Framework
Jquery Framework
 
Get more votes!
Get more votes!Get more votes!
Get more votes!
 
Prototype UI
Prototype UIPrototype UI
Prototype UI
 
Skaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant ParkSkaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant Park
 
Drupal Cms Prezentace
Drupal Cms PrezentaceDrupal Cms Prezentace
Drupal Cms Prezentace
 
RxSwift 예제로 감잡기
RxSwift 예제로 감잡기RxSwift 예제로 감잡기
RxSwift 예제로 감잡기
 
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax Frameworks
 
A slew of AACM 50th anniversary celebrations this weekend
A slew of AACM 50th anniversary celebrations this weekendA slew of AACM 50th anniversary celebrations this weekend
A slew of AACM 50th anniversary celebrations this weekend
 
Best hotel
Best hotelBest hotel
Best hotel
 
Chief Keef's hologram can't catch a break, and it's a win for Keef
Chief Keef's hologram can't catch a break, and it's a win for KeefChief Keef's hologram can't catch a break, and it's a win for Keef
Chief Keef's hologram can't catch a break, and it's a win for Keef
 
jQueryUI: Rich Interactivity, Simplified
jQueryUI: Rich Interactivity, SimplifiedjQueryUI: Rich Interactivity, Simplified
jQueryUI: Rich Interactivity, Simplified
 
Index2
Index2Index2
Index2
 
Intro to jQuery UI
Intro to jQuery UIIntro to jQuery UI
Intro to jQuery UI
 
Best Fried Chicken
Best Fried ChickenBest Fried Chicken
Best Fried Chicken
 
2015 Key Ingredient Cook-Off
2015 Key Ingredient Cook-Off2015 Key Ingredient Cook-Off
2015 Key Ingredient Cook-Off
 
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
 

Viewers also liked

千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7javatwo2011
 
jQuery SUG Group Introduction
jQuery SUG Group IntroductionjQuery SUG Group Introduction
jQuery SUG Group IntroductionAndrew Chalkley
 
使用Hudson打造屬於你自己的軟體建構機器人
使用Hudson打造屬於你自己的軟體建構機器人使用Hudson打造屬於你自己的軟體建構機器人
使用Hudson打造屬於你自己的軟體建構機器人javatwo2011
 
比XML更好用的Java Annotation
比XML更好用的Java Annotation比XML更好用的Java Annotation
比XML更好用的Java Annotationjavatwo2011
 
Twiggy - let's get our widget on!
Twiggy - let's get our widget on!Twiggy - let's get our widget on!
Twiggy - let's get our widget on!Elliott Kember
 
What's Next in Growth? 2016
What's Next in Growth? 2016What's Next in Growth? 2016
What's Next in Growth? 2016Andrew Chen
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your BusinessBarry Feldman
 

Viewers also liked (7)

千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7
 
jQuery SUG Group Introduction
jQuery SUG Group IntroductionjQuery SUG Group Introduction
jQuery SUG Group Introduction
 
使用Hudson打造屬於你自己的軟體建構機器人
使用Hudson打造屬於你自己的軟體建構機器人使用Hudson打造屬於你自己的軟體建構機器人
使用Hudson打造屬於你自己的軟體建構機器人
 
比XML更好用的Java Annotation
比XML更好用的Java Annotation比XML更好用的Java Annotation
比XML更好用的Java Annotation
 
Twiggy - let's get our widget on!
Twiggy - let's get our widget on!Twiggy - let's get our widget on!
Twiggy - let's get our widget on!
 
What's Next in Growth? 2016
What's Next in Growth? 2016What's Next in Growth? 2016
What's Next in Growth? 2016
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
 

Pimp your site with jQuery!

Editor's Notes