问答
一、Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
1.$(document).ready()意思是等页面中的DOM元素加载完毕后再执行jQuery代码。
- window.onload是等待DOM及其他元素（如图片，css，引用文件）也就是页面的所有元素加载完成后执行代码。只能执行一个，如果有多个，就执行最后一个。
- $(document).ready()只需要在页面中所有的DOM结构绘制完毕后就执行。并且能同时编写多个，根据编写顺序依次执行
3.$(document).ready()可以简写成：$(function(){});
二、$node.html()和$node.text()的区别?
1.$node.html()
$node.html()
不传入值,就是获取集合中第一个匹配元素的HTML内容。
$node.html(htmlString)
设置每一个匹配元素的html内容。
$node.html(function(index,oldhtml))
用来返回设置HTML内容的一个函数。
2.$node.text()
$node.text()
得到匹配元素集合中每个元素的合并文本,包括他们的后代。
$node.text(textString)
用于设置匹配元素内容的文本。
$node.text(function(index,text))
用来返回设置文本内容的一个函数。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="box1">
<p>这是一个段落<span>嘿嘿嘿</span></p>
</div>
<div id="box2">
<p>这是一个段落<span>嘿嘿嘿</span></p>
</div>
<div id="box3">
<p>这是一个段落<span>嘿嘿嘿</span></p>
</div>
<div id="box4">
<p>这是一个段落<span>嘿嘿嘿</span></p>
</div>
<script>
console.log($("#box1").html());
console.log($("#box2").html("<h1>我是一个大标题</h1>"));
console.log($("#box3").text());
console.log($("#box4").text("我是替换的新文本内容"));
</script>
</body>
</html>
输出结果
三、$.extend 的作用和用法?
1.作用：将一个或多个对象的属性添加给目标对象。
2.用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="box"></div>
<script>
var obj1={
name: "张三",
age: 25,
height: 180,
address: {
city: "杭州"
}
}
var obj2={
name: "李四",
sex: "男",
address: {
street: "jichang"
}
}
</script>
</body>
</html>
- 第一个参数作为目标对象，后面的对象参数的属性会添加到目标对象中。如果只有一个参数，那么jQuery对象本身将被作为目标对象。可以通过这种方法向jQuery的命名空间添加新的功能。
示例
- 如果第一个参数是true,那么合并的多个对象内部的对象参数就不会产生合并的现象,全部都会展示出来。
示例
- 作为目标对象的第一个参数会被修改，如果想要保留目标对象原先的值，可以将第一个参数设置为空对象。
示例
四、JQuery 的链式调用是什么？
jQuery的链式调用是指对一个对象连续的使用jQuery方法。
$(this).removeClass("mouseout").addClass("mouseover").next().show()
这么做的好处是让代码更加简洁易读，减少代码的重复性，提高代码的可读性。其中的原理是执行完一个方法后就返回对象本身(return this)，然后对象继续执行后面的方法。
五、JQuery ajax 中缓存怎样控制?
jQuery ajax方法中是利用cache参数来控制缓存的。
设置为true将缓存页面（默认为true，dataType为“script”和“jsonp”时默认为false）。如果设置为false，浏览器将不会缓存页面。
其工作原理是在GET请求参数中附加“={timestamp}”时间戳，使请求的链接每次都不同。
六、jquery 中 data 函数的作用
1.data([key],[value])作用：在元素上存放数据,返回jQuery对象。
2.参数:key:存储的数据名;value:将要存储的任意数据。
3.代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script>
console.log($("#box1").data("blah")); //undefined
$("#box1").data("blah","hello"); //设置blah为hello
console.log($("#box1").data("blah")); //hello
$("#box1").removeData("blah"); //移除blah设置的值
console.log($("#box1").data("blah")); //undefined
$("#box2").data("test",{first:16,last:"pizza"}); //给存储名为test的对象存储内容{first:16,last:"pizza"}
console.log($("#box2").data("test").first); //16
console.log($("#box2").data("test").last); //pizza
console.log($("#box2").data("test")); //{first: 16, last: "pizza"}
$("#box2").removeData("test"); //移除test设置的内容
console.log($("#box2").data("test")); //undefined
</script>
</body>
</html>
网友评论