Question

aBbccDd AaBbCcbd AaBbC AaBbCc Add ca .Ed-1-TNormal 11No spacing :- Paragraph Heading 1 Heading 2 Title Lab - jQuery 1.) Go to the JQuery exercises at the below website: http://www.w3resource.com/jquery-exercises/ 2.) Choose 1 exercise to complete from each of the following links: jQuery Core, jQuery CSS, jQuery Events, and jQuery Effects 3.) Submit all code from each example.
0 0
Add a comment Improve this question Transcribed image text
Answer #1

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

Either use the jQuery code to the same html file or can use external js file by link. Both method are below to use the jquery.

code: html with Jquery.

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Find all h1 elements that are children of a div element and apply a background to them</title>

</head>

<body>

<h1>abc</h1>

<div>

<h1>First div h1</h1>

<h1>Second div h1</h1>

</div>

<h1>xyz</h1>

</body>

<script>

$( "div > h1" ).css("background", "#0686c9");

</script>

</html>

output:

abc First div hl Second divhỉ xyz

code with separate jquery and html file.

html:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Find all h1 elements that are children of a div element and apply a background to them</title>

</head>

<body>

<h1>abc</h1>

<div>

<h1>First div h1</h1>

<h1>Second div h1</h1>

</div>

<h1>xyz</h1>

</body>

<script src="JqueryDemo.js"></script>

</html>

jquery:

$( "div > h1" ).css("background", "#0686c9");

output:

It is best practice to use jquery code or jquery external file to the bottom of the page.

2. Set the background color of a page to red.

html:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Set the background color of a page to red</title>

</head>

<body>

<p>Set the background color of the page to red</p>

</body>

<script>

$(document.body).css("background", "red");

</script>

</html>

output:

3. Hide all the input elements within a form.

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Hide all the input elements within a form</title>

</head>

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

<h1>All the input element is hidden.</h1>

</form>

</body>

<script>

$(demo_form.elements).hide();

</script>

</html>

output:

4. Find the specific option tag text value of a selected option.

html:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Find the specific option tag text value of a selected option</title>

</head>

<body>

<select id="myselect">

<option value="1">Option-1</option>

<option value="2">Option-2</option>

<option value="3">Option-3</option>

</select>

</body>

<script>

var txt = $("#myselect option[value=2]").text();

console.log(txt);

</script>

</html>

output:

5. Check/uncheck a checkbox input or radio button?

html:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Check/uncheck a checkbox input or radio button</title>

</head>

<body>

<form action="">

<input type="radio" name="sex" value="male" checked>Male<br>

<input type="radio" name="sex" value="female">Female

</form>

</body>

<script>

$('input:radio[value=female]').prop("checked", true);

</script>

</html>

output:

6. Write jQuery code to append a div element.

html:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Append a div element (and all of its contents) dynamically to the body element</title>

</head>

<body>

</body>

<script>

$("<div><h1>JQuery Core</h1></div>").appendTo("body");

</script>

</html>

output:

7. Write a jQuery Code to get a single element from a selection.

html:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Write a jQuery Code to get a single element from a selection</title>

</head>

<body>

<ui>

<li>Html Tutorial</li>

<li>Mongodb Tutorial</li>

<li>Python Tutorial</li>

</body>

<script>

var listItems = $('li');

var rawListItem = listItems[1]; // or listItems.get(0)

var html = rawListItem.innerHTML;

console.log(html);

</script>

</html>

output:

8. Write jQuery Code to add a <b> tag at the beginning of the list item, containing the index of the list item.

html:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Add a tag at the beginning of the list item</title>

</head>

<body>

<ui>

<li>Html Tutorial</li>

<li>Mongodb Tutorial</li>

<li>Python Tutorial</li>

</body>

<script>

$('li').each(function (index, elem) {

$(elem).prepend('' + index + ': ');

});

</script>

</html>

output:

9. Write jQuery Code to change the hyperlink and the text of a existing link.

html:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<meta charset="utf-8">

<title>Change the hyperlink and the text of a existing link</title>

</head>

<body>

<a href="www.w3resource.com/PostgreSQL/tutorial.php">PostgreSQL Tutorial</a>

</body>

<script>

$("a").attr("href", "www.w3resource.com/mysql/mysql-tutorials.php");

$("a").text("MySQL Tutorial");

</script>

</html>

output:

