jQuery
                         Tomohiro Mitsumune
                                  2009/03/27




2009   3   31
What’s jQuery ?



2009   3   31
jQuery

                • JavaScript
                •
                •
                • The Write Less, Do More, JavaSc...
jQuery Features
                •
                •    Ajax

                •
                •
                •
2009   ...
2009   3   31
2009   3   31
2009   3   31
2009   3   31
<head>

            <script type=”text/javascript” src=”jquery.js”></
           script>

            <script type=”text/j...
jQuery

           <head>

            <script type=”text/javascript” src=”jquery.js”></
           script>

            <...
jQuery

           <head>

            <script type=”text/javascript” src=”jquery.js”></
           script>

            <...
jQuery

           <head>

            <script type=”text/javascript” src=”jquery.js”></
           script>

            <...
2009   3   31
$(‘.boxRow, .boxLow’).each(function(){
         $(this)
           .find(‘a:first’)
             .css(‘background-color’, ...
boxRow, boxLow

       $(‘.boxRow, .boxLow’).each(function(){
         $(this)
           .find(‘a:first’)
             .c...
boxRow, boxLow

       $(‘.boxRow, .boxLow’).each(function(){
         $(this)
           .find(‘a:first’)
             .c...
boxRow, boxLow

       $(‘.boxRow, .boxLow’).each(function(){
         $(this)
           .find(‘a:first’)
             .c...
$(“#header”)                id=”header”


                   $(“h3”)                  <h3>

                              ...
click               click


                mouseover           mouseover


                 append
                slideT...
jQuery Samples



2009   3   31
Simple Slide Panel



2009   3   31
$(function() {
         $(“.btn-slide”).click(function() {
           $(“#panel”).slideToggle(“slow”);
           $(this)....
Simple Disappearing
                       Effect


2009   3   31
$(function() {
         $(“.pane .delete”).click(function() {
           $(this).parents(“.pane”)
           .animate({ op...
Chain-able Transition
                       Effects


2009   3   31
$(function() {
    $(“.run”).click(function() {
      $(“#box”).animate({opacity: “0.1”, left: “+=400”), 1200)
      .anim...
Accordion #1



2009   3   31
$(function() {
    $(“.accordion h3:first”).addClass(“active”);
    $(“.accordion p:not(:first)”).hide();

    $(“.accordi...
According #2



2009   3   31
$(function() {
   $(“.accordion2 h3”).eq(2).addClass(“active”);
   $(“.accordion2 p”).eq(2).show();

   $(“.accordion2 h3”...
Animated Hover Effect
                         #1


2009   3   31
$(function() {
   $(“.menu a”).hover(function() {
     $(this).next(“em”).animate({opacity: “show”, top:
 “-75”}, “slow”);...
Animated Hover Effect
                         #2


2009   3   31
$(document).ready(function(){
 	 $(".menu2 a").append("<em></em>");
 	 $(".menu2 a").hover(function() {
     $(this).find(...
Entire Block Clickable



2009   3   31
$(function() {
   $(“.pane-list li”).click(function() {
     window.location = $(this).find(“a”).attr(“href”);
     return...
Collapsible Panels



2009   3   31
$(function() {
    $(“.message_list .message_body:gt(0)”).hide();
    $(“.message_list li:gt(4)”).hide();
    $(“.message_...
Image Replacement
                     Gallery


2009   3   31
$(document).ready(function(){
   $("h2").append('<em></em>')

   $(".thumbs a").click(function(){
     var largePath = $(t...
•




2009   3   31
•
                $(“        ”).
                (function(){


                });

2009   3   31
Let’s Suprising jQuery Magic !
2009   3   31
Upcoming SlideShare
Loading in …5
×

jQueryチュートリアル

1,024 views

Published on

デザイナー向けに作ってみました

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,024
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQueryチュートリアル

  1. 1. jQuery Tomohiro Mitsumune 2009/03/27 2009 3 31
  2. 2. What’s jQuery ? 2009 3 31
  3. 3. jQuery • JavaScript • • • The Write Less, Do More, JavaScript Library 2009 3 31
  4. 4. jQuery Features • • Ajax • • • 2009 3 31
  5. 5. 2009 3 31
  6. 6. 2009 3 31
  7. 7. 2009 3 31
  8. 8. 2009 3 31
  9. 9. <head> <script type=”text/javascript” src=”jquery.js”></ script> <script type=”text/javascript”> $(function() { $(“.button”).click(function() { $(“#panel”).slideDown(“slow”); }); }); </script> </head> 2009 3 31
  10. 10. jQuery <head> <script type=”text/javascript” src=”jquery.js”></ script> <script type=”text/javascript”> $(function() { $(“.button”).click(function() { $(“#panel”).slideDown(“slow”); }); }); </script> </head> 2009 3 31
  11. 11. jQuery <head> <script type=”text/javascript” src=”jquery.js”></ script> <script type=”text/javascript”> $(function() { (function(){})(); $(“.button”).click(function() { $(“#panel”).slideDown(“slow”); }); }); </script> </head> 2009 3 31
  12. 12. jQuery <head> <script type=”text/javascript” src=”jquery.js”></ script> <script type=”text/javascript”> $(function() { (function(){})(); $(“.button”).click(function() { $(“#panel”).slideDown(“slow”); }); }); class=”button” </script> id=”panel” </head> 2009 3 31
  13. 13. 2009 3 31
  14. 14. $(‘.boxRow, .boxLow’).each(function(){ $(this) .find(‘a:first’) .css(‘background-color’, ‘blue’) .end() .find(‘a:eq(1)’) .css(‘background-color’, ‘yellow’) .end() .find(‘a:last’) .css(‘background-color’, ‘red’); }); 2009 3 31
  15. 15. boxRow, boxLow $(‘.boxRow, .boxLow’).each(function(){ $(this) .find(‘a:first’) .css(‘background-color’, ‘blue’) .end() .find(‘a:eq(1)’) .css(‘background-color’, ‘yellow’) .end() .find(‘a:last’) .css(‘background-color’, ‘red’); }); 2009 3 31
  16. 16. boxRow, boxLow $(‘.boxRow, .boxLow’).each(function(){ $(this) .find(‘a:first’) .css(‘background-color’, ‘blue’) .end() .find(‘a:eq(1)’) .css(‘background-color’, ‘yellow’) .end() .find(‘a:last’) .css(‘background-color’, ‘red’); }); 2009 3 31
  17. 17. boxRow, boxLow $(‘.boxRow, .boxLow’).each(function(){ $(this) .find(‘a:first’) .css(‘background-color’, ‘blue’) .end() .find(‘a:eq(1)’) .css(‘background-color’, ‘yellow’) .end() .find(‘a:last’) .css(‘background-color’, ‘red’); }); 2009 3 31
  18. 18. $(“#header”) id=”header” $(“h3”) <h3> <div id=”content”> $(“div#content .photo”) class=”photo” $(“ul li”) <ul> <li> <ul> $(“ul li:first”) <li> 2009 3 31
  19. 19. click click mouseover mouseover append slideToggle slideDown/slideUp style css(name, value) http://semooh.jp/jquery/ 2009 3 31
  20. 20. jQuery Samples 2009 3 31
  21. 21. Simple Slide Panel 2009 3 31
  22. 22. $(function() { $(“.btn-slide”).click(function() { $(“#panel”).slideToggle(“slow”); $(this).toggleClass(“active”); }); }); 2009 3 31
  23. 23. Simple Disappearing Effect 2009 3 31
  24. 24. $(function() { $(“.pane .delete”).click(function() { $(this).parents(“.pane”) .animate({ opacity: “hide” },“slow”); }); }); 2009 3 31
  25. 25. Chain-able Transition Effects 2009 3 31
  26. 26. $(function() { $(“.run”).click(function() { $(“#box”).animate({opacity: “0.1”, left: “+=400”), 1200) .animate({opacity: “0.4”, top: “+=160”, height: “20”, width: “20”}, “slow”) .animate({opacity: “1”, left: “0”, height: “100”, width: “100”}, “slow”) .animate({top: “0”}, “fast”) .slideUp() .slideDown(“slow”) return false; }); }); 2009 3 31
  27. 27. Accordion #1 2009 3 31
  28. 28. $(function() { $(“.accordion h3:first”).addClass(“active”); $(“.accordion p:not(:first)”).hide(); $(“.accordion h3”).click(function() { $(this).next(“p”).slideToggle(“slow”) .sibilings(“p:visible”).slideUp(“slow”); $(this).toggleClass(“active”); $(this).sibilings(“h3”).removeClass(“active”); }); }); 2009 3 31
  29. 29. According #2 2009 3 31
  30. 30. $(function() { $(“.accordion2 h3”).eq(2).addClass(“active”); $(“.accordion2 p”).eq(2).show(); $(“.accordion2 h3”).click(function() { $(this).next(“p”).slideToggle(“slow”) .sibilings(“p:visible”).slideUp(“slow”); $(this).toggleClass(“active”); $(this).sibilings(“h3”).removeClass(“active”); }); }); 2009 3 31
  31. 31. Animated Hover Effect #1 2009 3 31
  32. 32. $(function() { $(“.menu a”).hover(function() { $(this).next(“em”).animate({opacity: “show”, top: “-75”}, “slow”); }, function() { $(this).next(“em”).animate({opacity: “hide”, top: “-85”}, “fast”); }); }); 2009 3 31
  33. 33. Animated Hover Effect #2 2009 3 31
  34. 34. $(document).ready(function(){ $(".menu2 a").append("<em></em>"); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); }); }); 2009 3 31
  35. 35. Entire Block Clickable 2009 3 31
  36. 36. $(function() { $(“.pane-list li”).click(function() { window.location = $(this).find(“a”).attr(“href”); return false; }); }); 2009 3 31
  37. 37. Collapsible Panels 2009 3 31
  38. 38. $(function() { $(“.message_list .message_body:gt(0)”).hide(); $(“.message_list li:gt(4)”).hide(); $(“.message_head”).click(function() { $(this).next(“.message_body”).slideToggle(500) return false; }); $(“.collpase_all_message”).click(function() { $(“.message_body”).slideUp(500) return false; }); $(“.show_all_message”).click(function() { $(this).hide(); $(“.show_recent_only”).show(); $(“.message_list li:gt(4)”).slideDown(); return false; }); $(“.show_recent_only”).click(function() { $(this).hide(); $(“.show_all_message”).show(); $(“.message_list li:gt(4)”).slideUp(); return false; }); }); 2009 3 31
  39. 39. Image Replacement Gallery 2009 3 31
  40. 40. $(document).ready(function(){ $("h2").append('<em></em>') $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); $("h2 em").html(" (" + largeAlt + ")"); return false; }); }); 2009 3 31
  41. 41. • 2009 3 31
  42. 42. • $(“ ”). (function(){ }); 2009 3 31
  43. 43. Let’s Suprising jQuery Magic ! 2009 3 31

×