前端基础（问答21）

keywords: jQuery、常用方法、Ajax。

$(document).ready() 和 window.onload 的作用类似，都是在页面加载完成后调用绑定的函数，但也有一些区别。

$node.html()： 获取集合中第一个匹配元素的 html 内容，或设置每一个元素的html内容。

$node.text()： 获取匹配元素集合中每个元素的合并文本，包括它们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

ps：.text()方法不能使用在 input 元素或scripts元素上。input或textarea需要使用 .val() 方法获取或设置文本值。得到scripts元素的值，使用.html()方法

作用：将两个或更多对象的内容合并到第一个对象。

用法：

jQuery 的链式调用是指执行完一个方法之后就返回当前对象，被返回的对象继续执行后面的方法。

通过对$.ajax()中传入的cache控制，具体规则如下：

.data()：在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

用法：

DEMO：

1、给元素 $node 添加 class active，给元素 $noed 删除 class active

添加class：$node.addClass('.active')

移除class：$node.removeClass('active')

切换class：$node.toggleClass('active')

2、展示元素$node, 隐藏元素$node

显示：$node.show()

隐藏：$node.hide()

切换显示/隐藏：$node.toggle()

3、获取元素$node的属性: id、src、title， 修改以上属性

获取：$node.attr('id'),$node.attr('src'),$node.attr('title')

修改：

修改一处属性：$node.attr('id','header')

修改多处属性：$node.attr({'id':'header','title':'task16'})

4、给$node 添加自定义属性data-src

$node('data-src','images/01.jpg')

5、在$ct 内部最开头添加元素$node

$ct.prepend($node)

6、在$ct 内部最末尾添加元素$node

$ct.append($node)

7、删除$node

$node.remove()

8、把$ct里内容清空

$node.empty()

$ct.text("")

$ct.html("")

9、在$ct 里设置 html <div class="btn"></div>

$ct.html('<div class="btn"></div>')

10、获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

获取：1、$node.width()、$node.height()

2、$node.innerWidth()、$node.innerHeight()

3、$node.outerWidth()、$node.outerHeight()

4、$node.outerWidth(true)、$node.outerHeight(true)

11、获取窗口滚动条垂直滚动距离

$(window).scrollTop()

12、获取$node 到根节点水平、垂直偏移距离

水平：$node.offset().left

垂直：$node.offset().top

13、修改$node 的样式，字体颜色设置红色，字体大小设置14px

$node.css({

color:'red',

font-size:'14px'

})

14、遍历节点，把每个节点里面的文本内容重复一遍

$node.each(function() {

console.log($(this).text())

})

15、从$ct 里查找 class 为 .item的子元素

$ct.find('.item')

16、获取$ct 里面的所有孩子

$ct.children()

17、对于$node，向上找到 class 为’.ct’的父亲，再从该父亲找到’.panel’的孩子

$node.parent('.ct').children('.panel')

18、获取选择元素的数量

$nodes.length

19、获取当前元素在兄弟中的排行

$node.index()

1、当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

2、当窗口滚动时，获取垂直滚动距离

3、当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

4、当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

5、当选择 select 后，获取用户选择的内容

效果

效果

很多时候，如果你的项目需要的是一个轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstrap，（一个最流行的开源前端框架）的话。你可以参考一下bootstrap官方组件。介绍Animate.css

为了让我自己写的动画效果值得称赞，我用一个非常有名的开源的CSS3动画库，被形象的称为animate.css。 Dan Eden写的。

这是让我能专注于手头的任务，而不是解释CSS3动画的代码。

用Animate.css 需要2个步骤：

在html文档中引入animate.min.css。

在网页中要加动画的元素上添加animated yourchosenanimation类。

接下来你用Animate.css网站上的看到的关于动画的类名，代替yourchosenanimation。

引入Bootstrap轮播组件

Bootstrap轮播组件有三个主要的部分。

轮播指示显示幻灯的页面数量，给用户提供一个视觉线索，并提供可以滑动的导航。

轮播条目，一个叫.carousel-inner的类，包含在外边框的里边。代表每一个独立的滑块。每个图片里边的都可以放置图片。也可以添加标题。还可以在html元素上添加carousel-caption类名。Bootstrap会有自带的样式。我们可以通过这些元素添加动画。

最后，是轮播控制箭头，功能是可以使用户前后滑动。

---