Add a comment
Know the answer?
Add Answer to:
aBbccDd AaBbCcbd AaBbC AaBbCc Add ca .Ed-1-TNormal 11No spacing :- Paragraph Heading 1 Heading 2 Title...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • AaBbcc | AaBbCD AaBbc AaBbcc Aab! 11 Normal 1 No Spaci... Heading 1 Heading 2 Title...

    AaBbcc | AaBbCD AaBbc AaBbcc Aab! 11 Normal 1 No Spaci... Heading 1 Heading 2 Title 2. A ESE . Styles Paragraph 1 1 2 . 3 . What societal purposes are served by religion? How does the development of religion parallel the development of societies and cultures? How does Geography affect the type of religion practiced by any given cultural group, and their perception of God/s?

  • ABECEDAaBbcc AaBbc AaBbcc AaB AaBbcc AaBbcc 1 Normal No Spaci... Heading 1 Heading 2 Title Subtitle...

    ABECEDAaBbcc AaBbc AaBbcc AaB AaBbcc AaBbcc 1 Normal No Spaci... Heading 1 Heading 2 Title Subtitle Subtle Em Paragraph inal Questions: 1. The mushroom you examined contained basidia. To what major group of fungi does Agaricus belong? 2. Describe or draw the reproductive cycle of a basidiomycota. 3. Fungi reproduce by spores. How are spores structurally different from seeds? Is a spore produces asexually or sexually in the fungal groups we looked at? (Trick question) 4. How are spores dispersed?...

  • Review View AaBbCcDc AaBbCcDc AaBbc AaBbCc I Normal 1 No Spaci... Heading 1 Heading 2 Paragraph...

    Review View AaBbCcDc AaBbCcDc AaBbc AaBbCc I Normal 1 No Spaci... Heading 1 Heading 2 Paragraph AMERICAN TRAINING SCHOOL TOE MEESSIONE Name: + Date: Identifying-the-P, QRS-complex-and-T-waves-homework 1.- Identify the waves, QRS complexes, and the T-waves.-Notice that you have-a-blue-line with: circles, red with circlesand-greenwithcircles.tabelall-the circlesthe wave component of these cardiac cycles. 1 Co

  • Ho Spacing Heading 2 Heading I UUCc AaBbcc AaBbcc Heading 1 Paragraph On Jamary 1, 2019....

    Ho Spacing Heading 2 Heading I UUCc AaBbcc AaBbcc Heading 1 Paragraph On Jamary 1, 2019. Company C. issued five-year bonds with face value of $500,000 med coupon interest rate of 6%, with interest payable semi-annually. 1. Prepare a partial bond amortization table for the first two interest payments assuming that interest is paid on July 1 and January 1 and that the bonds sold based on the following scenario. 2. Record the journal entries relating to the bonds on...

  • 1 Normal ABDUED AaBbcc AaBbcc AaBbcl AaBbcc No Spact. Heading 1 Heading 2 Subtitle Subtle in...

    1 Normal ABDUED AaBbcc AaBbcc AaBbcl AaBbcc No Spact. Heading 1 Heading 2 Subtitle Subtle in Paragraph Title A feed manufacturing company is faced with a capacity decision. Their present production facility is running at nearly maximum capacity. Management is considering the following three decision alternatives: Styles a) No expansion b) Add on the present facility c) Build a new facility They believe that if there is a large increase in demand for their product in the near future, they...

  • AaBbccdc AabbCcDc AaBbc Aabbcc Aal 1 No Spac... Heading 1 Heading 2 aly - A T...

    AaBbccdc AabbCcDc AaBbc Aabbcc Aal 1 No Spac... Heading 1 Heading 2 aly - A T Normal Title Paragraph Styles Q2. Mr. Marwan and Munir both are having manufacturing plant in "Salalah Industrial Special Zone". Both supplies raw material to "Amada Bakery" to produce bakery products. Mr. Marwan use marginal costing method and Mr. Munir use absorption costing methods for valuation of their stocks and calculating profit margin. You have to write comparative impact of both the methods of costing...

  • ÄT AaBbCcD. AaBbC AaBbCeD ATD AaBbCcD. AaBb Emphasis Heading 1 1 Heading 5 Subtitle Title Paragraph...

    ÄT AaBbCcD. AaBbC AaBbCeD ATD AaBbCcD. AaBb Emphasis Heading 1 1 Heading 5 Subtitle Title Paragraph Styles I. Answer Questions (60 points) 1. What are the differences between abstract class and interface ? Give sample code to demonstrate them. (20 points) 2. What's the output of the following code? Determine whether the two methods print(XX) is an overloaded or overridden method. (10 points) class One{ public void print(int i) { System.out.println("Parent"); }

  • AaBbc I Normal AaBbc AaBbci AaBbcc Aabi Abel ABC 1 No Spaci. Heading 1 Heading 2...

    AaBbc I Normal AaBbc AaBbci AaBbcc Aabi Abel ABC 1 No Spaci. Heading 1 Heading 2 Title Subtitle Sube d) 19kN-m e) 32kN-m 4) Beam AB has a distributed load as shown and rocker supports at A and B. If the weight of the beam is negligible, the force Re (kN) is most nearly: BkN/m a) 8 b) 12 c) 10 d) 24 e) None of these 5) Find the resulting net moment on the beam to the right a)...

  • EA! AaBbCcDd Abbcodd AaBbc AaBbcc AaB AalbCD ABbced Act 1 Normal 1 No Spac... Heading 1...

    EA! AaBbCcDd Abbcodd AaBbc AaBbcc AaB AalbCD ABbced Act 1 Normal 1 No Spac... Heading 1 Heading 2 Title Subtitle Subtle Em... Em Paragraph Styles Allowance for Doubtful Accounts has a debit balance of $2,500 at the end of the year (before adjustment), and bad debt expense is estimated at 4% of credit sales. If net credit sales are $800,000, the amount of the adjusting entry to record the estimate of the uncollectible accounts is $34,500 $29,500 $32,000 cannot be...

  • Help please 112 VAA A XXA E 2 A T ES 1 . AaBbcc AaBbcc AaBbC...

    Help please 112 VAA A XXA E 2 A T ES 1 . AaBbcc AaBbcc AaBbC AaBbCel AaB Aabbccc AB Normal No Spec. Heading 1 Heading TeleSublice . . Paragraph Styles 2) For each of the following compounds determine the bond angles, molecular shapes, and hybridizations for all atoms: a) carbon tetrachloride b) BH3 silicon disulfide, eee C2H2 PF3 Spanish Ecuador Search

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT