Embed Size (px)
DESCRIPTION
Citation preview
Rupesh Kumar Tiwari
June, 2011
BASICS OF JQUERYTHE WRITE LESS, DO MORE JAVASCRIPT LIBRARY
AGENDA
• jQuery Basics
• Plugins
• Advanced jQuery
• $(CSS Selector)
• $(HTML)
• $(DOM element)
$
jQuery Basics…
Demo
jQuery Basics…
• $(something).action();
$
jQuery Basics…
$:Basic actions
jQuery Basics…
$: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…
$:Traversal
• .end()
jQuery Basics…
Demo
jQuery Basics…
$: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…
Demo
jQuery Basics…
Selectors
• #id
• .class
• .elementType
• :first
• :last
• :not(expression)
• .parent > child
• :even
• :odd
• :contains(text)
• :empty
• :hidden
• :vissible
• [attribute]
• [attribute=value]
• [attribute!=value]
jQuery Basics…
Demo
jQuery Basics…
$: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…
Demo
jQuery Basics…
jQuery Basics…
$:Just a few more
• .html()
• .text()
• .val()
• .attr(name)
• .css(name)
• .height()
• .width()
• .is(expression)
• .hasClass(class)
• .offset()
Demo
Speed + Not much code + pretty code + Fun
jQuery Basics…
Chaining
$(CSS Selector).action1().action2();
jQuery Basics…
Attaching multiple functions to a single selector
How to respond to user interaction
jQuery Basics…
Bindings
jQuery Basics…
Events
• click
• mouseover
• mouseout
• mouseenter
• mouseleave
• blur
• change
• dblclick
• focus
• keydown
• keyup
• keypress
• scroll
• resize
• load
• ready
Demo
jQuery Basics…
jQuery Basics…
• $(expression).function();
• $(expression).function(speed);
• $(expression).function(speed,callback);
Effects
jQuery Basics…
Effects
• show
• hide
• toggle
• slideUp
• slideDown
• slideToggle
• fadeIn
• fadeOut
• fadeTo
• scroll
• resize
• load
• ready
Demo
jQuery Basics…
If you need that little extra something
jQuery Basics…
Advanced animations
jQuery Basics…
.animate(params,duration,easing,callback)
Demo
jQuery Basics…
Want to be buzzword compliant, don’t you?
jQuery Basics…
AJAX
jQuery Basics…
• $(CSS Selector).load(url, data, callback);
• $.post(url, data, callback);
• $.get(url, data, callback)
AJAX
jQuery Basics…
$.ajax - options
• data
• type
• url
jQuery Basics…
AJAX events (global)
$(CSS selector).bind(‘globalAjaxEvent’,…);
jQuery Basics…
• ajaxStart
• ajaxSend
• ajaxSuccess
• ajaxError
AJAX events (global)
jQuery Basics…
$.ajax({
enventName:function(){
…
}
});
AJAX events (local)
jQuery Basics…
AJAX events (local)
• beforeSend
• success
• error
• complete
Demo
jQuery Basics…
If you think jQuery should do more, this part is for you
Plugins
Plugins
How to build Plugins
• Extend jQuery.fn
• jQuery.fn.myPlugin = function(){ … };
• $( … ).myPlugin();
Plugins…
The magical plugin helper
.each(function)
Plugins…
jQuery.fn.myPlugin = function () {
return $(this).each(function(){
//Do stuff with $(this) here
});
}
The typical plugin
Plugins…
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
The Stack
Advanced jQuery…
Advanced Scripting
Advanced jQuery…
• $.getScript(url, callback)
• $.getJSON(url, data, callback)
Resources
• http://jquery.com/
• http://visualjquery.com/
• Book: jQuery in Action
Thank You
• Tweeter: @roopkt
• http://Rupesht.wordpress.com
