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 make 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 closing tag of body tag. Here we will use 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 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 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 a event handler it will call when msg element wil 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 like 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: admin