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. WebSocket抓包分析

    转载自:https://www.cnblogs.com/songwenjie/p/8575579.html Chrome控制台 (1)F12进入控制台,点击Network,选中ws栏,注意选中Filt ...

  2. Inception——Going deeper with convolutions

    1. 摘要 作者提出了一个代号为 Inception 的卷积神经网络架构,这也是作者在 2014 年 ImageNet 大规模视觉识别挑战赛中用于分类和检测的新技术. 通过精心的设计,该架构提高了网络 ...

  3. kafka consumer demo

    kafka消费者demo pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmln ...

  4. Erlang数据类型的表示和实现（1）——数据类型回顾

    本文介绍 Erlang 语言中使用的各种数据类型以及这些数据类型在 Erlang 虚拟机内部的表示和实现.了解数据类型的实现可以帮助大家在实际开发过程中正确选择数据类型,并且可以更好更高效地操作这些数 ...

  5. [linux] 利用PROMPT_COMMAND实现命令审计

    网上查了实现命令审计大概有以下几种: 查不到了,改天再补充 以下环境基于CentOS 6 1.修改history时间格式 echo 'HISTTIMEFORMAT="%F %T " ...

  6. 始入OO课程的殿堂，初识面向对象的奥妙——OO第一次博客总结

    当我满怀期待叩开OO的大门,却发现宝藏藏在层层阻难之后 第一次作业 1.度量分析 >关于第一次作业的metrics图分析没有出现标红的McCabe Cyclomatic Complexity或者 ...

  7. sprint冲刺(第二天)

    今天的每日立会是在早上早餐后8点在宿舍讨论的,大概讨论了关于四则运算练习器APP的看法,也对一些较为基础的功能进行说明

  8. 小学四则运算结对项目报告（GUI）

    小学四则运算结对项目报告(GUI) 一．Coding.Net项目地址: https://git.coding.net/wsshr/Calculation.git 二．PSP表格(完成前): PSP 任 ...

  9. 深入理解JAVA I/O系列一：File

    I/O简介 I/O问题可以说是当今web应用中所面临的的主要问题之一,大部分的web应用系统的瓶颈都是I/O瓶颈.这个系列主要介绍JAVA的I/O类库基本架构.磁盘I/O工作机制.网络I/O工作机制以 ...

  10. mac下使用marsedit写博客

    在Windows习惯了使用Windows live write写好博客,然后发布上去,到了mac下,发现了一个很好的替代品  MarseEdit 下载安装后,打开出现如下解码,选择 I already ...