1. <!DOCTYPE html><html>
    
    <head>
    
        <title>TODO supply a title</title>
    
        <meta charset="UTF-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <style type="text/css">
    
            div{background-color:red;margin:10px;}
    
        </style>
    
    </head>
    
    <body>
    
        <div class="w50" style="width:50px;height:20px"></div>
    
        <div class="w20" style="width:20px;height:20px"></div>
    
        <div class="w30" id="test" style="width:30px;height:20px"></div>
    
        <div class="w40" style="width:40px;height:20px"></div>
    
        <div class="w10" style="width:10px;height:20px"></div>
    
    </body>
    
</html>
    var arrPro = Array.prototype;
    
var core_filter = arrPro.filter;
    
var core_indexOf = arrPro.indexOf;
    
var core_slide = arrPro.slice;
    
var core_sort = arrPro.sort;
    
var core_map  = arrPro.map;

//当然 为了兼容，应该有toArray方法，对不支持slice.call(nodeList)的浏览器，使用循环
    
var divArr = core_slide.call(document.getElementsByTagName('div'));

console.log('筛选出所有宽度小于等于30px的div',core_filter.call(divArr,function(item,index){
    
    return parseInt(item.style.width,10) <= 30;
    
}));
    
console.log('获取#test元素的索引',core_indexOf.call(divArr,document.getElementById('test')));
    
console.log('按照宽度倒叙排序',core_sort.call(divArr,function(a,b){
    
    return parseInt(a.style.width,10) < parseInt(b.style.width,10);
    
}));
    
//将所有div背景色改为黑色
    
core_map.call(divArr,function(item){
    
    item.style.backgroundColor = 'black';
    
});

    firebug截图：

利用Array Prototype的方法来实现对dom集合的筛选、indexOf、map等功能的更多相关文章

  1. 利用Object.prototype.toString方法，实现比typeof更准确的type校验

    Object.prototype.toString方法返回对象的类型字符串,因此可以用来判断一个值的类型. 调用方法: Object.prototype.toString.call(value) 不同 ...

  2. 利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理

    在我们开发Web API应用的时候,我们可以借鉴ABP框架的过滤器Filter和特性Attribute的应用,实现对Web API返回结果的封装和统一异常处理,本篇随笔介绍利用AuthorizeAtt ...

  3. 数组的方法之(Array.prototype.forEach() 方法)

    forEach() 方法对数组的每个元素执行一次提供的函数. 注意: 没有返回一个新数组 并且 没有返回值! 应用场景:为一些相同的元素,绑定事件处理器! const arr = ['a', 'b', ...

  4. 数组Array和字符串String的indexOf方法，以及ES7(ES2016)中新增的Array.prototype.includes方法

    前言 我们在判断某一个字符是否存在于一个字符串中或者某一个值是否存在于一个数组中时,ES7之前我们需要使用indexOf,ES7引入了新的方法includes 语法 数组:Array.inexOf(s ...

  5. 数组的方法之(Array.prototype.reduce() 方法)

    reduce函数 reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值. 对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次 ...

  6. 数组的方法之(Array.prototype.filter() 方法)

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.     注意: filter() 不会对空数组进行检测.     注意: filter() 不会改变原始 ...

  7. 利用 Java 操作 Jenkins API 实现对 Jenkins 的控制详解

    本文转载自利用 Java 操作 Jenkins API 实现对 Jenkins 的控制详解 导语 由于最近工作需要利用 Jenkins 远程 API 操作 Jenkins 来完成一些列操作,就抽空研究 ...

  8. Array.prototype.sort()对数组对象排序的方法

    Array.prototype.sort()方法接受一个参数——Function,Function会提供两个参数,分别是两个进行比较的元素,如果元素是String类型则通过Unicode code进行 ...

  9. JavaScript中的Array.prototype.slice.call()方法学习

    JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意: 这个对象一定要有length属性). 但有一个例外 ...

随机推荐

  1. 无法连接 Plugins Market 失效的日子

    一.问题背景 不知道是什么原因,我的 Intellij 连接不上 Plugins Market,这时候我需要使用 @Data 注解来自动生成 Getter.Setter 方法.在添加了相应的依赖之后, ...

  2. TCP协议数据包及攻击分析

    TCP/IP协议栈中一些报文的含义和作用 URG: Urget pointer is valid (紧急指针字段值有效) SYN: 表示建立连接 FIN: 表示关闭连接 ACK: 表示响应 PSH: ...

  3. du命令详解

    基础命令学习目录首页 原文链接:https://blog.csdn.net/linuxnews/article/details/51207738 导读du命令是检查硬盘使用情况,统计文件或目录及子目录 ...

  4. 软件功能说明书final修订

    贪吃蛇(单词版)软件功能说明书final修订 1 开发背景 “贪吃蛇”这个游戏对于80,90后的人来说是童年的记忆,可以将其说为是一个时代的经典,实现了传统贪吃蛇的游戏功能:现在人们对英语的重视程度越 ...

  5. servlet基础学习总结

    Servlet的任务 1.  读取客户端发送的显示的数据,包括HTML表单和一些客户端程序的表单 2.  读取客户端发送的隐式的数据,包括cookies.媒体类型等 3.  处理数据并产生结果 4.  ...

  6. java第三次实验报告

    北京电子科技学院(BESTI) 实验报告 课程: Java程序设计 班级: 1352 姓名: 池彬宁 学号: 20135212 成绩: 指导教师: 娄嘉鹏 实验日期: 2015.6.3 实验密级: 无 ...

  7. 2018-2019-20172329 《Java软件结构与数据结构》第九周学习总结

    2018-2019-20172329 <Java软件结构与数据结构>第九周学习总结 教材学习内容总结 <Java软件结构与数据结构>第十五章-图 一.图及无向图 1.图的相关概 ...

  8. iOS自学-混合编程

    OC调用swift,引入头文件 #improt "工程名字-swift.h" swift调用OC,在桥梁文件里面引入OC文件 的头文件 尽情混合编程吧...

  9. Alpha阶段项目Postmortem会议总结

    (一)设想和目标 1.我们的软件要解决什么问题?是否定义的很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件主要解决总是不知道在什么时间该做什么事情,或是老是忘记做一些事情的问题,通过添加事件 ...

  10. 使用Git进行代码管理心得------------个人练习

    一.在github.com上的操作   今天我们实践课程学习了用Git进行代码版本,使用github进行代码托管,我和队友在官网上创建了自己的Organization,将Auto CS fork到了小 ...