Difference between JS and Jquery
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 Answer of Questions and ASK to Doubt