jQuery - A small introduction
What is jQuery?
jQuery is a JavaScript library, one of many available in the market, which can be used to create actions on your web pages, based on user interactions.
All that can be done using jQuery can be done using JavaScript itself. But, it is going to be a big task, in terms of time spent and repetitive code content. By using jQuery, you avoid repetitive code blocks, while making code writing simple and making it easy to make corrections to your code.
What can I do with jQuery?
You can make highly interactive user interfaces, which create rich user experience for the end user.
Show me a simple example of jQuery
jQuery is used in tandem with HTML and JavaScript and BootStrap, usually. The steps involved are creating the HTML document, with the necessary lines to refer to the JavaScript and the BootStrap libraries.
Next, the HTML text is created, if required.
Finally, the jQuery code is written.
The code, given below, will show a message which informs the user "jQuery says Hello!".
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
This is a sample HTML file created to demonstrate jQuery. Refresh this page to see again the message alert created through jQuery.
<script>
$(document).ready(function() {
alert("Hello from jQuery!");
});
</script>
</body>
</html>
Next, the HTML text is created, if required.
Finally, the jQuery code is written.
The code, given below, will show a message which informs the user "jQuery says Hello!".
The HTML + jQuery Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
This is a sample HTML file created to demonstrate jQuery. Refresh this page to see again the message alert created through jQuery.
<script>
$(document).ready(function() {
alert("Hello from jQuery!");
});
</script>
</body>
</html>
The Explanation
What you need to notice is the statement $(document).ready();
That will be your default statement for all your html, if you want jQuery in your html. The above code tells the browser to execute the code within the function when the entire document has been loaded.
What we have done:
We have inserted a JavaScript function inside the ready() function and gave an alert() call with a greeting message.
function() {
alert("jQuery says Hello!");
}
The function; it is called an anonymous function, since we have not attributed a name to it, will be called right at the moment when the html document has finished loading.
Congratulations! You have just now completed your first jQuery program.
alert("jQuery says Hello!");
}
The function; it is called an anonymous function, since we have not attributed a name to it, will be called right at the moment when the html document has finished loading.
Congratulations! You have just now completed your first jQuery program.
No comments:
Post a Comment