jquery 常用方法

1Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？

$(document).ready()方法，可实现在DOM结构加载完毕后，调用某个函数，而不必等待页面中的图像加载完毕。 JS代码中可编写多个，而且都能被执行。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码,如果在文档没有完全加载之前就运行函数，操作可能失败。作用相当于我们把js写到body的末尾。

$(document).ready(function(){
todo....
})
简写形式：
$(function(){
todo...
})

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。不能同时编写多个，如果有多个window.onload方法，只会执行一个。

---

2.$node.html()和$node.text()的区别?

$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

<div id="container">
  aaa
  <span class="ct1">bbbccc</span>
  <span class="ct2">dddeee</span>
  </div>
$("#container").html()
//返回内容aaa

<div id="container">
  aaa
  <span class="ct1">bbbccc</span>
  <span class="ct2">dddeee</span>
  </div>
$("#container").text()
//返回内容
//aaa
//bbbccc
//dddeee

---

3.$.extend 的作用和用法?

jQuery.extend(target[,object1],[objectN]); //合并两个对象[object1],[objectN]，并修改第一个对象target。
jQuery.extend([deep],target,[object1],[objectN]); //采用递归方式(true)合并两个对象[object1],[objectN]，并修改第一个对象target。
情况一：
target：Object;一个对象，如果有额外的对象传入，那么它将接受新的属性；如果它是唯一的参数，将扩展jQuery的命名空间。
Object1:Object;一个对象，它包含额外的属性，将合并到target中。
ObjectN：Object;额外的对象，它包含额外的属性，将合并到target中。
情况二：
deep:Boolean;如果是true，那么该合并是递归的(又叫做深拷贝).在默认情况下，通过$.extend()的合并操作不是递归的。
target:Object;被扩展的对象，它将接受新的属性。
Object1:Object;同情况一。
ObjectN:Object;同情况一。
当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。如果只有一个参数提供给$.extend()，这意味着后续目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象，将扩展jQuery的命名空间。如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);
var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};
$.extend(object1, object2);//返回结果（同名覆盖，不同名的添加）：
{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
$.extend(true, object1, object2);//返回结果（ture递归合并,深拷贝，相同的部分会被替换，不同的部分添加）
{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

---

4.JQuery 的链式调用是什么？

使用jquery的方法时，对象上的方法返回的是对象本身，因此能接着使用本对象的其他jQuery方法，这就是链式调用。链式调用可提高代码效率，代码更优雅。 例如：
作用链写法：$div2.slideDown(1000).fadeOut(1000)//先滑入，然后淡出
作用链写法：

$div3.animate({width:'150',height:'150px'})
.animate({left:'200px'})
.animate({top:'200px'})
.animate({left:'0px'})
.animate({top:'0px'})
.animate({width:'80px',height:'80px'})//可将多个动画效果连接起来依次执行

---

5.JQuery ajax 中缓存怎样控制?

jquery中调用ajax封装函数时，传入参数中的cache可控制缓存。cache（默认为true）：如果设置为 false ，浏览器将不缓存此页面。注意: 只有当使用GET方法时，设置cache为false是有用的，设置cache为 false将在 HEAD和GET请求中正常工作，相当于在GET请求参数中附加"_={timestamp}"，这样每次发起请求都会加上不同时间戳形成新的请求并由后台响应，不会从本地缓存中查找。而当使用POST方法时，则每次都会被认为是新的请求，不会缓存页面。

---

6.jquery 中 data 函数的作用?

可以向元素附加数据,以 .data(key,value)或.data(obj) 的形式
也可以从元素上读取数据,以.data(key)或者.data()的形式。

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ) ; //52
$("body").data("bar");      //{myType: "test", count: 40}
$("body").data("baz");      //[1,2,3]
$( "body" ).data();         // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first   //返回结果16
$("div").data("test").last)  //返回结果pizza!

---

7.常用功能jquery方法

预览地址
代码地址

---

8.常用操作jquery实现

预览地址
代码地址

---

9.加载更多jquery实现（server mock数据）

预览地址
代码地址

本文版权归本人和饥人谷所有，转载请注明来源。