问答
1.jQuery中，$(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
-
$(document).ready()意思是等待页面中的DOM元素加载完毕后执行代码。
-
与window.onload的区别：
-
执行的时机：
window.onload必须等待网页中的所有的内容加载完毕后（包括图片）才能执行。
$(document).ready()只需要在页面中所有的DOM结构绘制完毕后就执行，可能与DOM元素关联的东西并没有加载完。 -
编写的个数：
window.onload只能编写一个。如果编写多个只会执行最后一个window.onload代码。
$(document).ready()能同时编写多个，根据编写顺序依次执行。 -
简写方式：
$(document).ready()可以简写成：
$(function(){//code})
当$()不带参数时，默认参数就是document，因此还可以简写成：
$().ready(function(){//code})
2.$node.html()和$node.text()的区别?
-
$node.html():
当html()没有设置参数时，返回匹配元素集合中第一个匹配元素的HTML内容。
当html()设置了HTML字符串时（即.hmlt(htmlString)），覆盖匹配元素集合中每个匹配元素的内容。 -
$node.text():
当text()没有设置参数时，返回匹配元素集合中每个元素的合并文本（删除HTML标记），包括它们的后代。
当text()设置了文本时（即.text(text)），覆盖匹配元素集合中每个匹配元素的内容（特殊的字符会被编码）。
举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1">我是用来测试html()方法的<em>文档1</em></div>
<div class="box1">我是用来测试html()方法的<em>文档2</em></div>
<div class="box2">我是用来测试html()方法的<em>文档3</em></div>
<div class="box2">我是用来测试html()方法的<em>文档5</em></div>
<div class="box3">我是用来测试text()方法的<em>文档6</em></div>
<div class="box3">我是用来测试text()方法的<em>文档7</em></div>
<script src="jquery-3.1.1.js"></script>
<script>
console.log($(".box1").html());//只返回了第一个匹配的元素
$(".box2").html("<strong>我发生改变了</strong>")//所有匹配的元素内容都发生了改变，而且hmlt标记有效。
console.log($(".box3").text());//所有匹配的元素都返回了，而且html标记删除了
$(".box3").text("<strong>我也发生改变了</strong>")//所有匹配的元素内容发生了改变，但是html标记都被编码了。
</script>
</body>
</html>
运行结果
3.$.extend 的作用和用法?
- 作用：将两个或更多对象的内容合并到第一个对象
- 用法：
1.jQuery.extend( target [, object1 ] [, objectN ] )
当我们提供两个或多个对象给$.extend()时，对象的所有属性都添加到目标对象（target参数）。
如果目标对象（target参数）的某个属性在附加对象（ [, object1 ] [, objectN ] ）中没有，那么这个属性会在合并后保留。反之，如果附加对象中的某个属性在目标对象中没有，这个属性在合并后也会保留。
如果目标对象的某个属性在附加对象中有，那么这个属性的值会被附加对象的值覆盖。
举例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
name : "Ben",
age : 20,
body:{heigh:178,weight:60}//body的值会被覆盖
};
var object2 = {
body: {weight:70},
sex:"man"
};
$.extend( object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
</body>
</html>
运行结果
2.jQuery.extend(true，target [, object1 ] [, objectN ] )
这个用法多了一个参数true，它会使合并成为递归，也就是深拷贝。
与上面的用法不同处在于如果目标对象的某个属性在附加对象中有，那么这个属性的值会发生合并。
举例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
name : "Ben",
age : 20,
body:{heigh:178,weight:60}//body的值会发生合并
};
var object2 = {
body: {weight:70},
sex:"man"
};
$.extend(true, object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
</body>
</html>
运行结果
3 .jQuery.extend({}， [, object1 ] [, objectN ] )
目标对象为{}，这种用法是合并多个对象，但是不改变这些对象。这是常用的插件开发模式。
举例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
name : "Ben",
age : 20,
body:{heigh:178,weight:60}
};
var object2 = {
body: {
weight:70
},
sex:"man"
};
var object3 = $.extend({}，object1,object2);
$( "#log" ).append( "<div>"+JSON.stringify( object1 )+"</div>" );
$( "#log" ).append( "<div>"+JSON.stringify( object2 )+"</div>" );
$( "#log" ).append( "<div>"+JSON.stringify( object3 )+"</div>" );
</script>
</body>
</html>
运行结果
4.JQuery 的链式调用是什么？
jQuery的链式调用就是指对一个对象连续的使用jQuery方法，例如：
$(this).removerClass("mouseout").addClass("mouseover").next().show()
这么做的好处是让代码更加简洁易读，减少重复性代码，提高性能。
其中的原理是执行完一个方法后就返回对象本身（return this），然后对象继续执行后面的方法。
5.JQuery ajax 中缓存怎样控制?
jQuery ajax方法中是利用cache参数来控制缓存。
设置为true将缓存页面（默认为ture， dataType为"script"和"jsonp"时默认为false。），如果设置为false，浏览器将不会缓存页面。
其工作原理是在GET请求参数中附加“={timestamp}”时间戳，使请求的链接每次都不同。
6.jquery 中 data 函数的作用？
用法：
1.data(key ,value),在匹配元素上存储任意相关数据。
举例：
$("body").data("foo",52);
$("body").data("bar",{myType:"test",count:40});
$("body").data({baz:[1,2,3]});
console.log($("body").data("foo"));
console.log($("body").data());
运行结果
2.
.data(key)，返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。举例：
console.log($("body").data("foo"));//如果指定元素上没有设置任何值，将返回undefined。
$("body").data("bar","foobar");
console.log($("body").data("bar"));
运行结果
代码：
代码1地址
代码1预览
代码2地址
代码2预览
代码3地址
代码3预览
代码3本地预览效果：
GIF.gif
本文版权归本人和饥人谷所有，转载请注明来源。
网友评论