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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
js跳转页面方法总结
Jan 29 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
js中作用域的实例解析
Mar 16 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
vue中appear的用法
Aug 17 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
js实现金山打字通小游戏
Jul 24 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
幼儿园老师工作总结2015
2015/05/22 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers