jQuery is one of the most popular JavaScript libraries used when creating websites and simplifies writing the JavaScript programming language. Using jQuery in web development requires you to add the library to your project using a script include, and with a pair of script tags, you are then able to manipulate the DOM using jQuery syntax.
jQuery can either be downloaded from the jQuery website, or by using a hosted library file, such as on Google.
The following lines of code will both successfully include jQuery in your project.
<!-- This includes a jQuery file downloaded locally -->
<script src="/path/to/jquery.js"></script>
<!-- Or use this to include the library hosted externally -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>A lot of third party plugins rely on the jQuery library being present within your project, so if you are not using a module loader, like RequireJS, ensure that the plugin includes come after jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/path/to/jquery-slider-plugin.js"></script>So why is jQuery so popular? As mentioned earlier, it makes writing JavaScript easier. For example, in JavaScript, getting an element by its ID we would write the following.
document.getElementById('some_identifier');In jQuery, it is simply done like this:
$('#some_identifier');The $ part of the code above represents the jQuery Function, and is actually a shorthand alias for jQuery.
So you could also write the code above using jQuery.
jQuery('#some_identifier');There may be occasions where a developer needs to manipulate the DOM after it has fully loaded.
In JavaScript, you can use a self-executing function.
<html>
<head>
</head>
<body>
Your HTML here
<script>
(function() {
// Your page initialisation code here
})();
</script>
</body>
</html>In jQuery, you can use $(document).ready().
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
Your HTML here
<script>
$(document).ready(function() {
// Your page initialisation code here
});
</script>
</body>
</html>What else can we write in jQuery? We can get an element or elements by their class name using . rather than # that is used for the ID.
$('.some-class');Some commonly used jQuery methods include attr(), used to get attributes from the HTML tags.
<div class="container" data-value="abc"></div>
<script>
alert($('.container').attr('data-value')); // Alerts: abc
</script>The click() method attaches an event handler function to an element. You can then execute some JavaScript code to fire when that element is clicked.
<div class="container" data-value="abc"></div>
<script>
$(document).ready(function() {
$(".container").click(function(){
console.log('This element was clicked!');
});
});
</script>There are many more jQuery methods that you can use to dynamically modify your web page. With the library being well supported and regularly updated, it will likely to remain popular for many years to come.