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. markdown | Latex | 书写测试

    我永远喜欢markdown! 建图 graph TD; 1-->2 1-->3 1-->4 2-->5 2-->6 3-->7 3-->8 4-->9 ...

  2. 工具 | Sublime

    Sublime 前言 妈耶..\(Sublime\)的界面真的是太好看啦哭哭.. 我永远喜欢Sublime! 强推Sublime... 正文 自从暑假用上的Ubontu 一开始用的是\(gedit\) ...

  3. Cocos2dx源码赏析(4)之Action动作

    Cocos2dx源码赏析(4)之Action动作 本篇,依然是通过阅读源码的方式来简单赏析下Cocos2dx中Action动画的执行过程.当然,这里也只是通过这种方式来总结下对Cocos2dx引擎的理 ...

  4. Cocos2dx源码赏析(3)之事件分发

    Cocos2dx源码赏析(3)之事件分发 这篇,继续从源码的角度赏析下Cocos2dx引擎的另一模块事件分发处理机制.引擎的版本是3.14.同时,也是学习总结的过程,希望通过这种方式来加深对Cocos ...

  5. Spring Bean注册解析(二)

           在上文Spring Bean注册解析(一)中,我们讲解了Spring在注册Bean之前进行了哪些前期工作,以及Spring是如何存储注册的Bean的,并且详细介绍了Spring是如何解析 ...

  6. Mysql DataPacketTooBigException异常处理

    在本地上运行好好,然后发布到服务器上去, 总是报错,后来查了一下日志,得到了如下的错误日志: [org.hibernate.engine.jdbc.spi.SqlExceptionHelper] Pa ...

  7. 第一个scrim任务分布

    一.项目经理:郭健豪 二.scrim分工 杨广鑫.郭健豪:制作第一个精选页面布局,和代码实现.如:实现图书推荐布局中图书的排布,搜索框代码的实现,消息提示的跳转 李明.郑涛:实现第一个精选页面数据库的 ...

  8. 进阶系列（11）—— C#多线程

    一.多线程的相关概念 1.进程:是操作系统结构的基础:是一个正在执行的程序:计算机中正在运行的程序实例:可以分配给处理器并由处理器执行的一个实体:由单一顺序的执行显示,一个当前状态和一组相关的系统资源 ...

  9. Java第二天——标识符命名规则、Java的知识、快捷键的使用、Scanner获取值的常用方法

    1.标识符命名规则 字母.下划线.数字.美元符号($)由这四个部分组成. 标识符＝首字母+其他 首字母:字母.下划线.美元符号($) 其他:字母.下划线.数字.美元符号($) 注意: 1.首字母不能为 ...

  10. mac下搭建MySql环境基本步骤

    准备工作做完后,开始: 创建数据库 step1: 在mac中->系统偏好设置->最下边点MySQL 在弹出页面中 关闭mysql服务(点击stop mysql server) step2: ...