Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to use Html / CSS effects in jquery?

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>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link