This is an article which is focus to discuss on how to use JQuery at the first place. JQuery needs to be prepared with some steps in order for the JQuery snippet code can be executed and it can be interpreted by the Web browser processed the web page file contained JQuery snippet code. Basically, JQuery is actually a Javascript library and it claims as a Javascript library which is used to simplify the Javascript usage.Before it can be used and it can processed, interpreted by the Web browser, below are those steps needed to be taken :
1. Download the JQuery library. It can be reached by visiting the JQuery official website in this following link.
2. Store the downloaded JQuery library in the exact location. Normally or usually, it is stored in a folder named ‘js’ placed in the root folder of the web application. For an example, it is shown below :
user@hostname:/var/www/html/jquery# tree -L 2 . . ├── js │ └── jquery-3.2.1.min.js ├── logs │ ├── localhost.jquery.web-access_log │ └── localhost.jquery.web-error_log └── simple-jquery.html 2 directories, 4 files user@hostname:/var/www/html/jquery#
In the above tree command output, the location of JQuery javascript library file is clearly seen inside the folder named ‘js’.
3. Define the JQuery library in the web page file before actually using it. To define it, just try to import it in a web page file as shown below and place it and insert it in the ‘<head></head>’ section :
<script src="js/jquery-3.2.1.min.js"></script>
4. Below is the simple JQuery snippet code which can be available and can be defined insert the ‘<script></script>’ section :
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
alert("Click H1 !");
});
});
</script>
In the above definition, it will display a pop-up message with the text ‘Click H1 !’ in it. The pop-up message will appear everytime a H1 HTML element is being clicked. So, below is the snippet code from the web page file of HTML where there is an H1 HTML element defined as follows :
<html> <head> <title>Index Simple JQuery</title> </head> <body> <h1>Testing JQuery</h1> </body> </html>
So, if the JQuery import definition and also the JQuery snippet code is inserted in between the tag ‘<head></head>’ section as shown below :
<html>
<head>
<title>Index Simple JQuery</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
alert("Click H1 !");
});
});
</script>
</head>
<body>
<h1>Testing JQuery</h1>
</body>
</html>
One thought on “How to Use JQuery using Example and Source Code”