Scribd Logo
Upload

Welcome to Scribd!

  • Jquery Exercises

    Uploaded by

    Rose M
    4 views3 pages
    HTML/CSS

    Original Title

    jquery_exercises

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML/CSS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views3 pages

    Jquery Exercises

    Uploaded by

    Rose M
    HTML/CSS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    JQUERY Exercises

    1. Find all h1 elements that are children of a div element and apply a background color to them.
    Sample Data :

    <body>
    <h1>abc</h1>
    <div>
    <h1>div-1</h1>
    <h1>div-2</h1>
    </div>
    <h1>xyz</h1>
    </body>

    2. Set the body background to red

    3. Hide all the input elements within a form

    <body>
    <form name='demo_form'>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="Submit">
    </form>
    </body>

    4. Check/Uncheck a checkbox input or radio

    <body>
    <form action="">
    <input type="radio" name="sex" value="male" checked>Male<br>
    <input type="radio" name="sex" value="female">Female
    </form>
    </body>
    5. Write a jquery code to get the second element (li) from the selection

    <body>
    <ui>
    <li>Html Tutorial</li>
    <li>Mongodb Tutorial</li>
    <li>Python Tutorial</li>
    </body>

    6. Write a jquery code to add a <b> tag at the beginning of the list item, containing the index of the list
    item

    <body>
    <ui>
    <li>Html Tutorial</li>
    <li>Mongodb Tutorial</li>
    <li>Python Tutorial</li>
    </body>

    Output

    • 0: Html Tutorial

    • 1: Mongodb Tutorial

    • 2: Python Tutorial

    7. Write jquery code to change the hyperlink and the text of an existing link

    <a href="www.laverdad.com/webdev1/" id='tutorial'>SQ Tutorial</a>

    Change the hyperlink to


    www.laverdad.com/webdev2/

    and the text to


    JQUERY Tutorial
    8. Display the tag name of the clicked element
    <body>
    <p></p>
    <h2>This is a heading 2</h2>
    <div>
    First name: <input type="text"><br>
    Last name: <input type="text">
    </div>
    </body>

    Sample Output. The following

    Clicked on – P
    Clicked on – DIV
    Clicked on – INPUT

    will appear depending what element is clicked

    9. When the button is clicked, please output the number of li elements present on the HTML document
    <body>
    <ul>
    <li>List - 1</li>
    <li>List - 2</li>
    <li>List - 3</li>
    </ul>
    <button>Display the number of li elements in console</button>
    </body>

    sample output - 3

    You might also like