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 1 - Selectors

    //boiler
    <html>
    <head>

    </head>
    <body>
        <h1 id ="title"> title </h1>
        <p class="paragraph">Paragraph text 1 </p>
        <p class="paragraph">Paragraph text 2 </p>

        <input type="text"></input>
        <ul>
            <li>List element 1 </li>
            <li>List element 2 </li>
            <li>List element 3 </li>
            <li>List element 4 </li>
            <li>List element 5 </li>
        </ul>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="app.js"></script>
    </body>                                            
    </html>

Selectors

  • Invoke jquery function -> $()

    • Takes a selector

    • $('selector')

    $('.paragraph').css("outline", "1px solid red");
    $('ul').css("outline", "1px solid red");
  • Work like css elements

    • . for class

    • for id, etc

classList element 4

    $('ul .paragraph').css("outline", "1px solid red");
  • Specify selectors further by chaining selectors.

  • List element 1

  • List element 2

  • List element 3

  • List element 4

  • List element 5

  • List element 1

  • List element 2

  • List element 3

  • List element 4

  • List element 5

    $('ul li:first-child').css("outline", "1px solid red");



    //starts counting at 0
    $('ul li:odd').css("outline", "1px solid red");
  • Selectors by the attribute tag directly:

    <p class="paragraph">Paragraph text 1 </p>
    <p class="paragraph">Paragraph text 2 </p>
    <li name = 'anything'>List element 1 </li>



    $('[name]').css("outline", "1px solid red");
    $('[class]').css("outline", "1px solid blue");
  • Also have the option of specifying attribute tags like this

    <p name='more specific'>Paragraph text 2 </p>
    <li name = 'anything'>List element 1 </li>


    $("[name='more specific']").css("outline", "1px solid red");
  • Selectors as inverses

    //Selects everything but the selector
    $("[name!='more specific']").css("outline", "1px solid red");
  • Shortcuts: selecting all children of a selector

  • List element 1

  • List element 2

    Paragraph text 1

    Paragraph text 2

  • List element 3

  • List element 4

  • List element 5

    $('ul *').css("outline", "1px solid red");
PreviousjQueryNextSection 2 - Events

Last updated 5 years ago

Was this helpful?