Scribd
Upload
6 views7 pages

CAP214CA3

This document is an academic assignment for a web programming course, detailing tasks related to jQuery. It includes code examples for adding the jQuery library, using jQuery selectors, selecting specific div elements, applying colors to table rows, and multiple-choice questions about jQuery concepts. The assignment emphasizes practical coding skills and understanding of jQuery functionalities.

Uploaded by

mehedi.mgt2019
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views7 pages

CAP214CA3

This document is an academic assignment for a web programming course, detailing tasks related to jQuery. It includes code examples for adding the jQuery library, using jQuery selectors, selecting specific div elements, applying colors to table rows, and multiple-choice questions about jQuery concepts. The assignment emphasizes practical coding skills and understanding of jQuery functionalities.

Uploaded by

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

LOVELY PROFESSIONAL UNIVERSITY

Course code: CAP214 Course Title: Fundamental of Web


Programming
Course Instructor: Rajeev Kandey

Academic Task No: 03 Academic Task Title: Assignment 03

Date of Allotment: 19 April 2021 Date of Submission: 27 April 2021

Students Roll no: RQ2015B49 Students Reg. no: 12006879

1. Write a basic code for add jquery library to pages?


CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

2. What is jQuery Selectors? Give two examples.

jQuery selector: jQuery selectors are one of the most important parts of the jQuery library.
jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes,
types, attributes, values of attributes and much more. It's based on the existing CSS Selectors,
and in addition, it has some own custom selectors.All selectors in jQuery start with the dollar
sign and parentheses: $().

Example:

1. The element Selector

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

$("p")

When a user clicks on a button, all <p> elements will be hidden

2. The #id selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.To find an element with a specific id, write a hash character, followed by
the id of the HTML element:
$("#test")

When a user clicks on a button, the element with id="test" will be hidden

3. Write the jQuery code for selecting the


1st div element, 4th div element
last div, and for even and odd div elements also.
one by one?
apply the red color on the above div.
jQuery CODE:
<html>
<head>
<body>
<title>selecting div element</title>
</body>
<div class="myclass">my text1</div>
<div>
<p>stuff</p>
</div>
<div>
<p>more stuff</p>
</div>
<p>
<span>Hello World</span>
</p>
<div class="myclass">my text2</div>
<div>
<p>stuff</p>
</div>
<p>
<span>Hello World</span>
</p>
<input type=""/>
<div class="myclass">my text3</div>
<div>
<p>stuff</p>
</div>
<footer>The end</footer>
</head>
</html>
4. If you have a table, how you will apply the two different colors on alternate rows using
Jquery? Write a jQuery code.

CODE:
<html>

<head>

<body>

<title>selecting div element</title>

</body>

<table border="1" class="table table-bordered">

<tr>

<th>Name</th>

<th>age</th>

</tr>

<tr>

<td>Mike</td>

<td>40</td>

</tr>

<tr>
<td>Adam</td>

<td>50</td>

</tr>

<tr>

<td>Baldwin</td>

<td>34</td>

</tr>

<tr>

<td>Miller</td>

<td>40</td>

</tr>

</table>

</head>

</html>

<script>

$(document).ready(function()

//for table row

$("tr:even").css("background-color", "#F4F4F8");

$("tr:odd").css("background-color", "#EFF1F1");

});

</script>

5. Multiple Choice Questions. Please select one right option for each question

ANSWERS:
Answers are marked with yellow color
1. What is the correct jQuery code to set the background color of all p elements to red?
A.$("p").layout("background-color","red");
B. $("p").manipulate("background-color","red");
C. $("p").css("background-color","red");
D. $("p").style("background-color","red");
2. Which jQuery method should be used to deal with name conflicts?
A. noNameConflict()
B. noConflict()
C. nameConflict()
D. conflict()
3. var ps = $("p");
ps will be..
A. A linked list
B. A hash or dictionary
C. An array
D. A jQuery object
4. $(document).ready(function() {
// Some code.
});
The above code is used to..
A. Make sure no code is executed till the entire page is fully loaded
B. Make sure no code is executed till the DOM is fully loaded
C. Both A and B
D. Neither A nor B
5. Query.noConflict(true) is used to..
A. Free up the $ symbol for use by other libraries
B. Improve compatibility
C. Remove all jQuery variables from the global scope
D. All of the above

6. $('p').click(function(){
// Code here
});
Inside the commented section, the value of the variable this is a..
A. Array
B. String
C. Reference to the DOM node
D. jQuery object

You might also like