仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码
《previousSibling》 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点)。
《nextSibling》 属性返回被选节点的下一个同级节点(在相同树层级中的下一个节点)。
如果不存在这样的节点,则该属性返回 null。//元素节点的节点类型是 1 obj.previousSibling.nodeType ==1;
reverse() 方法用于颠倒数组中元素的顺序。
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
function siblings(o){//参数o就是想取谁的兄弟节点,就把那个元素传进去
var a=[];//定义一个数组,用来存o的兄弟元素
var p=o.previousSibling;
while(p){//先取o的哥哥们 判断有没有上一个哥哥元素,如果有则往下执行 p表示previousSibling
if(p.nodeType===1){
a.push(p);
}
p=p.previousSibling//最后把上一个节点赋给p
}
a.reverse()//把顺序反转一下 这样元素的顺序就是按先后的了
var n=o.nextSibling;//再取o的弟弟
while(n){//判断有没有下一个弟弟结点 n是nextSibling的意思
if(n.nodeType===1){
a.push(n);
}
n=n.nextSibling;
}
return a//最后按从老大到老小的顺序,把这一组元素返回
}
仿jQuery的siblings效果的js原生代码的更多相关文章
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 用Node.js原生代码实现静态服务器
---恢复内容开始--- 后端中服务器类型有两种 1. web服务器[ 静态服务器 ] - 举例: wamp里面www目录 - 目的是为了展示页面内容 - 前端: nginx 2. 应用级服务器[ a ...
- JS原生代码实现导航高亮
一 实现原理 根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联,并对相应的导航设置高亮样式. 二 代码解析 先简单写一个页面顶端的导航栏:<nav> <ul> ...
- 淡入淡出效果的js原生实现
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 基于面向对象的图片轮播(js原生代码)
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
- day28(ajax之js原生代码实现)
ajax ajax:异步页面无刷新技术 AJAX:异步的 JavaScript And XML. * 使用的是老的技术,用的是新的思想. AJAX的功能:完成页面的局部刷新,不中断用户的体验. XML ...
- JS原生代码之倒计时抢购
学到了原声js改变input的disabled的属性值,因为想让倒计时结束的同时,抢购按钮可以被点击.代码为:document.getElementById("buy").disa ...
- js原生代码编写一个鼠标在页面移动坐标的检测功能,兼容各大浏览器
function mousePosition(e) { //IE9以上的浏览器获取 if (e.pageX || e.pageY) { return { ...
- js原生代码实现鼠标拖拽(超简单)
首先先来看这一张图 在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示 这些样式都不是重要的,这里加个marg ...
随机推荐
- c++ http请求
平常我们要访问某个URL一般都是通过浏览器进行:提交一个URL请求后,浏览器将请求发向目标服务器或者代理服务器,目标服务器或者代理服务器返回我们所需要的数据,浏览器接收到这些数据后保存成文件并进行显示 ...
- extjs 兼容性问题解决方案
首先明确一点,extjs是没有所谓的兼容性的问题的.那为什么总是出现不同浏览器兼容性的问题呢?而且很多人把这作为了extjs一个缺点. 解决方法,看看写的代码是不是多了 英文逗号 , 或 中文的逗号 ...
- java实现Haffman编码
1.先创建一个树节点类(泛型类),为了方便使用集合的排序方法,泛型类要实现泛型接口Comparable,代码如下 package com.hjp.huffman; /** * Created by J ...
- ecshop商品-》获取促销商品
lib_goods.php->function get_promote_goods(){} /** * 获得促销商品 * * @access public * @return array */ ...
- 路径 dirname(__FILE__)
require(dirname(__FILE__).'/include/init.php');
- Lua 之string库
标准string库 基础字符串函数 string.len(s) 返回一个字符串的长度,例如 string.rep(s, n) 返回一个新的字符串,该字符串是参数s重复n次得到的结果,例如 )) -- ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- Storm集群安装部署步骤【详细版】
作者: 大圆那些事 | 文章可以转载,请以超链接形式标明文章原始出处和作者信息 网址: http://www.cnblogs.com/panfeng412/archive/2012/11/30/how ...
- spring InitializingBean接口
最近工作需要得到sping中的每个事物需要执行的sql,称机会简单研究了一下spring的事务,项目中管理事务比较简单,用TransactionTemplate,就直接以TransactionTemp ...
- 在nodejs下express 从安装到运行的全过程
安装过程: npm install -gd express npm install -g express-generator express -V //查看版本,现在一般都是4.x系列的 expr ...