vapidbabble/index.html

## index.html
<html>

<head>
  <title>jQuery Mini Challenge 2</title>
</head>

<body>
  <header>
    <h1 class="main-heading">jQuery Methods</h1>
  </header>
  <section class="first-section">
    <p id="para-one">All of the methods in this section manipulate the DOM in some manner. A few of them simply change one of the attributes of an element (also listed in the Attributes category), while others set an element's style properties (also listed in the CSS
      category). Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as "setters," as they change the values of properties. A few of these methods—such as
      .attr(), .html(), and .val()—also act as "getters," retrieving information from DOM elements for later use.</p>
    <p id="para-two">
      How much do you love jQuery?
    </p>
    <div>
      <h3 class= "sub-heading">Here are some examples:</h3>
      <ul>
        <li>.addClass()</li>
        <li>.children()</li>
        <li>.parents()</li>
        <li>.text() </li>
        <li>.html()</li>
        <li>.append()</li>
      </ul>
    </div>
    <div id="replace-html">
      <h3 class ="replace-h3">Text to be replaced...</h3>
    </div>
  </section>
  <footer>
    <p>Source: <a href="https://jquery.com/">www.jquery.com</a></p>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>

</html>

## jquery-101-mini-challenge-2.markdown

      
    Raw
  

              jquery-101-mini-challenge-2.markdown
            
          
    jQuery 101 - Mini Challenge 2

A Pen by John Wise on CodePen.
License.

  
## script.js
$(document).ready(function() {

//1. Select the ul element and add the class "my-list" to it.
  $("ul").addClass("my-list");

//2. Select the children of the div, specifically the h3 element and log to console its text.
  var children = $("div .sub-heading").text();
  console.log(children);

//3. Select the children of the section, specifically the paragraph with the id "para-two" and append the following text to it: "I eat, sleep and breathe it. That's how much I love jQuery."
  $("#para-two").append("I eat, sleep and breathe it. That's how much I love jQuery.");

//4. Select the element with class "replace-h3", target its parent div with id "replace-html" and replace the h3 with a paragraph with the following text: "My brand new paragraph that I added to the DOM using jQuery!"
  $("h3.replace-h3").html("<p>My brand new paragraph that I added to the DOM using jQuery!</p>");

});


## style.css
.my-list {
  list-style-type: none;
  color: crimson;
}
	<html>

	<head>
	<title>jQuery Mini Challenge 2</title>
	</head>

	<body>
	<header>
	<h1 class="main-heading">jQuery Methods</h1>
	</header>
	<section class="first-section">
	<p id="para-one">All of the methods in this section manipulate the DOM in some manner. A few of them simply change one of the attributes of an element (also listed in the Attributes category), while others set an element's style properties (also listed in the CSS
	category). Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as "setters," as they change the values of properties. A few of these methods—such as
	.attr(), .html(), and .val()—also act as "getters," retrieving information from DOM elements for later use.</p>
	<p id="para-two">
	How much do you love jQuery?
	</p>
	<div>
	<h3 class= "sub-heading">Here are some examples:</h3>
	<ul>
	<li>.addClass()</li>
	<li>.children()</li>
	<li>.parents()</li>
	<li>.text() </li>
	<li>.html()</li>
	<li>.append()</li>
	</ul>
	</div>
	<div id="replace-html">
	<h3 class ="replace-h3">Text to be replaced...</h3>
	</div>
	</section>
	<footer>
	<p>Source: <a href="https://jquery.com/">www.jquery.com</a></p>
	</footer>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	</body>

	</html>
	$(document).ready(function() {

	//1. Select the ul element and add the class "my-list" to it.
	$("ul").addClass("my-list");

	//2. Select the children of the div, specifically the h3 element and log to console its text.
	var children = $("div .sub-heading").text();
	console.log(children);

	//3. Select the children of the section, specifically the paragraph with the id "para-two" and append the following text to it: "I eat, sleep and breathe it. That's how much I love jQuery."
	$("#para-two").append("I eat, sleep and breathe it. That's how much I love jQuery.");

	//4. Select the element with class "replace-h3", target its parent div with id "replace-html" and replace the h3 with a paragraph with the following text: "My brand new paragraph that I added to the DOM using jQuery!"
	$("h3.replace-h3").html("<p>My brand new paragraph that I added to the DOM using jQuery!</p>");

	});