Learn jquery from beginners to advanced level - part 2

In this programming tutorial we will learn jquery from beginners to advanced level. If you are new visitor and haven't read my first tutorial of this series then first please read the tutorial Learn jquery from beginners to advanced level - part 1. Ok. Now let's start right from there, where we were.

Selectors demo

Document Traversal

A Selector returns a pseudo array of jQuery objects

$(“div”).length

Returns number of selected elements. It is the best way to check selector.

Getting a specific DOM element

 $(“div”).get(2) or $(“div”)[2]

Returns a 2nd DOM element of the selection

Getting a specific jQuery element

$(“div”).eq(2)

Returns a 2nd jQuery element of the selection

each(fn) traverses every selected element calling fn()

var sum = 0;
$(“div.number”).each(
		function(){
		  sum += (+this.innerHTML);
		});

this – is a current DOM element

each(fn) also passes an indexer

$(“table tr”).each(
	function(i){
		if (i % 2) 
			$(this).addClass(“odd”);
	});

$(this) – convert DOM to jQuery i - index of the current element

Traversing HTML

.next(expr) 	// next sibling

.prev(expr)		// previous sibling

.siblings(expr)	// siblings

.children(expr) // children

.parent(expr) 	// parent

Check for expression

$(“table td”).each(function() {
	if ($(this).is(“:first-child”)) {
		$(this).addClass(“firstCol”);
	}
}); 

Find in selected

// select paragraph and then find 
// elements with class ‘header’ inside 
$(“p”).find(“.header”).show();

 // equivalent to:
$(“.header”, $(“p”)).show();

Advanced Chaining

$(“<li><span></span></li>”) // li
	.find(“span”) // span
		.html(“About Us”) // span 
		.andSelf() // span, li
			.addClass(“menu”) // span,li 
		.end() // span 
	.end() // li 
	.appendTo(“ul.main-menu”);

Get Part of Selected Result

$(“div”).slice(2, 5).not(“.green”).addClass(“middle”);

HTML Manipulation

Getting and Setting Inner Content

$(“p”).html(“<div>Hello World!</div>”);

// escape the content of div.b
$(“div.a”).text($(“div.b”).html());

Getting and Setting Values

// get the value of the checked checkbox
$(“input:checkbox:checked”).val();

// set the value of the textbox
$(“:text[name=‘txt’]”).val(“Hello”);

// select or check lists or checkboxes
$(“#lst”).val([“NY”,”IL”,”NS”]);

Handling CSS Classes

// add and remove class
$(“p”).removeClass(“blue”).addClass(“red”);

// add if absent, remove otherwise
$(“div”).toggleClass(“main”);

// test for class existance
 if ($(“div”).hasClass(“main”)) { 
// Your code will come here

}

Inserting new Elements

// select > append to the end
$(“h1”).append(“<li>Hello World</li>”);

// select > append to the beginning
$(“ul”).prepend(“<li>Hello World</li>”);

// create > append/prepend to selector

$(“<li/>”).html(“9”).appendTo(“ul”);

$(“<li/>”).html(“1”).prependTo(“ul”);

Replacing Elements

// select > replace
$(“h1”).replaceWith(“<div>Hello</div>”);

// create > replace selection
$(“<div>Hello</div>”).replaceAll(“h1”);

Replacing Elements while keeping the content

$(“h3”).each(function(){
	$(this).replaceWith(“<div>” + $(this).html() 
					+ ”</div>”);
	});

Deleting Elements

// remove all children
$(“#mainContent”).empty();

// remove selection
$(“span.names”).remove();

// change position
$(“p”).remove(“:not(.red)”).appendTo(“#main”);

Handling attributes

$(“a”).attr(“href”,”home.htm”);
// <a href=“home.htm”>…</a>

// set the same as the first one
$(“button:gt(0)”).attr(“disabled”,$(“button:eq(0)”).attr(“disabled));
// remove attribute - enable
$(“button”).removeAttr(“disabled”)	

Setting multiple attributes

$(“img”).attr({
		“src” : “/images/smile.jpg”,
		“alt” : “Smile”,
		“width”  : 10,
		“height” : 10
});

CSS Manipulations

// get style
$(“div”).css(“background-color”);

// set style 
$(“div”).css(“float”, “left”);

// set multiple style properties
$(“div”).css({“color”:”blue”,
			 “padding”: “1em”
			 “margin-right”: “0”,
			 marginLeft: “10px”});

Dimensions

// get window height
var winHeight = $(window).height();

// set element height
$(“#main”).height(winHeight);

//.width() – element
//.innerWidth() – .width() + padding

//.outerWidth() – .innerWidth() + border
//.outerWidth(true) – including margin

The default unit is Pixel (px)

Positioning

// from the document
$(“div”).offset().top;

// from the parent element
$(“div”).position().left; 

// scrolling position
$(window).scrollTop(); 

So that's it, i try my level best to let you learn jquery from beginners to advanced level with small and handy examples. Third and Final part of this tutorial series will come soon. Stay tuned.

Your feedback always provides me lot of energy.