Personal tech blog of Sameera Thilakasiri - Just I wanted.. Do you?…

jQuery working with CSS(CSS Manipulation)

Posted on September 28, 2011 by Sameera Thilakasiri

.css( )
This method get the CSS style property of the first matched element..

Example :

Above code display the color code of the clicked ‘div’ .

.height( )
This method get the height of the first matched element.

Example :
$(“p”).height()); // returns height of paragraph.
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

.innerHeight( )
This method return the height for the first element including padding but not border. This method is not applicable to window and document objects; for these, use .height() instead.

Example :
Following code get the innerHeight of a paragraph :

Hello

.innerWidth( )
This method return the width for the first element including padding but not border. This method is not applicable to window and document objects; for these, use .height() instead.

Example :
Following code will get the innerWidth of a paragraph :

Hello

.offset( )
This method get the current coordinate of the matched element, relative to the document.

Example :
This method returns the offset of the second paragraph

Hello

2nd Paragraph

.outerHeight( )
This method get the outer Height from the first matched element, including padding and border.This method is not applicable to window and document objects; for these, use .height() instead.
Example :

The following code get the outer Height of a paragraph :

Hello

.outerWidth( )
This method get the outer width from the first matched element, including padding and border.This method is not applicable to window and document objects; for these, use .height() instead.

Example :
The following code get the outer Width of a paragraph :

Hello

.position( )
This method get the coordinates of the first matched element , relative to the offset parent.

Example :
Following code return the position of the second paragraph :

Hello

.scrollLeft( )
This method get the current horizontal position of the scroll bar for the first matched element.

Example :
Following code get the current horizontal position of the scroll bar for the first ‘p’ :

Hello

.scrollTop( )
This method get the current vertical position of the scroll bar for the first matched element.

Example :
Following code get the current vertical position of the scroll bar for the first ‘p’ :

Hello

.width( )
This method get the width of the first matched element.

Example :
Following are some example of ‘width()’ method :
$(“p”).width()); //returns width of paragraph.
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

jQuery inserting content(DOM Insertion)

Posted on September 28, 2011 by Sameera Thilakasiri

.unwrap( )
The .unwrap() method removes the element’s parent from the matched set .It leaves the matched element at their place.

Example :
$(“p”).unwrap();
This script removes the parent of ‘p’.

.wrap( wrappingElement )
This method wrap the html wrapping element around each of the matched elements. The ‘wrapedElement ‘ may be div, span etc.

Example :
$(“p”).wrap(“

“);
It wrap a div element around each matched ‘p’. The structure will be wrapped around each of the elements in the set of matched elements.

.wrapAll( wrappingElement )
This method wrap the html wrapping element around all the matched elements. The ‘wrapedElement ‘ may be div, span etc. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.

Example :
$(“p”).wrapAll(“

“);
It wrap div around all the ‘p’ element as a single group.

.wrapInner( wrappingElement )
This method wrap inside the provided ‘wrappingElement’.

Example :
$(“p”).wrapInner(““);
It wrap inside the ‘p’ or ‘p’ s.

DOM Insertion, Inside
This method allow us to insert new content inside an existing once

.append( content)
This method add new content inside the matched set of element , after the existing contents.

Example :
$(‘.inner’).append(‘

Test

‘);
This method insert

inside the div class named ‘inner ‘ after it’s existing content.

.appendTo( target )
This method insert every element in the set of matched elements to the end of the target.

Example :
$(‘

Test

‘).appendTo(‘.inner’);
This method insert

inside the div class named ‘inner ‘ after it’s existing content.

.prepend( content )
This method add new content inside the matched set of element , before the existing contents.

Example :
$(‘.inner’).prepend(‘

Test

‘);
It add ‘

Test

‘ before the div named ‘inner’.

.prependTo( )
This method insert every element in the set of matched elements to the beginning of the target.

Example :
$(‘

Test

‘).prependTo(‘.inner’);
It add ‘

Test

‘ before the div named ‘inner’.

.text( )
This method get the combined text contents of each element in the set of matched elements, including their descendants.

Example :
Consider the following code :

Demonstration Box

list item 1

list item 2

The $(‘div.demo-container’).text() will gives following output :

Demonstration Box list item 1 list item 2

DOM insertion, Outside

The methods falling in this category allow us to insert new content outside an existing element.

.after( )
This method add element after each matched set element.

Example :
$(‘.inner’).after(‘

Test

‘);
It append the element ‘

Test

‘ after every matched div whose name is ‘inner’.

.before( )
This method add element before each matched set element.

Example :
$(‘.inner’).before(‘

Test

‘);
It add the element ‘

Test

‘ before every matched div whose name is ‘inner’.

.insertAfter( )
This method insert every element in the set of matched elements after the target.

Example :
$(‘

Test

‘).insertAfter(‘.inner’);
It append the element ‘

Test

‘ after every matched div whose name is ‘inner’.

.insertBefore( )
This method insert every element in the set of matched elements before the target.

Example :
$(‘

Test

‘).insertBefore(‘.inner’);
It add the element ‘

Test

‘ before every matched div whose name is ‘inner’.

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: jQuery, jQuery Examples
Tags: jQuery | jQuery DOM Insertion | jQuery Examples

jQuery manipulating attributes

Posted on September 28, 2011 by Sameera Thilakasiri

Manipulating CSS class attribute

You can manipulate CSS class attribute using following methods :

.addClass()
You can add any css class to filtered elements through this method.

Example :
Following code add selected css class to last paragraph :

.hasClass()
Using this method , you can check any of the matched elements have provided css class or not. If it has , it will reyurn ‘True’ otherwise ‘False’.

