Header Ads

Jquery Methods

Here,Let me explain about what all are Methods available in Jquery with example

.add() - It can be used to add particular elements on selected item

$("div").css("border", "1px solid red")
.add("span")

.addBack() - It can be used to previous elements to be added to the current set of elements

$("div").find("span").addBack().addClass("background");

.children() - It can be used to allows us to loop through the children elements in the DOM array.

var $child = $(e.target).children();
alert($child.length);

.contents() - It can be used to allows us to loop through the immediate child elements in the DOM array and construct a new jQuery element.

$("div").contents().filter(function(){ }).val("test");

.each() - It can be used to oops through the DOM elements from top to bottom.

$("div").each(function() {
$(this).addClass("test");
});

.end() - It can be used ends the operation in the current chain and return the set of matched elements.

$("td").find("div").end().css("border", "1px blue solid");
});

.filter() - It filter the element and constructs a new jQuery object from a the matching elements

('ol').filter(':odd').css('background-color', 'aqua');
});

.find() - It allows us to search through the DOM elements

$("div").find($('span')).css('color','aqua');
});

.first() - It construct new object from the first element

$("span").first().css('color','aqua');
});

.has() - It constructs a new jQuery object from the matching elements

$("div").has("ol").addClass("testClass");
});

.is() - It allows us to test a condition without modifying the jquery object.

if ($("div").is(":contains('Test')")) {
$("#divTest").text("OK");
}
});

.last() - It allows us to constructs a new jQuery object from the last element.

$('ol').last().css('background-color', 'aqua');

.map() - It is useful for getting or setting the value of a collection of elements.

$(':checkbox').map(function() {
return test;
}).get().join();

.next() - It gives us the next item available in the DOM structure when we do traversing.

$("div").next(".selected").css("background", "blue");

.nextAll() - It performs operations on all the next items in the DOM tree while traversing.

$("div").nextAll(".selected").css("background", "blue");

.not() - It outputs the elements that don't match the NOT condition

$('div').not(document.getElementById('Test'))
.css('background-color', 'blue');

.offsetParent() - It outputs the parent of the present element in the DOM tree.

$('ol').offsetParent().css('background-color', 'aqua');


.parent() - It traverses one level up and returns the DOM object of the parent.

$('ol').parent().css('background-color', 'aqua');


.parentsUntil() - It traverses through the parent of the current DOM element until it reaches an element matched by the condition.

$('ol').parentsUntil().css('background-color', 'aqua');


.prev() - It searches for the predecessor or previous element of current DOM element in the tree

$('ol').prev().css('background-color', 'aqua');


.prevAll() - It searches for aLL the predecessor or previous element of current DOM element in the tree

$('ol').prevAll().css('background-color', 'aqua');


.prevUntil() - It searches for all the predecessor or previous element of current DOM element in the tree and stops when the search condition is matched

$('ol').prevUntil("test").css('background-color', 'aqua');


.siblings() - It allows us to search through the siblings of current element in the DOM tree

$('div').siblings().css('background-color', 'aqua');


.slice() - It consist of start and end. Start index will find out the index where the slicing of the elements is to be done. End index will specify where to end the slicing.

$("div").text('$("span").slice(2,6).css("background", "yellow");');

No comments:


Powered by Blogger.