下面介绍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元素开始找,等同于$("p span")

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

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

原生的JS获取ID为test的元素下的子元素。可以用:

比如:

var a = docuemnt.getElementById("dom").getElementsByTagName_r("div"); 这样是没有问题的

此时a.length=3;

但是我们现在换一种方法获取就是我上章提到的var b = document.getElementByIdx_x("dom").childNodes;如果   这样alert(b.length)IE浏览器上没问题还是3,但是在FF浏览器上会提示是4,这就是因为FF把换行也当做一个元素了。

所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的

function del_space(elem){

var elem_child = elem.childNodes;//得到参数元素的所有子元素

for(var i=0;i

if(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue)) {

elem.removeChild(elem_child)}

}

}

}

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

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

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

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

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

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

下面就是重点了啊!

function dom(){

var a = document.getElementByIdx_x_x("dom");

del_space(a);调用清理空格的函数

var b = a.childNodes;获取a的全部子节点;

var c = a.parentNode;获取a的父节点;

var d = a.nextSbiling;获取a的下一个兄弟节点

var e = a.previousSbiling;获取a的上一个兄弟节点

var f = a.firstChild;获取a的第一个子节点

var g = a.lastChild;获取a的最后一个子节点

}

转自:http://www.cnblogs.com/fumj/archive/2012/12/12/2814547.html

jq获取同级元素_jq获取上级、同级、下级元素相关推荐

  1. jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...

    1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...

  2. jq获取页面高度_JQ获取窗口文档等等高度总结!

    $(document).ready(function() { alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height() ...

  3. javascript 获取上级、同级和下级元素

    1. javascript 获取上级元素(父节点)​​​​​​ 1) parentNode 获取上级元素 //当前元素直接父元素,parentNode 是 W3C 标准 var parent = do ...

  4. jq 如何获取和当然元素相同类名的标签_jquery获取兄弟元素-jquery获取下一个兄弟元素-jquery获取最后一个兄弟元素...

    jquery怎幺获取当前元素的兄弟元素 可以使用 siblings() jquery既然有next方法取得下一个元素,那幺有previous方法吗 $("#id").prev(); ...

  5. html 对象元素如何获取div 里的data值 原生和jq对象两种获取

    这是对象,需要获取到div里的data-id的值 转成jq对象就行了 console.log($(t).data("id")) 2.打印一下当前元素: 获取当前事件元素: t.cu ...

  6. jq获取兄弟节点_jQuery 获取兄弟元素的几种方法

    jQuery 获取兄弟元素的几种方法. 获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression. ...

  7. 定位到元素后获取其属性_(11)让“盒子”动起来:② “定位”和 BFC | CSS

    原创:itsOli @前端一万小时本文首发于公众号「前端一万小时」本文版权归作者所有,未经授权,请勿转载!本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 ❗ ...

  8. JS追加元素和获取兄弟元素、父元素的方法

    JS追加元素的几种方法 append(),在父级最后追加一个子元素 appendTo(),将子元素追加到父级的最后 prepend(),在父级最前面追加一个子元素 prependTo(),将子元素追加 ...

  9. 关于父子节点、父子元素、祖辈元素的获取

    关于父子节点.父子元素.祖辈元素的获取 我们可以通过下面这种js的写法来分析怎么来获取元素的 获取当前元素的父元素的父元素的第二个子元素中的第一个子元素中的第一个子元素 1.JS写法解释 是不是感觉这 ...

最新文章

  1. c语言上机指导实验7,[C语言程序设计上机指导与同步训练(刘迎春张艳霞)]实验7.pdf...
  2. RHlinux下安装VORACLE VM VIRTUAL BOX
  3. 量子力学考研等待计算机吗,考研《量子力学》专业课满分经验谈
  4. linux文字全选_linux编写脚本全选注释素材
  5. SAP PR 转 PO
  6. python接口自动化测试(二)-requests.get()
  7. C# 泛型的协变和逆变
  8. php rest api lumen,使用Lumen框架创建 REST API 实例教程
  9. Puppet基础篇7-编写第一个完整测试模块puppet
  10. asp.net的快捷实用分页类
  11. 计算机结构工程专业,我是学计算机的,我想问一下怎么考结构工程师
  12. GD32创建工程与启动文件选择
  13. 简单实现网站灰色效果以谨记2020年4月4日悼念日
  14. 百度Clouda的初步探索
  15. Exp6 信息搜集与漏洞扫描 20164302 王一帆
  16. 中国染料医用激光器行业市场供需与战略研究报告
  17. 模具设计的四个步骤总结
  18. 关于深度学习人工智能模型的探讨(四)(5)
  19. 图片清晰度,分辨率,像素总结
  20. Python3环境安装配置

热门文章

  1. py-faster-rcnn用自己的数据训练模型
  2. 201621123085 《Java程序设计》第2周学习总结
  3. DRBD 高可用配置详解(转)
  4. jq第一天(1.83里面的属性)属性-》属性
  5. python中获取当前所有的logger
  6. crudandroidandroid——CRUD(在上一篇博客的基础上)
  7. Directx11教程(18) D3D11管线(7)
  8. 使用FtpWebRequest 类操作(上传、下载和删除)FTP上的XML文件
  9. SqlBulkCopy加了事务真的会变快吗?
  10. 针对大表 设计高效的存储过程【原理篇】 附最差性能sql语句进化过程客串