Learn jquery in 20 minutes

jquery

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

  1. HTML/DOM manipulation
  2. CSS manipulation
  3. HTML event methods
  4. Effects and animations
  5. AJAX
  6. Utilities

Prerequisite

  1. Text Editor ( Brackets )
  2. Browser (Chrome)
  3. 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 JQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

We can put JQuery library inside 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 read and write html/dom elements and manipulate them. So for that we have a magic function and everything start with jQuery() or $ function. So it will call often. So we can read html/dom element 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 change tag value of 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, 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 deal with text and html method deal with html. You can use 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 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 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 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 discuss above we can grab value from element so in jquery we have lot of method to grab value from element


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 msg element will click, like click method lot of another event available in jquery
$(".msg").click(function () {
alert("It's a msg");
});

Effects and animations


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

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

// Using 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

You May Also Like

About the Author: Pankaj Bisht