Javascript Notebook
  • Introduction
  • Intro to JavaScript
    • Section 1 - Getting Started
    • Section 2 - Execution Contexts and Lexical Environements
    • Section 3 - Types and Operators
    • Section 3 Part 2 - Closures and Callbacks
    • Section 4 - Objects and Functions
    • Section 5 - Object Oriented Javascript and Prototypal Inheritance
    • Section 6 - Building Objects
    • Section 7 - Odds and Ends
    • Section 8 - Examining Famous Frameworks and Libraries
    • Section 9 - Let's Build a Framework or Library!
  • Midterm Review
  • Final Review
  • jQuery
    • Section 1 - Selectors
    • Section 2 - Events
    • Section 3 - Effects
  • Node.js
    • The Node Core
    • Modules, Exports, and Require
    • Events and the Event Emitter
    • Databases and SQl
  • D3.js
    • Diving In
    • Bar Chart
    • Creating A Complex Bar Chart
Powered by GitBook
On this page

Was this helpful?

  1. jQuery

Section 2 - Events

  • document is an HTML object in javascript an is used to handle any object that contains the html document.

  • Notice that it to is a selector.

    • It acts like a global object - that this can be done anywhere on the page.

  • .ready() is wait until all elements have been loaded.

    $(document).ready(function(){
        alert('document is ready');
    })
  • Function is uniquely defined

  • Generally done before the execution of any function since it enforces safety.

  • document acts like a selector, but is more safe.

    • No difference would have been observed with 'html' as the selector.

  • Click Events

    $(document).ready(function(){
        $('p').click(function() {
            $('p').css('color', 'red');
        })
    })

    // clicking on any paragraph makes it red
  • Now notice the difference here:

    $(document).ready(function(){
        $('p').click(function() {
            $(this).css('color', 'red');
        })
    })

    //clicking on a paragraph makes it red, uniquely
  • This is an HTML DOM element that is returned by the function it is invoked on, in our case the paragraph on the click event.

  • css invokations work exactly as any .css style pages.

  • It grabs a selector, in our case 'this', then takes a property and what attributes we want to invoke on that property. Just like:

    p {
        color: red;
    }
  • The double click event

    $(document).ready(function(){
        $('p').dblclick(function() {
            $(this).css('color', 'red');
        })
    })
  • Hovering

    • Handled by mouseenter and mouseleave events.

    • Can handled by css alone

    $('li').mouseenter(function() {
        $(this).css('color', 'blue');
    })


    $('li').mouseleave(function() {
        $(this).css('color', 'black');
    })
  • To combine and minimize both effects, we use the .hover function.

    $('li').hover(function() {
        $(this).css('color', 'blue');
    }, function() {
        $(this).css('color', 'black');
    })
  • Notice that .hover is simply invoked with two arguments.

  • Keyboard Events

    $(document).keypress(function() {
        console.log('button was pressed and possibly held');
    });
  • This event also captures keys when held down.

  • Unique keys

    $(document).keyup(function() {
        console.log('key pressed and released');
    });
  • Does not capture keys held.

  • Also notice that both events are fired, and one does not overwrite the other.

    • Executed in sync. Multiple events are put into a queue.

  • Focus and Blur:

    $('input').focus(function(){
        $(this).css('border', '1px solid red');
    });

    $('input').blur(function(){
        $(this).css('border', '');
    });
  • .focus is activates as a click event, and .blur resumes the opposite - that is, when a user clicks somewhere else.

PreviousSection 1 - SelectorsNextSection 3 - Effects

Last updated 5 years ago

Was this helpful?