Your SlideShare is downloading. ×
jQuery quick tuts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

jQuery quick tuts

920
views

Published on

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
920
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
84
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    • 1. jQuery Quick Tuts Mr. Huy – IT 1 S: nasavietnam Y: nasa8x E: nasavietnam@gmail.com
    • 2. Overview 1. Why choose jQuery? 2 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    • 3. Why choose jQuery? 3 JavaScript Distribution in Top Million Sites http://trends.builtwith.com/javascript
    • 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. Why choose jQuery? 5 jQuery rescues us by working the same in all browsers!
    • 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. Why choose jQuery? 7 Benefits after the course?
    • 8. Overview 1. Why choose jQuery? 8 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. DOM - Selector Expressions 27 DOM: Document Model Object New jQuery object in the DOM: - $(object) - $(html) - $(selector[,context]) - $(element) - $(elementsCollection)
    • 28. DOM - Selector Expressions 28 Selector Context $(‘#foo').click(function() { $('span', this).addClass(‘highlight'); });
    • 29. DOM - Selector Expressions 29 DOM Element $(‘#foo').click(function() { $(this).addClass(‘highlight'); }); Cloning jQuery Objects $(‘<div><p></p></div>’).appendTo(“body”)
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. DOM - Selector Expressions 46 .clone() .empty() .remove()
    • 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. Overview 1. Why choose jQuery? 48 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    • 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. Attributes 50 $(‘…’).css({ color:’#f30’, height: ‘200px’, width: ’300px’, border:’solid 1px #ccc’ }) ; Set various css properties:
    • 51. Overview 1. Why choose jQuery? 51 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    • 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. Ajax 53 $.ajax(settings): $.ajax({ url: ‘/member/login’, data: ,username:’abc’, pwd:’*****’-, dataType: ‘json’, success: function(msg){ alert(msg?’Login true’:’Login false’); } });
    • 54. Overview 1. Why choose jQuery? 54 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    • 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. 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. 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. 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. 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. 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. Events .hover(handlerIn, handlerOut) 61 .mouseup(handler), .mousedown(handler) .mouseover(handler), .mouseout(handler) .dblclick(handler) .resize(handler) .scroll(handler)
    • 62. Overview 1. Why choose jQuery? 62 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    • 63. Effects & Animation .show([duration][, callback]) 63 .hide([duration][, callback]) .toggle([duration][, callback]) .slideDown([duration][, callback]) .slideUp ([duration][, callback]) .slideToggle([duration][, callback])
    • 64. Effects & Animation .fadeIn([duration][, callback]) 64 .fadeOut([duration][, callback]) .fadeTo(duration, opacity[, callback])
    • 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. Overview 1. Why choose jQuery? 66 2. Selectors 3. Attributes 4. Ajax 5. Events 6. Effects & Animation 7. Plugins 8. Q & A
    • 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. Q & A 68