原生js实现preAll和nextAll方法
一直以来都在好奇，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方法的更多相关文章
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
- 原生js 数组的迭代的方法
一.原生js Array给我们提供很多了方法.方便我们操作数组.这些方法的参数,都需要传入一个匿名函数,匿名函数中有三个参数,分别含义是:数组中的项.该项的索引.以及数组本身. 1.filter方法: ...
- 用.native修饰器来对外部组件进行构造器内部方法的调用以及用原生js获取构造器里的方法
html <div id="app"> <span v-text="number"></span> <btn @cli ...
- 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 原生JS替代jQuery的各种方法汇总
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
- 原生js封装的一些jquery方法
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...
- 原生js实现addClass,removeClass,hasClass方法
function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
随机推荐
- 【原创】公司各个阶段 CTO 需要做什么？（上篇）
CTO 是企业内技术最高负责人,对企业的发展起到至关重要的作用.但随着公司的不断发展,CTO 的工作重心也会不断变化.只有在正确的阶段做正确的事,才能更好地为公司做出贡献.我是空中金融 CTO ,TG ...
- Linux CentOS7.0 （01）在Vmvare Workstation上 安装配置
一.新建虚拟机 1.创建新的虚拟机 -> 默认典型 ->选择安装介质 2.指定虚拟机名称.安装目录.磁盘容量大小 点击 "完成",创建虚拟机! 随后虚拟机将自动启动安装 ...
- python 网络爬虫与信息提取 学习笔记day4
正则表达式简介: 简洁表示一组字符串的特征或者模式,在文本处理中十分常用,主要应用于字符串匹配中 1． 通用的字符串表达框架 2． 简洁表达一组字符串的表达式 3． 针对字符串表达简洁和特征思想 ...
- django 配置URLconf和获取值
django中正确配置url匹配找到视图: 1 在项目下的settings.py中ROOT_URLCONF = "项目名.urls" 表示 前台发来请求会先去项目下的test3/u ...
- Python之面向对象四
面向对象进阶 一.关于面向对象的两个内置函数 isinstance 判断类与对象的关系 isinstance(obj,cls)检查obj是否是类 cls 的对象,返回值是bool值 issu ...
- mysql导出与导入
环境 centos6.5 32位 Mysql 5.7.19 导出 mysqldump用法 导出整个数据库 [root@mini2 mysql]# mysqldump -p123456 --databa ...
- AOP及专有名词通俗解答
AOP面向切面编程,是一种编程思想,并不是Spring专有,Spring是封装代理模式完成,之前的博客中也写到了关于AOP的文章,Filter和代理,请见<以此之长,补彼之短----AOP(Fi ...
- Codeforces 343D WaterTree - 线段树, DFS序
Description Translated by @Nishikino_Maki from Luogu 行吧是我翻的 Mad scientist Mike has constructed a roo ...
- POJ-2263 Heavy Cargo---最短路变形&&最小边的最大值
题目链接: https://vjudge.net/problem/POJ-2263 题目大意: 有n个城市,m条连接两个城市的道路,每条道路有自己的最大复载量.现在问从城市a到城市b,车上的最大载重能 ...
- cookie的实现原理
cookie技术通过在请求和响应报文中写入cookie信息来控制客户点的状态 cookie会根据从服务器端发送的响应报文内的一个叫做set-cookie的首部字段信息,通知客户端保存cookie 当下 ...