jQuery 动画与 Ajax

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

• $(document).ready() 函数内的所有代码都将在DOM加载完毕后，页面全部内容加载前执行。因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。它允许用户在第一眼看到元素的时候，就能立即看到元素产生的一些隐藏效果，显示效果和其他效果。
• 如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
• $(document).ready(handler) 等价于 $(handler)
• $(document).ready()可以同时编写多个，并且都可以得到执行 。

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

• $node.html()：用来读取或设置某个元素中的HTML内容。
• $node.tetxt()：用来读取或设置某个元素中的HTML内容。

<div class="wrap">
    <p class="content">今天是10月15号</p>
</div>
var html = $('.wrap').html();
var text = $('.wrap').text();
console.log(html);  //<p class="content">今天是10月15号</p>
console.log(text);  //今天是10月15号

3. $.extend 的作用和用法?

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

//用法1
jQuery.extend( target [, object1 ] [, objectN ] ) ;
//用法2
jQuery.extend( [deep ], target, object1 [, objectN ] );

//target :
//用法1：Object类型，一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
//用法2：Object类型，对象扩展。这将接收新的属性。
//deep : Boolean类型，如果是true，合并成为递归（又叫做深拷贝）。
//object1 : Object类型，一个对象，它包含额外的属性合并到第一个参数。
//objectN : Object类型，包含额外的属性合并到第一个参数。

//jQuery.extend( target [, object1 ] [, objectN ] ) ;
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );
console.log(JSON.stringify(object1));
//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

//jQuery.extend( [deep ], target, object1 [, objectN ] );
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend(true, object1, object2 );
console.log(JSON.stringify(object1));
//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

4. jQuery 的链式调用是什么？

• 因为 jQuery 对象上的方法最后会返回该对象，为减少代码量，让代码更优雅，在对象返回后再次调用该对象使用 jQuery 方法，这就是链式调用。

$("#btn").attr("href","#");.css("color","blue")

5. jQuery 中 data 函数的作用?

• 在匹配元素上存储任意相关数据，该函数允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险；也可以在一个元素上设置不同的值，并获取这些值。
• 用法一：在匹配元素上存储任意相关数据。

.data( key, value )
/*key，类型: String，一个字符串，用户存储数据的名称。
value，数据值，它可以是任意的Javascript数据类型，除了undefined。*/
.data( obj )
//obj，类型: Object，一个用于更新数据的 键/值对。

$("body").data("age", 35);
$("body").data("say", { input: "name", output: "xiaoming"});
$("body").data({ arr: [0, 1, 2]}); 

console.log($("body").data("age")); // 35
console.log($("body").data()); 
// { age: 35, say: { input: "name", output: "xiaoming"}, arr: [0, 1, 2] }

• 用法二：返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

$("body").data("say", "hello");
console.log($("body").data("say")); //hello

console.log($("body").data("name")); //undefined

6. 写出以下功能对应的 jQuery 方法：

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

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

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

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

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

//获取属性
$node.attr('id')
$node.attr('src')
$node.attr('title')
//修改属性
$node.attr('id','ct')
$node.attr('src','xxx')
$node.attr('title','document')

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

$node.attr('data-src')
$node.prop('data-src')  //推荐

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

$ct.prepend($node)
$node.prependTo($ct)

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

$ct.append($node)
$node.appendTo($ct)

• 删除$node

$node.remove()
$ct.detach($node)

• 把$ct里内容清空

$node.empty()

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

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

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

  //不包括内边距
  $node.width()
  $node.height()
  $node.css('width')
  $node.css('height')
  
  //包括内边距
  $node.innerWidth()
  $node.innerHeight()
  
  //包括内边距，包括边框
  $node.outerWidth()  //不传参数或参数为false
  $node.outerHeight()  //不传参数或参数为false
  
  //包括内边距，包括边框，包括外边距
  $node.outerWidth(true)
  $node.outerHeight(true)
  

  • 设置

  //不包括内边距
  $node.width(100)
  $node.height('100px')
  $node.css({width:'200px',height:'300px'})  //设置元素的宽度和高度，也
  可以不要引号和单位
  
  //包括内边距
  $node.innerWidth(30)
  $node.innerHeight('30px')
  
  //包括内边距，包括边框
  $node.outerWidth(60)
  $node.outerHeight('60px')
  
  //包括内边距，包括边框，包括外边距
  $node.outerWidth(70,true)
  $node.outerHeight('70px',true)
  

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

$(window).srcollTop()

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

$node.offset().left
$node.offset().top

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

$node.css({color: "red", fontSize: "14px"})

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

$node.each(function () {
  $(this).text($(this).text() + $(this).text())
})

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

$ct.children('.item')

• 获取$ct 里面的所有孩子

$ct.children()

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

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

• 获取选择元素的数量

$node.length

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

$node.index()

7. 用jQuery实现以下操作

• 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝
• 当窗口滚动时，获取垂直滚动距离
• 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
• 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
• 当选择 select 后，获取用户选择的内容
• 预览效果

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

• index.html
• router.js