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. 【Ansible】ansible 任务失败控制

    任务失败控制 Ansible 通常默认会确保检测模块和命令的返回码并且会快速失败 – 专注于一个错误除非你另作打算. 有时一条命令会返回 0 但那不是报错.有时命令不会总是报告它 ‘改变’ 了远程系统 ...

  2. 从Web抓取信息的几个常用方法

    1.Response 对象有一个 status_code 属性,可以检查它是否等于requests.codes.ok. 2.raise_for_status()方法是一种很好的方式,确保程序在下载失败 ...

  3. Java中&、|、&&、||详解

    1.Java中&叫做按位与,&&叫做短路与,它们的区别是: & 既是位运算符又是逻辑运算符,&的两侧可以是int,也可以是boolean表达式,当&两侧 ...

  4. [linux] LVM原磁盘扩容（非增加磁盘）

    阿里云机器,ECS运行时磁盘由300G扩容到500,重启机器生效后登录.可以看到/data目录总大小300G,/dev/vdb已经扩容到500G. [root@HD1g-elasticsearch2 ...

  5. js中if else switch 条件判断的替代方法

    function condition(test){ return({ cat :function(){console.log('cat');}, dog :function(){console.log ...

  6. 20135234mqy

    北京电子科技学院(BESTI) 实     验    报     告 课程:Java实验    班级:1352    姓名: mqy  学号:20135234 成绩:             指导教师 ...

  7. ARP 询问之 校级路由器的猫腻

    前情 我为什么选定 172.17.174.73 这个 ip 来进行测试.戳前情 Scapy之ARP询问 前言 在一般家用路由器局域网下,进行 arp 广播,说:我是192.168.1.100,你们谁的 ...

  8. Reaction to 构造之法 of Software Engineering From The First Chapter toThe Fifth Chapter（补充版）

    几个星期前,我阅读过一篇文章,一位老师教导自己的学生要积极地去阅读文学文献,其中,我很欣赏他的一句话:“Just think of liturature as if you're reading a ...

  9. 【CS231N】4、神经网络

    一.疑问 二.常用激活函数 1. Sigmoid ​ sigmoid将输入实数值"挤压"到0到1范围内.更具体地说,很大的负数变成0,很大的正数变成1.它对于神经元的激活频率有良好 ...

  10. 读《构建之法》一、二、十六章随笔a

    第一章    概论 “软件团队要从需求分析开始,把合适的需求梳理出来,然后逐步开展后续工作”:——p3 问题:好的用户体验要从软件分析开始,那么软件分析仅仅是从用户的需求出发吗? 我的看法:需求分析是 ...