Scribd Logo
Upload

Welcome to Scribd!

  • 34 views

    Web Engineering: Lab Journal# 07

    Uploaded by

    Huzaifa Arshad
    The document describes 5 tasks completed in a web engineering lab. Each task demonstrates a different jQuery concept or method like selecting and styling elements, hiding elements, and getting offset positions. Code snippets and screenshots are provided for each task.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Web Engineering: Lab Journal# 07

    Uploaded by

    Huzaifa Arshad
    34 views8 pages
    The document describes 5 tasks completed in a web engineering lab. Each task demonstrates a different jQuery concept or method like selecting and styling elements, hiding elements, and getting offset positions. Code snippets and screenshots are provided for each task.

    Original Description:

    Web Engineering Lab Journal

    Original Title

    Abdullah

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes 5 tasks completed in a web engineering lab. Each task demonstrates a different jQuery concept or method like selecting and styling elements, hiding elements, and getting offset positions. Code snippets and screenshots are provided for each task.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    34 views8 pages

    Web Engineering: Lab Journal# 07

    Uploaded by

    Huzaifa Arshad
    The document describes 5 tasks completed in a web engineering lab. Each task demonstrates a different jQuery concept or method like selecting and styling elements, hiding elements, and getting offset positions. Code snippets and screenshots are provided for each task.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 8

    Web Engineering

    LAB JOURNAL# 07

    Name: Muhammad Abdullah


    Enrollment No: 01-131182-018
    Class: BSE-6A
    Lab Instructor: Aamir Suhail
    Date Submitted: April 12, 2021

    DEPARTMENT OF SOFTWARE ENGINEERING

    BAHRIA UNIVERSITY
    ISLAMABAD CAMPUS
    Lab Tasks

    Task 1:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
    script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Jquery Task 1</title>
    <style>
        button {
        display: block;
        margin: 20px 0 0 0;
        }
    textarea {
        width: 200px;
        height: 60px;
        margin: 10px;
        float: left;
        font-size: 18px;
      }
      p {
        clear: left;
        font-weight: bold;
        font-size: 18px;
        color: green;
        margin: 5px 10px 0 10px;
        padding: 2px;
      }

    </style>
    </head>
    <body>
    <textarea>jQuery</textarea>
    <textarea>JavaScript</textarea>
    <p>jQuery</p>
    <p>JavaScript</p>
    <button id="button1">Click to check the effect</button>
    <script src="task1.js"></script>
    </body>
    </html>

    jQuery Code:
    $('#button1').click(function(){ 
        $( "textarea" ).css( "border", "2px solid red" ).add( "p" )
          .css( "border", "2px solid red" );
        });
        

    Task 2:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Task 2</title>
    </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
    script>
    <body>
        <div>
            <p>This is Paragraph</p>
            <p>This is another Paragraph</p>
            <a href="http://">HTML Tutorial</a>
            <a href="http://">CSS Tutorial</a><br><br>
            <button id="hide">Click To Hide</button>
        </div>
        <script src="task2.js"></script>
    </body>
    </html>

    jQuery Code:
    $('#hide').click(()=>{
        $('[href]').hide();
    })

    Screenshot:

    Task 3:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Task 3</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
    "></script>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <th>Company</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>Alfreds Futterkiste</td>
                    <td>Genrmany</td>
                </tr>
                <tr>
                    <td>Berglunds Snabbkop</td>
                    <td>Sweden</td>
                </tr>
                <tr>
                    <td>Centro Comercial Moctezuma</td>
                    <td>Mexico</td>
                </tr>
                <tr>
                    <td>Ernst Handel</td>
                    <td>Austria</td>
                </tr>
                <tr>
                    <td>Island Trading</td>
                    <td>UK</td>
                </tr>
            </table><br><br>
            <button id="hide">Click to Hide Odd Rows</button>
        </div>
        <script src="task3.js"></script>
    </body>
    </html>

    jQuery Code:
    $('#hide').click(()=>{
        $('tr:odd').hide();
    })

    Screenshot:
    Task 4`:

    HTML Code:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title>The jQuery Example</title>  
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/lib
    s/jquery/2.1.3/jquery.min.js"></script>  
            <script type="text/javascript" language="javascript" src="task4.js"></sc
    ript>  
            <link rel="stylesheet" href="task4.css">
        </head>  
    <body>  
        <p>Click on any square:</p>  
        <span id="lresult"> </span>  
        <span id="tresult"> </span>  
        <div  style="background-color:#7fffd4"></div> 
        <div  style="background-color:#a52a2a"></div>  
        <div  style="background-color:#7fff00"></div>  
        <div  style="background-color:#ff1493"></div>  
    </body>  
    </html>  

    jQuery Code:
    $(document).ready(function() {  
        $("div").click(function () {  
            var offset = $(this).offset();  
            $("#lresult").html("left offset: <span>" + offset.left + "</span>.");  
            $("#tresult").html("top offset: <span>" + offset.top + "</span>.");  
        });  
    });  
    Output Screenshot:

    Task 5:
    Code:
    <!DOCTYPE html>  
    <html>  
    <head>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
    /script>  
    <script>  
    $(document).ready(function(){  
        $("button").click(function(){  
            $("p").toggleClass("main");  
        });  
    });  
    </script>  
    <style>  
    .main {  
        font-size: 150%;  
        color: red;  
    }  
    </style>  
    </head>  
    <body>  
    <button>Toggle class "main" for p elements</button>  
    <p>Hello! javatpoint.com</p>  
    <p>This is popular tutorial website.</p>  
    <p><b>Note:</b> Click repeatedly on the button to see the toggle effect.</p>  
    </body>  
    </html>  

     
    Screenshot:

    You might also like