Basics of j query

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

• roopkt@gmail.com

• Tweeter: @roopkt

• http://Rupesht.wordpress.com