Custom Search
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="testbutton" type="button" value="Test" />
<div>
<p>This is the <strong>first</strong> line of text.</p>
<p>This is the <strong>second</strong> line of text.</p>
</div>
<p>This is the <strong>third</strong> line of text.</p>
<p>This is the <strong>fourth</strong> line of text.</p>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
Select elements by tag name. Example: "div" - Selects all <div> elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("div").css("background-color","red");
});
});
Select elements by tag name. Example: "p" - Selects all <p> elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("p").css("background-color","red");
});
});
Select multiple elements by separating selectors with comas. Example: "div, strong, #testbutton" - Selects all <div> elements, <strong> elements, and the <input> element (the Test button) since its ID attribute is set to testbutton.
$(document).ready(function() {
$("#testbutton").click(function() {
$("div, strong, #testbutton").css("background-color","red");
});
});
Select all elements by using an asterisk. Example: "*" - Selects all elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("*").css("background-color","red");
});
});
Selects a child element by using the following syntax. "parent > child". Example: "div > p" - Selects all <p> elements that are children of <div> elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("div > p").css("background-color","red");
});
});
Selects first child elements by using the syntax :first-child. Example: "div > p:first-child" - Selects all <p> elements that are first children of <div> elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("div > p:first-child").css("background-color","red");
});
});
Selects last child elements by using the syntax :last-child. Example: "div > p:last-child" - Selects all <p> elements that are last children of <div> elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("div > p:last-child").css("background-color","red");
});
});
Selects a descendant element by using the following syntax. "ancestor descendant". Example: "div strong" - Selects all <strong> elements that are descendants of <div> elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("div strong").css("background-color","red");
});
});
Selects matched elements based on their position. Even positioned elements are selected using the following syntax. :even. Example: "p:even" - Selects the first and third <p> elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("p:even").css("background-color","red");
});
});
Selects matched elements based on their position. Odd positioned elements are selected using the following syntax. :odd. Example: "p:odd" - Selects the second and fourth <p> elements.
$(document).ready(function() {
$("#testbutton").click(function() {
$("p:odd").css("background-color","red");
});
});
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="testbutton" type="button" value="Test" />
<div>
<p class="multiple">This is the <strong>first</strong> line of text.</p>
<p>This is the <strong class="multiple">second</strong> line of text.</p>
</div>
<p id="third">This is the <strong>third</strong> line of text.</p>
<p>This is the <strong>fourth</strong> line of text.</p>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
Selects the element whose ID attribute matches the specified name. The specified name is preceded by a #. Example: "#third" - Selects the element that has an ID attribute value of third.
$(document).ready(function() {
$("#testbutton").click(function() {
$("#third").css("background-color","red");
});
});
Select the elements whose class attribute matches the specified name. The specified name is preceded by a period. Example: ".multiple" - Selects all the element that have class attribute values of multiple.
$(document).ready(function() {
$("#testbutton").click(function() {
$(".multiple").css("background-color","red");
});
});
Select elements by the combination of tag name and class attribute. Specify the tag name, followed by a period, followed by a class name. Example: "strong.multiple" - Selects all <strong> elements that have class attribute values of multiple.
$(document).ready(function() {
$("#testbutton").click(function() {
$("strong.multiple").css("background-color","red");
});
});
The click event is using an ID selector and an element selector by specifying "#testbutton, strong" When either the Test Button, or a <strong> element is clicked, the background color of the <strong> element on the second line will turn red.
$(document).ready(function() {
$("#testbutton, strong").click(function() {
$("strong.multiple").css("background-color","red");
});
});
The element that caused the click function to be executed is specified by using the keyword this, without quote marks. Clicking on the Test Button, or any of the <strong> elements, will cause the clicked element's background color to turn red.
$(document).ready(function() {
$("#testbutton, strong").click(function() {
$(this).css("background-color","red");
});
});