jQuery动画与ajax

一、jQuery 中， $(document).ready()是什么意思？

我们知道，在原生 JS 中，有个事件是onload，而window.onload()就是让里边的 JS 等到页面所有元素和资源加载结束后再执行。假设资源过大，如图片资源等， JS 需要等待的时间就很长。而 jQuery 的$(document).ready()事件能实现类似效果，但仅仅是元素（DOM）就绪后就立马执行，无需等待资源的加载。这是一个比window.onload()更高效的办法，而且与之相比， jQuery 的还能多次调用，效果会顺序执行，而原生的onload()要实现改效果需要另外自行处理，因为事件是会被覆盖的。另外，$(function(){})是$(document).ready()的缩写。

二、$node.html() 和 $node.text() 的区别?

html()
该方法用于获取和设置选中节点的 HTML 结构。当是获取 HTML 时，只返回第一个匹配到的节点的结构。
text()
该方法用于获取和设置选中节点的纯文本内容。当获取时，返回所有匹配到的元素的所有纯文本拼接起来的字符串。设置的时候，相当于设置纯文本，就算放入 HTML 结构也会被转化为文本。a

实际上就是 DOM 节点与文本；第一个元素和所有文本的区别。

三、$.extend 的作用和用法?

当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。和 ES6 的新语法Object.assign()类似。
如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

使用的话，直接调用即可，需要注意的是，同名的key会被覆盖。

var obj = $.extend({}, {a: 1})

四、 jQuery 的链式调用是什么？

链式调用类似如下：

$(DOM).animate().animate()...stop()

这样写，函数会顺序执行，与使用回调相比，更加简洁明了。原理是 jQuery 的函数执行返回都是一个 jQuery 对象，可直接调用 jQuery 方法。

五、 jQuery 中 data 函数的作用。

该方法可以用来获取或者设置 html 的自定义 data-* 属性，使用方法是$(DOM).data(key, [value])，加上value就是设置，不加就是获取。需要注意的是，如果动态设置的话，只是临时数据，页面刷新是会被重置的。

六、写出以下功能对应的 jQuery 方法：

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

$node.addClass('active class2 ...')
$node.removeClass('active class2 ...')

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

$node.show()
$node.hide()

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

$node.attr('id')   //获取
$node.attr('id', 'aaa')   //设置
$noode.attr(key, [value])

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

$node.data('src', 'value')

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

$ct.prepend($node)

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

$ct.append($node)

删除$node

$node.remove()

把$ct里内容清空

$ct.empty()

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

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

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

//获取宽度（不包括内边距、边框、外边距）
$node.width();

//设置
$node.width(val);

//获取宽度（包括内边距）
$node.innerWidth();

//获取宽度（包括内边距和边框）
$node.outerWidth();

//获取宽度（包括内边距、边框和外边距）
$node.outerWidth(true);

//获取高度（不包括内边距、边框、外边距）
$node.height();

//设置
$node.height(val);

//获取高度（包括内边距）
$node.innerHeight();

//获取高度（包括内边距和边框）
$node.outerHeight();

//获取高度（包括内边距、边框和外边距）
$node.outerHeight(true);

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

$(window).scrollTop([val])
``
* 获取$node 到根节点水平、垂直偏移距离
```js
$node.offset()
``
* 修改$node 的样式，字体颜色设置红色，字体大小设置14px
```js
$node.css({
  'color': 'red',
  'font-size': '14px'
})
``
* 遍历节点，把每个节点里面的文本内容重复一遍
```js
$node.each(function(index , node){
  var text = $(node).text()
    $(node).text(text + text)
});

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

$ct.find(".item");

获取$ct 里面的所有孩子

$ct.children();

对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子

$node.parents('.ct').children('.panel');

获取选择元素的数量

$node.length

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

$node.index()

七、用 jQuery 实现以下操作

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

$btn.on('click', function(){
  $(this).animate({
    'background-color': 'red'
  }, 500).animate({
    'background-color': 'blue'
  }, 500)
})

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

$(window).on("scroll", function(){
    var scrollTop = $(window).scrollTop();
  })

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

$div.on('mouseover', function(){
  $(this).css('background-color': 'red')
})
$div.on('mouseout', function(){
  $(this).css('background-color': 'white')
})

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

$input.on('focus', function(){
  $(this).css('border-color': 'blue')
})
$input.on('input', function(){
  var val = $(this).val()
  $(this).val(val.toUpperCase())
})
$input.on('blur', function(){
  $(this).css('border-color': '#333')
  console.log('当前输入是：' + $(this).val)
})

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

$select.on('change', function(){
  console.log($(this).val())
})

八、用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面

进阶任务十五 | GitHub