Jquery常用方法

问答

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

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

$(document).ready(function(){
  //you code here
})
//第二种写法
$().ready(function(){
  //you code here...
})
//简写版:
$(function(){
  //you code here..
})

• 和window.onload的区别在于，
  • ($document).ready()只需要等待DOM结构加载完毕就能执行，而window.onload需要等到页面全部加载完成之后才执行,onload的意思是表示页面包括的图片等所有其他文件都加载完成
  • window.onload不能同时编写多个，默认会执行最后一个,而($document).ready()可编写多个

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

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

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

• $.extend()函数的作用就是一个或多个对象的内容合并到目标对象上

$.extend(target[,object1],[objectN])

demo:

var obj1 = {name:"xiaoming",age:10};
var obj2 = {sex:"nan"};
$.extend(obj1,obj2);
console.log(obj1) // {name:"xiaoming",age:10,sex:"nan"};
console.log(obj2) //{sex:"nan"};

• 假如第一参数是true,$.extend()具有深拷贝的作用

var obj1 = {name:"xiaoming",age:10};
var obj2 = {hobby:{sport:"basketball",music:"abc"},sex:"nan";}
$.extend(true,obj1,obj2);
console.log(obj1) //{name:"xiaoming",age:10,hobby:{music:"hello",sport: "basketball"}}
console.log(obj2)

• 通常的用法是，我们不希望改变原有的对象，因此可以增添一个新对象进行合并

var obj1 = {name:"xiaoming",age:10};
var obj2 = {sex:"nan"}
var newObj = $.extend({},obj1,obj2);

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

• jquery的链式调用就是在一个方法接上另外一个方法，在一行代码中进行多项的操作,简单说就是同一个选取对象连续使用多个JQuery的方法
  demo:

$(this).css({'background':'red'}).hide().show()

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

• 如果没有进行额外设置的话，如果请求的地址和参数及参数的值完全一样，就会发生jquery ajax使用缓存的情况。不过，假如使用的是POST方法，那么每次都会是请求新页面，不会利用缓存。
• 因此，我们可以让每次的URL不一样来取消缓存，例如

$.ajax({
    url:"abc.php?"+new Date()//可以是随机数Math.random()
})

或者让cache设置成false

$.ajax({
  url:"abc.php"
  cache:false
)};

6. jquery 中 data 函数的作用

可以理解为在匹配元素中储存数据，可以用于数据的拷贝，你想用的时候就可以拿出来，写法是.data(key,value)
demo:

$('body').data('name','huo')
$('body').data('name') //得出huo

$( "body" ).data("obj", {name: "huo", age: 40});
$("body").data("obj"); //{name: "huo", age: 40}

还可以这样写:

$.body(obj,'name','huo') 
//第一个参数为绑定的对象，第二个参数为key，第三个对象为的value

代码：

代码1
代码2
代码3
本地xampp成功

begin.png after.png