一：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>
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
