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

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

Difference between JS and Jquery


Jquery is the Javascript plugin that provides a predefined library to contain predefined functionality.

Jquery library has developed by Javascript means we can say that JS is the parent script and jquery is the child script.

Jquery syntax pattern is different from Javascript, we can create even method and find element under the same block.

for example, if we click on a button then we will create a click event method under Button Tag but in Jquery we will use click() under the jquery function.


Step to create Jquery Hello World Program:-

step1st:-  download Jquery Plugin and link into the head section

<script src="jquery.min.js"></script>

step2nd:-  create script section under <head></head> and write javascript code

<script>
    $(document).ready(function(){

             alert("hello world");

         });


</script>
Example1:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

alert("hello world");
})

</script>
</head>
<body>

</body>
</html>

Example2:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
         $("#btn").click(function(){

             alert("hello world");
         });
})

</script>
</head>
<body>
<input type="button" id="btn" value="click" />
</body>
</html>

Example3:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
         $("#btn").click(function(){

            a = parseInt($("#txtnum1").val());
            b = parseInt($("#txtnum2").val());
            c=a+b;
          $("#sp").html(c);
         });
})

</script>
</head>
<body>
<input type="text" id="txtnum1" placeholder="Enter First Number" />
<br><br>
<input type="text" id="txtnum2" placeholder="Enter Second Number" />
<br><br>
<input type="button" id="btn" value="click" />
<br><br>
<span id="sp"></span>
</body>
</html>

Example4:-
<!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(){

            $("#bg").css("background-color","red");
         });
          $("#btn2").click(function(){

          $("#bg").css("background-color","green");  
         });
           $("#btn3").click(function(){
            $("#bg").css("background-color","blue");
            
         });
})

</script>
</head>
<body id="bg">
<input type="button" id="btn1" value="RED" /><br><br>
<input type="button" id="btn2" value="GREEN" />
<br><br>
<input type="button" id="btn3" value="Blue" />
<span id="sp"></span>
</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