The more explanation is given by w3school under
Get Content - text(), html(), and val()
- jQuery - Get Content and Attributes
- jQuery - Set Content and Attributes
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Get and Set CSS Classes
- jQuery - css() Method
- jQuery - Dimensions
1. Get Content - text(), html(), and val()
- text() - Sets or returns the text content of selected elements
- html() - Sets or returns the content of selected elements (including HTML markup)
- val() - Sets or returns the value of form fields
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.
1. text() get content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
Detail Information
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
alert($("#tab").text());
});
});
</script>
</body>
</html>
2. html() get content
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
<b>Detail Information</b>
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
alert($("#tab").html());
});
});
</script>
3. val() get content
<p>Name: <input type="text" id="test" value="JQuery"></p>
<button>Show Value</button>
</script>
2. Set Content - text(), html(), and val()
Same three method will also be use here
- text() - Sets or returns the text content of selected elements
- html() - Sets or returns the content of selected elements (including HTML markup)
- val() - Sets or returns the value of form fields
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.
1. text() set content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
Detail Information
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("#tab").text("Text will appear after click!");
});
});
</script>
</body>
</html>
2. html() set content
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
Detail Information
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("#tab").html("<b>Text will appear after click!</b>");
});
});
</script>
3. val() set content
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
Detail Information
</p>
<input type="submit" value="Click" id="btn">
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#btn").val('Clicked');
});
});
</script>
3. jQuery - Add Elements
This concept is used to add new HTML Elements
The more commenly used methods for jQuery Add Elements are four in number
- append() - Inserts content at the end of the selected elements
- prepend() - Inserts content at the beginning of the selected elements
- after() - Inserts content after the selected elements
- before() - Inserts content before the selected elements
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.
1. append()
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
<b>Detail Information</b>
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("#tab").append("more text appended.");
});
});
</script>
2. prepend()
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
<b>Detail Information</b>
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("#tab").prepend("more text prepened.");
});
});
</script>
3. after()
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
<b>Detail Information</b>
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("#tab").after("This text will display after the p.");
});
});
</script>
4. before()
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
<b>Detail Information</b>
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("#tab").before("This text will appear before the p");
});
});
</script>
4. jQuery - Remove Elements
For Removing Elements there is two methods used more commonly.
- remove() - Removes the selected element (and its child elements)
- empty() - Removes the child elements from the selected element
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.
1. remove()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
<b>Detail Information</b>
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("#tab").remove();
});
});
</script>
</body>
</html>
2. empty()
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
<b>Detail Information</b>
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("#tab").empty();
});
});
</script>
5. jQuery - Get and Set CSS Classes
jQuery used many methods for CSS, the most important method that every web designer/developer show keep in mind are four in number
- addClass() - Adds one or more classes to the selected elements
- removeClass() - Removes one or more classes from the selected elements
- toggleClass() - Toggles between adding/removing classes from the selected elements
- css() - Sets or returns the style attribute
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.
1. addClass()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
.body {
background-color:rgb(103, 250, 255);
}
.body2{
background-color:#ffe758;
}
</style>
</head>
<body class="body">
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
Change background color
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("body").addClass("body2");
});
});
</script>
</body>
</html>
2. removeClass()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
.body {
background-color:rgb(103, 250, 255);
}
.body2{
background-color:#ffe758;
}
</style>
</head>
<body class="body">
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
Change background color
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("body").removeClass();
});
});
</script>
</body>
</html>
3. toggleClass()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
.body {
background-color:rgb(103, 250, 255);
}
.body2{
background-color:#ffe758;
}
</style>
</head>
<body class="body">
<p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
Change background color
</p>
<script>
$(document).ready(function(){
$("#tab").click(function(){
$("body").toggleClass();
});
});
</script>
</body>
</html>
4. css()
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<button>Return background-color of p</button>
6. jQuery - css() Method
The css() method used by jQeury is a powerful method to sets or returns one or more style properties for the selected elements.
Example:
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<p id="p1" style="width:330px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">
Click me to add CSS to the following pharagraph!
</p>
<p id="p2">This CSS is added by jQuery!</p>
<script>
$(document).ready(function(){
$("#p1").click(function(){
$("#p2").css({ "width":"286","height":"10","background-color":"#3ef8ff","padding":"18","text-align":"center"});
});
});
</script>
</body>
</html>
7. jQuery - Dimensions
With jQuery, we used some important and powerful methods to handle dimensions of elements and browser window.
There are six commonly used methods which also called jQuery Dimension Methods
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
width() & height()
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
</body>
</html>
innerWidth() & innerHeight()
Example:
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>innerWidth() - returns the width of an element (includes padding).</p>
<p>innerHeight() - returns the height of an element (includes padding).</p>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height() + "</br>";
txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height of div: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
5. outerWidth() & outerHeight()
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>outerWidth() - returns the width of an element (includes padding and border).</p>
<p>outerHeight() - returns the height of an element (includes padding and border).</p>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height() + "</br>";
txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height of div: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
</script>
</body>
</html> More Examples:
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").width(500).height(500);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Resize div</button>
</body>
</html>
