Jquery Tutorials
- What is JQuery
- DOM Document Object Model
- JQuery Syntax
- Jquery Selector
- Get & Set Form value
- jQuery - Attributes
- Attribute Methods
- jQuery - DOM Manipulation
- JQuery Events
- JQuery Effects
- JQuery Html/Css
- jQuery Insert Content
- Auto Hide Div
- JQuery noConflict()
- JQuery Form Validation
- Form Validation
- Login Form Validation
- Jquery Fadeout message
- Modal popup
- Jquery Ajax Forms
- Dependent Dropdown
- Autocomplete Country jquery ajax
- Dynamic Content Load using jQuery AJAX
- Dynamic star rating jQuery AJAX
- Drag and Drop Image Upload
- show Hide Elements By click on checkbox
- How to Add class in jQuery
- calculate discount in jQuery
- Calculate GST by input value in text box
- check Password strength in jQuery
- Count Remaining Character
- onClick Checkbox check all
- password match or not
- DataTable
- 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
- Put value in the text field
- Set Data and Attributes
Customer Say
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>
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>
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>
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>
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>
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.tutorialrepublic.com/" target="_blank">Home page</a></p>
</body>
</html>
File name : index.php
File name : index.php