记录8 用jQuery操作DOM

用原生JavaScript操作DOM树的方法比如getElementById这样写起来太麻烦，所以就有了jQuery。jQuery是一个JavaScript类库，它提供了操作DOM元素更简洁的写法并且与元素JavaScript不冲突，加载了这个类库之后，我们既可以使用原生JavaScript的函数也可以使用该类库的函数。

用jQuery操作一个元素

我们先下载jQuery文件到本地，引用本地文件
使用jQuery改写后的代码如下：

image.png

$ 函数返回表示选中的元素的一个 jQuery 对象。调用 jQuery 对象的 text 方法，传入用于该元素的新的文本将会替代jQuery对象旧的文本。

用jQuery创建一个元素并添加到DOM树

需要使用到jQuery对象的append方法，该方法接收的参数为包含HTML代码的一个字符串。append方法会把这个字符串转换成DOM元素添加到每一个选中元素内部的末尾。
例如我们要在页面的末尾处添加一个p元素：

Rails is funny!

解析后的HTML代码如下：

image.png

代码 $("body")选择了 body元素。同样,也可以使用代码 $("p")选中所有 p 元素。

    
One is 
very
 funny!
    
Two is funny!
    
Three is funny!
    

效果图

解析后的HTML代码

用jQuery让元素产生动画效果

例如,如果要添加一个新的段落文本到页面中,可能想要令其慢慢淡入,而不是突然出现。要淡出一个元素,可以使用fadeOut 方法。

如下，页面显示文本内容，然后在3秒内逐渐变成空白页面。

注意

链化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内容显示也就是淡入结束的标志所以就不会执行淡入动作。

    
One is 
very
 funny!
    
Two is funny!
    
Three is funny!
    

在一行中调用多个方法叫作链化，如上的text方法和fadeOut方法。

动画slideUp 和slideDown。

jQuery 提供了类似于 fadeOut 和 fadeIn 的两 个 额 外 的 动 画 方 法, 分 别 名 为 slideUp 和slideDown。slideUp 方法通过向上滑动效果让元素消失,slideDown 通过向下滑动效果让它们再次出现。同理，slideDown也必须前面先使加载动画的内容空白才有效果，它使用的前提是空白内容逐渐加载内容，如果一开始就有内容就不会逐渐加载内容。

文本内容6秒内从底部逐渐向上收起来，然后2内容逐渐把内容再次放下来（就像窗帘一样）

    
One is 
very
 funny!
    
Two is funny!
    
Three is funny!
    

要使用slideDown，必须先使用slideUp或者fadeOut方法等让页面先变成空白。如下就是先淡出，然后内容从上到下放下来。

    
One is 
very
 funny!
    
Two is funny!
    
Three is funny!