1： jQuery 中， $(document).ready()是什么意思？
$(document).ready()是当文档中的DOM节点加载完成后，在加载外部图片和资源前，执行ready()里面的操作。
$(document).ready(function(){
//do something
});
等价于
$(function(){
//do something
});
window.onload是整个页面加载完成（包括图片、CSS、脚本等）后，执行onload()中的操作。
网页加载步骤：
1.解析HTML结构
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码
4.构造HTML DOM结构 //ready()在此步完成后触发
5.加载图片等外部文件
6.页面加载文件 //load()在此步完成后触发
2： $node.html()和$node.text()的区别?
$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容
3： $.extend 的作用和用法?
$.extend()将多个对象合并到一起，可以传入多个参数。$.extend([deep,] target,…)[deep,]为布尔值默认情况不是深拷贝，可设置true为深拷贝
var obj = {}
var obj1 = {
name:'gaojin',
age:21
}
$.extend(obj,obj1);
//也可以写为
var obj = $.extend({},obj1);
console.log(obj) //{name:'gaojin',age:21}
那这样的拷贝是深拷贝还是浅拷贝呢
var obj = {}
var obj1 = {
name:'gaojin',
age:21,
arr:[1,2,3]
}
$.extend(obj,obj1);
obj.arr[0] = 'changed';
console.log(obj1.arr[0]) //changed
可以发现是浅拷贝，都是同一个引用，那如何深拷贝呢？
$.extend(true,obj,obj1);
obj.arr[0] = 'changed';
console.log(obj1.arr[0])
只需传入一个参数true就可以实现深拷贝了
当然拷贝的对象可以不只一个可以是多个，那它就会将所有对象的属性都拷贝到目标对象上，且如果重复就会发生覆盖。
var obj = {}
var obj1 = {
name:'gaojin',
age:21,
arr:[1,2,3]
}
var obj2 = {
name:'dushen',
age:21,
sex:'female'
}
$.extend(obj,obj1,obj2)
console.log(obj) //Object {name: "dushen", age: 21, arr: Array[3], sex: "female"}
可以发现相同的属性被覆盖，不同的添加到目标对象。那在日常的使用场景是什么呢？
当我们定义一个函数，如果用户传入参数就安装参数来执行，如果没有参数就用默认参数
function getPeople(obj) {
var def = {
name:'gaojin',
age:21
}
var opts = {};
$.extend(opts,def,obj);
//再对opts进行操作
}
4： jQuery 的链式调用是什么？
链式调用：使用jQuery方法时，对象方法返回的是对象本身，可以调用对此对象的其他jQuery方法，实现连续调用多个方法
例：$(this).siblings().removeClass('active');
5： jQuery 中 data 函数的作用
jQuery.data( element, key, value )，存储任意数据到指定的元素,返回设置的值。
element
类型: Element
要存储数据的DOM对象
key
类型: string
存储的数据名
value
类型: Object
新数据值
jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值
详细参考：http://api.jquery.com/jQuery.data/
##6. 写出以下功能对应的 jQuery 方法：
<script>
//给元素 $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", value);
$node.attr("src", value);
$node.attr("title", value);
//给$node 添加自定义属性data- src
$node.data("src", "address");
//在$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(); // width
$node.height(); // height
$node.innerWidth(); // width+ padding
$node.innerHeight(); // height+ padding
$node.outerWidth(); // width+ padding + border
$node.outerHeight(); // height + padding + border
$node.outWidth(true); // width ＋ padding + border + margin
$node.outHeight(true); // height + padding + border + margin
//获取窗口滚动条垂直滚动距离
.scrollTop();
//获取$node 到根节点水平、垂直偏移距离
$node.offset();
//修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css("color":"red", "font-size":"14px");
//遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function () {
var text=$(this).text();
text+=text;
});
//从$ct 里查找 class 为 .item的子元素
$ct.hasClass(".item");
//获取$ct 里面的所有孩子
$ct.children();
//对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parent(".ct").find(".panel");
//获取选择元素的数量
$node.length;
//获取当前元素在兄弟中的排行
$node.index();
</script>
网友评论