【实践】js封装 jq siblings 方法
思路：
1、获取调用元素的父元素下的所有子元素（即它的所有同辈元素和调用元素本身）
2、遍历调用元素父元素下的所有子元素 除调用元素外的所有元素保存在一个数组里面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 封装siblings 方法</title>
</head>
<body>
<div id="div1">
<p>第一个p标签</p>
<p>第二个p标签</p>
<p>第三个p标签</p>
<p>第四个p标签</p>
<p>第五个p标签</p>
</div>
<script type="text/javascript">
var div1 = document.querySelector("#div1");
var someChild = div1.querySelectorAll("p");
var siblings = siblingsOf(someChild[3]);
console.log(siblings); function siblingsOf(elem){
var len = 0;
var children = elem.parentNode.childNodes;//获取目标元素的所有兄弟元素和它自身
var siblings = new Array();
for (var i = 0 , len = children.length; i < len; i++) {
//判断此元素是一个元素节点而且不是调用元素的本身
//若为真放进数组里面
if (children[i].nodeType == 1 && children[i] != elem) {
siblings.push(children[i]);
}
}
//返回最后得出的结果数组
return siblings;
}
</script>
</body>
</html>
【实践】js封装 jq siblings 方法的更多相关文章
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- js封装ajax的方法
常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url ...
- js封装的方法
1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...
- 【转】第6篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+自动反射方法分析
作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第5篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- JS如何封装一些列方法为一个对象的操作，然后集中管理这些操作，方便修改和调用
var Api = { ajax:{ // 添加项目 旧! add_project : function(pro_name, html, css, js,callback) { $.post(&quo ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- 原生js封装的一些jquery方法
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...
- iOS OC和JS的交互 javaScriptCore方法封装
一.javaScriptCore javaScriptCore是一种JavaScript引擎,主要为webKit提供脚本处理能力,javaScriptCore是开源webkit的一部分,他提供了强大的 ...
随机推荐
- Linux下几个命令的技巧
Ctrl的组合键+a,移动到一行命令的首部+e,移动到一行命令的尾部+左右键,以单词为单位左右移动+u,删除光标之前的所有内容+k,删除光标之后的所有内容Alt+.为引用上一个命令的最后一个参数 还有 ...
- 友盟移动开发平台.NET版本SDK
由于项目需要给安卓.ios提供提送消息服务.找到了umeng这个平台,官方竟然没有提供.net版本的SDK,同时项目需要就拿出来和大家分享一下需要的同学们可以做个参考,建议官方提供.net版本. 这里 ...
- mac 远程桌面连接分享
mac 远程桌面连接分享 8.0版本 https://pan.baidu.com/s/1wgVvAmQreGwYZAhLST764w 10.0版本 https://pan.baidu.com/s/1Y ...
- python访问web的利器：urllib2
使用Python访问网页主要有三种方式: urllib, urllib2, httpliburllib比较简单,功能相对也比较弱,httplib简单强大,但好像不支持session1. 最简单的页面访 ...
- 将cmake文件转化为vs方便代码阅读与分析
下面通过“chengxuyuancc”同学的图来说明.通过cmake将winafl cmake编译方式转化为vs2015,方便源码阅读与分析. 1.到官网下载cmake软件.启动图形版 2.选择源码目 ...
- Oracle基础了解
数据库: 关系型数据库 select * from 表名 非关系型数据库(做不到复杂查询) 以对象的形式进行存储 {"aaa":"ccc"}---键值对 ora ...
- [P3806] Divide and Conquer on Tree
Link: P3806 传送门 Solution: 询问树上是否存在两点间的距离为$k$,共有$m$次询问($m\le 100,k\le 1e7$) 预处理出所有距离的可能性再$O(1)$出解的复杂度 ...
- 【模拟退火】poj2069 Super Star
题意:让你求空间内n个点的最小覆盖球. 模拟退火随机走的时候主要有这几种走法:①随机旋转角度. ②直接不随机,往最远的点的方向走,仅仅在尝试接受解的时候用概率.(最小圆/球覆盖时常用) ③往所有点的方 ...
- 深度学习的GDB调试命令和经验记录
调试的指令很简单: cd $CAFFE_ROOT, 1. gdb ./build/tools/caffe 2. 设置运行参数 set args train --solver=xxxxsolver.pr ...
- Jenkins构建Maven多模块项目时，单独编译子模块，并且不触发构建其它模块
一.Jenkins构建Maven多模块项目时,单独编译子模块 配置: 1.Root POM指向父pom.xml 2.Goals and options指定构建模块的参数:mvn -pl jsoft-w ...