FreeCodeCamp(Part 3)

• Create a Bootstrap Headline

To start with, create an h3 element, with the text jQuery Playground.
Color your h3 element with the text-primary Bootstrap class, and center it with the text-center Bootstrap class.

• House our page within a Bootstrap Container Fluid Div

Now let's make sure all the content on your page is mobile-responsive.
Let's nest your h3 element within a div element with the class container-fluid.

• Create a BootStrap Row

Now we'll create a Bootstrap row for our inline elements.
Create a div element below the h3 tag, with a class of row.

• Split your Bootstrap Row

Now that we have a Bootstrap Row, let's split it into two columns to house our elements.
Create two div elements within your row, both with the class col-xs-6.

• Create Bootstrap Wells

Bootstrap has a class called well that can create a visual sense of depth for your columns.
Nest one div element with the class well within each of your col-xs-6 div elements.

• Add Elements within your Bootstrap Wells

Now we're several div elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our button elements.
Nest three button elements within each of your well div elements.

• Apply the Default Bootstrap Button Style

Bootstrap has another button class called btn-default.
Apply both the btn and btn-default classes to each of your button elements.

• Create a Class to Target with jQuery Selectors

Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.
Give each of your button elements the class target.

• Add ID Attributes to Bootstrap Elements

You can give each of your elements an id attribute.
Each id must be unique to a specific element and used only once per page.
Let's give a unique id to each of our div elements of class well.
Remember that you can give an element an id like this:

<div class="well" id="center-well">

Give the well on the left the id of left-well. Give the well on the right the id of right-well.

• Label Bootstrap Wells

For the sake of clarity, let's label both of our wells with their ids.
Above your left-well, inside its col-xs-6 div element, add a h4 element with the text #left-well.
Above your right-well, inside its col-xs-6 div element, add a h4 element with the text #right-well.

• Give Each Element a Unique ID

We will also want to be able to use jQuery to target each button by its unique id.
Give each of your buttons a unique id, starting with target1 and ending with target6.
Make sure that target1 to target3 are in #left-well, and target4 to target6 are in #right-well.

• Label Bootstrap Buttons

Just like we labeled our wells, we want to label our buttons.
Give each of your button elements text that corresponds to its id's selector.

• Learn how Script Tags and Document Ready Work

Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.
Before we can start using jQuery, we need to add some things to our HTML.
First, add a script element at the top of your page. Be sure to close it on the following line.
Your browser will run any JavaScript inside a script element, including jQuery.
Inside your script element, add this code:

$(document).ready(function() { 
});

We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.
This is important because without your document ready function, your code may run before your HTML is rendered, which would cause bugs.

• Target HTML Elements with Selectors Using jQuery

Now we have a document ready function.
Now let's write our first jQuery statement. All jQuery functions start with a $, usually referred to as a dollar sign operator, or as bling.
jQuery often selects an HTML element with a selector, then does something to that element.
For example, let's make all of your button elements bounce. Just add this code inside your document ready function:

$("button").addClass("animated bounce");

即为如下所示：

<script>
 $(document).ready(function() {
   $("button").addClass("animated bounce");
 });
</script>

• Target Elements by Class Using jQuery

You see how we made all of your button elements bounce? We selected them with $("button"), then we added some CSS classes to them with .addClass("animated bounce");.
You just used jQuery's .addClass() function, which allows you to add classes to elements.
First, let's target your div elements with the class well by using the $(".well") selector.
Note that, just like with CSS declarations, you type a . before the class's name.
Then use jQuery's .addClass() function to add the classes animated and shake.

<script>
 $(document).ready(function() {
   $("button").addClass("animated bounce");
   $(".well").addClass("animated shake");
 });
</script>

• Three Ways For Targeting Element

Three ways of targeting elements: by type: $("button"), by class: $(".btn"), and by id: $("#target1").

• Remove Classes from an element with jQuery

In the same way you can add classes to an element with jQuery's addClass()function, you can remove them with jQuery's removeClass() function.

• Change the CSS of an Element Using jQuery

We can also change the CSS of an HTML element directly with jQuery.
jQuery has a function called .css() that allows you to change the CSS of an element.
Here's how we would change its color to blue:

$("#target1").css("color", "blue");

• Disable an Element Using jQuery

You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.
When you disable a button, it will become grayed-out and can no longer be clicked.
jQuery has a function called .prop() that allows you to adjust the properties of elements.
Here's how you would disable all buttons:

$("button").prop("disabled", true);

• Change Text Inside an Element Using jQuery

Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.
jQuery has a function called .html() that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.
Here's how you would rewrite and emphasize the text of our heading:

$("h3").html("<em>jQuery Playground</em>");

jQuery also has a similar function called .text() that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.

• Remove an Element Using jQuery

Now let's remove an HTML element from your page using jQuery.
jQuery has a function called .remove() that will remove an HTML element entirely

• Use appendTo to Move Elements with jQuery

Now let's try moving elements from one div to another.
jQuery has a function called appendTo() that allows you to select HTML elements and append them to another element.
For example, if we wanted to move target4 from our right well to our left well, we would use:

$("#target4").appendTo("#left-well");

• Clone an Element Using jQuery

In addition to moving elements, you can also copy them from one place to another.
jQuery has a function called clone() that makes a copy of an element.
For example, if we wanted to copy target2 from our left-well to our right-well, we would use:

$("#target2").clone().appendTo("#right-well");

Did you notice this involves sticking two jQuery functions together? This is called function chaining and it's a convenient way to get things done with jQuery.

• Target the Parent of an Element Using jQuery

Every HTML element has a parent element from which it inherits properties.
For example, your jQuery Playground h3 element has the parent element of <div class="container-fluid">, which itself has the parent body.
jQuery has a function called parent() that allows you to access the parent of whichever element you've selected.
Here's an example of how you would use the parent() function if you wanted to give the parent element of the left-well element a background color of blue:

$("#left-well").parent().css("background-color", "blue")

• Target the Children of an Element Using jQuery

Many HTML elements have children which inherit their properties from their parent HTML elements.
For example, every HTML element is a child of your body element, and your "jQuery Playground" h3 element is a child of your <div class="container-fluid"> element.
jQuery has a function called children() that allows you to access the children of whichever element you've selected.
Here's an example of how you would use the children() function to give the children of your left-well element the color of blue:

$("#left-well").children().css("color", "blue");

• Target a Specific Child of an Element Using jQuery

You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.
Fortunately, jQuery has some other tricks for targeting the right elements.
jQuery uses CSS Selectors to target elements. target:nth-child(n) css selector allows you to select all the nth elements with the target class or element type.
Here's how you would give the third element in each well the bounce class:

$(".target:nth-child(3)").addClass("animated bounce");

• Target Even Numbered(偶数) Elements Using jQuery

You can also target all the even-numbered elements.
Here's how you would target all the odd-numbered(奇数) elements with class target and give them classes:

$(".target:odd").addClass("animated shake");

Note that jQuery is zero-indexed, meaning that, counter-intuitively, :odd selects the second element, fourth element, and so on.

• Use jQuery to Modify the Entire Page

jQuery can target the body element as well.
Here's how we would make the entire body fade out:

$("body").addClass("animated fadeOut");

But let's do something more dramatic. Add the classes animated and hinge to your body element.