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

jQuery Basic API

on

  • 2,278 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,278
Views on SlideShare
2,278
Embed Views
0

Actions

Likes
0
Downloads
51
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 jQuery Basic API Presentation Transcript

  • jQuery Basic APIs http://hyeonseok.com
  • http://jquery.com
  • jQueryintroduction http://hyeonseok.com
  • IntroductionJavaScript library๏ UI . - .๏ . - Prototype, mooTools, YUI, Dojo, Ext JS, etc.๏ . - . - ( , , ) . http://hyeonseok.com
  • IntroductionjQuery write less, do more๏ .๏ .๏ .๏ .๏ .๏ .๏ MIT and GPL licenses. http://hyeonseok.com
  • 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
  • http://www.panic.com/coda/
  • jQuery core http://hyeonseok.com
  • CorejQuery()๏ jQuery( selector, [ context ] ) - $() . - CSS jQuery . - Selector Context - . $(div.foo).click(function() { $(span, this).addClass(bar); }); http://hyeonseok.com
  • 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
  • CorejQuery()๏ jQuery( jQuery object ) - jQuery jQuery .๏ jQuery() - .length 0 . http://hyeonseok.com
  • CorejQuery()๏ jQuery( html, [ ownerDocument ] ) - HTML . - jQuery createElement innerHTML . - html, title, head . - HTML . http://hyeonseok.com
  • CorejQuery()๏ jQuery( html, props ) - . $("<div/>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body"); http://hyeonseok.com
  • CorejQuery()๏ jQuery( callback ) - $(document).ready() DOM . $(function(){ // Document is ready }); http://hyeonseok.com
  • 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
  • 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
  • jQuery selectors http://hyeonseok.com
  • SelectorsBasic๏ CSS . - All Selector ("*") - Class Selector (".class") - Element Selector ("element") - ID Selector ("#id") - Multiple Selector ("selector1, selector2, selectorN") http://hyeonseok.com
  • 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
  • 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
  • SelectorsBasic Filter๏ :first Selector, :last Selector - , .๏ :even Selector, :odd Selector - , . http://hyeonseok.com
  • 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
  • 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
  • SelectorsBasic Filter๏ :header Selector - .๏ :not() Selector - .๏ :animated Selector - . http://hyeonseok.com
  • SelectorsChild Filter๏ :first-child Selector, :last-child Selector - , .๏ :only-child Selector - . http://hyeonseok.com
  • 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
  • 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
  • SelectorsContent Filter๏ :empty Selector - .๏ :parent Selector - .๏ :has() Selector - . http://hyeonseok.com
  • 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
  • SelectorsHierarchy๏ Child Selector ("parent > child") - .๏ Descendant Selector ("ancestor descendant") - .๏ Next Adjacent Selector ("prev + next") - prev next . http://hyeonseok.com
  • 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
  • SelectorsVisibility Filter๏ :visible Selector - .๏ :hidden Selector - . http://hyeonseok.com
  • jQuery traversing http://hyeonseok.com
  • 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
  • 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
  • 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
  • TraversingTree Traversal๏ .next() - .๏ .nextAll() - .๏ .nextUntil() - . http://hyeonseok.com
  • TraversingTree Traversal๏ .prev() - .๏ .prevAll() - .๏ .prevUntil() - . http://hyeonseok.com
  • TraversingTree Traversal๏ .parent() - .๏ .parents() - .๏ .parentsUntil() - .๏ .offsetParent() - . http://hyeonseok.com
  • TraversingFiltering๏ .eq() - n .๏ .first() - .๏ .last() - .๏ .slice() - . http://hyeonseok.com
  • TraversingFiltering๏ .has() - DOM .๏ .not() - .๏ .is() - , jQuery . http://hyeonseok.com
  • TraversingFiltering๏ .map() - jQuery .๏ .filter() - , jQuery , . http://hyeonseok.com
  • 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
  • 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
  • TraversingMiscellaneous Traversing๏ .andSelf() - . <div> <p>First Paragraph</p> <p>Second Paragraph</p> </div> <script> $("div").find("p").andSelf().addClass("border"); </script> http://hyeonseok.com
  • jQuerymanipulation http://hyeonseok.com
  • 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
  • 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
  • ManipulationGeneral Attributes๏ .val() - (value) . $(input:text.items).val(function(index, value) { return value + + this.className; }); http://hyeonseok.com
  • ManipulationClass Attribute๏ .addClass() - (class) .๏ .removeClass() - . $("p").removeClass("myClass noClass").addClass("yourClass");๏ .hasClass() - . var hasFoo = $(p).hasClass(foo); http://hyeonseok.com
  • 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
  • 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
  • ManipulationDOM Insertion, Inside๏ .prepend() - jQuery .๏ .prependTo() - jQuery . http://hyeonseok.com
  • ManipulationDOM Insertion, Inside๏ .append() - jQuery .๏ .appendTo() - jQuery . http://hyeonseok.com
  • ManipulationDOM Insertion, Outside๏ .before() - jQuery .๏ .insertBefore() - jQuery . http://hyeonseok.com
  • ManipulationDOM Insertion, Outside๏ .after() - jQuery .๏ .insertAfter() - jQuery . http://hyeonseok.com
  • ManipulationDOM Removal๏ .remove() - DOM .๏ .detach() - DOM . .๏ .empty() - DOM . http://hyeonseok.com
  • 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
  • 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
  • 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
  • ManipulationCopying๏ .clone() - . <b>Hello</b><p><b>Hello</b>, how are you?</p> <script> $("b").clone().prependTo("p"); </script> http://hyeonseok.com
  • ManipulationStyle Properties๏ .css() - , . - . $(#mydiv).css(color, green); - index . $(div.example).css(width, function(index) { return index * 50; }); http://hyeonseok.com
  • ManipulationStyle Properties๏ .height() - . var height = $(div#intro).height();๏ .innerHeight() - .๏ .outerHeight() - , . - . http://hyeonseok.com
  • ManipulationStyle Properties๏ .width() - .๏ .innerWidth() - .๏ .outerWidth() - , . http://hyeonseok.com
  • ManipulationStyle Properties๏ .position() - .๏ .offset() - . http://hyeonseok.com
  • ManipulationStyle Properties๏ .scrollLeft() - .๏ .scrollTop() - . http://hyeonseok.com
  • jQuery event http://hyeonseok.com
  • EventEvent handling๏ . $(a:first).click(function(ev) { $(this).css({backgroundColor: orange}); return false; // Or ev.preventDefault(); }); $(a:first).click(); http://hyeonseok.com
  • EventKeyboard Events๏ .focusin() - focusin .๏ .focusout() - focusout . - blur focusout . http://hyeonseok.com
  • EventKeyboard Events๏ .keydown() - keydown .๏ .keyup() - keyup .๏ .keypress() - keypress . http://hyeonseok.com
  • EventMouse Events๏ .click() - click .๏ .dblclick() - click .๏ .mouseup() - mouseup .๏ .mousedown() - mousedown . http://hyeonseok.com
  • EventMouse Events๏ .toggle() - . - .preventDefault() . $("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } ); http://hyeonseok.com
  • EventMouse Events๏ .mouseover() - mouseover .๏ .mouseout() - mouseout .๏ .mousemove() - mousemove . http://hyeonseok.com
  • EventMouse Events๏ .mouseenter() - .๏ .mouseleave() - . http://hyeonseok.com
  • EventMouse Events๏ .hover() - . $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); http://hyeonseok.com
  • EventForm Events๏ .focus() - focus .๏ .blur() - blur . http://hyeonseok.com
  • EventForm Events๏ .change() - change .๏ .select() - select .๏ .submit() - submit . - return false . $(form).submit(function () { return false; }); http://hyeonseok.com
  • EventDocument Loading๏ .load() - load .๏ .ready() - DOM .๏ .unload() - unload . http://hyeonseok.com
  • EventBrowser Events๏ .error() - error .๏ .resize() - resize .๏ .scroll() - scroll . http://hyeonseok.com
  • EventEvent Handler Attachment๏ .bind() - .๏ .unbind() - .๏ .one() - .bind() .unbind() . http://hyeonseok.com
  • EventEvent Handler Attachment๏ .live() - . - (event delegation) .bind() .๏ .die() - .live() . http://hyeonseok.com
  • EventEvent Handler Attachment๏ .delegate() - . - .live() DOM .๏ .undelegate() - .delegate() . http://hyeonseok.com
  • EventEvent Handler Attachment๏ .trigger() - . $(#foo).bind(click, function() { alert($(this).text()); }); $(#foo).trigger(click);๏ .triggerHandler() - .trigger() . http://hyeonseok.com
  • jQuery effect http://hyeonseok.com
  • EffectBasics๏ .show() - .๏ .hide() - . $(.target).hide(slow);๏ .toggle() - . http://hyeonseok.com
  • EffectFading๏ .fadeIn() - .๏ .fadeOut() - . $(.target).fadeOut(2000); http://hyeonseok.com
  • EffectFading๏ .fadeTo() - .๏ .fadeToggle() - . http://hyeonseok.com
  • EffectSliding๏ .slideUp() - . $(.target).slideUp(fast);๏ .slideDown() - .๏ .slideToggle() - . http://hyeonseok.com
  • 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
  • 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
  • EffectCustom๏ .queue() - jQuery fx (queue) . - .๏ .dequeue() - .๏ .clearQueue() - . http://hyeonseok.com
  • EffectCustom๏ jQuery.fx.interval - . - 13 .๏ jQuery.fx.off - . - . http://hyeonseok.com
  • jQuery AJAX http://hyeonseok.com
  • 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
  • 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
  • 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
  • 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
  • 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