JQUERY EXAMPLE
To create your first jQuery example, you'll need a JavaScript file for jQuery. You can either download the jQuery file from jquery.com
The jQuery is written inside the script tag.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>jQuery Button Click Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#changeText").click(function() {
$("h1").text("Text has been changed!");
});
});
</script>
</head>
<body>
<h1>Original Heading</h1>
<button id="changeText">Click to Change Text</button>
</body>
</html>
Output :
The code inside $(document).ready() is executed only once when the page is fully loaded and ready for JavaScript to run.
Instead of `$(document).ready()`, you can simply use the shorthand notation `$()`.
Example for jQuery using shorthand notation $()
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hide Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("button").click(function() {
$("p").hide();
});
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<button>Click to Hide Paragraphs</button>
</body>
</html>
Output:
