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. Intro to JavaScript

Section 7 - Odds and Ends

Diving into the Source Code of Jquery

  • Motive: Borrow new ideas from well developed code.

  • Jquery:

    • js library

    • Makes it easily to write things syntactically.

    • Handles cross browser compatability.

    • Manipulates HTML (the DOM)

  • How it works

    • $ invokes functionality of the library (just like _ in underscore).

  • Basics

People

  • John Doe

  • Jane Doe

  • Jim Doe

    var a = $("ul");
    var b = $("ul.people");
  • Grabs all ul html elements

  • Grabs all ul elements with attribute class 'people'

  • In general, the way we query elements in jquery is essentially the same way we do in CSS.

    • Includes a whole entire library for this (sizzle.js).

    var c = $("ul.people li");
    console.log(c);
  • We can notice a few things.

    • Array containing list elements

    • Standard html DOM elements

    • and the proto derivation, that lists all the methods associated with the object variable.

  • addClass() method, add html class element.

    • removeClass()

      • Method chaining

        • object.method1().method2() both affect the parent object.

        • returns this on a method.

    var b = $("ul.people").addClass('newclass'),removeClass('people');
    <ul class="newclass"> ... </ul>
PreviousSection 6 - Building ObjectsNextSection 8 - Examining Famous Frameworks and Libraries

Last updated 5 years ago

Was this helpful?