进阶15 jQuery动画与ajax

题目1： Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？

• $(document).ready():当DOM加载完成后执行该函数；
• window.onload:当页面加载完成后执行该函数(页面内容、图片、外部资源)。
• 两者区别：
  1. 执行的事件不同：$(document).ready()当DOM构建完成后就执行,而window.onload需要等页面内所有资源加载完成后。
  2. 编写个数不同：window.onload只能执行一次，执行最后一个window.onload。$(document).ready()可以执行多个。
• window.onload的其他写法,$(document).ready(handler)还有$(handler)、$().ready(handler)。

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

• $node.html()：用于获取/修改元素的innerHTML，返回该节点下的html内容(包括html标签)。
• $node.text()：操作的是DOM的innerText值，返回该节点下的文本内容(不包括html标签)。

题目3：$.extend 的作用和用法?

• 作用：为扩展jQuery类本身.为类添加新的方法
• 语法：var object = $.extend({}, object1, object2);
• 用法：

var obj1 = {
    a:1
}
var obj2 = {
    b:2, 
    c:3
}
var obj3 = {
    b:3, 
    e:5
}
var obj4 = {} 
console.log($.extend(obj1,obj2))
console.log($.extend(obj4,obj1,obj2,obj3))
console.log($.extend({},obj1,obj2,obj3))

.extend示例.png

题目4： jQuery 的链式调用是什么？

当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法，这样就形成一种链式调用，即在对象上一次性调动多个方法：
$(this).addClass("active").siblings().removeClass("active")

题目5： jQuery 中 data 函数的作用

• 作用：data() 方法允许在DOM元素上绑定任意类型的数据：向被选元素附加数据，或者从被选元素获取数据。通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在，避免了循环引用的内存泄漏风险。
• 语法：$(“selector”).data(key, value)。

$(element).data()  //不给于参数，获取所有的数据；
$(element).data(name)  //通过数据名称name获取数据；
$(element).data(name,value)  //通过key = value的方式存储数据；
$(element).data(object)  //传递一个对象方式存储数据

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

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

$node.addClass("active") //添加
$node.removeClass("active")  //删除

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

展示：
$node.show()
$node.fadeIn()
$node.slideDown()

隐藏：
$node.hide() //逐步改变宽高，display为none
$node.fadeOut()   //逐步改变透明度，display为none
$node.slideUp()    //向上活动隐藏元素

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

获取：
$node.attr("id") //一个参数为获取目标属性值
$node.attr("title")
$node.title("src")

修改：
$node.attr("id","link")  //两个参数为设置目标属性值
$node.attr("title","address")
$node.title("src","http://www.baidu.com")

• 给$node 添加自定义属性data-src
$node.attr("data-src","xxxx")
• 在$ct 内部最开头添加元素$node
  $ct.prepend($node)
• 在$ct 内部最末尾添加元素$node
  $ct.append($node)
• 删除$node
  $node.remove([seletor]) //可以添加一个选择器参数来过滤删除对象
• 把$ct里内容清空
  $ct.empty() //清空被选择元素内所有子元素
• 在$ct 里设置 html
  
  $ct.html("
  ")
• 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

$node.width() //获取元素content宽度
$node.height() //获取元素content高度
$node.innerWidth() //获取元素（content+padding）宽度
$node.innerHeight() //获取元素（content+padding）高度
$node.outerWidth() //获取元素（content+padding+border）宽度
$node.outerHeight() //获取元素（content+padding+border）高度
$node.outerWidth(true) //获取元素（content+padding+border+margin）宽度，只读
$node.outerHeight(true) //获取元素（content+padding+border+margin）高度，只读

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

$(element).scroll(function() {
  console.log($(element).scrollTop())  
//.scroll()监听滚动事件；scrollTop()获取当前匹配元素垂直滚动条的位置
})

• 获取$node 到根节点水平、垂直偏移距离
  $node.offset() //获取$node相对document的坐标
• 修改$node 的样式，字体颜色设置红色，字体大小设置14px
  $node.css({color: "red",font-size: "14px"})
• 遍历节点，把每个节点里面的文本内容重复一遍

$(node).each(function(index,element) {
  var text = element.innerText
  $(element).text(text + text)
})

• 从$ct 里查找 class 为 .item的子元素
  $ct.find(".item")
• 获取$ct 里面的所有孩子
  $ct.children() //可以传入选择器参数进行过滤，具体选择什么孩子
• 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
  $node.parent(".ct").children(".panel")
• 获取选择元素的数量

$node.length
$node.size()

• 获取当前元素在兄弟中的排行
  $node.index() //可以传递选择器参数进行过滤，确定在什么范围排行
  jquery常用方法-demo

题目7：用jQuery实现以下操作

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

题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览547

github代码

题目9(选做)：实现一个天气预报页面，UI 如下图所示(仅供参考，可自由发挥)。