.each()
These
method is used to iterate over the selected DOM elements while each
iteration callback function gets triggered and in that function using
this keyword to get the current element, the begins with zero.
Syntax: $(selector).each('div');
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv >
div").each(function(){
$(this).html($(this).html() + " jquery");});});
</script>
<div id="firstdiv" class="sample">
<div>Hello</div>
<div>Hai</div>
<div>Welcome</div>
</div>
</body>
.detach()
These
method is like the remove method the only difference is keeps
the stored data and events associated with the matched elements.
Syntax: $(selector).detach();
Eg:
<body>
<script>
$(document).ready(function(){
var span =
$('span').detach();
span.appendTo('body');
});
</script>
<div id="firstdiv" class="sample">
<span name="jQuery"> Hello Jquery </span>
</div>
</body>
.empty()
These
method will remove the selected elements children and other
descendant elements with in the selection. The difference between
empty and remove is remove method remove the children element and
also the selected element, but empty remove only its children
element.
Syntax: $(selector).empty();
Eg:
<body>
<script>
$(document).ready(function(){
$('div').empty();
});
</script>
<div id="firstdiv" class="sample">
<span name="jQuery"> Hello Jquery </span>
</div>
</body>
.insertAfter()
As
given in the jquery documentation
after() and insertAfter() are inverse of each other.
'after'
inserts the argument after the selector.
'insertAfter' inserts the selector after the
argument.
Try
difference using Live Example below.
Syntax: $('content to insert').insertAfter('selector');
Eg:
<body>
<script>
$(document).ready(function(){
$('<h2>Hai</h2>').insertAfter("#firstdiv");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>
.insertBefore()
before()
and insertBefore() are inverse of each other.
'before'
inserts the argument before the selector.
'insertBefore' inserts the selector before the
argument.
Try
difference using Live Example below.
Syntax: $('content to insert').insertBefore('selector');
Eg:
<body>
<script>
$(document).ready(functioOne
n(){
$('<h2>Hai</h2>').insertBefore("#firstdiv");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>
.replaceWith()
These
methods removes the content from the DOM element and inserts new
content in its place.
Syntax: $(selector).replaceWith(“replaced element”);
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").replaceWith("<h1>Replaced</h1>");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>
.replaceAll()
replaceAll
is same as the replaceWith but only difference is source and selector
is inverted in syntax.
Syntax: $('replaced element').replaceWith(“selector”);
Eg:
<body>
<script>
$(document).ready(function(){
$("<h1>Replaced</h1>").replaceAll("#firstdiv");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>
.toArray()
These
method returns all the element in the jQuery set. All of the DOM
elements are returned in a form of array
Syntax: $(selector).toArray();
Eg:
<body>
<script>
$(document).ready(function(){
alert($("#firstdiv >
div").toArray());
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.reverse()
These
method reverse the order of elements in the collections
Syntax: collections.index();
in here collections means the array of object.
Eg:
<body>
<script>
$(document).ready(function(){
$("#secondiv").html($("#firstdiv
> div").toArray().reverse());
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
<div id="secondiv" class="sample"></div>
</body>
.makeArray()
These
methods returns the collections as a text, but toArray() returns the
elements as an object.
Syntax: $.makeArray(selector);
Eg:
<body>
<script>
$(document).ready(function(){
alert($.makeArray($("#firstdiv").html()));
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.first()
first
method is used to select the first element from the jquery
collections. These are same equivalent to eq(0) function.
Note
: How .first method is implement in jquery
first
: function(){
return
this.eq(0);
}
Syntax: $(selector).first();
Eg:
<body>
<script>
$(document).ready(function(){
alert($('#firstdiv >
div').first().html());
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.last()
last
method returns the last element from the jquery collections.
Syntax: $(selector).last();
Eg:
<body>
<script>
$(document).ready(function(){
alert($('#firstdiv >
div').last().html());
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.has()
These
method check for the given selection element present in the DOM
element.
Syntax: $(selector).has(“selector”);
Eg:
<body>
<script>
$(document).ready(function(){
$(“#firstdiv”).has('.sample').addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.is()
These
methods is not like other methods it does not create new jquery
object instead of it you can test the content without modification.
Syntax: $(selector).is('element to be check');
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv >
div").each(function(){
if
($(this).is("div")){
$(this).addClass("foo");
}
});
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.not()
not
method creates a new jquery object from a subset of matching element.
The element that do not match the selector will included in the
result
Syntax: $(selector).not('selector');
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv >
div").not('#sample').addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.prev()
These
methods search for the given selector element and returns the
selectors previous element if it has the previous element.
Syntax: $(selector).prev();
Eg:
<body>
<script>
$(document).ready(function(){
$("#sample").prev().addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.parent()
These
methods search for the given selector element and returns the
selectors parent element.
Syntax: $(selector).parent();
Eg:
<body>
<script>
$(document).ready(function(){
$("#sample").parent().addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.slice()
These
methods creates a jquery object containing a element get from the
selector with start and End index.
Syntax: $(selector).slice(index);$(selector).slice(startindex,
endindex);
In here, startindex and endindex may be the positive and negative
value. It starts from the zero. If you give the positive value then
it search towards forward. If you give the negative value then it
search towards backward.
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv >
div").slice(2).addClass("foo");
$("#firstdiv >
div").slice(1,4).addClass("foo");
$("#firstdiv >
div").slice(-3,-1).addClass("foo");
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.children()
These
method search for the given selectors in the DOM tree child and
returns the jquery object. The difference between children and find
is children will search only for the children element but find will
search over the element for entire DOM tree. Try Live
Example below for know the
difference between children and find.
Syntax: $(selector).children('selector');
Eg:
<body>
<script>
$(document).ready(function(){
$(“#firstdiv”).children('sample').addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>
.add()
These
method constructs a jquery object from the union of the given
selector element and then these passed to another methods. Do not
assume that this method appends the element to the existing
collection.
Syntax: $(selector).add('param');
In here, Param may be object, selector, element, html.
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv >
div.simple").add("#firstdiv > span").addClass("foo");
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div class=”simple”>Welcome to Tutorial</div>
<span>Hello World</span>
<div>Ends</div>
</div>
</body>
.wrap()
These
method gets the param and wrap the selected element with the given
htmlstring or selector.
Syntax: $(selector).wrap('param');
In here, param may be selector, htmlstring, element, jquery
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv >
span”).wrap(“<div />”);
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div class=”simple”>Welcome to Tutorial</div>
<span>Hello World</span>
<div>Ends</div>
</div>
</body>
.unwrap()
These
method removes the wrapped element from the selected element.
Syntax: $(selector).unwrap();
In here, param may be selector, htmlstring, element, jquery
Eg:
<body>
<script>
$(document).ready(function(){
$('span').unwrap();
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div class=”simple”>Welcome to Tutorial</div>
<div><span>Hello World</span><div>
<div>Ends</div>
</div>
</body>
