Jquery Introduction
Jquery is the plugin of javascript which provides advanced functionality in web application.
It provide predefined method for animation,rotation,transition,transformation,validation ,mathematical operation,API communication .
Jquery is dependent on the Jquery plugin because all methods will be implemented by the plugin.
Syntax of Jquery:-
1) Download Jquery plugin from Jquery.org site
2) Integrate Jquery under HTML head section
3) define Jquery Block
Jquery will use predefined method and access page element without explicit calling.
<input type="text" id="txt1" />
document.getElementById("txt1")
$("#txt1").val()
Jquery Event Method will be called directly.
<input type="button" onclick="fun()" />
<script>
$(button).click(){}
</script>
Download Jquery From This Link and
https://code.jquery.com/jquery-3.4.1.min.js
Create jquery.min.js file under folder and copy the code of this url or you can download it also.
Example 1st:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert("Jquery");
})
});
</script>
</head>
<body>
<button>Click</button>
</body>
</html>
Example 2nd:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
alert("Jquery");
});
$("#btn2").click(function(){
alert("Jquery New");
});
});
</script>
</head>
<body>
<button id="btn1">Click</button>
<button id="btn2">Click</button>
</body>
</html>
JQUERY EXAMPLE 3:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//alert("Jquery");
$("#p1").html("JQUERY");
});
$("#btn2").click(function(){
// alert("Jquery New");
$("#p2").html("JQUERY NEW");
});
});
</script>
</head>
<body>
<button id="btn1">Click</button>
<p id="p1"></p>
<button id="btn2">Click</button>
<p id="p2"></p>
</body>
</html>
JQUERY EXAMPLE 4:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
num1 = $("#txt1").val();
num2 = $("#txt2").val();
num3 = parseInt(num1)+parseInt(num2);
alert("result is "+num3);
});
});
</script>
</head>
<body>
<input type="text" id="txt1" placeholder="Enter First Number" />
<br>
<br>
<input type="text" id="txt2" placeholder="Enter Second Number" />
<br>
<br>
<button id="btn1">ADD</button>
</body>
</html>
0 Comments
POST Answer of Questions and ASK to Doubt