Scribd Logo
Upload

Welcome to Scribd!

  • 16 views

    LAB 7 Usman Zubair Task 1: Code

    Uploaded by

    UsMaan
    The document contains code for 3 tasks that use jQuery selectors to style HTML elements. In Task 1, different classes of list items are given borders and colors. Task 2 styles rows of a table differently based on their position and content. Even and odd rows are given different backgrounds. Specific cells are also targeted. Task 3 selects list items from two lists by their position and applies colors.

    Copyright:

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

    You might also like

    LAB 7 Usman Zubair Task 1: Code

    Uploaded by

    UsMaan
    16 views5 pages
    The document contains code for 3 tasks that use jQuery selectors to style HTML elements. In Task 1, different classes of list items are given borders and colors. Task 2 styles rows of a table differently based on their position and content. Even and odd rows are given different backgrounds. Specific cells are also targeted. Task 3 selects list items from two lists by their position and applies colors.

    Original Description:

    45896

    Original Title

    785699412

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains code for 3 tasks that use jQuery selectors to style HTML elements. In Task 1, different classes of list items are given borders and colors. Task 2 styles rows of a table differently based on their position and content. Even and odd rows are given different backgrounds. Specific cells are also targeted. Task 3 selects list items from two lists by their position and applies colors.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    16 views5 pages

    LAB 7 Usman Zubair Task 1: Code

    Uploaded by

    UsMaan
    The document contains code for 3 tasks that use jQuery selectors to style HTML elements. In Task 1, different classes of list items are given borders and colors. Task 2 styles rows of a table differently based on their position and content. Even and odd rows are given different backgrounds. Specific cells are also targeted. Task 3 selects list items from two lists by their position and applies colors.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    LAB 7 Usman Zubair

    Task 1:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Task 1 </title>
    <script src = "jquery-1.3.2.js" type = "text/javascript" > </script>
    <script src = "js123.js" type = "text/javascript" > </script>
    </head>
    <body>
    <ul id = "task1">
    <li class = "task1a" > Mueez Javaid </li>
    <li class = "task1a" > Mueez Zubair </li>
    <li class = "task1b" > Mueez Usman </li>
    <li class = "task1b"> Mueez Imran </li>
    <li class = "task1c"> Usman Ateeq </li>
    </ul>
    </body>
    </html>

    $("document").ready(function()
    {
    $(".task1a").css({ "border": "1px solid red", "color" : "blue"});
    $("#task1").css({"border": "1px solid green"});
    $(".task1a + .task1b").css({ "border": "1px solid black", "color" : "green"});
    $(".task1c").css({ "border": "1px solid yellow", "color" : "orange"});
    });

    SCREENSHOT:
    Task 2:
    CODE:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Task 2</title>
    <script src = "jquery-1.3.2.js" type = "text/javascript" > </script>
    <script src = "js12.js" type = "text/javascript" > </script>
    </head>
    <body>
    <table border = 1>

    <tr>
    <th>
    Company
    </th>
    <th>
    Country
    </th>
    </tr>
    <tr>
    <td>
    Alfreds Futterkiste
    </td>
    <td>
    Germany
    </td>
    </tr>
    <tr>
    <td>
    Berglunds snabbkop
    </td>
    <td>
    Sweden
    </td>
    </tr>
    <tr>
    <td>
    Centro comercial Moctrzuma
    </td>
    <td>
    Mexico
    </td>
    </tr>
    <tr>
    <td>
    Ernst handel
    </td>
    <td>
    Austria
    </td>
    </tr>
    <tr>
    <td>
    Island Trading
    </td>
    <td>
    UK
    </td>
    </tr>
    </table>
    </body>
    </html>

    $("document").ready(function()
    {
    $("tr:first").css({ "background-color": "black", "color" : "white"});
    $("tr:even:gt(0)").css({ "background-color": "gray", "color" : "blue"});
    $("tr:odd").css({ "background-color": "green", "color" : "yellow"});
    $("tr:eq(1) td:eq(0)").css({ "background-color": "orange", "color" : "red"});
    $("tr:last td:last").css({ "background-color": "red", "color" : "white"});
    $("tr:eq(4) td:last").css({ "background-color": "yellow", "color" : "green"});
    $("tr:eq(2)").css({ "background-color": "purple", "color" : "pink"});
    $("td:contains(Centro comercial Moctrzuma)").css({ "background-color": "pink",
    "color" : "purple"});
    });

    SCREENSHOT:
    Task 3:
    CODE:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Task 3 </title>
    <script src = "jquery-1.3.2.js" type = "text/javascript" > </script>
    <script src = "js1234.js" type = "text/javascript" > </script>
    </head>
    <body>
    <p> List 1: </p>
    <ul id = "list1">
    <li> Coffee </li>
    <li> Milk </li>
    <li> Tea </li>
    <li> Sugar </li>
    <li> Spice </li>
    </ul>
    <p> List 2: </p>
    <ul id = "list2">
    <li> Coffee </li>
    <li> Milk </li>
    <li> Tea </li>
    <li> Sugar </li>
    <li> Spice </li>
    </ul>
    </body>
    </html>

    $("document").ready(function()
    {
    $("#list1 li:first-child").css({"color" : "blue"});
    $("#list1 li:last-child").css({"color" : "orange"});
    $("#list1 li:nth-child(even)").css({"color" : "red"});
    $("#list2 li:nth-child(odd)").css({"color" : "red"});
    $("#list1 li:nth-child(3)").css({"color" : "green"});
    $("#list2 li:nth-child(even)").css({"color" : "blue"});
    });
    SCREENSHOT:

    You might also like