SlideShare a Scribd company logo
jQuery
 Basic APIs




              http://hyeonseok.com
http://jquery.com
jQuery
introduction




               http://hyeonseok.com
Introduction
JavaScript library
๏            UI                                            .

    -                                                  .

๏
                   .

    -   Prototype, mooTools, YUI, Dojo, Ext JS, etc.

๏                                                              .

    -                                                              .

    -          (       ,   ,       )               .



                                                                       http://hyeonseok.com
Introduction
jQuery write less, do more
๏                     .

๏                 .

๏                         .

๏                                     .

๏                             .

๏                                 .

๏ MIT and GPL licenses.



                                          http://hyeonseok.com
Introduction
Installation
๏ jquery.com                                                                            .
    <script src="jquery.js"></script>
    <script>
    // your script goes here.
    </script>



๏ CDN(Content delivery network)                                      .

   -   Google Ajax API CDN: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

   -   Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js

   -   jQuery CDN: http://code.jquery.com/jquery-1.6.1.min.js




                                                                                            http://hyeonseok.com
http://www.panic.com/coda/
jQuery
  core




         http://hyeonseok.com
Core
jQuery()
๏ jQuery( selector, [ context ] )
   -   $()                            .

   -   CSS                                          jQuery   .

   -   Selector Context

       -                                                .

             $('div.foo').click(function() {
                 $('span', this).addClass('bar');
             });




                                                             http://hyeonseok.com
Core
jQuery()
๏ jQuery( element ), jQuery( elementArray )
  -   DOM                               .

      -   this        jQuery                         .

           $('div.foo').click(function() {
               $(this).slideUp();
           });


      -   AJAX          XML       $                      .

           $.post('url.xml', function(data) {
               var $child = $(data).find('child');
           })




                                                             http://hyeonseok.com
Core
jQuery()
๏ jQuery( jQuery object )
  -   jQuery                      jQuery       .

๏ jQuery()

  -                 .length   0            .




                                                   http://hyeonseok.com
Core
jQuery()
๏ jQuery( html, [ ownerDocument ] )
  -   HTML                                        .

  -                       jQuery      createElement
      innerHTML                           .

  -   html, title, head                               .

  -             HTML
                .




                                                          http://hyeonseok.com
Core
jQuery()
๏ jQuery( html, props )
  -                                          .
      $("<div/>", {
          "class": "test",
          text: "Click me!",
          click: function(){
              $(this).toggleClass("test");
          }
      }).appendTo("body");




                                                 http://hyeonseok.com
Core
jQuery()
๏ jQuery( callback )
  -   $(document).ready()         DOM
                         .
       $(function(){
           // Document is ready
       });




                                        http://hyeonseok.com
Core
๏ jQuery.holdReady()
  -   Holds or releases the execution of jQuery's ready event.

๏ jQuery.noConflict()
  -   Relinquish jQuery's control of the $ variable.

๏ jQuery.sub()
  -   Creates a new copy of jQuery whose properties and methods can be
      modified without affecting the original jQuery object.

๏ jQuery.when()
  -   Provides a way to execute callback functions based on one or more
      objects, usually Deferred objects that represent asynchronous events.



                                                                              http://hyeonseok.com
Core
Chaining
๏              jQuery               jQuery      .

    -                                       .

    $('div.section').hide().addClass('gone');


๏                          .end()
           .
    $('ul.first').find('.foo')
        .css('background-color', 'red')
    .end().find('.bar')
        .css('background-color', 'green')
    .end();




                                                    http://hyeonseok.com
jQuery
 selectors




             http://hyeonseok.com
Selectors
Basic
๏ CSS                                       .

  -   All Selector ("*")

  -   Class Selector (".class")

  -   Element Selector ("element")

  -   ID Selector ("#id")

  -   Multiple Selector ("selector1, selector2, selectorN")




                                                              http://hyeonseok.com
Selectors
Attribute
๏ Has Attribute Selector [name]

๏ Attribute Equals Selector [name="value"]

๏ Attribute Not Equal Selector [name!="value"]

๏ Attribute Starts With Selector [name^="value"]

๏ Attribute Ends With Selector [name$="value"]




                                                   http://hyeonseok.com
Selectors
Attribute
๏ Multiple Attribute Selector [name="value"][name2="value2"]

๏ Attribute Contains Selector [name*="value"]

๏ Attribute Contains Prefix Selector [name|="value"]

๏ Attribute Contains Word Selector [name~="value"]




                                                           http://hyeonseok.com
Selectors
Basic Filter
๏ :first Selector, :last Selector
   -                     ,             .

๏ :even Selector, :odd Selector

   -      ,                        .




                                           http://hyeonseok.com
Selectors
Basic Filter
๏ :eq() Selector
   -   n                      .

       <table border="1">
           <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
           <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
           <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
       </table>
       <script>$("td:eq(2)").css("color", "red");</script>




                                                                 http://hyeonseok.com
Selectors
Basic Filter
๏ :lt() Selector, :gt() Selector
   -   n          ,n                          .

       <table border="1">
           <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
           <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
           <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
       </table>
       <script>$("td:lt(4)").css("color", "red");</script>




                                                                 http://hyeonseok.com
Selectors
Basic Filter
๏ :header Selector
   -                   .

๏ :not() Selector

   -                           .

๏ :animated Selector
   -                       .




                                   http://hyeonseok.com
Selectors
Child Filter
๏ :first-child Selector, :last-child Selector
   -                  ,                        .

๏ :only-child Selector

   -                             .




                                                   http://hyeonseok.com
Selectors
Child Filter
๏ :nth-child() Selector
   -               n                            .

       <ul>
            <li>John</li>
            <li>Karl</li>
            <li>Brandon</li>
       </ul>
       <ul>
            <li>Sam</li>
       </ul>
       <ul>
            <li>Glen</li>
            <li>Tane</li>
            <li>Ralph</li>
            <li>David</li>
       </ul>
       <script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</
       script>




                                                                           http://hyeonseok.com
Selectors
Content Filter
๏ :contains() Selector
   -                                            .

       <div>John Resig</div>
       <div>George Martin</div>
       <div>Malcom John Sinclair</div>
       <div>J. Ohn</div>
       <script>
       $("div:contains('John')").css("text-decoration", "underline");
       </script>




                                                                        http://hyeonseok.com
Selectors
Content Filter
๏ :empty Selector
   -                 .

๏ :parent Selector

   -                     .

๏ :has() Selector
   -                         .




                                 http://hyeonseok.com
Selectors
Form
๏ :input Selector, :checkbox Selector, :radio Selector

๏ :text Selector, :password Selector, :file Selector

๏ :button Selector, :submit Selector, :image Selector, :reset
  Selector

๏ :focus selector

๏ :checked Selector

๏ :selected Selector

๏ :enabled Selector, :disabled Selector


                                                                http://hyeonseok.com
Selectors
Hierarchy
๏ Child Selector ("parent > child")
   -                              .

๏ Descendant Selector ("ancestor descendant")

   -                          .

๏ Next Adjacent Selector ("prev + next")
   -   prev            next                .




                                                http://hyeonseok.com
Selectors
Hierarchy
๏ Next Siblings Selector ("prev ~ siblings")
   -   prev                                        .

       <div>div (doesn't match since before #prev)</div>
       <span id="prev">span#prev</span>
       <div>div sibling</div>
       <div>div sibling <div id="small">div niece</div></div>
       <span>span sibling (not div)</span>
       <div>div sibling</div>
       <script>$("#prev ~ div").css("border", "3px groove blue");</script>




                                                                         http://hyeonseok.com
Selectors
Visibility Filter
๏ :visible Selector
   -                  .

๏ :hidden Selector

   -                      .




                              http://hyeonseok.com
jQuery
 traversing




              http://hyeonseok.com
Traversing
Tree Traversal
๏ .children()
   -                     .                                 .

       <p>Hello (this is a paragraph)</p>
       <div><span>Hello Again (this span is a child of the a div)</span></
       div>
       <p>And <span>Again</span> (in another paragraph)</p>
       <div>And One Last <span>Time</span> (most text directly in a div)</
       div>
       <script>
       $("div").children().css("border-bottom", "3px double red");
       </script>




                                                                         http://hyeonseok.com
Traversing
Tree Traversal
๏ .siblings()
   -                      .

       <div><span>Hello</span></div>
       <p class="selected">Hello Again</p>
       <p>And Again</p>
       <script>
       $("p").siblings(".selected").css("background", "yellow");
       </script>




                                                                   http://hyeonseok.com
Traversing
Tree Traversal
๏ .closest()
   -
        .

๏ .find()
   -                         , jQuery     , DOM
                .
       <p><span>Hello</span>, how are you?</p>
       <p>Me? I'm <span>good</span>.</p>
       <div>Did you <span>eat</span> yet?</div>
       <script>
       var $spans = $('span');
       $("p").find( $spans ).css('color','red');
       </script>




                                                   http://hyeonseok.com
Traversing
Tree Traversal
๏ .next()
   -             .

๏ .nextAll()

   -                 .

๏ .nextUntil()
   -                     .




                             http://hyeonseok.com
Traversing
Tree Traversal
๏ .prev()
   -             .

๏ .prevAll()

   -                 .

๏ .prevUntil()
   -                     .




                             http://hyeonseok.com
Traversing
Tree Traversal
๏ .parent()
   -                .

๏ .parents()

   -                    .

๏ .parentsUntil()
   -                            .

๏ .offsetParent()

   -                        .


                                    http://hyeonseok.com
Traversing
Filtering
๏ .eq()
   -   n     .

๏ .first()

   -         .

๏ .last()
   -         .

๏ .slice()

   -             .


                     http://hyeonseok.com
Traversing
Filtering
๏ .has()
   -                    DOM
              .

๏ .not()
   -              .

๏ .is()

   -                  , jQuery
          .




                                 http://hyeonseok.com
Traversing
Filtering
๏ .map()
   -                            jQuery
             .

๏ .filter()
   -             , jQuery   ,            .




                                             http://hyeonseok.com
Traversing
Miscellaneous Traversing
๏ .add()
  -                         jQuery                  .

๏ .end()

  -                                                               .
      <p><span>Hello</span>, how are you?</p>
      <script>
      $("p").find("span").end().css("border", "2px red solid");
      </script>




                                                                      http://hyeonseok.com
Traversing
Miscellaneous Traversing
๏ .contents()
  -                                          . .children()
        .contents()                                  .
      <div class="container">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua.</p>
          <br /><br />
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat.</p>
          <br /><br />
          <p>Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
      <script>
      $('.container').contents().filter(function() {
          return this.nodeType == 3;
      }).wrap('<p></p>').end().filter('br').remove();
      </script>



                                                                          http://hyeonseok.com
Traversing
Miscellaneous Traversing
๏ .andSelf()
  -                                          .
      <div>
          <p>First Paragraph</p>
          <p>Second Paragraph</p>
      </div>
      <script>
          $("div").find("p").andSelf().addClass("border");
      </script>




                                                             http://hyeonseok.com
jQuery
manipulation




               http://hyeonseok.com
Manipulation
General Attributes
๏ .attr()
   -   HTML                           ,          .

       $('#greatphoto').attr('alt', 'Beijing Brush Seller');


   -   JSON                                                    .

       $('#greatphoto').attr({
           alt: 'Beijing Brush Seller',
           title: 'photo by Kelly Clark'
       });


๏ .removeAttr()
   -   HTML                 .



                                                                   http://hyeonseok.com
Manipulation
General Attributes
๏ .prop()
  -                                                      ,        .

  -   <input type="checkbox" checked="checked" />                     (jQuery 1.6    )


      -   $('input').attr('checked') == 'checked' (string type)

      -   $('input').prop('checked') == true (boolean type)


๏ .removeProp()
  -                                        .




                                                                                    http://hyeonseok.com
Manipulation
General Attributes
๏ .val()
   -       (value)       .

       $('input:text.items').val(function(index, value) {
           return value + ' ' + this.className;
       });




                                                            http://hyeonseok.com
Manipulation
Class Attribute
๏ .addClass()
  -         (class)           .

๏ .removeClass()

  -                                          .

      $("p").removeClass("myClass noClass").addClass("yourClass");


๏ .hasClass()
  -                                              .

      var hasFoo = $('p').hasClass('foo');




                                                                     http://hyeonseok.com
Manipulation
Class Attribute
๏ .toggleClass()
   -                                             .
       <p class="blue">Click to toggle</p>
       <p class="blue highlight">highlight</p>
       <p class="blue">on these</p>
       <p class="blue">paragraphs</p>
       <script>
       $("p").click(function () {
           $(this).toggleClass("highlight");
       });
       </script>




                                                     http://hyeonseok.com
Manipulation
DOM Insertion, Inside
๏ .text()
   -                                  ,          .

       $('div.demo-container').text('<p>This is a test.</p>');


๏ .html()

   -   HTML                           ,         .

       $('div.demo-container').html('<p>All new content. <em>You bet!</
       em></p>');




                                                                          http://hyeonseok.com
Manipulation
DOM Insertion, Inside
๏ .prepend()
  -            jQuery   .

๏ .prependTo()

  -   jQuery            .




                            http://hyeonseok.com
Manipulation
DOM Insertion, Inside
๏ .append()
  -            jQuery   .

๏ .appendTo()

  -   jQuery            .




                            http://hyeonseok.com
Manipulation
DOM Insertion, Outside
๏ .before()
   -            jQuery   .

๏ .insertBefore()

   -   jQuery            .




                             http://hyeonseok.com
Manipulation
DOM Insertion, Outside
๏ .after()
   -            jQuery   .

๏ .insertAfter()

   -   jQuery            .




                             http://hyeonseok.com
Manipulation
DOM Removal
๏ .remove()
  -   DOM      .

๏ .detach()

  -   DOM      .
                   .

๏ .empty()

  -   DOM              .




                           http://hyeonseok.com
Manipulation
DOM Replacement
๏ .replaceWith()
   -                 jQuery                   .

       <buttondiv>First</buttondiv>
       <buttondiv>Second</buttondiv>
       <buttondiv>Third</buttondiv>

       <script>
       $("button").click(function () {
           $(this).replaceWith( "<div>" + $(this).text() + "</div>" );
       });
       </script>


๏ .replaceAll()

   -   jQuery                                 .



                                                                         http://hyeonseok.com
Manipulation
DOM Insertion, Around
๏ .wrap()
  -                           .

      <div><p>Hello</p></div>
      <div><p>cruel</p></div>
      <div><p>World</p></div>
      <script>$("p").wrap("<div></div>");</script>


๏ .wrapAll()

  -                                  .

      <div><p>Hello</p>
      <p>cruel</p>
      <p>World</p></div>
      <script>$("p").wrapAll("<div></div>");</script>




                                                        http://hyeonseok.com
Manipulation
DOM Insertion, Around
๏ .unwrap()
  -                                     .

๏ .wrapInner()

  -                                            .
      <p><b>Hello</b></p>
      <p><b>cruel</b></p>
      <p><b>World</b></p>
      <script>$("p").wrapInner("<b></b>");</script>




                                                      http://hyeonseok.com
Manipulation
Copying
๏ .clone()
  -                   .

      <b>Hello</b><p><b>Hello</b>, how are you?</p>

      <script>
          $("b").clone().prependTo("p");
      </script>




                                                      http://hyeonseok.com
Manipulation
Style Properties
๏ .css()
   -                                            ,        .

   -                                                .

       $('#mydiv').css('color', 'green');


   -   index                                .
       $('div.example').css('width', function(index) {
           return index * 50;
       });




                                                             http://hyeonseok.com
Manipulation
Style Properties
๏ .height()
   -                                       .

       var height = $('div#intro').height();


๏ .innerHeight()

   -                                           .

๏ .outerHeight()
   -       ,                                       .

   -                                   .



                                                       http://hyeonseok.com
Manipulation
Style Properties
๏ .width()
  -                .

๏ .innerWidth()

  -                    .

๏ .outerWidth()
  -      ,                 .




                               http://hyeonseok.com
Manipulation
Style Properties
๏ .position()
   -                   .

๏ .offset()

   -               .




                           http://hyeonseok.com
Manipulation
Style Properties
๏ .scrollLeft()
   -               .

๏ .scrollTop()

   -               .




                       http://hyeonseok.com
jQuery
  event




          http://hyeonseok.com
Event
Event handling
๏                                                   .
    $('a:first').click(function(ev) {
        $(this).css({backgroundColor: 'orange'});
        return false; // Or ev.preventDefault();
    });
    $('a:first').click();




                                                        http://hyeonseok.com
Event
Keyboard Events
๏ .focusin()
   -              focusin          .

๏ .focusout()

   -              focusout             .

   -   blur             focusout           .




                                               http://hyeonseok.com
Event
Keyboard Events
๏ .keydown()
  -                 keydown       .

๏ .keyup()

  -                 keyup     .

๏ .keypress()
  -               keypress    .




                                      http://hyeonseok.com
Event
Mouse Events
๏ .click()
   -             click                     .

๏ .dblclick()

   -                     click                 .

๏ .mouseup()
   -                             mouseup           .

๏ .mousedown()

   -                             mousedown             .


                                                           http://hyeonseok.com
Event
Mouse Events
๏ .toggle()
   -                                                   .

   -                               .preventDefault()
                               .

       $("td").toggle(
           function () {
               $(this).addClass("selected");
           },
           function () {
               $(this).removeClass("selected");
           }
       );




                                                           http://hyeonseok.com
Event
Mouse Events
๏ .mouseover()
  -              mouseover       .

๏ .mouseout()

  -              mouseout    .

๏ .mousemove()
  -              mousemove           .




                                 http://hyeonseok.com
Event
Mouse Events
๏ .mouseenter()
  -                   .

๏ .mouseleave()

  -               .




                          http://hyeonseok.com
Event
Mouse Events
๏ .hover()
  -
          .
      $("td").hover(
          function () {
              $(this).addClass("hover");
          },
          function () {
              $(this).removeClass("hover");
          }
      );




                                              http://hyeonseok.com
Event
Form Events
๏ .focus()
   -          focus       .

๏ .blur()

   -          blur    .




                              http://hyeonseok.com
Event
Form Events
๏ .change()
   -                            change               .

๏ .select()

   -                       select                .

๏ .submit()
   -                                submit               .

   -   return false                          .

       $('form').submit(function () {
           return false;
       });


                                                             http://hyeonseok.com
Event
Document Loading
๏ .load()
  -                         load           .

๏ .ready()

  -   DOM                              .

๏ .unload()
  -                unload          .




                                               http://hyeonseok.com
Event
Browser Events
๏ .error()
   -             error            .

๏ .resize()

   -                     resize           .

๏ .scroll()
   -               scroll             .




                                              http://hyeonseok.com
Event
Event Handler Attachment
๏ .bind()
  -                    .

๏ .unbind()

  -                    .

๏ .one()
  -   .bind()              .unbind()   .




                                           http://hyeonseok.com
Event
Event Handler Attachment
๏ .live()
   -                                            .

   -             (event delegation)
                                      .bind()       .

๏ .die()

   -   .live()                             .




                                                        http://hyeonseok.com
Event
Event Handler Attachment
๏ .delegate()
  -                        .

  -   .live()                      DOM
                    .

๏ .undelegate()

  -   .delegate()              .




                                         http://hyeonseok.com
Event
Event Handler Attachment
๏ .trigger()
   -                                          .

       $('#foo').bind('click', function() {
           alert($(this).text());
       });
       $('#foo').trigger('click');


๏ .triggerHandler()

   -   .trigger()                                 .




                                                      http://hyeonseok.com
jQuery
 effect




          http://hyeonseok.com
Effect
Basics
๏ .show()
   -                            .

๏ .hide()

   -                        .

       $('.target').hide('slow');


๏ .toggle()
   -                                .




                                        http://hyeonseok.com
Effect
Fading
๏ .fadeIn()
   -                                     .

๏ .fadeOut()

   -                                 .

       $('.target').fadeOut(2000);




                                             http://hyeonseok.com
Effect
Fading
๏ .fadeTo()
  -               .

๏ .fadeToggle()

  -                   .




                          http://hyeonseok.com
Effect
Sliding
๏ .slideUp()
   -                                   .

       $('.target').slideUp('fast');


๏ .slideDown()

   -                                       .

๏ .slideToggle()
   -                                           .




                                                   http://hyeonseok.com
Effect
Custom
๏ .animate()
  -   CSS       (    )                             .

  -   width, height, left, scrollTop, scrollLeft       .

  -   shorthand                       .

      $('#clickme').click(function() {
          $('#book').animate({
              opacity: 0.25,
              left: '+=50',
              height: 'toggle'
          }, 5000, function() {
              // Animation complete.
          });
      });




                                                           http://hyeonseok.com
Effect
Custom
๏ .stop()
   -                                            .

๏ .delay()

   -                                     .

       <p><button>Run</button></p>
       <div class="first"></div>
       <div class="second"></div>

       <script>
           $("button").click(function() {
             $("div.first").slideUp(300).delay(800).fadeIn(400);
             $("div.second").slideUp(300).fadeIn(400);
           });
       </script>




                                                                   http://hyeonseok.com
Effect
Custom
๏ .queue()
  -   jQuery          fx           (queue)
                  .

  -                        .

๏ .dequeue()

  -                    .

๏ .clearQueue()
  -                            .




                                             http://hyeonseok.com
Effect
Custom
๏ jQuery.fx.interval
   -                   .

   -              13       .

๏ jQuery.fx.off
   -                               .

   -                           .




                                       http://hyeonseok.com
jQuery
  AJAX




         http://hyeonseok.com
AJAX
Shorthand Methods
๏ .load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
     $('#result').load('ajax/test.html');


   -   url
                                  .

     $('#result').load('ajax/test.html #container');


   -            data                  POST,               GET                 .

   -                                  .

     $('#result').load('ajax/test.html', function() {
         alert('Load was performed.');
     });




                                                                                  http://hyeonseok.com
AJAX
Shorthand Methods
๏ $.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )
    $.get('ajax/test.html', function(data) {
        $('.result').html(data);
        alert('Load was performed.');
    });


๏ $.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )

    $.post('ajax/test.html', function(data) {
        $('.result').html(data);
    });


๏ $.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )

๏ $.getScript( url, [ success(data, textStatus) ] )


                                                                                http://hyeonseok.com
AJAX
Global Ajax Event Handlers
๏ .ajaxStart( handler() )

๏ .ajaxStop( handler() )

๏ .ajaxSend( handler(event, jqXHR, ajaxOptions) )

๏ .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )

๏ .ajaxSuccess()

๏ .ajaxError( handler(event, jqXHR, ajaxSettings, thrownError) )




                                                               http://hyeonseok.com
AJAX
Helper Functions
๏ jQuery.param()
   -   Create a serialized representation of an array or object, suitable for
       use in a URL query string or Ajax request.

๏ .serialize()
   -   Encode a set of form elements as a string for submission.

๏ .serializeArray()
   -   Encode a set of form elements as an array of names and values.




                                                                                http://hyeonseok.com
AJAX
Low-Level Interface
๏ jQuery.ajax()
   -   Perform an asynchronous HTTP (Ajax) request.

๏ jQuery.ajaxPrefilter()
   -   Handle custom Ajax options or modify existing options before each
       request is sent and before they are processed by $.ajax().

๏ jQuery.ajaxSetup()
   -   Set default values for future Ajax requests.




                                                                       http://hyeonseok.com

More Related Content

What's hot

jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
Gil Fink
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
Remy Sharp
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
 
Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...
Thinqloud
 
Organizing Code with JavascriptMVC
Organizing Code with JavascriptMVCOrganizing Code with JavascriptMVC
Organizing Code with JavascriptMVC
Thomas Reynolds
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
manugoel2003
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentationguestcf600a
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
Doug Neiner
 
jQuery
jQueryjQuery
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
NexThoughts Technologies
 
jQuery
jQueryjQuery
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created it
Paul Bearne
 
Using Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureUsing Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer Architecture
Garann Means
 

What's hot (18)

jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...
 
Organizing Code with JavascriptMVC
Organizing Code with JavascriptMVCOrganizing Code with JavascriptMVC
Organizing Code with JavascriptMVC
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Jquery
JqueryJquery
Jquery
 
jQuery Presentasion
jQuery PresentasionjQuery Presentasion
jQuery Presentasion
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentation
 
J query training
J query trainingJ query training
J query training
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
 
jQuery
jQueryjQuery
jQuery
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
jQuery
jQueryjQuery
jQuery
 
Jquery ui
Jquery uiJquery ui
Jquery ui
 
jQuery quick tuts
jQuery quick tutsjQuery quick tuts
jQuery quick tuts
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created it
 
Using Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureUsing Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer Architecture
 

Similar to jQuery Basic API

Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
Rakesh Jha
 
How to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQueryHow to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQuery
kolkatageeks
 
J query
J queryJ query
J query
Manav Prasad
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
Stijn Van Minnebruggen
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NET
James Johnson
 
Jquery
JqueryJquery
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and ModernizrJussi Pohjolainen
 
Jquery
JqueryJquery
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajaxbaygross
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
Mevin Mohan
 
jQuery
jQueryjQuery
jQuery
Vishwa Mohan
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
J query1
J query1J query1
J query1
Manav Prasad
 
22 j query1
22 j query122 j query1
22 j query1
Fajar Baskoro
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 

Similar to jQuery Basic API (20)

Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
JQuery
JQueryJQuery
JQuery
 
How to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQueryHow to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQuery
 
J query
J queryJ query
J query
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NET
 
Introducing jQuery
Introducing jQueryIntroducing jQuery
Introducing jQuery
 
Jquery
JqueryJquery
Jquery
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
 
Jquery
JqueryJquery
Jquery
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
jQuery
jQueryjQuery
jQuery
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
 
J query1
J query1J query1
J query1
 
22 j query1
22 j query122 j query1
22 j query1
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
Jquery
JqueryJquery
Jquery
 

Recently uploaded

Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 

Recently uploaded (20)

Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 

