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缓存
     });
});

参考如何禁用jquery 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>

结果：

本文版权归本人和饥人谷所有，转载请注明出处