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

PreviousjQuery NextSection 2 - Events

Last updated 5 years ago

Was this helpful?

//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>

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