JavaScript frameworks are extremely useful at making it simple to write effective JavaScript that works properly in all browsers - without browser cross-compatibility becoming an issue.
In this tutorial, we'll cover an introduction to jQuery - the world's most popular front-end jQuery framework - and explain how to use it to select and modify HTML elements.
A full jQuery documentation is available here, however this tutorial provides a concise guide to getting started with the framework...
jQuery is licensed under the open source jQuery license, which means that it's permissible to use it in your own projects without the need to explicitly credit it to users - which is convenient in professional websites.
To include jQuery, simply link it (either from a local source, or from another website - such as the official CDN) using the <script> tag before your script tag that contains the code that uses jQuery. Below is an example of this in action...
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
console.log("jQuery Document Ready!");
});
</script>
</body>
</html>
jQuery has a convenient global selector function that allows simple element selection like so... $() - inside of the function, simply add the CSS Selector string you'd use to select the item(s) - just like in using QuerySelectors, but without the need to worry about how many elements may match - jQuery returns one element if only one matches (for example in an ID match), or an array of elements if multiple match (unlike QuerySelectors, which rely upon you to manually differentiate by the use of querySelector/querySelectorAll).
So, for example, to select all <li> elements on the page, you'd use the $('li') jQuery selector, to select an element with the ID of container you'd use $('#container'), and to find all instances of the 'fancy' class, you'd use $('.fancy'). An example of these selectors is shown below...
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="container">
</div>
<p class="fancy">Paragraph 1</p>
<p class="fancy">Paragraph 2</p>
<p class="fancy">Paragraph 3</p>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// let's select all list items
var listItems = $("li");
console.log(listItems);
// let's select the container div...
var container = $("div#container");
console.log(container);
// let's select the fancy class instances...
var fancyElements = $(".fancy");
console.log(fancyElements);
});
</script>
</body>
</html>
jQuery makes is simple to set the text within elements using the .text() function. Firstly, select the item as described previously, the use myElement.text("the new text goes here") to change the text within 'myElement'.
An example of changing the text of a heading is shown below...
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<h1>A big heading</h1>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// select and change text...
$("h1").text("The new title...");
});
</script>
</body>
</html>
jQuery allows a single CSS property of an HTML element to be changed with the .style() function, for example, to change the background colour of an element with the ID of myElement, you'd perform $('#myElement').style('background-color', '#ff00ff');.
You can also set multiple CSS properties using the .css() function, for example, to change the text colour and background colour of an element with ID of myElement, you'd perform $('#myElement').css({"color": "white", "background-color": "red"});.
An example of changing the text of a heading is shown below...
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<h1>A big heading</h1>
<h2>A little heading</h2>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// select and change large heading text colour...
$("h1").style("color", "#ff00ff");
// select and change small heading text and background colour...
$("h2").css("color": "#ff00ff", "background-color": "#00ff00");
});
</script>
</body>
</html>
jQuery provides a simple cross browser compatible way to add event listener functions to HTML elements within the DOM. A full list of listenable events is available here, but for this tutorial, we'll just concentrate on the click event.
To set a click listener, simply call .click() on the HTML element you're adding the listener to, passing in a function to be executed when the listener is called (or an anonymous function).
An example of simple jQuery click listener is shown below...
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<p>Click me!!</p>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// select the p tag and add a .click listener...
$("p").click(function() {
/* the code in this anonymous function is executed
when the click listener is fired (on click) */
console.log("Clicked!");
});
});
</script>
</body>
</html>
jQuery provides built in animation functions which make animation convenient. A full list of these animation effects is available here - however in this tutorial, we'll provide a simple example of a simple fade effect.
A very simple example of these functions are the .fadeIn() and .fadeOut() functions, which allow an element to be faded in and faded out in animations respectively - and can be provided with a time delay, in milliseconds, for the animation duration.
An example of simple fade animation is shown below...
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<h1>A big heading</h1>
<h2>A little heading</h2>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// select the p tag and add a .click listener...
$("p").click(function() {
// let's fade out the 'p' when clicked, in 500ms...
$("p").fadeOut(500);
});
});
</script>
</body>
</html>
jQuery has many many other features which haven't been touched upon in this tutorial. If you enjoyed this tutorial and are interested in finding out what else it can do, why not head over to the jQuery documentation here and find out for yourself?