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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
js实现简单的打印表格
Jan 15 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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文件操作的详细诠释
2013/06/21 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php中Snoopy类用法实例
2015/06/19 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python实现简单拆分PDF文件的方法
2015/07/30 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python简单实现9宫格图片实例
2020/09/03 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
服装创业计划书范文
2014/02/05 职场文书
2014高考励志标语
2014/06/05 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS