jQuery Basic API
Upcoming SlideShare
Loading in...5
×
 

jQuery Basic API

on

  • 2,324 views

See details on http://hyeonseok.com/soojung/javascript/2011/06/04/658.html

See details on http://hyeonseok.com/soojung/javascript/2011/06/04/658.html

Statistics

Views

Total Views
2,324
Views on SlideShare
2,324
Embed Views
0

Actions

Likes
0
Downloads
53
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Basic API Presentation Transcript

  • 1. jQuery Basic APIs http://hyeonseok.com
  • 2. http://jquery.com
  • 3. jQueryintroduction http://hyeonseok.com
  • 4. IntroductionJavaScript library๏ UI . - .๏ . - Prototype, mooTools, YUI, Dojo, Ext JS, etc.๏ . - . - ( , , ) . http://hyeonseok.com
  • 5. IntroductionjQuery write less, do more๏ .๏ .๏ .๏ .๏ .๏ .๏ MIT and GPL licenses. http://hyeonseok.com
  • 6. IntroductionInstallation๏ 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
  • 7. http://www.panic.com/coda/
  • 8. jQuery core http://hyeonseok.com
  • 9. CorejQuery()๏ jQuery( selector, [ context ] ) - $() . - CSS jQuery . - Selector Context - . $(div.foo).click(function() { $(span, this).addClass(bar); }); http://hyeonseok.com
  • 10. CorejQuery()๏ 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. CorejQuery()๏ jQuery( jQuery object ) - jQuery jQuery .๏ jQuery() - .length 0 . http://hyeonseok.com
  • 12. CorejQuery()๏ jQuery( html, [ ownerDocument ] ) - HTML . - jQuery createElement innerHTML . - html, title, head . - HTML . http://hyeonseok.com
  • 13. CorejQuery()๏ jQuery( html, props ) - . $("<div/>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body"); http://hyeonseok.com
  • 14. CorejQuery()๏ jQuery( callback ) - $(document).ready() DOM . $(function(){ // Document is ready }); http://hyeonseok.com
  • 15. Core๏ jQuery.holdReady() - Holds or releases the execution of jQuerys ready event.๏ jQuery.noConflict() - Relinquish jQuerys 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. CoreChaining๏ 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. SelectorsBasic๏ CSS . - All Selector ("*") - Class Selector (".class") - Element Selector ("element") - ID Selector ("#id") - Multiple Selector ("selector1, selector2, selectorN") http://hyeonseok.com
  • 19. SelectorsAttribute๏ 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. SelectorsAttribute๏ 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. SelectorsBasic Filter๏ :first Selector, :last Selector - , .๏ :even Selector, :odd Selector - , . http://hyeonseok.com
  • 22. SelectorsBasic 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. SelectorsBasic 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. SelectorsBasic Filter๏ :header Selector - .๏ :not() Selector - .๏ :animated Selector - . http://hyeonseok.com
  • 25. SelectorsChild Filter๏ :first-child Selector, :last-child Selector - , .๏ :only-child Selector - . http://hyeonseok.com
  • 26. SelectorsChild 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. SelectorsContent 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. SelectorsContent Filter๏ :empty Selector - .๏ :parent Selector - .๏ :has() Selector - . http://hyeonseok.com
  • 29. SelectorsForm๏ :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. SelectorsHierarchy๏ Child Selector ("parent > child") - .๏ Descendant Selector ("ancestor descendant") - .๏ Next Adjacent Selector ("prev + next") - prev next . http://hyeonseok.com
  • 31. SelectorsHierarchy๏ Next Siblings Selector ("prev ~ siblings") - prev . <div>div (doesnt 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. SelectorsVisibility Filter๏ :visible Selector - .๏ :hidden Selector - . http://hyeonseok.com
  • 33. jQuery traversing http://hyeonseok.com
  • 34. TraversingTree 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. TraversingTree 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. TraversingTree Traversal๏ .closest() - .๏ .find() - , jQuery , DOM . <p><span>Hello</span>, how are you?</p> <p>Me? Im <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. TraversingTree Traversal๏ .next() - .๏ .nextAll() - .๏ .nextUntil() - . http://hyeonseok.com
  • 38. TraversingTree Traversal๏ .prev() - .๏ .prevAll() - .๏ .prevUntil() - . http://hyeonseok.com
  • 39. TraversingTree Traversal๏ .parent() - .๏ .parents() - .๏ .parentsUntil() - .๏ .offsetParent() - . http://hyeonseok.com
  • 40. TraversingFiltering๏ .eq() - n .๏ .first() - .๏ .last() - .๏ .slice() - . http://hyeonseok.com
  • 41. TraversingFiltering๏ .has() - DOM .๏ .not() - .๏ .is() - , jQuery . http://hyeonseok.com
  • 42. TraversingFiltering๏ .map() - jQuery .๏ .filter() - , jQuery , . http://hyeonseok.com
  • 43. TraversingMiscellaneous 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. TraversingMiscellaneous 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. TraversingMiscellaneous Traversing๏ .andSelf() - . <div> <p>First Paragraph</p> <p>Second Paragraph</p> </div> <script> $("div").find("p").andSelf().addClass("border"); </script> http://hyeonseok.com
  • 46. jQuerymanipulation http://hyeonseok.com
  • 47. ManipulationGeneral 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. ManipulationGeneral 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. ManipulationGeneral Attributes๏ .val() - (value) . $(input:text.items).val(function(index, value) { return value + + this.className; }); http://hyeonseok.com
  • 50. ManipulationClass Attribute๏ .addClass() - (class) .๏ .removeClass() - . $("p").removeClass("myClass noClass").addClass("yourClass");๏ .hasClass() - . var hasFoo = $(p).hasClass(foo); http://hyeonseok.com
  • 51. ManipulationClass 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. ManipulationDOM 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. ManipulationDOM Insertion, Inside๏ .prepend() - jQuery .๏ .prependTo() - jQuery . http://hyeonseok.com
  • 54. ManipulationDOM Insertion, Inside๏ .append() - jQuery .๏ .appendTo() - jQuery . http://hyeonseok.com
  • 55. ManipulationDOM Insertion, Outside๏ .before() - jQuery .๏ .insertBefore() - jQuery . http://hyeonseok.com
  • 56. ManipulationDOM Insertion, Outside๏ .after() - jQuery .๏ .insertAfter() - jQuery . http://hyeonseok.com
  • 57. ManipulationDOM Removal๏ .remove() - DOM .๏ .detach() - DOM . .๏ .empty() - DOM . http://hyeonseok.com
  • 58. ManipulationDOM 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. ManipulationDOM 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. ManipulationDOM 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. ManipulationCopying๏ .clone() - . <b>Hello</b><p><b>Hello</b>, how are you?</p> <script> $("b").clone().prependTo("p"); </script> http://hyeonseok.com
  • 62. ManipulationStyle Properties๏ .css() - , . - . $(#mydiv).css(color, green); - index . $(div.example).css(width, function(index) { return index * 50; }); http://hyeonseok.com
  • 63. ManipulationStyle Properties๏ .height() - . var height = $(div#intro).height();๏ .innerHeight() - .๏ .outerHeight() - , . - . http://hyeonseok.com
  • 64. ManipulationStyle Properties๏ .width() - .๏ .innerWidth() - .๏ .outerWidth() - , . http://hyeonseok.com
  • 65. ManipulationStyle Properties๏ .position() - .๏ .offset() - . http://hyeonseok.com
  • 66. ManipulationStyle Properties๏ .scrollLeft() - .๏ .scrollTop() - . http://hyeonseok.com
  • 67. jQuery event http://hyeonseok.com
  • 68. EventEvent handling๏ . $(a:first).click(function(ev) { $(this).css({backgroundColor: orange}); return false; // Or ev.preventDefault(); }); $(a:first).click(); http://hyeonseok.com
  • 69. EventKeyboard Events๏ .focusin() - focusin .๏ .focusout() - focusout . - blur focusout . http://hyeonseok.com
  • 70. EventKeyboard Events๏ .keydown() - keydown .๏ .keyup() - keyup .๏ .keypress() - keypress . http://hyeonseok.com
  • 71. EventMouse Events๏ .click() - click .๏ .dblclick() - click .๏ .mouseup() - mouseup .๏ .mousedown() - mousedown . http://hyeonseok.com
  • 72. EventMouse Events๏ .toggle() - . - .preventDefault() . $("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } ); http://hyeonseok.com
  • 73. EventMouse Events๏ .mouseover() - mouseover .๏ .mouseout() - mouseout .๏ .mousemove() - mousemove . http://hyeonseok.com
  • 74. EventMouse Events๏ .mouseenter() - .๏ .mouseleave() - . http://hyeonseok.com
  • 75. EventMouse Events๏ .hover() - . $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); http://hyeonseok.com
  • 76. EventForm Events๏ .focus() - focus .๏ .blur() - blur . http://hyeonseok.com
  • 77. EventForm Events๏ .change() - change .๏ .select() - select .๏ .submit() - submit . - return false . $(form).submit(function () { return false; }); http://hyeonseok.com
  • 78. EventDocument Loading๏ .load() - load .๏ .ready() - DOM .๏ .unload() - unload . http://hyeonseok.com
  • 79. EventBrowser Events๏ .error() - error .๏ .resize() - resize .๏ .scroll() - scroll . http://hyeonseok.com
  • 80. EventEvent Handler Attachment๏ .bind() - .๏ .unbind() - .๏ .one() - .bind() .unbind() . http://hyeonseok.com
  • 81. EventEvent Handler Attachment๏ .live() - . - (event delegation) .bind() .๏ .die() - .live() . http://hyeonseok.com
  • 82. EventEvent Handler Attachment๏ .delegate() - . - .live() DOM .๏ .undelegate() - .delegate() . http://hyeonseok.com
  • 83. EventEvent 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. EffectBasics๏ .show() - .๏ .hide() - . $(.target).hide(slow);๏ .toggle() - . http://hyeonseok.com
  • 86. EffectFading๏ .fadeIn() - .๏ .fadeOut() - . $(.target).fadeOut(2000); http://hyeonseok.com
  • 87. EffectFading๏ .fadeTo() - .๏ .fadeToggle() - . http://hyeonseok.com
  • 88. EffectSliding๏ .slideUp() - . $(.target).slideUp(fast);๏ .slideDown() - .๏ .slideToggle() - . http://hyeonseok.com
  • 89. EffectCustom๏ .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. EffectCustom๏ .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. EffectCustom๏ .queue() - jQuery fx (queue) . - .๏ .dequeue() - .๏ .clearQueue() - . http://hyeonseok.com
  • 92. EffectCustom๏ jQuery.fx.interval - . - 13 .๏ jQuery.fx.off - . - . http://hyeonseok.com
  • 93. jQuery AJAX http://hyeonseok.com
  • 94. AJAXShorthand 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. AJAXShorthand 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. AJAXGlobal 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. AJAXHelper 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. AJAXLow-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