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

Was this helpful?