Example :
$(‘#mydiv’).hasClass(‘foo’)
Above code checks whether the div “mydiv” have ‘foo’ css class or not.

.removeClass()
This method remove the css class from the set of matched element.

Example :
Following code will remove ‘blue’ css class from all even paragraphs :
$(“p:even”).removeClass(“blue”)

.toggleClass()
This method adds or removes a class from each element in the set of matched elements depending on either the class’s presence or the value of the switch argument.

Example :
Following code will change the css class of clicked element :

Manipulating general attributes :

Given below methods are used to get and set the Dom attributes of elements :

.attr()
This method is used to get the attribute of the first element from the matched set of elements.

Example :
Following code will get the ‘title ‘ attribute of the first matched ’em’ :
$(“em”).attr(“title”);

.removeAttr()
This method is used to remove attribute from each element of the matched set.

Example :
Consider the following code line :

The following code will enables the input next to it, on button click :

$(“button”).click(function () {
$(this).next().removeAttr(“disabled”)
.focus()
.val(“editable now”);
});

.text()
This method will get and combine the text of each matched elements by leaving their html tags.

Example :
Consider the following code :
div class=”demo-container”>

Demonstration Box

list item 1
list item 2

The $(‘div.demo-container’).text()will produce the following output :

Demonstration Box list item 1 list item 2

NOTE -The .text() method cannot be used on input elements. For input field text, use the .val() method.

.val( )
This method will get the current value of the first element in the set of matched elements.

Following are some example of ‘.val()’ :

$(‘select.foo option:selected’).val(); // get the value from a dropdown select
$(‘select.foo’).val(); // get the value from a dropdown select even easier
$(‘input:checkbox:checked’).val(); // get the value from a checked checkbox
$(‘input:radio[name=bar]:checked’).val(); // get the value from a set of radio buttons

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: jQuery, jQuery Examples
Tags: jQuery | jQuery Examples

jQuery Tree traversal

Posted on September 11, 2011 by Sameera Thilakasiri

.children()
This method get a set of elements containing all of the unique immediate children of each of the matched set of elements.

Example :
$(“div”).children(“.selected”).css(“color”, “blue”);
It finds all children with a class “selected” of each div.

.closest( )
This method get a set of elements containing the closest parent element that matches the specified selector, the starting element included.

Example :
$(‘li.item-a’).closest(‘ul’).css(‘background-color’, ‘red’);
This will change the background color of the closest “ul” .

.find( )
This method searches for descendent elements that match the specified selectors.

Example :

.next()
This method get a set of elements containing the unique next siblings of each of the given set of elements.

Example :
$(“p”).next(“.selected”).css(“background”, “yellow”);
It finds the very next sibling of each paragraph. Keep only the ones with a class “selected”.

.nextAll()
This method is used to find all sibling elements after the current element.

Example :
$(‘li.third-item’).nextAll().css(‘background-color’, ‘red’);

.nextUntil()
It finds all sibling elements after the current element.

Example : Consider the following code :

.offsetParent()
This method get the closest ancestor element that is positioned. The .offsetParent() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object wrapped around the closest positioned ancestor.

.parent( )
This method get the direct parent of an element.

Example :
It will find the parent element of each paragraph with a class “selected”.

.parents( )
This method gets the ancestors of each element in the current set of matched elements.

Example :
$(‘li.child-a’).parents().css(‘background-color’, ‘red’) ;

.parentsUntil()
The script below change the red background for the level-2 list and the item II.

$(‘li.item-a’).parentsUntil(‘.level-1’).css(‘background-color’, ‘red’);

.prev( )
This method will get the immediately preceding sibling of each element in the set of matched elements.

Example :
$(‘li.third-item’).prev().css(‘background-color’, ‘red’);

.prevAll()
This method will get all preceding sibling of each element in the set of matched elements.

The following script changes red background behind Node 1 and Node 2.

Example :
$(‘li.third-item’).prevAll().css(‘background-color’, ‘red’);

.prevUntil( )
This method gets all preceding siblings of each element up to the provided ‘selector’.

Example:
(‘#term-2’).prevUntil(‘dt’).css(‘background-color’, ‘red’);
This will get all the elements before “term-2” until it would not get “dt” .

.siblings( )
This method gets the siblings of each element in the set of matched elements.

Example :
$(“p”).siblings(“.selected”).css(“background”, “yellow”);
It finds all siblings with a class “selected” of each ‘p’.

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: jQuery, jQuery Examples
Tags: jQuery | jQuery Examples | jQuery Tree Traversal

Traversing through filtering

Posted on September 11, 2011 by Sameera Thilakasiri

Traversing through filtering

Finding element by filtering has following methods :

METHOD	DESCRIPTION	EXAMPLE
. eq()	Find Elements by index	$(“li”).eq(2).addClass(“drop”);
.filter()	The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s).	$(“li”).filter(“.middle”).addClass(“drop”);
.first()	Reduce the set of matched elements to the first in the set.	(‘li’).first().css(‘background-color’, ‘green’);
.has()	Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.	$(“ul”).has(“li”).addClass(“high”);
.is()	Check the current matched set of elements against a selector and return true if at least one of these elements matches the selector.	if ($(this).is(“:first-child”)) {}
.last()	Reduce the set of matched elements to the final one in the set.	$(“p span”).last().addClass(‘highlight’)
.map()	Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).	We can get the sum of the values of the checked inputs: var sum = 0; $(‘input:checked’).map(function() { return sum += (this.value * 1); });
.not()	Remove elements from the set of matched elements.	$(‘li’).not(‘:even’).css(‘background-color’, ‘red’);
.slice()	Selects a subset of the matched elements.	Selects all paragraphs, then slices the selection to include only the first element. $(“p”).slice(0, 1).wrapInner(“<b></b>”);

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.