一:each
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> /* 原生的forEach方法只能遍历数组,不能遍历伪数组 第一个参数:遍历到的元素 第二个参数:当前遍历到的索引 */ var arr=[1,3,5,7,9]; var obj={0:1,1:3,2:5,3:7,4:9, length:5}//伪数组 arr.forEach(function(value,index){ console.log(index,value); }) /* obj.forEach(function(value,index){ console.log(index,value); }) */ //利用jQuery的each静态方法遍历数组 /* 第一个参数:当前遍历到的索引 第二个参数:遍历到的元素 注意点: jQuery的each方法是可以遍历伪数组的 */ $.each(arr,function(index,value){ console.log(index,value); }) $.each(obj,function(index,value){ console.log(index,value); }) </script> </head> <body> </body> </html>
二:map
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> var arr = [1, 3, 5, 7, 9]; var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 } //伪数组 //利用原生JS的map遍历方法 /* 第一个参数:当前遍历到的元素 第二个参数:当前遍历到的索引 第三个参数:当前遍历到的数组 注意点:和原生的forEach一样,不能遍历伪数组 */ arr.map(function (value, index, arr) { console.log(index, value, arr); }); /* obj.map(function(value,index,arr){ console.log(index,value,arr); });*/ // jQuery的map方法 /* 第一个参数:要遍历的数组 第二个参数:每遍历一个元素之后执行的回调函数 回调函数的参数: 第一个参数:遍历到的元素 第二个参数:遍历到的索引 和jQuery中的each静态方法一样,map静态方法也可以遍历伪数组 */ $.map(arr,function(value,index){ console.log(index,value); }); $.map(obj,function(value,index){ console.log(index,value); }); </script> </head> <body> </body> </html>
三:each和map方法的区别
区别一:
each静态方法默认的返回值就是,遍历谁就返回谁
map静态方法默认的返回值是一个空数组
区别二:
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理,然后生成一个新的数组返回
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> var arr = [1, 3, 5, 7, 9]; var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 } //伪数组 var res= $.map(obj,function(value,index){ console.log(index,value); return value+index;//1,4,7...相加 }); var res2= $.each(obj,function(index,value){ console.log(index,value); return value+index; }); console.log(res); console.log(res2); </script> </head> <body> </body> </html>
四:trim方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> /* $.trim(); 作用:去除字符串两端的空格 参数:需要去除空格的字符串 返回值:去除空格之后的字符串 */ var str=" trim ";//使用$核心函数才需要在声明的时候加$前缀吧... console.log('---'+str+'---'); var res=$.trim(str); console.log('---'+res+'---'); </script> </head> <body> </body> </html>
五:isWindow()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> /* $isWindow() 作用:判断传入的对象是否是window对象 返回值:true/flase */ //真数组 var arr = [1, 3, 5, 7, 9]; //伪数组 var arrlike = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 } //对象 var obj={name:'xzx',age:21}; //函数 var fn=function(){}; //window var w=window; var res=$.isWindow(w); console.log(res); </script> </head> <body> </body> </html>
六:isArray()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> /* $isArray() 作用:判断传入的对象是否是真数组 返回值:true/flase */ //真数组 var arr = [1, 3, 5, 7, 9]; //伪数组 var arrlike = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 } //对象 var obj={name:'xzx',age:21}; //函数 var fn=function(){}; //window var w=window; var res=$.isArray(arr); console.log(res); </script> </head> <body> </body> </html>
七:isFunction()
注意:jQuery框架本质上是一个函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> /* $isFunction() 作用:判断传入的对象是否是一个函数 返回值:true/flase */ //真数组 var arr = [1, 3, 5, 7, 9]; //伪数组 var arrlike = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 } //对象 var obj={name:'xzx',age:21}; //函数 var fn=function(){}; //window var w=window; var res=$.isFunction(fn); console.log(res); </script> </head> <body> </body> </html>
注意:jQuery框架本质上是一个函数(匿名函数)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> /* $isFunction() 作用:判断传入的对象是否是一个函数 返回值:true/flase */ //真数组 var arr = [1, 3, 5, 7, 9]; //伪数组 var arrlike = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 } //对象 var obj={name:'xzx',age:21}; //函数 var fn=function(){}; //window var w=window; var res=$.isFunction(jQuery); console.log(res); </script> </head> <body> </body> </html>
八:holdReady()
要等别的框架插件图片执行完再执行入口函数
作用:暂停入口函数的执行,所有事加载完毕后,也不执行,当其他事做完后,再恢复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> $.holdReady(true);//暂停 $(document).ready(function(){ alert('ready'); }) </script> </head> <body> <button>回复ready事件</button> <script> onclick=function(){ $.holdReady(false);//恢复 } </script> </body> </html>