Basics of j query

Rupesh Kumar Tiwari
June, 2011
Basics of JQueryThe write less, do more JavaScript library

Agenda
jQuery Basics
Plugins
Advanced jQuery

jQueryBasics…
$
$(CSS Selector)
$(HTML)
$(DOM element)

jQueryBasics…
Demo

jQueryBasics…
$
$(something).action();

jQueryBasics…
$:Basic actions

jQueryBasics…
$:Traversal
.not(expression)
.add(expression)
.next()
.nextAll()
.prev()
.prevAll()
.slice(start,end)
.siblings()
.children()
.children(expression)
.parent()
.parent(expression)
.find(expression)
.filter(expression)
.filter(function)
eq(index)

jQueryBasics…
$:Traversal
.end()

jQueryBasics…
Demo

jQueryBasics…
$: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)

jQueryBasics…
Demo

jQueryBasics…
Selectors
:odd
:contains(text)
:empty
:hidden
:vissible
[attribute]
[attribute=value]
[attribute!=value]
#id
.class
.elementType
:first
:last
:not(expression)
.parent > child
:even

jQueryBasics…
Demo

jQueryBasics…
$:Attributes & CSS
.val(val)
.css(name,value)
css(properties)
.addClass(class)
.removeClass(class)
.attr(name,value)
.attr(name,function)
.attr(properties)
.removeAttr(name)

jQueryBasics…
Demo

jQueryBasics…
$:Just a few more
.height()
.width()
.is(expression)
.hasClass(class)
.offset()
.html()
.text()
.val()
.attr(name)
.css(name)

jQueryBasics…
Chaining
Speed + Not much code + pretty code + Fun

jQueryBasics…
Attaching multiple functions to a single selector
$(CSS Selector).action1().action2();

jQuery Basics…
Bindings
How to respond to user interaction

jQuery Basics…
Events
click
mouseover
mouseout
mouseenter
mouseleave
blur
change
dblclick
focus
keydown
keyup
keypress
scroll
resize
load
ready

jQueryBasics…
Demo

jQueryBasics…
Effects
$(expression).function();
$(expression).function(speed);
$(expression).function(speed,callback);

jQuery Basics…
Effects
show
hide
toggle
slideUp
slideDown
slideToggle
fadeIn
fadeOut
fadeTo
scroll
resize
load
ready

jQueryBasics…
Demo

jQueryBasics…
Advanced animations
If you need that little extra something

jQueryBasics…
.animate(params,duration,easing,callback)

jQueryBasics…
Demo

jQueryBasics…
AJAX
Want to be buzzword compliant, don’t you?

jQueryBasics…
AJAX
$(CSS Selector).load(url, data, callback);
$.post(url, data, callback);
$.get(url, data, callback)

jQueryBasics…
$.ajax - options
data
type
url

jQueryBasics…
AJAX events (global)
$(CSS selector).bind(‘globalAjaxEvent’,…);

jQuery Basics…
ajaxStart
ajaxSend
ajaxSuccess
ajaxError
AJAX events (global)

jQueryBasics…
AJAX events (local)
$.ajax({
enventName:function(){
…
}
});

jQueryBasics…
AJAX events (local)
beforeSend
success
error
complete

jQueryBasics…
Demo

Plugins
Plugins
If you think jQuery should do more, this part is for you

Plugins…
How to build Plugins
Extend jQuery.fn
jQuery.fn.myPlugin = function(){ … };
$( … ).myPlugin();

Plugins…
The magical plugin helper
.each(function)

Plugins…
The typical plugin
jQuery.fn.myPlugin = function () {
return $(this).each(function(){
//Do stuff with $(this) here
});
}

AdvancedjQuery
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..

AdvancedjQuery…
The Stack

AdvancedjQuery…
Advanced Scripting
$.getScript(url, callback)
$.getJSON(url, data, callback)

Resources
http://jquery.com/
http://visualjquery.com/
Book: jQueryin Action

ThankYou
roopkt@gmail.com
Tweeter: @roopkt
http://Rupesht.wordpress.com

Basics of j query

by roopkt on Sep 23, 2011

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 27

Statistics

Basics of j query Presentation Transcript

http://www.codeproject.com	26
http://www.linkedin.com	1