Thursday 2 May 2013

Jquery Tutorial Part 3


.push()

This is a method of the Built-in Array Object. It is not related to jQuery. This method is used to add the element to the End of the Array.

Syntax: array.push(element,element1,...);
Eg:
<body>
<script>
$(document).ready(function(){
var foo = ["Javascript" , "Jquery" , "HTML"];
foo.push("CSS");
alert(foo);
});
</script>
</body>


.join()
These methods is not a Jquery function, Its'a regular Array.join function. It converts an array to a string by putting the argument between the each element.

Syntax: array.join(separator);
Eg:
<body>
<script>
$(document).ready(function(){
var foo = '<div>Hai Hello</div>';
document.write(foo.split(' ').join('</div><br/><div>'));
});
</script>
</body>


.find()
These methods in Jquery will search for the given element you given within that DOM element. find uses native browser methods to search over the element.

Syntax: $(selector).find('element');
Eg:
<body>
<script>
$(document).ready(function(){
alert($("#firstdiv").find("div[name='javascript']").html());
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
<div name="jQuery"> Hello Jquery </div>
<div name="javascript"> Hello Javascript </div>
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.delay()
These method is used to delay the execution for the time you given. Its looks same as the setTimeOut but only difference is delay is mostly used to effects queueing and setTimeOut is used for all others without the effects.

Syntax: $(selector).delay(time);
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").delay('3000').fadeIn("slow");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.clone()
In Jquery this method is used to clone the selected elements. This has the parameter of boolean true and false. True means it clones the selected elements event also. But, False can clone only the element without the events default is false.

Syntax: $(selector).clone(true or false);
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").clone().appendTo('#firstdiv');
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.eq()
These methods is like a selector which returns the jQuery Object containing the DOM element matched by the selector. In here index means the index number.

Syntax: $(selector).eq(index);
Eg:
<body>
<script>
$(document).ready(function(){
document.write($("#firstdiv").eq(0));
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.get()
These method is also same as the eq method in jQuery. The only difference is get returns the DOM element at the given index where eq returns the jQuery Object containing the DOM element.

Note: $(selector).get(0) is equivalent to $(selector).eq(0).get(0)


Syntax: $(selector).get(index);
Eg:
<body>
<script>
$(document).ready(function(){
document.write($("#firstdiv").get(0));
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.index()
These method returns the index position of the element relative to its selector.

Syntax: $(selector).index();
Eg:
<body>
<script>
$(document).ready(function(){
document.write($("div[name='jquery']").index());
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>

Jquery Tutorial Part 4.

No comments:

Post a Comment