jQuery常用方法及ajax-Assignment

2016-09-04  本文已影响64人  犯迷糊的小羊

问答篇

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

$(document).ready(function(){
  // to do ...
})
是放置文档在完全加载之前运行就运行代码,这样有可能导致部分操作失败;

其简写方法为:
$(function(){
  //to do ...
})
$(document).ready()与window.onload = function(){
    //to do ... 
}的区别在于:

1.$(document).ready()表示DOM加载完成后就可以对DOM进行操作;

2.window.onload则表示在document文档加载完成后就可以对DOM进行操作,包含加载完图片信息;

例如:
Dom Ready是在dom加载完成后就可以直接对dom进行操作,
比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等; 
Dom Load是在整个document文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作,
比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等; 

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

$node.html():设置或返回所选元素的内容(包括HTML标记);

$node.text():设置或返回所选元素的文本内容;

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

$.extend()的语法为:
$.extend(dest,src1,src2,...),它的作用是将src1,src2,...合并到dest1,返回值为合并后的dest
eg:
var result = $.extend({},{name:'teren',age:18},{race:'Chinese',color:'yellow'})
console.log(result)
//Object {name: "teren", age: 18, race: "Chinese", color: "yellow"}
如果后面的src与前面的src同名,后面的会覆盖前面的;
eg:
var result = $.extend({},{name:'teren',age:18},{age:20})
console.log(result)
//Object {name: "teren", age: 20}

如果没有dest的话,该方法将src合并到jQuery的全局对象中去;
$.extend({
  hello:function(){
    console.log(this)
  }
})
console.dir($)
$.fn.extend(src)将src合并到jQuery的实例对象中去;
$.fn.extend({
  hello:function(){
    console.log('hello world')
  }
})
var $div = $('div')
$div.hello()
console.dir($div)
$.extend()的深拷贝
extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝;

var result=$.extend( true, {},{ name: "John", location: {city: "Boston",county:"USA"} },{ last: "Resig", location: {state: "MA",county:"China"} } ); 
合并后的结果就是: 
result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}

如果为false:
var result=$.extend( false, {},{ name: "John", location:{city: "Boston",county:"USA"} },{ last: "Resig", location: {state: "MA",county:"China"} }); 

合并后的结果就是:
 result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

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

当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法,这样就形成一种链式调用;

$(selector).addClass('error').removeClass('success')

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

jQuery的ajax方法存在一个cache属性;
默认值: true,dataType 为 script 和 jsonp 时默认为 false;
设置为 false 将不缓存此页面。

6.jquery 中 data 函数的作用

jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险;
eg:
  <div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
//The values stored were 18 and pizza!

var $div = $('div')[0];
jQuery.data($div,'test',{first:18,last:'pizza!'});
$('span:first').text(jQuery.data($div,'test').first);
$('span:last').text(jQuery.data($div,'test').last)

代码篇

sinaCloud

上一篇 下一篇

猜你喜欢

热点阅读