进阶任务15
2017-05-09 本文已影响29人
dengpan
问答部分
一、jQuery中， $(document).ready()是什么意思？
- $(document).ready()~指当DOM准备就绪时，指定一个函数来执行
- $(document).ready()的简化写法为：$(handler)
- 比如如下代码
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
var a = "jirengu";//局部变量，如果放在底部的话是全局变量
console.log(a);
});
</script>
</head>
二、$node.html()和$node.text()的区别?
- .html()~获取集合中第一个匹配元素的HTML内容
- .text()~获取匹配元素集合中每个元素的合并文本，包括他们的后代
比如如下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery</title>
</head>
<body>
<p>jirengu<span>hunger</span></p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
console.log($("p").html());
console.log($("p").text());
});
</script>
</html>
结果如下图：
问答2
三、$.extend 的作用和用法?
- 作用：将两个或更多对象的内容合并到第一个对象
- 用法如下：
//目标对象为{}，这种用法是合并多个对象，但是不改变这些对象
jQuery.extend({},object1,object2);
//合并两个对象
jQuery.extend(target[,object1][,object2]);
//deep为true时，合并成为递归（即深拷贝）
jQuery.extend([deep],target[,object1][,object2]);
具体如下示例：
- 1~
jQuery.extend(target[,object1][,object2]);
当提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）；目标对象（第一个参数）将被修改，并且将通过$.extend()返回；如果只有一个目标参数提供给$.extend()，意味着目标参数被省略；如果目标对象（target参数）的某个参数在附加对象([,object1][,object2])中没有，那么这个属性会在合并 之后被保留；同理，如果附加对象中某个属性在目标对象中没有，这个属性也会在合并之后被保留；如果目标对象的某个属性在附加对象中存在，那么这个属性的值会被附加对象的值所覆盖。如下代码
var defaults = {
name:"frank",
age:25,
height:176
};
var options = {
name:"hunger",
age:26,
weight:63,
sex:"male"
};
$.extend(defaults,options);
console.log(defaults);
结果如下图：
.extend()用法1
- 2~
jQuery.extend({},target[,object1][,object2]);
合并defalults和options对象，并且不修改defaults对象；这是常用的插件开发模式，如下代码
var defaults = {
name:"frank",
age:25,
height:176
};
var options = {
weight:63,
sex:"male"
};
var newObject = $.extend({},defaults,options);
console.log(defaults);
console.log(options);
console.log(newObject);
结果如下图：
.extend()用法2
- 3~
jQuery.extend(true,target[,object1][,object2]);
当第一个参数为true时，合并会成为递归（即深拷贝），此时，如果目标对象中的某个属性在附加对象中存在时，那么这个属性的值将会合并，如下代码
var defaults = {
name:"frank",
age:25,
body:{height:176,weight:63}
};
var options = {
name:"hunger",
sex:"male",
body:{height:180}
};
$.extend(true,defaults,options);
console.log(defaults);
结果如下图：
.extend()用法3
四、JQuery 的链式调用是什么？
- JQuery 的链式调用是指对一个对象连续的使用jQuery方法（原理是：执行完一个方法后就返回对象本身（return this），然后对象继续执行后面的方法），比如如下代码
$("#ct").removeClass("hover").css("color","red").hide("slow");
以上代码对id为ct的对象做了以下操作：移除了hover的class，设置了字体颜色，并隐藏；这样做的好处是代码简洁易读，减少了代码的重复性，提高了性能
五、jquery 中 data 函数的作用？
- .data(key,value)~在匹配元素上存储任意相关数据，如下代码
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 , 4 , 5 , 6 ] });
console.log($("body").data("foo"));
console.log($("body").data());
问答6
- .data(key)~返回匹配的元素集合中的第一个元素的给定名称的数据存储的值，如下代码
$("body").data("foo");
$("body").data("bar", "foobar");
console.log($("body").data("foo"));//undefined,如果指定元素上
没有设置任何值，那么将返回undefined
console.log($("body").data());//foobar
问答6
代码部分
- 代码一
- 代码二
- 代码三
- 15-8 github
- 如下GIF所示
15-8
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
