jQuery Tutorial
IONOS editorial team8 mins
jQuery is a JavaScript library that was developed by the American software developer, John Resig, and was released in 2006 under the free MIT license. The library offers extensive options for HTML and CSS manipulation as well as speeding up Ajax’s functionality. These can be achieved by including jQuery in the HTML source code of the respective web project and then operating it with the help of various features. jQuery is already a feature of many content management systems and web frameworks like Joomla, WordPress, or MediaWiki, and stands out not only because of its extensive range of functions, but also because of its large community and continuous development, which the jQuery team is responsible for.
What is jQuery? Introduction to the library’s capabilities
jQuery considerably simplifies programming with the dynamic script language, JavaScript. The entire jQuery library consists of a single JavaScript file that contains the basic functions of DOM, Ajax, events, and effects. Thus, the library is an extensive collection of program parts, which can be used to edit web project elements. It’s possible to select objects and change their appearance (color, positions, etc.), which is also possible with JavaScript, but it’s a lot more complicated.
Furthermore, with jQuery you can respond in a more targeted way to your users – thanks to the event-driven programming of site elements. Users activate defined events by clicking or by entering text and then the content or animations will be displayed to them. Also graphic effects, such as text overlays are quick and easy to insert and only require a single line of code. jQuery also simplifies working with Ajax. The library optimizes the technology that downloads in the background of the site, especially if a cross-browser interface is involved. With its help, Ajax can be quickly set up and used on various browsers – even outdated versions are covered. jQuery usually closes gaps between JavaScript implementations of separate browsers.
jQuery: expand the basic structure using plugins
jQuery is popular among current web projects due to how simple it is to expand the JavaScript library. Thousands of plugins, which simplify programming and make jQuery even more powerful, are available (mostly for free) to download on the official jQuery website. The community has a decisive role in the development of these extensions for the library. If the desired function isn’t available as a standard feature, nor as a plugin, developers can try to create their own extensions.
How to embed a JavaScript library
In order to use jQuery for your project, you first have to embed the library. You either have the option of hosting the JavaScript file on your own webspace, or including a link to an external webspace. If you’re interested in the former version, you can find the file in the download center on the jQuery website. Here you can choose between the compressed version (compressed, production jQuery) for live use and the uncompressed (uncompressed, development jQuery) edition. In order to save the respective file locally, just right click on the link in question, select 'save target as…' and enter the desired destination directory. Then place the appropriate link in the <head> section of your web presence:
<head>
<script type="text/javascript" src="path_to_jquery_file/jquery.js"></script>
</head>If you decide against having the file located externally, you have to adapt the header accordingly. For example, in order to use the jQuery file from the Google Hosted Libraries, you should specify the following web address, including the respective version (3.0.0 in the example below) as a source element (src):
http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.jsHow the jQuery syntax is constructed
You can access HTML elements with the jQuery code. You choose these elements via a selector that is syntactically based on CSS selectors. This is usually followed by an action that describes how the chosen element is to be changed. Selectors and actions have a dollar sign ($) in front of them to show that the code is a jQuery function. This is to avoid confusion when using various libraries. $() serves as a shortcut for the jQuery() function. The basic syntax is therefore:
$(Selector).Action()A crucial line of code that should precede every piece of jQuery code in your HTML document is the Document Ready Event. This code ensures that all commands contained in jQuery are executed only after all the HTML elements have loaded. On one hand, errors are avoided, for example, when an element is to be hidden, but it hadn’t yet been displayed. On the other hand, the Document Ready Event enables the code to be inserted into the <head> area. The syntactic structure of the relevant line of code corresponds to the following example:
<script type="text/javascript">
$(document).ready(function(){
//additional jQuery-Code
});
</script>The most important selectors
The jQuery selectors are the most important components of the JavaScript library. You can use them to adjust the various elements of your website. There are different types of selectors (e.g. ID, class, type, etc.) that find and select HTML entities. The element selector commonly assigns the HTML elements action by name. With the following jQuery code, you can define that all <p> elements (i.e. all blocks of text) are hidden when the web visitor clicks a button:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>Another important jQuery selector is the #id selector. With this, you can mark individual elements in the HTML document, which can then be later changed specifically with JavaScript, which is similar to what happens with CSS manipulation. If you don’t want all the blocks of text to be hidden by the user clicking a button, you can add an extra id value to the <p> element (<p id="testblock">) and expand the element selector in the upper code via the #id selector.
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#testblock").hide();
});
});
</script>A third selector is the .class selector that selects previously defined classes. To select elements with a specific class, write a period (.) character, followed by the name of the class:
| Selector | Description |
| $("*") | selects all elements |
| $(this) | selects a current element |
| $("p:first") | selects the first <p> element |
| $("ul li:first-child") | selects the first list element <li> of all available <ul> lists. |
| $("[href]") | selects all elements with an href attribute |
| $("tr:even") | selects all even rows |
| $("tr:odd") | selects all odd rows |
| $("p.intro") | selects all <p> elements with the class="intro" class |
You can react to user events with jQuery
The visitors or users of your website or web application interact with you web project in totally different ways – whether it’s by click, keyboard entry, filling out a form, or enlarging a tab. These events are known as DOM events and can be defined in jQuery as an action trigger.
For example, you can make the movement of the mouse trigger an action. This is achieved with the command mouseenter() or mouseleave(). The first function reacts when the user hovers over the selected HTML element, and the second when the mouse pointer leaves the element. The following jQuery code allows the user to be notified via a dialogue window when they hover over a block of text:
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
alert("You have selected a text block!");
});
});
</script>Other important triggers are:
| Trigger | Description |
| focus() | this event occurs when an element gets focus (when selected by mouse click or tab navigation) |
| blur() | occurs when an element loses focus |
| keydown() | occurs when the users presses a key on the keyboard |
| keyup() | occurs when the user releases a key |
| change() | occurs when an element’s value changes |
| scroll() | occurs when the user scrolls to a different place in the element |
| select() | occurs when a user makes a text selection inside the element |
With the help of on() you can add multiple triggers to a selected item and easily combine different events. The following jQuery code enables you, for example, to change the background color of <p> elements when visitors select them (blue), as well as when they deselect them (red), then click on them (yellow):
<script type="text/javascript">
$("p").on({
mouseenter: function(){
$(this).css("background-color", "blue");
},
mouseleave: function(){
$(this).css("background-color", "red");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
</script>For a detailed insight into JavaScript library’s extensive range of functions – also connected to Ajax technology – we recommend the jQuery tutorial on w3schools.com, which contains a lots of example codes for jQuery.
