What is jQuery? Introduction to the library’s capabilities
WordPress Managed Hosting with IONOS!
Start your website quickly and benefit from the most secure and up-to-date version of WordPress!
jQuery: expand the basic structure using plugins
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:
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):
How 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:
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:
The most important selectors
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:
selects all elements
selects a current element
selects the first <p> element
selects the first list element <li> of all available <ul> lists.
selects all elements with an href attribute
selects all even rows
selects all odd rows
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:
Other important triggers are:
this event occurs when an element gets focus (when selected by mouse click or tab navigation)
occurs when an element loses focus
occurs when the users presses a key on the keyboard
occurs when the user releases a key
occurs when an element’s value changes
occurs when the user scrolls to a different place in the element
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):