jquery 常用方法&ajax
1.Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
$(document).ready()是当文档中的DOM节点加载完成后，在加载外部图片和资源前，执行ready()里面的操作。
window.onload是整个页面加载完成（包括图片、CSS、脚本等）后，执行onload()中的操作。
还有$(window).load()方法和window.onload类似。
举例：
<html>
<head>
<meta charset="utf-8">
<title>输出</title>
<style>
iframe {
width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
});
$( window ).load(function() {
console.log( "window loaded" );
});
document.onload=function() {
console.log( "window loaded" );
};
window.onload=function() {
console.log( "window loaded" );
};
</script>
</head>
<body>
<iframe src="http://www.sogou.com"></iframe>
</body>
</html>
结果：
运行上述代码时，控制台document loaded先显示，等到搜狗页面加载完后，window loaded才显示。
2.$node.html()和$node.text()的区别?
$node.html()获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的HTML内容。()没有参数时，获取node的HTML内容。(htmlstring)括号中有内容时，设置node的HTML内容。
而$node.text()得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。()没有参数时，得到匹配元素集合中每个元素的合并文本，包括他们的后代。(htmlstring)括号中有内容时，设置node的文本内容。
可以举个例子：
HTML部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作</title>
</head>
<body>
<div>
<p>这是<b>段落一</b></p>
<p>这是<b>段落二</b></p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
</script>
</body>
</html>
3.$.extend 的作用和用法?
$.extend也是jQuery.extend将两个或更多对象的内容合并到第一个对象。
写法：
jQuery.extend( [deep ], target, object1 [, objectN ] )
[deep]可选。类型: Boolean。如果是true，合并成为递归（又叫做深拷贝）。不能设置成false。
target对象扩展。将接收新的属性。可以写成{}。
object1合并到新的属性的第一个参数。
[,objectN]可选。合并到新的属性的第N个参数。
主要有以下三种用法:
1.合并两个对象，并修改第一个对象。
代码：
<html>
<head>
<meta charset="utf-8">
<title>jQuery.extend()</title>
</head>
<body>
<div id="log"></div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
</body>
</html>
结果：
可以看到，object1和object2重复的属性被object2的属性值修改了。object1没有而object2有的属性也被添加到了object1。object1有而object2没有的属性还存在且没有改变。
2.采用递归方式合并两个对象，并修改第一个对象。
把
$.extend( object1, object2 );
改为
$.extend( true, object1, object2 );
则结果变为：
object1的banana属性并没有被object2的banana属性完全覆盖，深层的属性的修改也和上例类似。
3.合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。
<html>
<head>
<meta charset="utf-8">
<title>jQuery.extend() 3</title>
</head>
<body>
<div id="log"></div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar","limit":10 };
// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
</script>
</body>
</html>
结果：
4.JQuery 的链式调用是什么？
链式调用就是分步骤地对jQuery对象实现各种操作。
对上述代码可以进行如下操作：
相当于先把加粗文字字体颜色变成红色，再隐藏这些文字，然后显示，最后把加粗文字改为其它文字。
它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。
优点：
1.代码更精简。链式调用能大大精简代码量，多项操作一行代码一气呵成，搞定；
2.优化性能。使用链式调用，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。
5.JQuery ajax 中缓存怎样控制?
如果没有进行额外设置的话，如果请求的地址和参数及参数的值完全一样，就会发生jquery ajax使用缓存的情况。
jquery ajax禁用缓存的解决方案：
1.在请求的url后面加上一个随机参数（***.do?random=Math.random）这不失为一个好方法，缺点就是在所有的jquery ajax请求的地方都要加上这个随机参数，新项目还行，老项目的话，这是个巨大的工作量。
2.给jquery ajax请求设置禁用缓存的全局设置
我们都知道在jquery ajax的的方法中有个cache参数，如果设置为false，那么就不进行缓存。用ajaxSetup() 方法，该方法可以为所有的ajax请求统一设置默认参数。那么可以设置如下代码：
$(function(){
$.ajaxSetup ({
cache: false //关闭AJAX缓存
});
});
6.jquery 中 data 函数的作用
.data( key, value )在匹配元素上存储任意相关的数据。
key存储的数据的名称。
value数据的值。除了undefined都可以。
.data( obj )更新数据。
举例：
可以看出，
.data()可以用于数据的拷贝。还可以改变页面内容。
代码：
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
</body>
</html>
结果：
本文版权归本人和饥人谷所有，转载请注明出处
