How to Travel DOM in jQuery?
J Query has built in methods to travel through DOM , it has following methods –
first():-it will get you first element from selected elements.
last():- it will get you last element from selected elements.
next():- it will get immediate next element.
nextAll():-it will get next all elements.
prev():- it will get you immediate next element.
prevAll():- it will get all previous all element.
eq(index):- it will get you element whoes index number is specified as parameter from selected elements.
children():- it will select the child tag or children of the element.
parent():- it will get you parent element of the selected element.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DomTrversal</title>
<script type="text/javascript" src="~/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(function () { //document ready method
$("#thead").next().css("background-color", "orange");
$("#thead").nextAll().css("background-color", "orange");
$("#thead").prev().css("background-color", "orange");
$("#thead").prevAll().css("background-color", "orange");
$("h1").eq(4).css("background-color", "red");
$("b").children().css("background-color", "yellow");
$("i").parent().parent().css("background-color", "green");
});
</script>
</head>
<body>
<h1> First heding </h1>
<p> this is content of first heading</p>
<h1> second heding </h1>
<p> this is content of second heading</p>
<h1 id="thead"> third heding </h1>
<p>
this is content of third heading
<b> this is <i> this is italic</i> bold</b>
</p>
<h1> fourth heding </h1>
<p> this is content of fourth heading</p>
<h1> fifth heding </h1>
<p> this is content of fifth heading</p>
<h1> sixth heding </h1>
<p> this is content of sixth heading</p>
</body>
</html>How to handle events in jQuery?
jQuery has it’s own event model. jQuery provides you following three ways to handle the events –
$(selector).on("eventname",function() {
code;;
});
$(selector).bind("eventname",function() {
code;
});
//latest syntax for event handling.
$(selector).eventname(function(){
code//
});Few events that we can handle in J Query are –
- click
- dbclick
- keypress
- keydown
- keyup
- mousemove
- mouseover
- mouseout
- focus
- blur
- load
- change
- unload
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Events</title>
<script type="text/javascript" src="~/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
alert("Button Clicked!");
});
$("div").mouseover(function () {
// $("div").css("background-color", "orange");
$(this).css("background-color", "yellow");
});
$("div").mouseout(function () {
//$("div").css("background-color", "blue");
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
<div>
This is content
</div>
<div>
second div
</div>
<input type="button" value="click" id="btn" />
</body>
</html>How to Manipulate DOM using jQuery?
To manipulate DOM, means to manipulate the text/html content of the element. It provides you following methods for DOM manipulation method –
text() :- this method when called without parameter it will read the text content of html tag, indirectly it is used to read the text content of any html tag.
text(“text”):- this method when called with parameter it will write the text content in a html tag.
html():- this method when called without parameter it will read the html content of a tag.
html(“html”):- this method when called with parameter it will write a html content in a tag.
Above two methods can be used with any html tag to read or write the content where as following two methods work with the input tags or html controls –
val() :- This is method when called without parameter it will read the value of html control.
val(value):- This is method when called with parameter , it will write the value of html control.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DomManip</title>
<script type="text/javascript" src="~/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
var v = $("div").text();
alert(v);
var v = $("div").html();
alert(v);
var v = $("#txt").val(); // read the content of text box.
alert(v);
});
$("#btn2").click(function () {
$("div").text("this is demo content!");
$("div").html("<font color=red size=40>This is font </font>");
$("#txt").val("this is val used to demo!");
});
});
</script>
</head>
<body>
<div>
Hello this is text
<b> this is bold <i> this is italic </i></b>
</div>
<input type="text" id="txt" /> <br />
<input type="button" value="Read" id="btn1" />
<input type="button" value="Write" id="btn2" />
</body>
</html>How to manipulate CSS using jQuery?
jQuery provides you built in methods, to manipulate css applied to html tags or elements, those are as follows –
css(“attributename”,”value”):- This method allow you to apply single css attribute on any tag. You can apply multiple css attribute on html tag using following syntax –
css({attributename:value,attributename:value,attributename:value, …});
addClass(“css classname”) :- This method allow you to apply Css class on any html element.
removeClass(“classname”) :- This method allow you to remove css class from element.
toggleClass(“classname”): – This method will allow you to apply /remove css class name from element (on/off).
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>CssClasses</title>
<style type="text/css">
.box {
width:200px;
height:50px;
background-color:orange;
}
</style>
<script type="text/javascript" src="~/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("div").css({ "background-color": "red", "color": "white", "width":"100px","height":"200px"});
});
$("#btn1").click(function () {
$("div").addClass("box");
});
$("#btn2").click(function () {
$("div").removeClass("box");
});
$("#btn3").click(function () {
$("div").toggleClass("box");
});
});
</script>
</head>
<body>
<div>
Hello this is div
</div>
<input type="button" value="Apply css" id="btn" />
<input type="button" value="Apply class" id="btn1" />
<input type="button" value="Remove class" id="btn2" />
<input type="button" value="Toggle class" id="btn3" />
</body>
</html>How to implement Effects & Animations?
jQuery has following built in methods to perform the effects and animations following are few methods –
hide() :- this method is used to hide the element when called on it. All these methods has two parameters delay and call back method. Delay will a time period required to complete that activity and call back is function which will be executed after completion of the first function.
show():- this method is used to show the element when called on it.
toggle():- this method will hide the element if visible or show the element if hidden.
slideUp():- when called side up, it will slide the element from bottom to top.
slideDown():- when called will slide the element from up to down.
slideToggle():- when slide toggle method is called it will slide up if element is down and slide down if the element is up.
fadeIn():- this method when called will slowly increase the concentration of the element while appearing.
fadeOut():- this method when called will slowly decrease the concentration of the element while appearing.
fadeTo():- this method when called will slowly show the element up to that concentration.
animate():- this method will apply the css attributes slowly to the element, you can use the animate the element.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Effects</title>
<script type="text/javascript" src="~/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(function () {
function test() {
alert("Test!");
}
$("#btn1").click(function () {
//$("div").hide(1000,test);
//$("div").slideUp(1000);
$("div").fadeOut(2000);
});
$("#btn2").click(function () {
//$("div").show(1000);
//$("div").slideDown(1000);
$("div").fadeIn(2000);
});
$("#btn3").click(function () {
//$("div").toggle(1000);
//$("div").slideToggle(1000);
$("div").fadeToggle(2000);
});
$("#btn4").click(function () {
$("div").fadeTo(2000, 0.3);
});
$("#btn5").click(function () {
alert("inside function");
for (var i = 0; i < 5; i++) {
$("div").animate({
width: "100px",
height: "100px"
});
$("div").animate({
width: "200px",
height: "200px"
});
}
});
});
</script>
</head>
<body>
<div style="background-color:red;width:200px;height:200px;">
</div>
<input type="button" value="hide" id="btn1" />
<input type="button" value="show" id="btn2" />
<input type="button" value="toggle" id="btn3" />
<input type="button" value="fadeTo" id="btn4" />
<input type="button" value="Animate" id="btn5" />
</body>
</html>In next session we will try to understand about some advance features and ajax method in jQuery.