jquery对比js

入口函数

加载模式不同

• 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才执行
• jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
  测试代码（实例）

/*
window.onload = function(ev){
// 1.通过原生JS入口函数可以拿到DOM元素
var img = document.getElementsByTagName('img')[0];
console.log(img)
// 2.通过原生JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(img).width;
console.log('onload',width)
}
*/
/*
* 原生JS和jQuery入口函数的加载模式不同
* 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才执行
* jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
*/

$(document).ready(function(){
// 1.通过jQuery入口函数可以拿到DOM元素
var $img = $('img');
console.log($img)
// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
var $width = $img.width();
console.log('ready',$width)
})

• 原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
• jQuery中编写多个入口函数，后面的不会覆盖前面的
  测试代码

/*
window.onload = function(ev){
alert('测试1');
}
window.onload = function(ev){
alert('测试2');
}
*/

$(document).ready(function(){
alert('测试1');
})
$(document).ready(function(){
alert('测试2');
})

静态方法each方法

• 原生的forEach方法只能遍历数组，不能遍历伪数组
• jQuery的each方法是可以遍历伪数组的

/*
第一个参数：遍历到的元素
第二个参数：当前遍历到的索引
*/
var arr = [0,1,2,3,4,5];
var obj = {0:1,1:2,2:3,length:3};

/*
arr.forEach(function(value,index){
console.log(index,value);
})

obj.forEach(function(value,index){
console.log(index,value)
})
*/

//利用jQuery的each静态方法遍历数组

/*
$.each(arr,function(index,value){
console.log(index,value);

})
*/

$.each(obj,function(index,value){
console.log(index,value);

})

静态方法map方法

• 和原生的forEach方法一样只能遍历数组，不能遍历伪数组
• 和原生的forEach方法一样只能遍历数组，不能遍历伪数组

测试代码

var arr = [0,1,2,3,4,5];
var obj = {0:1,1:2,2:3,length:3};
// 利用原生JS的map方法遍历

/*
第一个参数：当前遍历到的元素
第二个参数：当前遍历到的索引
第三个参数：当前被遍历的数组
*/

/*
arr.map(function(value,index,array){
console.log(index,value,array);
})

obj.forEach(function(value,index,array){
console.log(index,value,array)
})
*/

//利用jQuery的each静态方法遍历数组
/*
第二个参数 - 每遍历一个元素之后执行的回调函数
回调函数的参数
第一个参数 - 遍历到的元素
第二个元素 - 遍历到的索引
*/

/*
$.map(arr,function(value,index){
console.log(index,value);

})
*/

var text = $.map(obj,function(value,index){
console.log(index,value);
return value + index;

})

var text2 = $.each(obj,function(index,value){
console.log(index,value);
return value + index;

})
console.log(text)
console.log(text2)

jQuery中的each静态方法和map静态方法的区别

• each静态方法默认的返回值就是遍历谁就返回谁
• map静态方法默认的返回值是一个空数组
• each方法不支持在回调函数中对遍历的数组进行处理
• each方法不支持在回调函数中对遍历的数组进行处理
  测试代码

var text = $.map(obj,function(value,index){
console.log(index,value);
return value + index;

})

var text2 = $.each(obj,function(index,value){
console.log(index,value);
return value + index;

})
console.log(text)
console.log(text2)