Learn jQuery in 20 Minutes

Jquery is a lightweight cross-browser JavaScript library. Basically, it’s used for client-side and the purpose of Jquery makes JavaScript much easier.

Features

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

Prerequisite

Text Editor ( Brackets )
Browser (Chrome)
Download the jQuery library from jQuery.com or Include jQuery from a CDN, like Google

Get Started


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .red { color: red; }
      .green { color: green; }
    </style>
  </head>
  <body>
    <nav id="nav">
      <h2>Navigation Bar</h2>
      <ul>
        <li>Home</li>
        <li>Gallery</li> 
        <li><a href="#about">About</a></li>
      </ul>
    </nav>

    <div id="msg-box" data-msg="i am msg box" class="green">
      <lable><input type="text" /></lable>
      <span class="msg" data-msg="i am a first msg.">Hi, I am msg i am inside msg-box.</span>
    </div>

    <!-- We need to add a JQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

We can put the JQuery library inside the head tag or before the closing tag of the body tag. Here we will use the second method.

JQuery Basic

The basic fundamental of JQuery is to read and write HTML/dom elements and manipulate them. So for that, we have a magic function and everything starts with jQuery() or $ function. So it will call often. So we can read HTML/dom elements like this –


jQuery("#nav") OR $("#nav")
JQuery("#nav h2") OR $("#nav h2")
jQuery("#nav ul>li") OR $("#nav ul>li")
jQuery("li:first-child") OR $("li:first-child")
jQuery("a[href^='about']") OR $("a[href^='about']")
jQuery("h2") OR $("h2")
jQuery(".msg") OR $(".msg")

JQuery Collection


console.log($("#nav ul li"));  // returns a jQuery Collection

// We can use it like an array
console.log($("#nav ul li").length); // 3
console.log($("#nav ul li")[0]); // The first dom element

Get/Set functions

Now we know how to access elements now if we need to change the tag value of an element then we will use get/set methods


var textMsg = $(".msg").text(); // Using text msg
var htmlMsg = $(".msg").html(); // Using html msg
console.log(textMsg, " -- ", htmlMsg); // Hi, I am msg i am inside msg-box. -- Hi, I am msg I am inside msg-box.

So what is the difference between the text, and HTML method now here we can take another example


var textMsg = $("#msg-box").text(); // Using text msg
var htmlMsg = $("#msg-box").html(); // Using html msg
console.log(textMsg, " -- ", htmlMsg); // Hi, I am msg i am inside msg-box. -- <span class=\"msg\">Hi, I am msg i am inside msg-box.</span>

Text method just deals with text and the HTML method deals with HTML. You can use it when you use the set method.


var msg = "<h1>I am heading tag</h1>";
$(".msg").text(msg); //<h1>I am heading tag</h1>
OR
$(".msg").html(msg); // I am heading tag. With h1 property

Attribute Handling

To handle attribute we will use the attr method


// Get attribute 
var attr = $(".msg").attr("data-msg");
console.log(attr); // i am a first msg.

// Set attribute
$(".msg").attr({ 'class': 'red' }); // msg attribute with red class

// to remove attribute we can use $(".msg").removeAttr("class");

Style manipulation


// Using a class method 
$(".msg").hasClass("red"); // check red class exist inside element
$(".msg").addClass("red"); // add red class inside span with msg class element
$(".msg").removeClass("red"); // remove red class from element
$(".msg").toogleClass("red"); // if red class exist then will remove otherwise it will add

// Using Css function 
$(".msg").css({ 'color': 'red' }); // msg attribute with red class

Garbing values

As we discussed above we can grab the value from the element so in jquery, we have a lot of methods to grab the value from elements.


function log(msg) {
console.log(msg);
}

var msg = $("#msg-box");
log(msg.height()); // height of element
log(msg.attr("class")); // class attribute
log(msg.html()); // html value
log(msg.find("input").val()); // value from input box
log(msg.text()); // text value

HTML event methods


// Click is an event handler it will call when the msg element will click, like the click method lot of other events available in jquery
$(".msg").click(function () {
alert("It's a msg");
});

Effects and animations


// JQuery have many builds effects like
var msg = $(".msg");
msg.hide();
msg.show();
msg.slideDown();
msg.fadeOut();

// We can use it as a chain
msg.fadeOut(600).slideDown();

// Using the Animate method
$("#msg-box").animate({
opacity: 0.4
}, 1000)

Ajax


$.get(url, params, callback); //used for get request 
$.post(url, params, callback); // used for post request 
$.getJSON(url, params, callback); // used for json request