Scribd
Upload
42 views10 pages

WE Lab 6 - Huzaifa - 015

The document is a lab journal describing tasks completed to learn jQuery. It includes 5 tasks where jQuery was used to: 1) add borders to textareas and paragraphs, 2) hide elements with href attributes, 3) hide odd table rows, 4) display the offset coordinates of clicked divs, and 5) toggle a CSS class on paragraphs. The objectives were to learn about jQuery structure and DOM manipulation.

Uploaded by

Huzaifa Arshad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views10 pages

WE Lab 6 - Huzaifa - 015

The document is a lab journal describing tasks completed to learn jQuery. It includes 5 tasks where jQuery was used to: 1) add borders to textareas and paragraphs, 2) hide elements with href attributes, 3) hide odd table rows, 4) display the offset coordinates of clicked divs, and 5) toggle a CSS class on paragraphs. The objectives were to learn about jQuery structure and DOM manipulation.

Uploaded by

Huzaifa Arshad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Web Engineering

LAB JOURNAL# 07

Name: Huzaifa Arshad


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

DEPARTMENT OF SOFTWARE ENGINEERING

BAHRIA UNIVERSITY
ISLAMABAD CAMPUS
Problem Statement:
Introduction to the jQuery

Introduction:
jQuery is a language that we used to design and manipulate the websites

Objectives:
To know about the jQuery, structure and how to manipulate DOM.

Tools Used:
Visual Studio Code
Lab Tasks

Task 1:
Write a program that uses jQuery find all text areas and makes a border. Then adds all
paragraphs to the jQuery object to set their borders red.
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" );
    });
    

Output Screenshot:
Task 2:
Use the correct selector to hide all elements with an href attribute.
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();
})

Output Screenshot:
Task 3:
Use the correct selector to hide all odd table rows.
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 border="1">
            <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();
})

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

CSS Code:
div { 
    width:60px;
    height:60px;
    margin:5px;
    float:left;
}  

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:

HTML Code:
<!DOCTYPE html>  
<html>  
    <head>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.
min.js"></script>  
        <script src="task5.js"></script>  
        <link rel="stylesheet" href="task5.css"> 
    </head>  
    <body> 
        <button>Toggle class "main" for p elements</button>  
        <p>Hello! This is Huzaifa</p> 
        <p>This is representation for Toggle Class.</p>  
        <p><b>Note:</b> Click repeatedly on the button to see the toggle effect.
</p> 
    </body>  
</html>  

CSS Code:
.main{
    font-size: 150%;  
    color: blue;  
}

jQuery Code:
$(document).ready(function(){  
    $("button").click(function(){  
        $("p").toggleClass("main");  
    });  
});  s

Output Screenshot:

Conclusion:
In this lab, we have learned about the jQuery, and how to manipulate DOM using jQuery.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy