Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

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>
















Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post