最流行的JavaScript框架jQuery
jQuery 库可以通过一行简单的标记被添加到网页中
jQuery是一个轻量级的"写的少，做的多"的JavaScript库
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
BootCDN:<script src=“https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js“> </script>
百度 CDN:<script src=“https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js“> </script>
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
$(document).ready(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
function里面的代码会在浏览器加载页面后立即运行。
这很关键，因为在没有document ready function以前，代码可能会在HTML渲染完成之前就执行了，这样会产生bug。
三种获取元素的方式：
type选择器 $("button")
class选择器 $(".btn")
id选择器 $("#target1")
只需要用jQuery的.addClass()方法，就可以给元素加class了。
通过jQuery的removeClass()方法删除元素的class。
直接通过jQuery来改变HTML元素的CSS样式。
jQuery有一个叫做.css()的方法，能让你改变元素的CSS样式。
以下代码显示如何将颜色改变成蓝色：
$("#target1").css("color", "blue");
这跟一般的CSS语法有点不同，因为这里的CSS属性和值是在引号内的，并且用逗号分开，而不是冒号。
jQuery有一个.prop()的方法，可以让你来调整元素的属性。
以下代码显示如何禁用所有按钮：
$("button").prop("disabled", true);
jQuery不仅可以改变HTML元素开始和结束标签之间的文本，还可以改变HTML元素标记本身。
jQuery有一个.html()方法，可以让你在元素中添加HTML标签和文字，而元素中之前的内容都会被方法中的内容所替换掉。
Query 还有一个类似的方法叫.text()，它只能改变文本但不能添加标签。换句话说，这个方法只会把任何传进来的HTML标签当成你想替换现有内容的文本。
以下代码显示如何重写和强调标题文本（使用em标签）：
$("h3").html("<em>jQuery Playground</em>");
jQuery 有一个.remove()的方法，可以彻底删除一个HTML元素。
jQuery有一个appendTo()方法，可以让你把选中的HTML元素附加到其他元素中。
比如，我们想让target4从right-well移动到left-well，我们用以下代码：
$("#target4").appendTo("#left-well");
jQuery有一个clone()方法，可以复制元素
例如，如果我们想把target2从left-well复制到right-well，我们用以下代码：
$("#target2").clone().appendTo("#right-well");
注意到上面是将两个jQuery方法合在一起使用了。
这种叫方法链function chaining，它是jQuery的一种便捷方式。
每个HTML元素都有一个parent元素，并从中继承属性。
jQuery有一个parent()方法，可以允许你访问选定元素的父元素。
许多HTML元素都有children(子元素)，子元素从父元素那里继承属性。
jQuery有一个children()方法，可以让你访问选定元素的子元素。
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
jQuery用CSS选择器来获取元素，target:nth-child(n)CSS选择器允许你通过目标类或元素类型选择目标元素的所有子元素
以下代码显示如何给jQuery Playground中的每个井中（left well和right well）的第三个子元素添加bounce类：
$(".target:nth-child(3)").addClass("animated bounce");
Query的:odd选择器用于匹配所有索引值为奇数的元素，将其封装为jQuery对象并返回
odd选取的是偶数，:even选取的是奇数。
// 这里的selector表示具体的选择器
jQuery( "selector:odd" )
注意：由于索引值是从0开始计数的，因此奇数索引上的元素实际上是自然顺序上为偶数的元素。
jQuery也可以获取body元素。
以下代码显示如何让整个body有淡出效果：
$("body").addClass("animated fadeOut");
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");
$("body").addClass("animated hinge");
});
</script>
<!-- Only change code above this line. -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>