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. [Github] Github使用教程

    前言 Github是一个面向开源及私有软件项目的托管平台.它可以免费使用,并且速度快速,拥有超多的用户.是目前管理软件开发和发现已有代码的首选平台.下面将向Github新手介绍相关操作. 正文 注册 ...

  2. 《The Mythical Man-Month（人月神话）》读后感（1）

    临近考试周,这里我通过平时阅读的<人月神话>十九个章节和知乎.简书等网页中网友们对<人月神话>的读后感,对书中各个章节进行简单的总结,以下均为个人手打观点的思考与整合,仅供大家 ...

  3. 2017年第八届蓝桥杯【C++省赛B组】

    1.标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有 ...

  4. Beta发布 _thunder_文案+美工展示

    作业要求:https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/1366 团队介绍:thunder 组成员及各位博客地址: 1.王航:htt ...

  5. Linux上安装设置mysql 5.7.24

    一,准备 1,先查看Linux是32位还是64位 getconf LONG_BIT 如果返回的是32,那么就是32位 如果返回的是64,那么就是64位 2,如果服务器不能联网,就先去官网下载好压缩包, ...

  6. 20162314 《Program Design & Data Structures》Learning Summary Of The First Week

    20162314 2017-2018-1 <Program Design & Data Structures>Learning Summary Of The First Week ...

  7. max值——单元测试

    设计思想 在调试的时候,尽可能的将所有可能出现的情况都考虑到,输入这些情况,查看程序运行的结果 源代码 #include<iostream> using namespace std; in ...

  8. 6/11 sprint2 看板和燃尽图的更新

  9. Mscomm控件安装问题 License information for TMSComm not found.

    操作步骤: 1.打开delphi,菜单选择compoents->import Activex control,然后选择那个mscomm32.ocx安装即可. 2.注册MScomm控件   开始- ...

  10. 计算机网络【8】—— Get和Post请求的区别

    get参数通过url传递,post放在request body中. get请求在url中传递的参数是有长度限制的,而post没有. get比post更不安全,因为参数直接暴露在url中,所以不能用来传 ...