一直以来都在好奇，jquery的prevAll和nextAll方法都是咋实现的，那么厉害，而且还那么方便。不得不说，jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题，而且很好的解决了js代码的浏览器兼容性问题，对于js领域来说，真的算是一场革命性的变革。但是如果知道了原理，读懂了jquery的源码，还是会恍然大悟的。下边就贴出自己写的原生js实现preAll和nextAll的方法：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>原生js实现preAll和nextAll方法</title>

<script>

    HTMLElement.prototype.prevAll = function(){

        var _parent = this.parentElement;

        var _child = _parent.children;

        var arr = [];

        for(var i = 0;i < _child.length;i++){

            var _childI = _child[i];

            if(_childI == this){

                break;

            }

            arr.push(_childI);

        }

        return arr;

    };

    HTMLElement.prototype.nextAll = function(){

        var _parent = this.parentElement;

        var _child = _parent.children;

        var arr = [];

        for(var i = _child.length - 1;i >= 0;i--){

            var _childI = _child[i];

            if(_childI == this){

                break;

            }

            arr.unshift(_childI);

        }

        return arr;

    };

    function foo(dom){

        console.log("prevAll：", dom.prevAll());

        console.log("nextAll：", dom.nextAll());

    }

</script>

</head>

<body>

<ul>

    <li>我是之前元素1</li>

    <li>我是之前元素2</li>

    <li>我是之前元素3</li>

    <li onclick="foo(this)" style="cursor:pointer;">点我就可以看到效果了</li>

    <li>我是之后元素1</li>

    <li>我是之后元素2</li>

    <li>我是之后元素3</li>

    <li>我是之后元素4</li>

</ul>

</body>

</html>

是不是知道了原生js的写法，你就会觉得其实自己也可以那么高大上了！

原生js实现preAll和nextAll方法的更多相关文章

  1. 【JS】怎样用原生JS实现jQuery的ready方法

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...

  2. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  3. 原生js 数组的迭代的方法

    一.原生js Array给我们提供很多了方法.方便我们操作数组.这些方法的参数,都需要传入一个匿名函数,匿名函数中有三个参数,分别含义是:数组中的项.该项的索引.以及数组本身. 1.filter方法: ...

  4. 用.native修饰器来对外部组件进行构造器内部方法的调用以及用原生js获取构造器里的方法

    html <div id="app"> <span v-text="number"></span> <btn @cli ...

  5. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  6. 原生JS替代jQuery的各种方法汇总

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  7. 原生js封装的一些jquery方法

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...

  8. 原生js实现addClass,removeClass,hasClass方法

    function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...

  9. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

随机推荐

  1. JS 上传图片时实现预览

    网页中一张图片可以这样显示: <img src="http://www.letuknowit.com/images/wg.png"/>也可以这样显示:<img s ...

  2. NoSQL&MongoDB

    MongoDB: Is NoSQL(技术的实现,并非是一个特定的技术,与RMDS对立):Not only SQL 大数据问题:BigData,eg:同时访问几个页面,代码实现几个页面访问量的大小? F ...

  3. 用Jmeter实现SQLServer数据库的增删查改

    1.添加线程组 Jmeter性能测试,最重要的就是线程组了,线程组相当于用户活动 2.添加JDBC Connection Configuration Database URL:jdbc:sqlserv ...

  4. 项目管理器 ProjectManager Beta 10 发布

    本次更新内容: 可以设置主界面是否显示表格线 去除了开发日志界面的表格线,看起来好像好看一些 修复主界面时间显示的问题 自定义问候语 修复习惯统计记录时间显示错误的问题 修复创建项目时间错误问题 增加 ...

  5. POJ-2263 Heavy Cargo---最短路变形&&最小边的最大值

    题目链接: https://vjudge.net/problem/POJ-2263 题目大意: 有n个城市,m条连接两个城市的道路,每条道路有自己的最大复载量.现在问从城市a到城市b,车上的最大载重能 ...

  6. java.lang.Class类

    第一次接触Class类是在学习 jdbc中.Class.forName()是Class类的一个静态方法,用于手动加载一个类,例如数据库驱动. 其实每一个java类都拥有或者说对应一个Class的实例对 ...

  7. java中的内部类概念

    内部类和外部类可以互相访问私有属性 1.普通内部类实例化方式 外部类.内部类 对象 = new 外部类().new 内部类(); class Outer{//外部类 private String ms ...

  8. [LeetCode] Construct Binary Tree from String 从字符串创建二叉树

    You need to construct a binary tree from a string consisting of parenthesis and integers. The whole ...

  9. Docker And Swarm Mode(一)

    (一)节点的创建和配置 前言  虽然工作中一直在用Docker和Docker Swarm,但是总感觉有点陌生,总想自己亲手来写写和配置Docker 容器相关的事情,这篇文章主要是参考了Los Tech ...

  10. 计蒜客NOIP模拟赛D2T3 数三角形

    刚刚上高中的洁洁在学习组合数学的过程中遇到一道麻烦的题目,她希望你能帮助她解决.给定一张无向完全图 G,其中大部分边被染成蓝色,但也有一些边被染成红色或者绿色.现在,洁洁需要给这张图的多样性进行打分. ...