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)