Introduction to jQuery

Author: MDBootstrap

In this lesson, you will see some simple examples of what jQuery can do.

Note: Do not worry if you do not understand how this code works exactly. These are just demonstrative examples illustrating the capabilities of jQuery. Everything will be explained in detail in the next lessons.

jQuery Can Change HTML Content

The basic jQuery method is $().

This example uses the method to "find" an HTML element (with id="#example-1") and changes the element content (html) to :


            <p id="example-1">jQuery can change HTML content.</p>

            <button type="button" onclick='$("#example-1").html("Hello jQuery!")'>Click Me!</button>

Live preview

jQuery can change HTML content.

Note: jQuery accepts selectors similar as css:


          <p class="class-example">jQuery can change HTML content.</p>
      
          <button type="button" onclick='$(".class-example").html("Hello jQuery!")'>Click Me!</button>

jQuery Can Change HTML Attribute Values

In this example jQuery changes the value of the src (source) attribute of an tag. Click the buttons to see the effect:


            <button onclick="$('#myImage').attr('src','https://mdbootstrap.com/img/Photos/Avatars/img%20(20).webp')">Girl</button>

            <img id="myImage" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).webp" style="width:100px">
            
            <button onclick="$('#myImage').attr('src','https://mdbootstrap.com/img/Photos/Avatars/img%20(3).webp')">Boy</button>

Live preview

jQuery Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:


            <p id="example-2">I will become bigger!</p>
            
            <button type="button" onclick="$('#example-2').css('font-size','35px')">Click Me!</button>

Live preview

I will become bigger!

jQuery Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:


            <p id="example-3">I will disappear!</p>

            <button type="button" onclick="$('#example-3').css({display: 'none'})">Click Me!</button>

Live preview

I will disappear!

jQuery Can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style:


            <p id="example-4" style="display:none">Hello jQuery!</p>

            <button type="button" onclick="$('#example-4').css({display: 'block'})">Click Me!</button>

Live preview

Examples shown above are possible to accomplish with clear JavaScript functions.

jQuery has great amout of integrated functions that help our developer needs. For example 'toggle':


            <p id="example-5">I will disappear and appear again!</p>
      
            <button type="button" onclick="$('#example-5').toggle()">Click Me!</button>

Live preview

I will disappear and appear again!

Note: Of course, these are just a few very basic examples. jQuery is a powerful technology and its capabilities are enormous. You will learn its full potential step by step.

Previous lesson Next lesson
Spread the word:
Do you need help? Use our support forum

About the author

User avatar
MDBootstrap