jQuery tutorial: basics on selectors, syntax, and more

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). 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 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 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:

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("The action was triggered!");
       });
   });
</script>

Other important triggers are:

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>