jQuery Syntax

Author: MDBootstrap


With jQuery you select (query) HTML elements and perform "actions" on them.


jQuery Syntax

The jQuery syntax is made for selecting DOM elements and performing action on the element's.

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)

Basic example of selectors and actions:


      <h4>Simple text</h4>
      <p class="test-class">Text with class</p>
      <p id="testId">Text with id</p>
      <button onclick="$(this).hide()">Hide me!</button>
    


      jQuery(document).ready(function(){

      $("h4").css('color','red');
      $(".test-class").css('font-size','30px');
      $('#testId').css('background-color','blue');

      });
    

Live preview

Simple text

Text with class

Text with id


jQuery example selectors

$(this).hide(); - hides the current element.

$("h4").css('color','red'); - sets all <h4> elements color to red.

$(".test-class").css('font-size','30px'); - changes font-size of elements with class="test-class".

$('#testId').css('background-color','blue'); - changes the background color of element with id="testId".


Note: We can use jquery functions whenever we want. In example above we call .hide() method on button click.

jQuery selectors are one of the most important parts of jQuery library

To use any method from jQuery you need to first create jQuery object by selecting element from your html.

As shown in the example above you can select all html elements, all elements with certain class, unique element with specific id value.


Note: There are many more examples of jQuery selectors. This three types that we show in this tutorial are the basic ones you need to start working with jquery.


The Document Ready Event

All used jQuery methods in this examples, are inside a 'document ready' event:

jQuery(document).ready(function(){
// jQuery methods go here...
});

This event is triggered after the DOM of our site is loaded.

It prevent's any script code from running before all site's elements are ready.

It is a good practice to make sure that all elements in your site are fully loaded before you start working with them.

Note: This allows you to place your script in the head section.

Jquery supports triggering this event with a shorter method:

$(function(){
// jQuery methods go here...
});

I suggest you using syntax that you prefer. Both examples are triggering the same behaviour.

Typical proper usage of jQ is presented by initializing MDB components. Lets show the basics with our MDB material select:


      <select class="mdb-select md-form">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    

      // Material Select Initialization
      $(document).ready(function() {
        $('.mdb-select').materialSelect();
      });
    

We wait for the document to be ready and than we select element with desired class and use custom mdb method calles .materialSelect(). Now you understand this structure!

Lets learn now how to trigger our jQuery methods on other events in next lesson!


Previous lesson Next lesson

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

About the author