jQuery Selectors
=======================================================================================================================================
Selecting an element by ID in jQuery
Selecting elements by class name in jQuery
Selecting elements by element name in jQuery
Selecting elements by attribute in jQuery
Selecting elements by compound CSS selector in jQuery
Selecting elements by jQuery custom selector
===========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by ID</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight element with id mark
$("#mark").css("background", "blue");
});
</script>
</head>
<body>
<p id="mark">Govind Ballabh Khan.</p>
<p>My name is khan.</p>
<p>Khan is my title but i am maithil brahmin</p>
<p><strong>Note:</strong> The value of the id attribute must be unique in an HTML document.</p>
</body>
</html>
=========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Class</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight elements with class mark
$(".mark").css("background", "yellow");
});
</script>
</head>
<body>
<p class="mark">Govind Ballabh Khan.</p>
<p class="mark">My name is khan.</p>
<p>Khan is my title but i am maithil brahmin</p>
</body>
</html>
==========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Name</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "red");
});
</script>
</head>
<body>
<h1>Govind Ballabh Khan.</h1>
<p>My name is khan.</p>
<p>Khan is my title but i am maithil brahmin</p>
</body>
</html>
===========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Attribute</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "yellow");
$('input[type="password"]').css("background", "blue");
});
</script>
</head>
<body>
<form>
<label>Name: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Sign In">
</form>
</body>
</html>
===========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Compound Selector</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight li elements inside the ul elements
$("ul li").css("background", "yellow");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "red");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is one more paragraph.</p>
<ul>
<li>mango</li>
<li>mango</li>
<li>mango</li>
</ul>
<ul id="mark">
<li>apple</li>
<li>apple</li>
<li>apple</li>
</ul>
<ul class="mark">
<li>orange</li>
<li>orange</li>
<li>orange</li>
</ul>
</body>
</html>
==========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Custom Selector</title>
<style type="text/css">
/* Some custom style */
*{
padding: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Govind Ballabh Khan</td>
<td>govindkhan@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>sanjay</td>
<td>sanjay@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dinesh</td>
<td>dinesdh@gmail.com</td>
</tr>
</tbody>
</table>
<p>Govind Ballabh Khan.</p>
<p>My Name is khan</p>
<p>I am not muslim i am maithil brahmin</p>
<form>
<label>Name: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Sign In">
</form>
</body>
</html>
=========================================================================================================================================
=======================================================================================================================================
Selecting an element by ID in jQuery
Selecting elements by class name in jQuery
Selecting elements by element name in jQuery
Selecting elements by attribute in jQuery
Selecting elements by compound CSS selector in jQuery
Selecting elements by jQuery custom selector
===========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by ID</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight element with id mark
$("#mark").css("background", "blue");
});
</script>
</head>
<body>
<p id="mark">Govind Ballabh Khan.</p>
<p>My name is khan.</p>
<p>Khan is my title but i am maithil brahmin</p>
<p><strong>Note:</strong> The value of the id attribute must be unique in an HTML document.</p>
</body>
</html>
=========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Class</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight elements with class mark
$(".mark").css("background", "yellow");
});
</script>
</head>
<body>
<p class="mark">Govind Ballabh Khan.</p>
<p class="mark">My name is khan.</p>
<p>Khan is my title but i am maithil brahmin</p>
</body>
</html>
==========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Name</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "red");
});
</script>
</head>
<body>
<h1>Govind Ballabh Khan.</h1>
<p>My name is khan.</p>
<p>Khan is my title but i am maithil brahmin</p>
</body>
</html>
===========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Attribute</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "yellow");
$('input[type="password"]').css("background", "blue");
});
</script>
</head>
<body>
<form>
<label>Name: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Sign In">
</form>
</body>
</html>
===========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Compound Selector</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight li elements inside the ul elements
$("ul li").css("background", "yellow");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "red");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is one more paragraph.</p>
<ul>
<li>mango</li>
<li>mango</li>
<li>mango</li>
</ul>
<ul id="mark">
<li>apple</li>
<li>apple</li>
<li>apple</li>
</ul>
<ul class="mark">
<li>orange</li>
<li>orange</li>
<li>orange</li>
</ul>
</body>
</html>
==========================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Custom Selector</title>
<style type="text/css">
/* Some custom style */
*{
padding: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Govind Ballabh Khan</td>
<td>govindkhan@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>sanjay</td>
<td>sanjay@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dinesh</td>
<td>dinesdh@gmail.com</td>
</tr>
</tbody>
</table>
<p>Govind Ballabh Khan.</p>
<p>My Name is khan</p>
<p>I am not muslim i am maithil brahmin</p>
<form>
<label>Name: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Sign In">
</form>
</body>
</html>
=========================================================================================================================================
No comments:
Post a Comment