js jquery获取当前元素的兄弟级 上一个 下一个元素


Posted in Javascript onSeptember 01, 2015

var chils= s.childNodes;  //得到s的全部子节点

var par=s.parentNode;   //得到s的父节点

var ns=s.nextSbiling;   //获得s的下一个兄弟节点

var ps=s.previousSbiling;  //得到s的上一个兄弟节点

var fc=s.firstChild;   //获得s的第一个子节点

var lc=s.lastChile;   //获得s的最后一个子节点

JS获取节点父级,子级元素

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。

JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当作DOM元素

<div id="test">
<div></div>
<div></div>
</div>

原生的JS获取ID为test的元素下的子元素。

可以用:

var a = docuemnt.getElementById("test").getElementsByTagName_r("div");

这样是没有问题的

此时a.length=2;

但是如果我们换另一种方法

var b =document.getElementByIdx_x("test").childNodes;

此时b.length 在IE浏览器中没问题,其依旧等于2,但是在FF浏览器中则会使4,是因为FF把换行也当做一个元素了。

所以,在此,我们就要做处理了,需遍历这些元素,把元素类型为空格而且是文本都删除。

function del_ff(elem){
var elem_child = elem.childNodes;
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
}
}
}

上述函数遍历子元素,当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。

nodeNames可以得到一个节点的节点类型,/\s/是非空字符在JS里的正则表达式。前面加!,则表示是空字符

test() 方法用于检测一个字符串是否匹配某个模式.语法是: RegExpObject.test(string)

如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

nodeValue表示得到这个节点里的值。

removeChild则是删除元素的子元素。

之后,在调用子,父,兄,这些属性之前,调用上面的函数把空格清理一下就可以了

<div id="test">
<div></div>
<div></div>
</div>

<script>
function dom() {
var s= document.getElementByIdx_x("test");
del_ff(s);  //清理空格
var chils= s.childNodes; //得到s的全部子节点
var par=s.parentNode;  //得到s的父节点
var ns=s.nextSbiling;  //获得s的下一个兄弟节点
var ps=s.previousSbiling; //得到s的上一个兄弟节点
var fc=s.firstChild;  //获得s的第一个子节点
var lc=s.lastChile;  //获得s的最后一个子节点
}
</script>

下面介绍JQUERY的父,子,兄弟节点查找方法

jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个

jQuery对象返回,children()则只会返回节点

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll(),返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll(),返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点,不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()
的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")

以上介绍就是本文关于js jquery获取当前元素的兄弟级 上一个 下一个元素,希望对大家有所帮助。

Javascript 相关文章推荐
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
jQuery实现文档树效果
Feb 20 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
JavaScript常用标签和方法总结
Sep 01 #Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 #Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 #Javascript
Jquery常用的方法汇总
Sep 01 #Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 #Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 #Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
python密码错误三次锁定(实例讲解)
2017/11/14 Python
TensorFlow实现模型评估
2018/09/07 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
python多线程同步实例教程
2019/08/11 Python
pytorch打印网络结构的实例
2019/08/19 Python
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
出纳员岗位责任制
2014/02/11 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL