jQuery basics

jQuery - lightweight, "write less, do more", JavaScript library

jQuery Core - jQuery UI - jQuery Mobile – QUnit - Sizzle

jQuery Features

Html/Dom Traversal & Manipulation

CSS Manipulation

Event Handling

Effects & Animations

AJAX

Install: head + script + src

Syntax: $(selector).action()

$ = access jQuery

Selector = a query to find HTML elements

Action = action to be performed on the selected elements

$(document).ready(function(){

});

SELECTORS

$(document).ready(function(){

$("p").hide();

$("#test").hide();

$(".test").hide();

});

jQuery EVENTS

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter / mouseleave	keyup	focus	scroll
mouseover / mouseout		blur	unload
mousedown / mouseup		select	ready
mousemove
hover

Click

$("#dv2 ").click(function(){

$(this).hide();
});

Hover

$("#p1").hover(

function(){alert("You entered p1!");},
function(){alert("Bye! You now leave p1!");}

);

jQuery Effects

HIDE/SHOW

$(selector).hide(speed, callback); //speed milliseconds (or “slow”, “fast”), callback function

$(selector).show(speed, callback);

$(selector).toggle(speed, callback);

FADE

$(selector). fadeIn (speed, callback);

$(selector). fadeOut (speed, callback);

$(selector). fadeToggle (speed, callback);

$(selector). fadeTo (speed, Opacity, callback);

SLIDE

$(selector). slideUp (speed, callback);   - same as hide, just effect is different

$(selector). slideDown (speed, callback);

$(selector). slideToggle (speed, callback);

ANIMATE

$(selector).animate({params},speed,callback);

$(selector).stop(stopAll,goToEnd);

e.g. $(‘.button’).click(function(){

                $(this).animate({‘width’:’200px’, ‘height’:’80px’}, 100, function(){ alert(‘done’) });

});

speed is optional, callback is optional

METHOD CHAINING

$("#p1"). slideUp(2000).slideDown(2000);

GET

$(selector).text(); //>> Text content

$(selector).html(); //>> HTML content

$(selector).val(); //>> Form Element

$(selector).attr(“href”);

SET

$(selector).text(“Hello”); //>> Text content

$(selector).html(“<div>Hello</div>”); //>> HTML content

$(selector).val(“Upanish”); //>> Form Element

$(selector).attr(“href”, “http://www.samaysoftware.net”);

ADD

$(selector).append(“</br>Last Line”); //>> append to content of the selected element

$(selector).prepend(“</br>First Line”);

$(selector).after(“<div>Last Line</div>”); //>> add this AFTER the selected element

$(selector).before(“</br>First Line”); //>> add this BEFORE the selected element

HEIRARCHY

$(“ul”).children().css(‘border-color’:’red’); -> Applies to all “li” which are within ul

$(“.p”).first().css(‘border-color’:’red’); -> Applies to 1^st element whose class is p, - last()

next() -> next element after selected element  -  prev()

parent() -> immediate parent of selected element

REMOVE

.remove() - .empty()

CSS

.addClass(“”) – .removeClass(“”) – .toggleClass(“”)

.css(“propertyname”) //>> Get Value

.css(“propertyname”, “value”) //>> Set Value

.css({"propertyname":"value","propertyname":"value",...});

DIMENSIONS

width() - height() - innerWidth() - innerHeight() - outerWidth() - outerHeight()

jQuery AJAX

$("button").click(function(){

$("#div1").load("demo_test.txt",function(responseTxt, statusTxt, xhr){

if(statusTxt=="success")

alert("External content loaded successfully!");
if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

});

$("button").click(function(){

$.get("demo_test.asp",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",
city:"Duckburg

},

function(data,status){

alert("Data: " + data + "\nStatus: " + status);
});

});