basics of j query
DESCRIPTION
TRANSCRIPT
![Page 1: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/1.jpg)
Rupesh Kumar Tiwari
June, 2011
BASICS OF JQUERYTHE WRITE LESS, DO MORE JAVASCRIPT LIBRARY
![Page 2: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/2.jpg)
AGENDA
• jQuery Basics
• Plugins
• Advanced jQuery
![Page 3: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/3.jpg)
• $(CSS Selector)
• $(HTML)
• $(DOM element)
$
jQuery Basics…
![Page 4: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/4.jpg)
Demo
jQuery Basics…
![Page 5: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/5.jpg)
• $(something).action();
$
jQuery Basics…
![Page 6: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/6.jpg)
$:Basic actions
jQuery Basics…
![Page 7: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/7.jpg)
$:Traversal
• .children()
• .children(expression)
• .parent()
• .parent(expression)
• .find(expression)
• .filter(expression)
• .filter(function)
• eq(index)
• .not(expression)
• .add(expression)
• .next()
• .nextAll()
• .prev()
• .prevAll()
• .slice(start,end)
• .siblings()
jQuery Basics…
![Page 8: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/8.jpg)
$:Traversal
• .end()
jQuery Basics…
![Page 9: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/9.jpg)
Demo
jQuery Basics…
![Page 10: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/10.jpg)
$:Manipulation
• .html(val)
• .text(val)
• .append(content)
• .appendTo(expression)
• .appendTo(jQuery object)
• .prepend(content)
• .prependTo(expression)
• .prependTo(jQuery object)
• .after(content)
• .before(content)
• .wrap(html)
• .empty()
• .remove()
• .remove(expression)
jQuery Basics…
![Page 11: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/11.jpg)
Demo
jQuery Basics…
![Page 12: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/12.jpg)
Selectors
• #id
• .class
• .elementType
• :first
• :last
• :not(expression)
• .parent > child
• :even
• :odd
• :contains(text)
• :empty
• :hidden
• :vissible
• [attribute]
• [attribute=value]
• [attribute!=value]
jQuery Basics…
![Page 13: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/13.jpg)
Demo
jQuery Basics…
![Page 14: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/14.jpg)
$:Attributes & CSS
• .attr(name,value)
• .attr(name,function)
• .attr(properties)
• .removeAttr(name)
• .val(val)
• .css(name,value)
• css(properties)
• .addClass(class)
• .removeClass(class)
jQuery Basics…
![Page 15: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/15.jpg)
Demo
jQuery Basics…
![Page 16: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/16.jpg)
jQuery Basics…
$:Just a few more
• .html()
• .text()
• .val()
• .attr(name)
• .css(name)
• .height()
• .width()
• .is(expression)
• .hasClass(class)
• .offset()
![Page 17: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/17.jpg)
Demo
![Page 18: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/18.jpg)
Speed + Not much code + pretty code + Fun
jQuery Basics…
Chaining
![Page 19: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/19.jpg)
$(CSS Selector).action1().action2();
jQuery Basics…
Attaching multiple functions to a single selector
![Page 20: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/20.jpg)
How to respond to user interaction
jQuery Basics…
Bindings
![Page 21: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/21.jpg)
jQuery Basics…
Events
• click
• mouseover
• mouseout
• mouseenter
• mouseleave
• blur
• change
• dblclick
• focus
• keydown
• keyup
• keypress
• scroll
• resize
• load
• ready
![Page 22: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/22.jpg)
Demo
jQuery Basics…
![Page 23: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/23.jpg)
jQuery Basics…
• $(expression).function();
• $(expression).function(speed);
• $(expression).function(speed,callback);
Effects
![Page 24: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/24.jpg)
jQuery Basics…
Effects
• show
• hide
• toggle
• slideUp
• slideDown
• slideToggle
• fadeIn
• fadeOut
• fadeTo
• scroll
• resize
• load
• ready
![Page 25: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/25.jpg)
Demo
jQuery Basics…
![Page 26: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/26.jpg)
If you need that little extra something
jQuery Basics…
Advanced animations
![Page 27: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/27.jpg)
jQuery Basics…
.animate(params,duration,easing,callback)
![Page 28: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/28.jpg)
Demo
jQuery Basics…
![Page 29: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/29.jpg)
Want to be buzzword compliant, don’t you?
jQuery Basics…
AJAX
![Page 30: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/30.jpg)
jQuery Basics…
• $(CSS Selector).load(url, data, callback);
• $.post(url, data, callback);
• $.get(url, data, callback)
AJAX
![Page 31: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/31.jpg)
jQuery Basics…
$.ajax - options
• data
• type
• url
![Page 32: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/32.jpg)
jQuery Basics…
AJAX events (global)
$(CSS selector).bind(‘globalAjaxEvent’,…);
![Page 33: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/33.jpg)
jQuery Basics…
• ajaxStart
• ajaxSend
• ajaxSuccess
• ajaxError
AJAX events (global)
![Page 34: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/34.jpg)
jQuery Basics…
$.ajax({
enventName:function(){
…
}
});
AJAX events (local)
![Page 35: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/35.jpg)
jQuery Basics…
AJAX events (local)
• beforeSend
• success
• error
• complete
![Page 36: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/36.jpg)
Demo
jQuery Basics…
![Page 37: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/37.jpg)
If you think jQuery should do more, this part is for you
Plugins
Plugins
![Page 38: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/38.jpg)
How to build Plugins
• Extend jQuery.fn
• jQuery.fn.myPlugin = function(){ … };
• $( … ).myPlugin();
Plugins…
![Page 39: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/39.jpg)
The magical plugin helper
.each(function)
Plugins…
![Page 40: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/40.jpg)
jQuery.fn.myPlugin = function () {
return $(this).each(function(){
//Do stuff with $(this) here
});
}
The typical plugin
Plugins…
![Page 41: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/41.jpg)
Advanced jQuery
Now have I left you wondering how all this near stuff works?
Sorry for leaving you hanging – I’ll answer that right now..
Advanced jQuery
![Page 42: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/42.jpg)
The Stack
Advanced jQuery…
![Page 43: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/43.jpg)
Advanced Scripting
Advanced jQuery…
• $.getScript(url, callback)
• $.getJSON(url, data, callback)
![Page 44: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/44.jpg)
Resources
• http://jquery.com/
• http://visualjquery.com/
• Book: jQuery in Action
![Page 45: Basics of j query](https://reader034.vdocuments.net/reader034/viewer/2022042623/54965038b47959453d8b45e1/html5/thumbnails/45.jpg)
Thank You
• Tweeter: @roopkt
• http://Rupesht.wordpress.com