jQuery Basic API

  • 1. jQuery Basic APIs http://hyeonseok.com
  • 3. jQuery introduction http://hyeonseok.com
  • 4. Introduction JavaScript library ๏ UI . - . ๏ . - Prototype, mooTools, YUI, Dojo, Ext JS, etc. ๏ . - . - ( , , ) . http://hyeonseok.com
  • 5. Introduction jQuery write less, do more ๏ . ๏ . ๏ . ๏ . ๏ . ๏ . ๏ MIT and GPL licenses. http://hyeonseok.com
  • 6. Introduction Installation ๏ jquery.com . <script src="jquery.js"></script> <script> // your script goes here. </script> ๏ CDN(Content delivery network) . - Google Ajax API CDN: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js - Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js - jQuery CDN: http://code.jquery.com/jquery-1.6.1.min.js http://hyeonseok.com
  • 8. jQuery core http://hyeonseok.com
  • 9. Core jQuery() ๏ jQuery( selector, [ context ] ) - $() . - CSS jQuery . - Selector Context - . $('div.foo').click(function() { $('span', this).addClass('bar'); }); http://hyeonseok.com
  • 10. Core jQuery() ๏ jQuery( element ), jQuery( elementArray ) - DOM . - this jQuery . $('div.foo').click(function() { $(this).slideUp(); }); - AJAX XML $ . $.post('url.xml', function(data) { var $child = $(data).find('child'); }) http://hyeonseok.com
  • 11. Core jQuery() ๏ jQuery( jQuery object ) - jQuery jQuery . ๏ jQuery() - .length 0 . http://hyeonseok.com
  • 12. Core jQuery() ๏ jQuery( html, [ ownerDocument ] ) - HTML . - jQuery createElement innerHTML . - html, title, head . - HTML . http://hyeonseok.com
  • 13. Core jQuery() ๏ jQuery( html, props ) - . $("<div/>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body"); http://hyeonseok.com
  • 14. Core jQuery() ๏ jQuery( callback ) - $(document).ready() DOM . $(function(){ // Document is ready }); http://hyeonseok.com
  • 15. Core ๏ jQuery.holdReady() - Holds or releases the execution of jQuery's ready event. ๏ jQuery.noConflict() - Relinquish jQuery's control of the $ variable. ๏ jQuery.sub() - Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object. ๏ jQuery.when() - Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events. http://hyeonseok.com
  • 16. Core Chaining ๏ jQuery jQuery . - . $('div.section').hide().addClass('gone'); ๏ .end() . $('ul.first').find('.foo') .css('background-color', 'red') .end().find('.bar') .css('background-color', 'green') .end(); http://hyeonseok.com
  • 17. jQuery selectors http://hyeonseok.com
  • 18. Selectors Basic ๏ CSS . - All Selector ("*") - Class Selector (".class") - Element Selector ("element") - ID Selector ("#id") - Multiple Selector ("selector1, selector2, selectorN") http://hyeonseok.com
  • 19. Selectors Attribute ๏ Has Attribute Selector [name] ๏ Attribute Equals Selector [name="value"] ๏ Attribute Not Equal Selector [name!="value"] ๏ Attribute Starts With Selector [name^="value"] ๏ Attribute Ends With Selector [name$="value"] http://hyeonseok.com
  • 20. Selectors Attribute ๏ Multiple Attribute Selector [name="value"][name2="value2"] ๏ Attribute Contains Selector [name*="value"] ๏ Attribute Contains Prefix Selector [name|="value"] ๏ Attribute Contains Word Selector [name~="value"] http://hyeonseok.com
  • 21. Selectors Basic Filter ๏ :first Selector, :last Selector - , . ๏ :even Selector, :odd Selector - , . http://hyeonseok.com
  • 22. Selectors Basic Filter ๏ :eq() Selector - n . <table border="1"> <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr> <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr> <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr> </table> <script>$("td:eq(2)").css("color", "red");</script> http://hyeonseok.com
  • 23. Selectors Basic Filter ๏ :lt() Selector, :gt() Selector - n ,n . <table border="1"> <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr> <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr> <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr> </table> <script>$("td:lt(4)").css("color", "red");</script> http://hyeonseok.com
  • 24. Selectors Basic Filter ๏ :header Selector - . ๏ :not() Selector - . ๏ :animated Selector - . http://hyeonseok.com
  • 25. Selectors Child Filter ๏ :first-child Selector, :last-child Selector - , . ๏ :only-child Selector - . http://hyeonseok.com
  • 26. Selectors Child Filter ๏ :nth-child() Selector - n . <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Sam</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> <li>David</li> </ul> <script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</ script> http://hyeonseok.com
  • 27. Selectors Content Filter ๏ :contains() Selector - . <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn</div> <script> $("div:contains('John')").css("text-decoration", "underline"); </script> http://hyeonseok.com
  • 28. Selectors Content Filter ๏ :empty Selector - . ๏ :parent Selector - . ๏ :has() Selector - . http://hyeonseok.com
  • 29. Selectors Form ๏ :input Selector, :checkbox Selector, :radio Selector ๏ :text Selector, :password Selector, :file Selector ๏ :button Selector, :submit Selector, :image Selector, :reset Selector ๏ :focus selector ๏ :checked Selector ๏ :selected Selector ๏ :enabled Selector, :disabled Selector http://hyeonseok.com
  • 30. Selectors Hierarchy ๏ Child Selector ("parent > child") - . ๏ Descendant Selector ("ancestor descendant") - . ๏ Next Adjacent Selector ("prev + next") - prev next . http://hyeonseok.com
  • 31. Selectors Hierarchy ๏ Next Siblings Selector ("prev ~ siblings") - prev . <div>div (doesn't match since before #prev)</div> <span id="prev">span#prev</span> <div>div sibling</div> <div>div sibling <div id="small">div niece</div></div> <span>span sibling (not div)</span> <div>div sibling</div> <script>$("#prev ~ div").css("border", "3px groove blue");</script> http://hyeonseok.com
  • 32. Selectors Visibility Filter ๏ :visible Selector - . ๏ :hidden Selector - . http://hyeonseok.com
  • 33. jQuery traversing http://hyeonseok.com
  • 34. Traversing Tree Traversal ๏ .children() - . . <p>Hello (this is a paragraph)</p> <div><span>Hello Again (this span is a child of the a div)</span></ div> <p>And <span>Again</span> (in another paragraph)</p> <div>And One Last <span>Time</span> (most text directly in a div)</ div> <script> $("div").children().css("border-bottom", "3px double red"); </script> http://hyeonseok.com
  • 35. Traversing Tree Traversal ๏ .siblings() - . <div><span>Hello</span></div> <p class="selected">Hello Again</p> <p>And Again</p> <script> $("p").siblings(".selected").css("background", "yellow"); </script> http://hyeonseok.com
  • 36. Traversing Tree Traversal ๏ .closest() - . ๏ .find() - , jQuery , DOM . <p><span>Hello</span>, how are you?</p> <p>Me? I'm <span>good</span>.</p> <div>Did you <span>eat</span> yet?</div> <script> var $spans = $('span'); $("p").find( $spans ).css('color','red'); </script> http://hyeonseok.com
  • 37. Traversing Tree Traversal ๏ .next() - . ๏ .nextAll() - . ๏ .nextUntil() - . http://hyeonseok.com
  • 38. Traversing Tree Traversal ๏ .prev() - . ๏ .prevAll() - . ๏ .prevUntil() - . http://hyeonseok.com
  • 39. Traversing Tree Traversal ๏ .parent() - . ๏ .parents() - . ๏ .parentsUntil() - . ๏ .offsetParent() - . http://hyeonseok.com
  • 40. Traversing Filtering ๏ .eq() - n . ๏ .first() - . ๏ .last() - . ๏ .slice() - . http://hyeonseok.com
  • 41. Traversing Filtering ๏ .has() - DOM . ๏ .not() - . ๏ .is() - , jQuery . http://hyeonseok.com
  • 42. Traversing Filtering ๏ .map() - jQuery . ๏ .filter() - , jQuery , . http://hyeonseok.com
  • 43. Traversing Miscellaneous Traversing ๏ .add() - jQuery . ๏ .end() - . <p><span>Hello</span>, how are you?</p> <script> $("p").find("span").end().css("border", "2px red solid"); </script> http://hyeonseok.com
  • 44. Traversing Miscellaneous Traversing ๏ .contents() - . .children() .contents() . <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <br /><br /> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <br /><br /> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> <script> $('.container').contents().filter(function() { return this.nodeType == 3; }).wrap('<p></p>').end().filter('br').remove(); </script> http://hyeonseok.com
  • 45. Traversing Miscellaneous Traversing ๏ .andSelf() - . <div> <p>First Paragraph</p> <p>Second Paragraph</p> </div> <script> $("div").find("p").andSelf().addClass("border"); </script> http://hyeonseok.com
  • 46. jQuery manipulation http://hyeonseok.com
  • 47. Manipulation General Attributes ๏ .attr() - HTML , . $('#greatphoto').attr('alt', 'Beijing Brush Seller'); - JSON . $('#greatphoto').attr({ alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark' }); ๏ .removeAttr() - HTML . http://hyeonseok.com
  • 48. Manipulation General Attributes ๏ .prop() - , . - <input type="checkbox" checked="checked" /> (jQuery 1.6 ) - $('input').attr('checked') == 'checked' (string type) - $('input').prop('checked') == true (boolean type) ๏ .removeProp() - . http://hyeonseok.com
  • 49. Manipulation General Attributes ๏ .val() - (value) . $('input:text.items').val(function(index, value) { return value + ' ' + this.className; }); http://hyeonseok.com
  • 50. Manipulation Class Attribute ๏ .addClass() - (class) . ๏ .removeClass() - . $("p").removeClass("myClass noClass").addClass("yourClass"); ๏ .hasClass() - . var hasFoo = $('p').hasClass('foo'); http://hyeonseok.com
  • 51. Manipulation Class Attribute ๏ .toggleClass() - . <p class="blue">Click to toggle</p> <p class="blue highlight">highlight</p> <p class="blue">on these</p> <p class="blue">paragraphs</p> <script> $("p").click(function () { $(this).toggleClass("highlight"); }); </script> http://hyeonseok.com
  • 52. Manipulation DOM Insertion, Inside ๏ .text() - , . $('div.demo-container').text('<p>This is a test.</p>'); ๏ .html() - HTML , . $('div.demo-container').html('<p>All new content. <em>You bet!</ em></p>'); http://hyeonseok.com
  • 53. Manipulation DOM Insertion, Inside ๏ .prepend() - jQuery . ๏ .prependTo() - jQuery . http://hyeonseok.com
  • 54. Manipulation DOM Insertion, Inside ๏ .append() - jQuery . ๏ .appendTo() - jQuery . http://hyeonseok.com
  • 55. Manipulation DOM Insertion, Outside ๏ .before() - jQuery . ๏ .insertBefore() - jQuery . http://hyeonseok.com
  • 56. Manipulation DOM Insertion, Outside ๏ .after() - jQuery . ๏ .insertAfter() - jQuery . http://hyeonseok.com
  • 57. Manipulation DOM Removal ๏ .remove() - DOM . ๏ .detach() - DOM . . ๏ .empty() - DOM . http://hyeonseok.com
  • 58. Manipulation DOM Replacement ๏ .replaceWith() - jQuery . <buttondiv>First</buttondiv> <buttondiv>Second</buttondiv> <buttondiv>Third</buttondiv> <script> $("button").click(function () { $(this).replaceWith( "<div>" + $(this).text() + "</div>" ); }); </script> ๏ .replaceAll() - jQuery . http://hyeonseok.com
  • 59. Manipulation DOM Insertion, Around ๏ .wrap() - . <div><p>Hello</p></div> <div><p>cruel</p></div> <div><p>World</p></div> <script>$("p").wrap("<div></div>");</script> ๏ .wrapAll() - . <div><p>Hello</p> <p>cruel</p> <p>World</p></div> <script>$("p").wrapAll("<div></div>");</script> http://hyeonseok.com
  • 60. Manipulation DOM Insertion, Around ๏ .unwrap() - . ๏ .wrapInner() - . <p><b>Hello</b></p> <p><b>cruel</b></p> <p><b>World</b></p> <script>$("p").wrapInner("<b></b>");</script> http://hyeonseok.com
  • 61. Manipulation Copying ๏ .clone() - . <b>Hello</b><p><b>Hello</b>, how are you?</p> <script> $("b").clone().prependTo("p"); </script> http://hyeonseok.com
  • 62. Manipulation Style Properties ๏ .css() - , . - . $('#mydiv').css('color', 'green'); - index . $('div.example').css('width', function(index) { return index * 50; }); http://hyeonseok.com
  • 63. Manipulation Style Properties ๏ .height() - . var height = $('div#intro').height(); ๏ .innerHeight() - . ๏ .outerHeight() - , . - . http://hyeonseok.com
  • 64. Manipulation Style Properties ๏ .width() - . ๏ .innerWidth() - . ๏ .outerWidth() - , . http://hyeonseok.com
  • 65. Manipulation Style Properties ๏ .position() - . ๏ .offset() - . http://hyeonseok.com
  • 66. Manipulation Style Properties ๏ .scrollLeft() - . ๏ .scrollTop() - . http://hyeonseok.com
  • 67. jQuery event http://hyeonseok.com
  • 68. Event Event handling ๏ . $('a:first').click(function(ev) { $(this).css({backgroundColor: 'orange'}); return false; // Or ev.preventDefault(); }); $('a:first').click(); http://hyeonseok.com
  • 69. Event Keyboard Events ๏ .focusin() - focusin . ๏ .focusout() - focusout . - blur focusout . http://hyeonseok.com
  • 70. Event Keyboard Events ๏ .keydown() - keydown . ๏ .keyup() - keyup . ๏ .keypress() - keypress . http://hyeonseok.com
  • 71. Event Mouse Events ๏ .click() - click . ๏ .dblclick() - click . ๏ .mouseup() - mouseup . ๏ .mousedown() - mousedown . http://hyeonseok.com
  • 72. Event Mouse Events ๏ .toggle() - . - .preventDefault() . $("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } ); http://hyeonseok.com
  • 73. Event Mouse Events ๏ .mouseover() - mouseover . ๏ .mouseout() - mouseout . ๏ .mousemove() - mousemove . http://hyeonseok.com
  • 74. Event Mouse Events ๏ .mouseenter() - . ๏ .mouseleave() - . http://hyeonseok.com
  • 75. Event Mouse Events ๏ .hover() - . $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); http://hyeonseok.com
  • 76. Event Form Events ๏ .focus() - focus . ๏ .blur() - blur . http://hyeonseok.com
  • 77. Event Form Events ๏ .change() - change . ๏ .select() - select . ๏ .submit() - submit . - return false . $('form').submit(function () { return false; }); http://hyeonseok.com
  • 78. Event Document Loading ๏ .load() - load . ๏ .ready() - DOM . ๏ .unload() - unload . http://hyeonseok.com
  • 79. Event Browser Events ๏ .error() - error . ๏ .resize() - resize . ๏ .scroll() - scroll . http://hyeonseok.com
  • 80. Event Event Handler Attachment ๏ .bind() - . ๏ .unbind() - . ๏ .one() - .bind() .unbind() . http://hyeonseok.com
  • 81. Event Event Handler Attachment ๏ .live() - . - (event delegation) .bind() . ๏ .die() - .live() . http://hyeonseok.com
  • 82. Event Event Handler Attachment ๏ .delegate() - . - .live() DOM . ๏ .undelegate() - .delegate() . http://hyeonseok.com
  • 83. Event Event Handler Attachment ๏ .trigger() - . $('#foo').bind('click', function() { alert($(this).text()); }); $('#foo').trigger('click'); ๏ .triggerHandler() - .trigger() . http://hyeonseok.com
  • 84. jQuery effect http://hyeonseok.com
  • 85. Effect Basics ๏ .show() - . ๏ .hide() - . $('.target').hide('slow'); ๏ .toggle() - . http://hyeonseok.com
  • 86. Effect Fading ๏ .fadeIn() - . ๏ .fadeOut() - . $('.target').fadeOut(2000); http://hyeonseok.com
  • 87. Effect Fading ๏ .fadeTo() - . ๏ .fadeToggle() - . http://hyeonseok.com
  • 88. Effect Sliding ๏ .slideUp() - . $('.target').slideUp('fast'); ๏ .slideDown() - . ๏ .slideToggle() - . http://hyeonseok.com
  • 89. Effect Custom ๏ .animate() - CSS ( ) . - width, height, left, scrollTop, scrollLeft . - shorthand . $('#clickme').click(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); }); http://hyeonseok.com
  • 90. Effect Custom ๏ .stop() - . ๏ .delay() - . <p><button>Run</button></p> <div class="first"></div> <div class="second"></div> <script> $("button").click(function() { $("div.first").slideUp(300).delay(800).fadeIn(400); $("div.second").slideUp(300).fadeIn(400); }); </script> http://hyeonseok.com
  • 91. Effect Custom ๏ .queue() - jQuery fx (queue) . - . ๏ .dequeue() - . ๏ .clearQueue() - . http://hyeonseok.com
  • 92. Effect Custom ๏ jQuery.fx.interval - . - 13 . ๏ jQuery.fx.off - . - . http://hyeonseok.com
  • 93. jQuery AJAX http://hyeonseok.com
  • 94. AJAX Shorthand Methods ๏ .load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] ) $('#result').load('ajax/test.html'); - url . $('#result').load('ajax/test.html #container'); - data POST, GET . - . $('#result').load('ajax/test.html', function() { alert('Load was performed.'); }); http://hyeonseok.com
  • 95. AJAX Shorthand Methods ๏ $.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] ) $.get('ajax/test.html', function(data) { $('.result').html(data); alert('Load was performed.'); }); ๏ $.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] ) $.post('ajax/test.html', function(data) { $('.result').html(data); }); ๏ $.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] ) ๏ $.getScript( url, [ success(data, textStatus) ] ) http://hyeonseok.com
  • 96. AJAX Global Ajax Event Handlers ๏ .ajaxStart( handler() ) ๏ .ajaxStop( handler() ) ๏ .ajaxSend( handler(event, jqXHR, ajaxOptions) ) ๏ .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) ) ๏ .ajaxSuccess() ๏ .ajaxError( handler(event, jqXHR, ajaxSettings, thrownError) ) http://hyeonseok.com
  • 97. AJAX Helper Functions ๏ jQuery.param() - Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request. ๏ .serialize() - Encode a set of form elements as a string for submission. ๏ .serializeArray() - Encode a set of form elements as an array of names and values. http://hyeonseok.com
  • 98. AJAX Low-Level Interface ๏ jQuery.ajax() - Perform an asynchronous HTTP (Ajax) request. ๏ jQuery.ajaxPrefilter() - Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax(). ๏ jQuery.ajaxSetup() - Set default values for future Ajax requests. http://hyeonseok.com