Read "Streaming Systems" 1&2, Streaming 101 Read "F1, a distributed SQL database that scales" Read "Zanzibar, Google’s Consistent, Global Authorization System" Read "Spanner, Google's Globally-Distributed Database" Read "Designing Data-intensive applications" 12, The Future of Data Systems IOS development with Swift Read "Designing Data-intensive applications" 10&11, Batch and Stream Processing Read "Designing Data-intensive applications" 9, Consistency and Consensus Read "Designing Data-intensive applications" 8, Distributed System Troubles Read "Designing Data-intensive applications" 7, Transactions Read "Designing Data-intensive applications" 6, Partitioning Read "Designing Data-intensive applications" 5, Replication Read "Designing Data-intensive applications" 3&4, Storage, Retrieval, Encoding Read "Designing Data-intensive applications" 1&2, Foundation of Data Systems Three cases of binary search TAMU Operating System 2 Memory Management TAMU Operating System 1 Introduction Overview in cloud computing 2 TAMU Operating System 7 Virtualization TAMU Operating System 6 File System TAMU Operating System 5 I/O and Disk Management TAMU Operating System 4 Synchronization TAMU Operating System 3 Concurrency and Threading TAMU Computer Networks 5 Data Link Layer TAMU Computer Networks 4 Network Layer TAMU Computer Networks 3 Transport Layer TAMU Computer Networks 2 Application Layer TAMU Computer Networks 1 Introduction Overview in distributed systems and cloud computing 1 A well-optimized Union-Find implementation, in Java A heap implementation supporting deletion TAMU Advanced Algorithms 3, Maximum Bandwidth Path (Dijkstra, MST, Linear) TAMU Advanced Algorithms 2, B+ tree and Segment Intersection TAMU Advanced Algorithms 1, BST, 2-3 Tree and Heap TAMU AI, Searching problems Factorization Machine and Field-aware Factorization Machine for CTR prediction TAMU Neural Network 10 Information-Theoretic Models TAMU Neural Network 9 Principal Component Analysis TAMU Neural Network 8 Neurodynamics TAMU Neural Network 7 Self-Organizing Maps TAMU Neural Network 6 Deep Learning Overview TAMU Neural Network 5 Radial-Basis Function Networks TAMU Neural Network 4 Multi-Layer Perceptrons TAMU Neural Network 3 Single-Layer Perceptrons Princeton Algorithms P1W6 Hash Tables & Symbol Table Applications Stanford ML 11 Application Example Photo OCR Stanford ML 10 Large Scale Machine Learning Stanford ML 9 Anomaly Detection and Recommender Systems Stanford ML 8 Clustering & Principal Component Analysis Princeton Algorithms P1W5 Balanced Search Trees TAMU Neural Network 2 Learning Processes TAMU Neural Network 1 Introduction Stanford ML 7 Support Vector Machine Stanford ML 6 Evaluate Algorithms Princeton Algorithms P1W4 Priority Queues and Symbol Tables Stanford ML 5 Neural Networks Learning Princeton Algorithms P1W3 Mergesort and Quicksort Stanford ML 4 Neural Networks Basics Princeton Algorithms P1W2 Stack and Queue, Basic Sorts Stanford ML 3 Classification Problems Stanford ML 2 Multivariate Regression and Normal Equation Princeton Algorithms P1W1 Union and Find Stanford ML 1 Introduction and Parameter Learning

jQuery basics

2018-01-02

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("");
    }
});

Creative Commons License
Melon blog is created by melonskin. This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
© 2016-2019. All rights reserved by melonskin. Powered by Jekyll.