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 Html/css Effects.
html() method
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#set_button").click(function(){
$("div").html("<p>Hello Sana mahtab.</p>");
});
$("#get_button").click(function(){
var data=$("div").html();
alert(data);
});
});
</script>
</head>
<body>
<button id="set_button">Set the content</button>
<br><br>
<div id="div1" style="width:200px;height:80px;background-color:palegreen;">html() method jQuery</div><br>
<button id="get_button">Get the data</button>
<p>By click on Get the Data button</p>
</body>
</html>
text() method
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#set_button").click(function(){
$("div").text("Hello sana mahtab.");
});
$("#get_button").click(function(){
var data=$("div").text();
alert(data);
});
});
</script>
</head>
<body>
<button id="set_button">Set the content</button>
<br><br>
<div id="div1" style="width:200px;height:80px;background-color:palegreen;">html() method jQuery</div><br>
<button id="get_button">Get</button>
<p>By click on the get</p>
</body>
</html>
How to Get and Set value in jQuery
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#get").click(function(){
var first_name=$("#first_name").val();
var last_name=$("#last_name").val();
alert(first_name + " " +last_name);
});
$("#set").click(function(){
$("#first_name").val("mahira");
$("#last_name").val("mahtab");
});
});
</script>
</head>
<body>
<input type="text" name="first_name" value="Sana" id="first_name">
<input type="text" name="first_name" value="Mahtab" id="last_name"><br><br>
<button id="get">GET Value</button>
<button id="set">SET Value</button>
</body>
</html>
addClass() method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<meta charset="utf-8">
<title>How to add class in jQuery</title>
<style>
.container {
width: 100%;
border: 4px solid green;
padding: 20px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<h3> ItTutorial</h3>
</div>
<br>
<button type="button">Add Class</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").addClass("container");
});
});
</script>
</body>
</html>
remove class
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<meta charset="utf-8">
<title>How to remove class in jQuery</title>
<style>
.container {
width: 100%;
border: 4px solid green;
padding: 20px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<h3>jQuery Tutorial</h3>
</div>
<br>
<button type="button">Remove Class</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").removeClass("container");
});
});
</script>
</body>
</html>
File name : index.php
File name : index.php
File name : index.php