1、 jQuery 中， $(document).ready()是什么意思？
理想的页面加载方式：
解析HTML结构。
加载并解析外部脚本。
DOM树构建完成，执行脚本。//DOMInteractive –> DOMContentLoaded
加载图片、样式表文件等外部文件。
页面加载完毕。//window.onload
-
$(document).ready(handler)
当DOM结构已完全加载时，传递给.ready()方法的处理函数就开始执行，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。并且可以同时编写多个并执行。
$(document).ready(handler)
$(handler)
$().ready(handler)
document.ready = handler //JavaScript
-
$(document).load(handler)
如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。注意window.onload不能同时编写多个，如果页面有多个window.onload,只会执行最后一个。
$(document).load(handler)
window.onload = handler //JavaScript写法
-
DOMContentLoaded（IE8及其以下不兼容）
DOMLoading
浏览器开始解析dom树的时间点
DOMInteractive
表示浏览器已经解析好dom树了。
DOMContentLoaded
同步的JS已经执行完毕了。
JavaScript提供的，当初始HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。效果和 $(document).ready()类似。
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
2、 $node.html()和$node.text()的区别?
-
$node.html()获取/设置被选元素的节点包括html结构
$(".box").html() //获取元素内部的html内容，类似于innerHTML
$(".box").html("<p>设置了一个段落</p>")//设置了元素内部的html内容,标签生效
-
$node.text()获取/设置被选元素的文本节点
$(".box").text() //获取元素内部的text文本，类似于innerText
$(".box").text("设置了一个文本")//设置了元素内部的text文本，标签不生效
3、 $.extend 的作用和用法?
- 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（第一个参数）并返回，重复的属性会覆盖，如果没有{}将赋值到第一个对象。
用法为：
var object=$.extend({},object1,object2);
如：
var obj1 = {
name : 'John',
age : 12,
sex : 'man',
class: {Chinese : 'classV',English : 'classII'}
}
var obj2 = {
name : 'King',
age : 22,
sex : 'man',
career: 'doctor',
class : {History : 'class1'}
}
var newObj = $.extend({},obj1,obj2)
console.log(newObj)
//{age:22,career:"doctor",class:{History: "class1"},name:"King",sex:"man"}
当一个参数为true时，将会进行递归的深拷贝合并。
用法为：
var object=$.extend(true,{},object1,object2);
更改上边的例子，变为：
var newObj = $.extend(true,{},obj1,obj2)
console.log(newObj)
//{age:22,career:"doctor",class:{Chinese: "classV", English: "classII", History: "class1"},name:"King",sex:"man"}
4、jQuery 的链式调用是什么？
指的是在JQ环境下，函数的返回对象可以连续的使用.jq()的方法进行连续调用而不报错
链式操作仅仅是通过对象上的方法最后
return this
把对象再返回回来，对象当然可以继续调用方法啦，所以就可以链式操作了。
- 作用
节省代码量，代码看起来更优雅。
但是所有对象的方法返回的都是对象本身，也就是说没有返回值，这不一定在任何环境下都适合。
5、 jQuery 中 data 函数的作用
- jquery data()的作用
data() 方法向被选元素附加数据，或者从被选元素获取数据。
通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。
该函数属于jQuery对象(实例)。移除通过data()函数存放的数据，使用 removeData() 函数。 - jquery data的使用方式
- 获取附加的data的值
$(selector).data(name)
name：可选。规定要取回的数据的名称。
如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。 - 用name和value为对象附加数据
$(selector).data(name,value)
selector：为需要附加或者获取数据的对象。
name：参数为数据的名称。
value：参数为数据的值。 - 使用对象向元素附加数据
使用带有名称/值对的对象向被选元素添加数据。
除了以提供 name 和 value 的方式进行赋值，我们还可以直接传入另一个对象作为参数。对象的属性名称和属性值将被视为多个键值对，从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。
$(selector).data(object)
object：必需。规定包含名称/值对的对象。
- 获取附加的data的值
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/src/title','el')
//只有第一个参数代表获取元素属性，第二个可选参数el为需要设置的属性
- 给$node 添加自定义属性data-src
$node.attr('data-src','...')
//data-src值为'...'
- 在$ct 内部最开头添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
- 在$ct 内部最末尾添加元素$node
$ct.append($node)
$node.appendTo($ct)
- 删除$node
$node.remove()
- 把$ct里内容清空
$ct.empty()
- 在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度
- 获取窗口滚动条垂直滚动距离
$(window).scrollTop()
- 获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({color : 'red',font-size : '14px'})
- 遍历节点，把每个节点里面的文本内容重复一遍
$.each($node,function(){
console.log($(this).text());
});
或：
$node.each(function(){
console.log($(this).text());
});
- 从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
- 获取$ct 里面的所有孩子
$ct.children() //获取直接子元素
$ct.find('*') //获取所有后代元素
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
- 获取选择元素的数量
$node.length;
$node.size();
- 获取当前元素在兄弟中的排行
$(selector).index()
7、用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
$("#btn").click(function(){
$(this).css("background-color","red")
setTimeout(function(){
$("#btn").css("background-color","blue")
},500)
})
- 当窗口滚动时，获取垂直滚动距离
$(document).scroll(function(){
console.log($(this).scrollTop()+'px')
})
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$('.div').on("mouseenter",function(){
$(this).css("background","red");
});
$('.div').on("mouseleave",function(){
$(this).css("background","#fff");
});
或：
$(".div").on("mouseover",function(){
$(this).css("background-color","red");
});
$(".div").on("mouseout",function(){
$(this).css("background-color","");
});
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
$('#ipt').on("focus",function(){
$(this).css("outline-color","blue");
});
$('#ipt').on('keyup',function(){
$(this).val($(this).val().toLocaleUpperCase());
});
$('#ipt').on('blur',function(){
$(this).css("outline-color","none");
if($(this).val()!=""){
console.log($(this).val());
}
});
- 当选择 select 后，获取用户选择的内容
$('#sel').on('change',function(){
//或者console.log($(this).val());
console.log($(this).find('option:selected').val());
});
8、用 jQuery ajax 实现加载更多
代码地址：https://github.com/zh-yang/resume/blob/master/task2-14/jq-clickmore/index-jq.html
server-mork如下：
920-1.gif
9、 实现一个天气预报页面
自己试着做了一下，不知道还有没有 bug （或者错误），改出来一些了。
代码地址：https://github.com/zh-yang/resume/tree/master/task2-14
预览地址：https://zh-yang.github.io/resume/task2-14/get-wearher/getWeatherII.html
预览截图：
920-2.gif
