用原生JavaScript操作DOM树的方法比如getElementById这样写起来太麻烦，所以就有了jQuery。jQuery是一个JavaScript类库，它提供了操作DOM元素更简洁的写法并且与元素JavaScript不冲突，加载了这个类库之后，我们既可以使用原生JavaScript的函数也可以使用该类库的函数。
用jQuery操作一个元素
我们先下载jQuery文件到本地，引用本地文件
使用jQuery改写后的代码如下：
$ 函数返回表示选中的元素的一个 jQuery 对象。调用 jQuery 对象的 text 方法，传入用于该元素的新的文本将会替代jQuery对象旧的文本。
用jQuery创建一个元素并添加到DOM树
需要使用到jQuery对象的append方法，该方法接收的参数为包含HTML代码的一个字符串。append方法会把这个字符串转换成DOM元素添加到每一个选中元素内部的末尾。
例如我们要在页面的末尾处添加一个p元素：
<div>Rails is funny!</div>
<script type="text/javascript">
$("body").append("<p>This is a new paragraph</p>");
</script>
解析后的HTML代码如下：
代码 $("body")选择了 body元素。同样,也可以使用代码 $("p")选中所有 p 元素。
<body>
<div>One is <p>very<p> funny!</div>
<div>Two is funny!</div>
<div>Three is funny!</div>
<script type="text/javascript">
$("div").append("<p>This is a new paragraph</p>");
</script>
</body>
用jQuery让元素产生动画效果
例如,如果要添加一个新的段落文本到页面中,可能想要令其慢慢淡入,而不是突然出现。要淡出一个元素,可以使用fadeOut 方法。
如下，页面显示文本内容，然后在3秒内逐渐变成空白页面。
注意<script>标签必须写在div标签后面，不然页面没有淡出效果----这是因为自顶向下执行js代码时还没有定义div标签所以$("div")就找不到元素自然不会有淡出效果，执行完js代码后继续向下显示出最后定义的div内容之后就结束了（不会回头再执行一次js代码）。
<body>
<div>One is <p>very<p> funny!</div>
<div>Two is funny!</div>
<div>Three is funny!</div>
<script type="text/javascript">
$("div").fadeOut(3000);
</script>
</body>
链化jQuery的动画方法
当调用 jQuery 对象的方法时,方法通常返回最初调用它的对象。例如,$ ("h1")返回表示所有 h1 元素的一个 jQuery 对象, $ ("h1") .fadeOut ( 3000)返回同样表示所有 h1 元素的 jQuery 对象。
如下代码效果：
0，text方法和淡出淡入是两个独立的方法，先执行text方法，然后再执行淡出方法。不是同时执行逐渐淡出的过程中执行text方法改变div显示的内容。
1，页面显示3行“Change something to show...”（因为首次加载页面时显示出div内容之后马上执行script标签的内容，text改变div内容马上得到执行，所以页面看不到div原本的内容）
2，3行“Change something to show...”先淡出，后面再淡入（要使用淡入方法必须先使用淡出方法，不然是无效果的）。这是因为如果我们要绑定div执行方法，js单面必须写到div定义的后面。这时div在定义后得到显示，而淡入必须div原本是空白内容逐渐显示页面内容，此时识别页面有div内容显示也就是淡入结束的标志所以就不会执行淡入动作。
<body>
<div>One is <p>very<p> funny!</div>
<div>Two is funny!</div>
<div>Three is funny!</div>
<script type="text/javascript">
$("div").text("Change something to show...").fadeOut(6000);
$("div").fadeIn(2000);
</script>
</body>
在一行中调用多个方法叫作链化，如上的text方法和fadeOut方法。
动画slideUp 和slideDown。
jQuery 提供了类似于 fadeOut 和 fadeIn 的两 个 额 外 的 动 画 方 法, 分 别 名 为 slideUp 和slideDown。slideUp 方法通过向上滑动效果让元素消失,slideDown 通过向下滑动效果让它们再次出现。同理，slideDown也必须前面先使加载动画的内容空白才有效果，它使用的前提是空白内容逐渐加载内容，如果一开始就有内容就不会逐渐加载内容。
文本内容6秒内从底部逐渐向上收起来，然后2内容逐渐把内容再次放下来（就像窗帘一样）
<body>
<div>One is <p>very<p> funny!</div>
<div>Two is funny!</div>
<div>Three is funny!</div>
<script type="text/javascript">
$("div").slideUp(6000);
$("div").slideDown(2000);
</script>
</body>
要使用slideDown，必须先使用slideUp或者fadeOut方法等让页面先变成空白。如下就是先淡出，然后内容从上到下放下来。
<div>One is <p>very<p> funny!</div>
<div>Two is funny!</div>
<div>Three is funny!</div>
<script type="text/javascript">
$("div").fadeOut(6000);
$("div").slideDown(2000);
</script>
