仿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原生代码的更多相关文章

  1. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  2. 用Node.js原生代码实现静态服务器

    ---恢复内容开始--- 后端中服务器类型有两种 1. web服务器[ 静态服务器 ] - 举例: wamp里面www目录 - 目的是为了展示页面内容 - 前端: nginx 2. 应用级服务器[ a ...

  3. JS原生代码实现导航高亮

    一 实现原理 根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联,并对相应的导航设置高亮样式. 二 代码解析 先简单写一个页面顶端的导航栏:<nav>  <ul> ...

  4. 淡入淡出效果的js原生实现

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  5. 基于面向对象的图片轮播(js原生代码)

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  6. day28(ajax之js原生代码实现)

    ajax ajax:异步页面无刷新技术 AJAX:异步的 JavaScript And XML. * 使用的是老的技术,用的是新的思想. AJAX的功能:完成页面的局部刷新,不中断用户的体验. XML ...

  7. JS原生代码之倒计时抢购

    学到了原声js改变input的disabled的属性值,因为想让倒计时结束的同时,抢购按钮可以被点击.代码为:document.getElementById("buy").disa ...

  8. js原生代码编写一个鼠标在页面移动坐标的检测功能,兼容各大浏览器

    function mousePosition(e) {     //IE9以上的浏览器获取     if (e.pageX || e.pageY) {         return {         ...

  9. js原生代码实现鼠标拖拽(超简单)

    首先先来看这一张图 在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示 这些样式都不是重要的,这里加个marg ...

随机推荐

  1. awk sed

    awk -F '|' '{print $3","$4","$5}' cred.ts | sed 's/-//g'

  2. Memcached深度分析

    Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能.关于这个东西,相信很多人都用过,本文意在通过对 ...

  3. eclipse里怎么用命令行输入args

    eclipse中给java应用传args参数的方法如下:1.先写好Java代码,比如文件名为IntArrqy.java:2.在工具栏或菜单上点run as下边有个Run Configuration:3 ...

  4. Ubuntu PostgreSQL安装和配置

    一.安装 1.安装 使用如下命令,会自动安装最新版,这里为9.5 sudo apt-get install postgresql 安装完成后,默认会: (1)创建名为"postgres&qu ...

  5. ecshop 邮件功能

    1.邮件服务器设置(配置好了,在本地和虚拟主机都可以使用) a.163邮箱配置 b.QQ邮箱配置 2.关注管理(客户关注了某以商品,就可以给客户发送邮件) 3.邮件订阅管理,数据表:ecs_email ...

  6. draw9的使用说明

    转载来自:http://isux.tencent.com/android-ui-9-png.html 在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以 ...

  7. testNg vs junit 4.X @Test

    http://www.ibm.com/developerworks/cn/java/j-cq08296/ 一个简单的测试用例 初看起来,JUnit 4 和 TestNG 中实现的测试非常相似.为了更好 ...

  8. DIOCP 运作核心探密

    来自网友天地弦的DIOCP早已经广为人知了,有很多的同学都用上了它,甚至各种变异.修改版本也出了不少.我最近也在学习DIOCP,打算将它用于自己的服务端,今天让我们来一起探密它(DIOCP)的运作核心 ...

  9. 分布式消息队列RocketMQ部署

    一.RocketMQ简介: RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: 1.支持严格的消息顺序: 2.支持Topic与Queue两种模式: 3.亿级消息堆积能力: 4.比较友好 ...

  10. IIS短文件名扫描工具

    #!/usr/bin/env python # -*- coding: utf-8 -*- import sys import httplib import urlparse import strin ...