Read "Dynamo, Amazon’s Highly Available Key-value Store" Read "Bigtable, A Distributed Storage System for Structured Data" Read "Streaming Systems" 3, Watermarks 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



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)


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



$("li a")

// return the last element

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

// or 
var styles = {
    color: "red",
    background: "black"
    // or
    color: "red",
    background: "black"


Use .parent() to select parent tag.



Text and HTML


  • .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.


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


.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() gets and sets the input value (of the first element for get, all elements for set). It works for tags with value attribute.


// set

Manipulate classes

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



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


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


  • .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:

// 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" );

Stop propagation

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

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


.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() {

Some events:

  • dblclick
  • dragstart
  • keypress
  • mouseenter
  • mouseleave
$('button').on('dblclick', function() {
    alert("double clicked");

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



  • .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");


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) {
        // create new li
        $("ul").append(liPrefix + val + liEnd);

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