jQuery quick tuts

1,232 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,232
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
89
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • jQuery Framework đangtrởlênđượcưachuộng, cộngđồngngàycànglớnvàthốngtrịthếgiới
  • jQuery quick tuts

    1. 1. jQuery Quick Tuts Mr. Huy – IT 1 S: nasavietnam Y: nasa8x E: nasavietnam@gmail.com
    2. 2. Overview 1. Why choose jQuery? 2 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    3. 3. Why choose jQuery? 3 JavaScript Distribution in Top Million Sites http://trends.builtwith.com/javascript
    4. 4. Why choose jQuery? 4 Led to World Domination http://www.google.com/trends/?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+javas cript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
    5. 5. Why choose jQuery? 5 jQuery rescues us by working the same in all browsers!
    6. 6. Why choose jQuery? 6 Easier to write jQuery than pure JavaScript With pure Javascript: var _divs=document.getElementByTagName(‘div’); for(var i=0;i<_divs.length;i++) { _divs[i].style.display=‘none’; } With jQuery: $(‘div’).hide();
    7. 7. Why choose jQuery? 7 Benefits after the course?
    8. 8. Overview 1. Why choose jQuery? 8 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    9. 9. Selectors 9 $(…) is a selector $(‘#id’) get element by id <html> <body> <div>jQuery examples</div> <div id="foo">example</div> </body> </html> <html> <body> <div>jQuery examples</div> <div id="foo">example</div> </body> </html>
    10. 10. Selectors 10 $(‘.className’) get elements by class <html> <body> <div>jQuery examples</div> <div class="foo">example</div> <div class="foo">example</div> </body> </html> <html> <body> <div>jQuery examples</div> <div class="foo">example</div> <div class="foo">example</div> </body> </html>
    11. 11. Selectors 11 $(‘div’) get elements by tag name <html> <body> <p>jQuery examples</p> <div class="foo">example</div> <div class="foo">example</div> </body> </html> <html> <body> <p>jQuery examples</p> <div class="foo">example</div> <div class="foo">example</div> </body> </html>
    12. 12. Selectors 12 $(‘#foo > p’) get all elements by p that are children of a element #foo <html> <body> <p>jQuery examples</p> <div id="foo"> <p></p> <p></p> <div> <p></p> </div> </div> </body> </html> <html> <body> <p>jQuery examples</p> <div id="foo"> <p></p> <p></p> <div> <p></p> </div> </div> </body> </html>
    13. 13. Selectors 13 $(‘#foo p’) get all elements by p that are descendants of a element #foo <html> <body> <p>jQuery examples</p> <div id="foo"> <p></p> <p></p> <div> <p></p> </div> </div> </body> </html> <html> <body> <p>jQuery examples</p> <div id="foo"> <p></p> <p></p> <div> <p></p> </div> </div> </body> </html>
    14. 14. Selectors 14 $(‘a*href+’) Get all links with contains href attribute <html> <body> <p>jQuery examples</p> <a rel=“vmgmedia.vn”></a> <a href=“//vmgmedia.vn”></a> <div> <a href=“//vmgmedia.vn”></a> </div> </body> </html> <html> <body> <p>jQuery examples</p> <a rel=“vmgmedia.vn”></a> <a href=“//vmgmedia.vn”></a> <div> <a href=“//vmgmedia.vn”></a> </div> </body> </html>
    15. 15. Selectors 15 $(‘a*rel=nofollow+’) Get all <a> elements that have a rel value exactly equal to nofollow <html> <body> <p>jQuery examples</p> <a rel=“nofollow”></a> <a href=“//vmgmedia.vn”></a> <a href=“//vmgmedia.vn” rel=“nofollow” ></a> </body> </html> <html> <body> <p>jQuery examples</p> <a rel=“nofollow”></a> <a href=“//vmgmedia.vn”></a> <a href=“//vmgmedia.vn” rel=“nofollow” ></a> </body> </html>
    16. 16. Selectors 16 a[href^=https] Get all elements that have the href attribute with a value beginning exactly with the string https <html> <body> <p>jQuery examples</p> <a rel=“nofollow”></a> <a href=“//vmgmedia.vn”></a> <a href=“https://xyz.vn”></a> </body> </html> <html> <body> <p>jQuery examples</p> <a rel=“nofollow”></a> <a href=“//vmgmedia.vn”></a> <a href=“https://xyz.vn”></a> </body> </html>
    17. 17. Selectors 17 a[href$=.zip] Get all elements that have the href attribute with a value ending exactly with the string .zip <html> <body> <p>jQuery examples</p> <a rel=“nofollow”></a> <a href=“//vmgmedia.vn”></a> <a href=“https://xyz.vn/file.zip”> </a> </body> </html> <html> <body> <p>jQuery examples</p> <a rel=“nofollow”></a> <a href=“//vmgmedia.vn”></a> <a href=“https://xyz.vn/file.zip”> </a> </body> </html>
    18. 18. Selectors 18 a[href*=vmg] Get all elements that have the href attribute with a value containing the substring vmg <html> <body> <p>jQuery examples</p> <a rel=“nofollow”></a> <a href=“//vmgmedia.vn”></a> <a href=“https://xyz.vn/file.zip”> </a> </body> </html> <html> <body> <p>jQuery examples</p> <a rel=“nofollow”></a> <a href=“//vmgmedia.vn”></a> <a href=“https://xyz.vn/file.zip”> </a> </body> </html>
    19. 19. Selectors 19 a[rel~=vmg] Get all elements that have the rel attribute with a value containing the word vmg, delimited by spaces <html> <body> <p>jQuery examples</p> <a rel=“nofollow vmg”></a> <a rel=“vmgmedia”></a> <a rel=“vmg”> </a> </body> </html> <html> <body> <p>jQuery examples</p> <a rel=“nofollow vmg”></a> <a rel=“vmgmedia”></a> <a rel=“vmg”> </a> </body> </html>
    20. 20. Selectors 20 a[id|=vmg] Get all elements that have the id attribute with a value either equal to vmg, or beginning with vmg and a hyphen (-). <html> <body> <p>jQuery examples</p> <a id=“vmg-1”></a> <a id=“vmg-2”></a> <a id=“vmg”> </a> </body> </html> <html> <body> <p>jQuery examples</p> <a id=“vmg-1”></a> <a id=“vmg-2”></a> <a id=“vmg”> </a> </body> </html>
    21. 21. Selectors 21 :first, :first-child Select first element in the list item. Ex: $(‘li:first’) <html> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html> <html> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
    22. 22. Selectors 22 :parent Select all elements that are the parent of another element, including text nodes. Ex: $(‘li:parent’) <html> <body> <ul> <li> <a></a> </li> <li>&nbsp;</li> <li></li> </ul> </body> </html> <html> <body> <ul> <li> <a></a> </li> <li>&nbsp;</li> <li></li> </ul> </body> </html>
    23. 23. Selectors 23 :contains(text) Selects all elements that contain the text text Ex: $(‘p:contains(vmg)’) <html> <body> <p>Vmg</p> <p>vmgmedia</p> <p>vmg</p> <p>VMG</p> </body> </html> <html> <body> <p>Vmg</p> <p>vmgmedia</p> <p>vmg</p> <p>VMG</p> </body> </html>
    24. 24. Selectors 24 :has(E) Select all elements that contain an element matching E. Ex: $(‘li:has(a)’) <ul> <li></li> <li> <a></a> </li> <li></li> <li> <a></a> </li> </ul> <ul> <li></li> <li> <a></a> </li> <li></li> <li> <a></a> </li> </ul>
    25. 25. Selectors 25 :not(E) Get all elements that do not match the selector expression E Ex: $(‘li:not(:last)’) <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul>
    26. 26. Selectors 26 :hidden, : visible Select all elements that are hidden or visible :input, :text, :password, :radio, :submit, :checked, :selected… Select form elements $(‘#id, .class, div’) Multiple selectors in one
    27. 27. DOM - Selector Expressions 27 DOM: Document Model Object New jQuery object in the DOM: - $(object) - $(html) - $(selector[,context]) - $(element) - $(elementsCollection)
    28. 28. DOM - Selector Expressions 28 Selector Context $(‘#foo').click(function() { $('span', this).addClass(‘highlight'); });
    29. 29. DOM - Selector Expressions 29 DOM Element $(‘#foo').click(function() { $(this).addClass(‘highlight'); }); Cloning jQuery Objects $(‘<div><p></p></div>’).appendTo(“body”)
    30. 30. DOM - Selector Expressions 30 .filter() Reduce the set of matched elements to those that match the selector or pass the function’s test. Ex: $(‘li’).filter(‘:last’) <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul> .filter(selector) .filter(function)
    31. 31. DOM - Selector Expressions 31 .eq(n) Get one element at the specified index. Ex: $(‘li’).eq(1) <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul>
    32. 32. DOM - Selector Expressions 32 .slice(start[,end]) Get elements to a subset specified by a range of indices Ex: $(‘li’).slice(1,3) <ul> <li></li> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> </ul>
    33. 33. Selectors 33 .children([selector]) Get the children of each element in the set of matched elements, optionally filtered by a selector. Ex: $(‘li.foo’).children() <ul> <li class=‘foo’> <ul> <li></li> <li></li> </ul> </li> <li></li> </ul> <ul> <li class=‘foo’> <ul> <li></li> <li></li> </ul> </li> <li></li> </ul>
    34. 34. Selectors 34 .parents([selector]) Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. <div class=‘foo’></div> <div class=‘foo’></div> <div class=‘foo’> <a id=‘click’></a> </div> <div class=‘foo’></div> $(‘#click’).bind(‘click’, functi on(){ $(this).parents(‘.foo’). addClass(‘highlight’) })
    35. 35. DOM - Selector Expressions 35 .parent([selector]) Get the parent of each element in the current set of matched elements, optionally filtered by a selector. Ex: $(‘#click’).parent() <div> <ul class=‘foo’> <li> <a class=‘click’></a> </li> </ul> </div> <div> <ul class=‘foo’> <li> <a class=‘click’></a> </li> </ul> </div>
    36. 36. DOM - Selector Expressions 36 .is(selector) Return true if at least one of these elements matches the selector .hasClass(className) Return true if elements exist className .addClass(className)/.removeClass(className) Add/remove class of element(s)
    37. 37. DOM - Selector Expressions 37 .replaceWith(newContent) Replace each element by newContent. Ex: $(‘#main’).replaceWidth(‘<p>new content</p>’) <div> <div id=‘main’> </div> </div> <div> <p>new content</p> </div>
    38. 38. DOM - Selector Expressions 38 .replaceAll(target) Replace each target element with the set of matched elements. Ex: $(‘#main’).replaceAll($(‘.target’)) <div id=‘main’>Hello</div> <div class=‘target’> Hello 2 </div> <div class=‘target’> Hello 2 </div> <div id=‘main’>Hello</div> <div id=‘main’>Hello</div>
    39. 39. DOM - Selector Expressions 39 .prepend(content) Insert content to fisrt child of elements. Ex: $(‘#main’).prepend(“<div>new</div>”) <div id=‘main’> <p>Hello</p> <p>Hello2</p> </div> <div id=‘main’> <div> new</div> <p>Hello</p> <p>Hello2</p> </div>
    40. 40. DOM - Selector Expressions 40 .append(content) Insert content to last child of elements. Ex: $(‘#main’).append(“<div>new</div>”) <div id=‘main’> <p>Hello</p> <p>Hello2</p> </div> <div id=‘main’> <p>Hello</p> <p>Hello2</p> <div>new</div> </div>
    41. 41. DOM - Selector Expressions 41 .before(content) Insert content before elements. Ex: $(‘#main’).before(“<div>new</div>”) <div id=‘main’> <p>Hello</p> <p>Hello2</p> </div> <div>new</div> <div id=‘main’> <p>Hello</p> <p>Hello2</p> </div>
    42. 42. DOM - Selector Expressions 42 .after(content) Insert content after elements. Ex: $(‘#main’).after(“<div>new</div>”) <div id=‘main’> <p>Hello</p> <p>Hello2</p> </div> <div id=‘main’> <p>Hello</p> <p>Hello2</p> </div> <div>new</div>
    43. 43. DOM - Selector Expressions 43 .wrap(wrapElements) Wrap an HTML structure around each element in the set of matched elements Ex: $(‘.foo’).wrap(‘<div class=“wrap”></div>’) <div class=‘foo’>Hello</div> <div class=‘foo’>Hello</div> <div class=‘wrap’> <div class=‘foo’>Hello</div> </div> <div class=‘wrap’> <div class=‘foo’>Hello</div> </div>
    44. 44. DOM - Selector Expressions 44 .wrapAll(wrapElements) Wrap an HTML structure around all elements in the set of matched elements Ex: $(‘.foo’).wrapAll(‘<div class=“wrap”></div>’) <div class=‘foo’>Hello</div> <div class=‘foo’>Hello</div> <div class=‘wrap’> <div class=‘foo’>Hello</div> <div class=‘foo’>Hello</div> </div>
    45. 45. DOM - Selector Expressions 45 .wrapInner(wrapElements) Wrap an HTML structure around the content of each element in the set of matched elements Ex: $(‘.foo’).wrapInner(‘<div class=“wrap”></div>’) <div class=‘foo’>Hello</div> <div class=‘foo’>Hello</div> <div class=‘foo’> <div class=‘wrap’>Hello</div> </div> <div class=‘foo’> <div class=‘wrap’>Hello</div> </div>
    46. 46. DOM - Selector Expressions 46 .clone() .empty() .remove()
    47. 47. jQuery Factory Method $() 47 You can also pass $() a function to run the function after the page load. $(function(){ //do something }); This is essentially the same as.. $(document).ready(function(){ //do something }); $().ready(function(){ //do something });
    48. 48. Overview 1. Why choose jQuery? 48 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    49. 49. Attributes 49 $(‘…’).attr(‘id’) Get Set $(‘…’).attr(‘id’,’new-id’) .html() .html(‘<p>Hello</p>’) .val() .val(‘new value’) .css(‘color’) .css(‘color’,’#f30’) .width() .width(100)
    50. 50. Attributes 50 $(‘…’).css({ color:’#f30’, height: ‘200px’, width: ’300px’, border:’solid 1px #ccc’ }) ; Set various css properties:
    51. 51. Overview 1. Why choose jQuery? 51 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    52. 52. Ajax 52 $.ajax(settings) $.get(url, params, callback) $.post(url, params, callback) $.getJSON(url, params, callback) $.getScript(url, callback) jQuery has excellent support for Ajax $(‘#main’).load(‘ajax.html’) More advanced methods include:
    53. 53. Ajax 53 $.ajax(settings): $.ajax({ url: ‘/member/login’, data: ,username:’abc’, pwd:’*****’-, dataType: ‘json’, success: function(msg){ alert(msg?’Login true’:’Login false’); } });
    54. 54. Overview 1. Why choose jQuery? 54 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    55. 55. Events .bind(eventType[, eventData], handler) Attach a handler to an event for the elements. 55 Ex: $('#foo').bind('click', {msg: ‘Hello event’-, function(event) { alert(event.data.msg); }); Multiples events: $('#foo').bind('click, mouseover', {msg: ‘Hello event’-, function(event) { alert(event.data.msg); });
    56. 56. Events unbind([eventType[, handler]]) Remove a previously-attached event handler from the elements 56 Ex: $('#foo').unbind('click'); $('#foo').unbind('click‘, function(), alert(‘Event click removed’); });
    57. 57. Events .one(eventType[, eventData], handler) Attach a handler to an event for the elements. The handler is executed at most once. 57 $('#foo').one('click', function() { alert('This will be displayed only once.'); }); $('#foo').bind('click', function(event) { alert('This will be displayed only once.'); $(this).unbind(event); });
    58. 58. Events .trigger(eventType[, parameters]) Execute all handlers and behaviors attached to the matched elements for the given event type. 58 $('#foo').bind('click', function(event) { alert(‘Hello click event.'); }); $('#foo').trigger('click');
    59. 59. Events 59 $('#foo').bind(‘vmg- event', function(event, param1, param2) { alert(param1 + "n" + param2); }); $('#foo').trigger(‘vmg-event', *‘value 1', ‘value 2'+); Trigger custom event
    60. 60. Events .live(eventType, handler) Attach a handler to the event for all elements that match the current selector, now or in the future. 60 $(function () { $('.click').live('click', function () { $('body').append('<div class="click">Another target</div>'); }); $('body').append('<div class="click">Another target</div>'); }); Not all event types are supported. Only custom events and the following: click, dblclick, keydown, keyup, keypress, mousedown, mousemove, m ouseout, mouseover, mouseup, submit
    61. 61. Events .hover(handlerIn, handlerOut) 61 .mouseup(handler), .mousedown(handler) .mouseover(handler), .mouseout(handler) .dblclick(handler) .resize(handler) .scroll(handler)
    62. 62. Overview 1. Why choose jQuery? 62 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    63. 63. Effects & Animation .show([duration][, callback]) 63 .hide([duration][, callback]) .toggle([duration][, callback]) .slideDown([duration][, callback]) .slideUp ([duration][, callback]) .slideToggle([duration][, callback])
    64. 64. Effects & Animation .fadeIn([duration][, callback]) 64 .fadeOut([duration][, callback]) .fadeTo(duration, opacity[, callback])
    65. 65. Effects & Animation .animate(properties, options) 65 .animate(properties[, duration][, easing][, callback]) $('#click').click(function() { $('#photo').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { alert('Animation complete.'); }); }); .stop()
    66. 66. Overview 1. Why choose jQuery? 66 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    67. 67. Plugins 67 jQuery is extensible through plugins, which can add new methods to the jQuery object $.fn.externalLink=function(){ this.filter(function () { return this.hostname && this.hostname !== location.hostname; }).attr('target', '_blank'); }; $(‘a’).externalLink()
    68. 68. Q & A 68

    ×