1、document ready function 文档就绪函数
For example, let's make all of your button elements bounce. Just add this code inside your document ready function:
$("button").addClass("animated bounce");

js部分就是变成：
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
再接着：
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".text-primary").addClass("animated shake");
$(".well").addClass("animated shake");
});
</script>
button是控件名称，.text-primary是class的类型。
类似的：
$("#target3").addClass("animated fadeOut");

target3是id的类型。

2、add Classes from an element with jQuery
$("button").addClass("animated bounce"); 为button 添加了两个"classanimated"和"bounce"。

3、Remove Classes from an element with jQuery
$("button").removeClass("btn-default"); 把button的class删除"btn-default"

4、Change the CSS of an Element Using 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"); //注意格式；

5、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);
例子：
$("#target1").prop("disabled",true); 就是：Disable your target1 button。

6、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.

Change the button with id target4 by emphasizing its text.
例子：
$("#target4").html("<em>#target4</em>") 按钮#target4 变成斜体和加重；

7、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
Remove element target4 from the page by using the .remove() function.
例子：
$("#target4").remove(); 按钮#target4被去除。空间上不存在。

8、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");
Move your target2 element from your left-well to your right-well.
$("#target2").appendTo("#right-well");

9、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.
Clone your target5 element and append it to your left-well：
$("#target5").clone().appendTo("#left-well");

10、Target the Parent of an Element Using jQuery（使用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")

Give the parent of the #target1 element a background-color of red：
：$("#target1").parent().css("background-color","red");

11、Target the Children of an Element Using jQuery(使用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")
Give all the children of your #right-well element a color of orange:
： $("#right-well").children().css("color","orange");

12、Target a Specific Child of an Element Using jQuery（使用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");

Make the second child in each of your well elements bounce. You must target the children of element with the target class：
：$(".btn:nth-child(2)").addClass("animated bounce");
$(".target:nth-child(2)").addClass("animated bounce");
btn的第二个孩子要有class的属性animated和bounce。

13、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.
Try selecting all the even-numbered elements and giving them the classes of animated and shake:
$(".target:even").addClass("animated shake");

14、Use jQuery to Modify the Entire Page

We're done playing with our jQuery playground. Let's tear it down!
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:
$("body").addClass("animated hinge");