jQuery basics #jQuery

jQuery introduction

You can include jQuery CDN in your code and then you are able to use it
You can find various jQuery CDN links from https://code.jquery.com/

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  </body>
</html>

Traditional way to access DOM element and manipulate it

document.querySelector("h1").style.color="blue"

jQuery way

$("h1").css("color","blue")

In order for DOM element manipulations to work, we either have to put it at the end of the body tag so that we are accessing them after they rendered or use below

$(document).ready(
    function(){
    $("h1").css("color","blue")
  }
)

www.minifier.org minifies javascript code by removing white spaces and comments

jQuery selectors are similar to document.querySelector. We can select html items with high specify.

$("h1") // select h1 element
$("h1.title") // select h1 element with title class
$("#header h1") // select h1 element within an element with id header

With pure javascript we use document.querySelectorAll to select all elements

With jQuery $("...") serves both selecting single or multiple elements

$("button") // this will select all button elements in DOM

jQuery element manipulation

Using `css function we can manipulate properties of an element

$("h1").css("color","red")
$("button").css("margin","10px 10px")

You can get css property value

$("h1").css("font-size")

You can add and remove classes

$("h1").addClass("big-title")
$("h1").removeClass("big-title")

You can find out if an element has a certain class

$("h1").hasClass("big-title")

To change element text

$("h1").text("some new text here")

To change inner html of the element

$("h1").html("<div> I am new element</div>")

To access element attribute

$("img").attr("src")
$("a").attr("href")

To set the element's attribute

$("img").attr("src","new/source/path")
$("a").attr("href","yahoo.com")

jQuery add event listeners

To add an event listener to an element

$("button").click(()=>{console.log("I was clicked")})

To add keypress event listener

$(document).keypress((event)=>{
  console.log(event.key);
})

In below example we append any key pressed to the text of the element

$(document).keypress((event)=>{
  $("h1").text($("h1").text()+event.key);
})

Another way to add an event listener to the element

$("h1").on("mouseover",()=>{
  $(this).css("color","purple");
})

$("h1").on("mouseout",()=>{
  $(this).css("color","black")
})

jQuery adding and removing elements

To add element before the target element on the fly

$("h1").before("<button>button before h1</button>")
$("h1").after("<button>button after h1</button>")

prepend adds html element inside the target element before its content, while append adds after its content

$("h1").prepend("<button>button inside h1 before its content</button>")
$("h1").append("<button>button inside h1 after its content</button>")

To remove all buttons

$("button").remove()

jQuery simple animations

To hide, show, toggle element visibility

$("button").on("click",()=>{
  $("h1").show();
})

$("target").show()
$("target").hide()
$("target").toggle()

Hide is a sudden animation. Instead if we want our element to fade out

These only come with full version of jQuery CDNs

$("target").fadeOut()
$("target").fadeIn()
$("target").fadeToggle()

To slide up, down and slide toggle

$("#slideup").on("click", () => {
    $(".content").slideUp();
});

$("#slidedown").on("click", () => {
    $(".content").slideDown();
});

$("#slidetoggle").on("click", () => {
    $(".content").slideToggle();
});

To apply some specific animations. With animate you can only apply css rules that accept numerical values, meaning you can't change color with it

$("target").animate({opacity:0.5})

You can chain all animations

$("target").slideUp().slideDown().animate({opacity:0.5})