Most Popular Tutorials
-
what is jquery
-
Document object model (DOM)
-
JQuery Syntax
-
jQuery Selectors
-
Get and set value in jquery
-
JQuery Attribute
-
Attribute Methods
-
jQuery - DOM Manipulation
-
Jquery events
-
JQuery Effects
-
Jquery Html/css Effects
-
jQuery Insert New Content
-
Auto hid Div
-
Jquery no conflict
-
JQuery Form validation
-
Html Form Validation
-
Login Form Validation
-
JQuery Fadeout Message
-
Jquery Modal popup
-
JQuery Ajax Form
-
Dynamic Dependent DropDown
-
Autocomplete list
-
Dynamic content load
-
Dynamic Star Rating
-
Drag and Drop Image Upload
-
show Hide Elements By click on checkbox
-
Add or Remove class in jquery
-
check Password strength
-
Count Remaining Character
-
check single or All checkboxes
-
Password match or not
-
Data Table
-
Date Picker
-
Multiselect Dropdown with Checkbox
-
Add Dynamic Input Field (Add More Input Field)
-
submit button disable after one click
-
Show hide password in Password textbox using checkbox
-
set content and value in html page
-
put value in the text field
-
sweet alert
-
Data-id
Most Popular Tutorials :-
Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List
what is Jquery Selectors?
jQuery Selectors
Selecting Elements with jQuery
Selecting Elements by ID
the ID selector to select a single element with the unique ID on the page.
File name : index.php
<!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", "yellow");
$("#hello").click(function(){
alert("Say Hello Mahtab");
});
});
</script>
</head>
<body>
<p id="mark">This is a paragraph.</p>
<p id="hello">Click on me </p>
<p>This is one more paragraph.</p>
</body>
</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", "yellow");
$("#hello").click(function(){
alert("Say Hello Mahtab");
});
});
</script>
</head>
<body>
<p id="mark">This is a paragraph.</p>
<p id="hello">Click on me </p>
<p>This is one more paragraph.</p>
</body>
</html>
Selecting Elements by Class Name
The class selector can be used to select the elements with a specific class.
File name : index.php
<!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">This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p>This is one more paragraph.</p>
</body>
</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">This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p>This is one more paragraph.</p>
</body>
</html>
File name : index.php
<!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");
$(".getmyvalue").click(function(){
var myid = this.id;
alert(myid);
});
});
</script>
</head>
<body>
<p class="mark">This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p class="getmyvalue" id="6">Click on me</p>
</body>
</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");
$(".getmyvalue").click(function(){
var myid = this.id;
alert(myid);
});
});
</script>
</head>
<body>
<p class="mark">This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p class="getmyvalue" id="6">Click on me</p>
</body>
</html>
Selecting Elements by Name
The element selector can be used to select elements based on the element name.
File name : index.php
<!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 by name
$("p").css("background", "yellow");
$("div").css("background", "red");
});
</script>
</head>
<body>
<h1>This is heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is another block of text.</div>
</body>
</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 by name
$("p").css("background", "yellow");
$("div").css("background", "red");
});
</script>
</head>
<body>
<h1>This is heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is another block of text.</div>
</body>
</html>
Selecting Elements by Attribute
the attribute selector to select an element by one of its HTML attributes, such as a link's target attribute or an input's type attribute, etc.
File name : index.php
<!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", "red");
});
</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>
<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", "red");
});
</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>
Selecting Elements by Compound CSS Selector
File name : index.php
<!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 only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// 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");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p>This is one more paragraph.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
<ul id="mark">
<li>List item one</li>
<li>List <span>item two</span></li>
<li>List item three</li>
</ul>
<ul class="mark">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
<p>Go to <a href="https://www.ittutorial.in/" target="_blank">Home page</a></p>
</body>
</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 only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// 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");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p>This is one more paragraph.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
<ul id="mark">
<li>List item one</li>
<li>List <span>item two</span></li>
<li>List item three</li>
</ul>
<ul class="mark">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
<p>Go to <a href="https://www.ittutorial.in/" target="_blank">Home page</a></p>
</body>
</html>
Previous Next
Trending Tutorials
Review & Rating
0.0 / 5
0 Review
5
(0)
4
(0)
3
(0)
2
(0)
1
(0)
Write Review Here
Most Popular Tutorials
-
Jquery no conflict
-
Add Dynamic Input Field (Add More Input Field)
-
Dynamic Star Rating
-
JQuery Form validation
-
Date Picker
-
check Password strength
-
Count Remaining Character
-
Autocomplete list
-
Dynamic Dependent DropDown
-
show Hide Elements By click on checkbox
-
JQuery Syntax
-
Attribute Methods
-
jQuery Insert New Content
-
Password match or not
-
Dynamic content load
-
check single or All checkboxes
-
Data-id
-
what is jquery
-
JQuery Effects
-
Data Table
Important Link
-
How to manage Session in php Tutorials.
More ....... -
upcomming codeigniter and angular js tutorials.
Click here to see More ...
