jQuery basics

Introduction

jQuery is a DOM manipulation library.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Select elements
Manipulate elements
Create elements
Add event listeners
Animate elements
Add effects
Make HTTP requests(AJAX)

Inclusion

Just a js file, we can download and add a script tag in html file or just use CDN.

Select elements

Select elements with $("selector"), it will return a list
Use .css() to style all elements in that list

$("img")

$(".sale")

$("#bonus")

$("li a")

// return the last element
$("li").last()

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

// or 
var styles = {
    color: "red",
    background: "black"
};
$("h1").css(styles);
    // or
$("h1").css({
    color: "red",
    background: "black"
});

Parent

Use .parent() to select parent tag.

$(this).parent()

Content

Text and HTML

Ref: https://api.jquery.com/text/

.text() is jQuery version of textContent.
.html() corresponds to innerHTML

Note when user type something in, we should treat it as text instead of HTML.

$("h1").text();

// change
$("h1").text("new content");

Attr

.attr() gets the value of an attribute for the first matched element, or set one or more attributes for every matched element.

$( "#greatphoto" ).attr( "alt")

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

// compute values with function
$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

Val

.val() gets and sets the input value (of the first element for get, all elements for set). It works for tags with value attribute.

$("select.foo").val();

// set
$("input").val("");

Manipulate classes

.addClass()
.removeClass()
.toggleClass()

// add two
$("p").addClass("myClass1 myClass2");

$("p").removeClass("myClass1");

Events

.click()
.keypress()
.on(): 99% of time

click

// click, applied on all buttons
$('button').click(function() {
    $(this).css("background", "pink");  // use $(this) keyword
    console.log("a click");
});

keypress

.keydown(): fired right after key pressed down, provides a code indicating which key is pressed
.keyup(): fired right after the key is released, provides a code indicating which key is pressed
.keypress(): in between down and up, indicates which character is entered

Keycode list: https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

// event will give the event info
    // event.which will give a code for which key
$( "input[type='text']" ).keypress(function(event) {
    // 13 means enter key
    if (event.which === 13) {
        console.log( "Enter pressed" );
        console.log($(this).val());
    }
});

Stop propagation

We can stop an event from propagating to its parents tags by:

$("h1").click(function(event) {
    // do something
    event.stopPropagation();
});

on

.on() works similarly to addEventListener. It lets us specify the type of event to listen for.

.click() only adds listeners for existing elements
.on('click') will add listeners for all potential future elements
- We need to add listener to the existing parent element of the potential future elements

$("ul").on("click", ".todoContent", function() {
    $(this).toggleClass("crossed");
});

Some events:

dblclick
dragstart
keypress
mouseenter
mouseleave

$('button').on('dblclick', function() {
    alert("double clicked");
});

$('button').on('dragstart', function() {
    console.log("drag started");
});

Effects

Ref: https://api.jquery.com/category/effects/

.fadeOut(duration, callBackFunc)
.fadeIn()
.fadeToggle()
.slideDown()
.slideUp()
.slideToggle()

$('button').on("click", function() {
    $("div").fadeOut(1000, function() {
        console.log("call back function, called after the event");
        $(this).remove();
    });
});

Misc

Create and append new element

var liPrefix = '<li><span class="delete">X</span><span class="todoContent">';
var liEnd = '</span></li>';
$("#newTodo").keypress(function(event) {
    if (event.which == 13) {
        var val = $(this).val();
        if (!val) {
            return;
        }
        // create new li
        $("ul").append(liPrefix + val + liEnd);
        $(this).val("");
    }
});

AI 2

Algorithm 17

Amazon 1

Authorization 1

Blog 3

Bootstrap 1

C++ 1

CCpp 5

CSS 2

Cloud 3

Code 1

Crawler 1

DNS 1

Database 17

DeepLearning 1

Design 16

Development 1

Docker 1

Express 1

GDB 1

Go 3

Google 4

HTML 3

IOS 1

Java 17

Javascript 4

Jekyll 1

Linux 4

MacOS 2

MachineLearning 16

Markdown 4

Mobile 1

MongoDB 2

Multi-threading 3

NAS 1

Network 11

NeuralNetwork 10

Node 1

OS 8

Public-speaking 1

Python 15

RESTful 1

Rails 9

React 1

Redis 1

Ruby 6

Shell 2

Spring 2

System 16

TCP 1

TDD 1

Thread 2

Vim 1

awk 1

git 1

jQuery 1

media 1

network 1

php 1