前端系列 |原生JS和jQuery循环遍历函数
前言
之前总是不清楚原生JS和jQuery中有哪些循环遍历函数,而且有时候还总是把原生JS方法当成jQuery方法来用,以致于项目总是报错,并且还不知道是什么原因。所以,觉得有必要总结出来,区分一下。
DOM对象和jQuery对象如何互相转换?
首先,先说一下DOM对象和jQuery对象如何转换?这样原生JS和jQuery的方法,我们就可以随意使用了。
1.DOM对象—> jQuery对象
只要给DOM元素外加() 就可以了,如 (document.getElementById("dv")) 。
2.jQuery对象—>DOM对象
有两种方法:
(1)jQuery对象[0],如$(“.cls”)[0];
(2)jQuery对象.get(0),如$(“.cls”).get(0)。
原生JS循环遍历函数
1.for()
for循环得知道数组的长度才能循环。它比较常用,这里就不多说了。
2.forEach ()
不需要知道数组长度,也可以对数组中每一个元素进行操作。
var arr = ["a","b","c"];
arr.forEach(function (t,m,n) {
console.log(t); //数组中的元素
console.log(m); //索引
console.log(n); //整个数组
})
运行结果如图所示:
3.every()
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。 every() 方法使用指定函数检测数组中的所有元素: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。 如果所有元素都满足条件,则返回 true。
var arr1 = [2,4,6,1];
var arr2 = [3,6,2,8];
function compare(m) {
return m> 4;
}
console.log(arr1.every(compare)); //结果为:true
console.log(arr2.every(compare)); //结果为:false
4.some()
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。 some() 方法会依次执行数组的每个元素: 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素,则返回false。 注意:some() 不会对空数组进行检测。
var arr = [2,4,6,1];
function compare(m) {
return m> 3;
}
console.log(arr.some(compare)); //结果为:true
5.map()
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 注意:map() 不会对空数组进行检测。 注意:map() 不会改变原始数组。
var arr = [2,4,6,1];
function calculator(m) {
return m+2;
}
console.log(arr.map(calculator)); //结果为:[4,6,8,3]
6.filter()
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意:filter() 不会对空数组进行检测。 注意:filter() 不会改变原始数组。
var arr = [2,4,6,1];
function filterNum(m) {
return m>2;
}
console.log(arr.filter(filterNum)); //结果为:[4,6]
7.for(var x in arr/obj)
for in 既可以循环遍历数组,也可以循环遍历对象
(1)遍历数组
var arr = [2,4,6,1];
for(var x in arr){
console.log(x); //数组索引 结果为:0,1,2,3
console.log(arr[x]); //数组索引相对应的元素 结果为:2,4,6,1
}
(2)遍历对象
var obj = {
name: "Tom",
age: 12,
gender: "Male"
}
for(var m in obj){
console.log(m); //获取属性
console.log(obj[m]); //获取属性值
}
结果如图所示:
jQuery循环遍历函数
1.each()
var arr = ["x","y","z"];
$(arr).each(function (index,item) {
console.log(index); //当前元素索引
console.log(item); //当前元素
})
2.map()
用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。
var arr = ["x","y","z"];
var arr1 = $.map(arr,function (t,i) {
return t+i;
})
console.log(arr1); //结果为:["x0", "y1", "z2"]
3.grep()
使用指定的函数过滤数组中的元素,并返回过滤后的数组。 提示:源数组不会受到影响,过滤结果只反映在返回的结果数组中。
var arr = ["x","y","z"];
var arr1 = $.grep(arr,function (t,i) {
return i>1; //返回索引值大于1的值
})
console.log(arr1); //结果为:["z"]
4.inArray()
函数用于在数组中查找指定值,并返回它的索引值(如果没有找到,则返回-1) 提示:源数组不会受到影响,过滤结果只反映在返回的结果数组中。
var arr = ["x","y","z"];
var arr1 = $.inArray("y",arr);
var arr2 = $.inArray("n",arr);
console.log(arr1); //结果为:1
console.log(arr2); //结果为:-1
5.filter()
返回符合一定条件的元素。 该方法让您规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回。 该方法通常用于缩小在被选元素组合中搜索元素的范围。
var result = $("div").filter(".cls"); //返回类名是cls的div元素
console.log(result); //结果为:类名为cls的div元素
- 我的职业是前端工程师【七】:你真的懂前后端分离吗?
- 使用了 Google AMP 网站加速技术后,我的博客快了八倍
- 前端程序员必知:单页面应用的核心
- b这样去设计 URL,可以提高网站的访问量
- 程序员必知之SEO
- 进程监控工具supervisor 启动Mongodb
- 祭奠那些年,我弃坑的开源轮子
- 这些奇技浮巧,助你优化前端应用性能
- Stepping.js——两步完成前后端分离架构设计
- 我的职业是前端工程师【十】客户端存储艺术:数据存储与模型
- 【开源】2md:将复制的内容、网页转成 markdown
- React Native 持续部署实践— push 代码构建出新版的 Growth
- 技巧 - 如何好一个 Git 提交信息及几种不同的规范
- React、Vue、Ember 及其他前端开发者,请暂缓更新到 Chrome 59 浏览器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python 实现语音聊天机器人的示例代码
- Linux应用程序使用写文件调试程序的方法
- python3学生名片管理v2.0版
- 移植新内核到Linux系统上的操作步骤
- PHP实现简单的协程任务调度demo示例
- YII2.0框架行为(Behavior)深入详解
- php数组函数array_push()、array_pop()及array_shift()简单用法示例
- PHP+MySQL+sphinx+scws实现全文检索功能详解
- php封装的page分页类完整实例代码
- Thinkphp自定义生成缩略图尺寸的方法
- Yii框架中使用PHPExcel的方法分析
- 详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
- Laravel框架自定义分页样式操作示例
- 使用composer 安装 laravel框架的方法图文详解
- laravel5.6 框架操作数据 Eloquent ORM用法示例