一直以来都在好奇,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. kubernetes入门(09)kubernetes1.7集群安装(2017/11/13)

    CentOS7.3利用kubeadm安装kubernetes1.7.3完整版(官方文档填坑篇) https://www.cnblogs.com/liangDream/p/7358847.html 一. ...

  2. j2ee基础(1)servlet的生命周期

    Servlet的生命周期 Servlet 生命周期规定了 Servlet 如何被加载.实例化.初始化. 处理客户端请求,以及何时结束服务. 该生命周期可以通过 javax.servlet.Servle ...

  3. Linux实战案例(3)创建和删除用户

    建用户: adduser phpq                            //新建phpq用户passwd phpq                            //给php ...

  4. maven常见问题处理(3-4)配置代理服务器

    有的公司基于安全因素考虑,要求员工使用通过安全认证的代理访问因特网. 这时就需要为Maven配置HTTP代理. 在目录~/.m2/setting.xml文件中编辑如下(如果没有该文件,则复制$M2_H ...

  5. nexus私服服务器意外关机后,本地不能下载jar包

    主要记录一个小问题. 今天要做个需求,需要读取word文档中的表格来在生成数据库建表语句. 读取word文档,要添加maven依赖 <dependency> <groupId> ...

  6. Dictionary导致CPU暴涨

    中午吃完饭回来,刚想眯一会,突然发现公司预警群报警,某台机器CPU100%,连续三次报警,心里咯噔一下,我新开发的程序就在这上面,是不是我的程序导致的?立马远程,oh my god,果然是. 二话不说 ...

  7. python--同步锁/递归锁/协程

    同步锁/递归锁/协程 1 同步锁 锁通常被用来实现对共享资源的同步访问,为每一个共享资源创建一个Lock对象,当你需需要访问该资源时,调用acquire()方法来获取锁对象(如果其他线程已经获得了该锁 ...

  8. Java-NIO(四):通道(Channel)的原理与获取

    通道(Channel): 由java.nio.channels包定义的,Channel表示IO源与目标打开的连接,Channel类似于传统的“流”,只不过Channel本身不能直接访问数据,Chann ...

  9. Ubuntu16.04开机引导缺失Win10

    Ubuntu正常开机的情况下: sudo update-grub # 如果grub丢失, 就先sudo apt install grub Ubuntu不能正常开下: 进入Ubuntu引导, 不要正常进 ...

  10. SSH端口转发(本地转发、远程转发、动态转发)

    SSH端口转发   一:什么是端口转发?     SSH 会自动加密和解密所有SSH 客户端与服务端之间的网络数据.但是,SSH 还能够将其他TCP 端口的网络数据通过SSH 链接来转发,并且自动提供 ...