零基础学做网站培训介绍

当前位置:

JS与jquery获取父级、同级、子元素的方法

在做网站时, 往往需要通过JS或jquery来获取指定元素的父级、同级、子元素,然后进行控制。下面介绍一下JS与jquery获取父级、同级、子元素的方法。

JS与jquery获取父级、同级、子元素的方法

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")

js获取父级、同级、子元素

var s= document.getElementByIdx_x("test");

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

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

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

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

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

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

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

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

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

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在做网站时,有些网页只是暂时性的展示提示信息,只要信息展现之后,就没有再显示的必要。这时,就需要它在指定时间内自动关闭。例如:我们点击一个
  • 我们知道,网站上有很多的超链接,是使用A标签进行书写的。A标签的链接地址就是写在HREF里面。但是某些情况下,虽然HREF里已经写了链接地址,但我们想
  • 对于一些素材类网站,用户浏览了某个素材之后,比较感兴趣,为了方便下次浏览,往往会把喜欢的素材添加到收藏夹里。这时我们可以制作这样的收藏夹功能
  • 什么是JQUEYR 链式操作JQUEYR链式操作简单的说就是通过JQUEYR代码控制不同的样式,可以将代码写在一起,这样可以节省代码量,将完成不同功能的代码写
  • JS eval函数作用是什么 (1262 次浏览)
    我们自己做网站时,经常在代码里看到JS eval函数,很多新手不太明白JS eval函数的作用是什么,在什么情况下使用JS eval函数。下面学做网站论坛就来介
  • 做网站时,form表单是使用submit()提交的,但是要实现无刷新的提交,当然无刷新提交数据,ajax肯定可以完成,但是由于代码已经很成熟,都是使用form提
  • 我们自己做网站时,有时希望第一次打开某个页面时,弹出一个窗口,以后再打开页面时,就不显示这个弹窗了。实现这样的效果就需要使用JS,通过JS可以实
  • 在做网站时,经常会用天网站提示框,比如用户投稿功能,用户投稿成功之后,弹出一个提示框。常用的方法是使用JS的alert弹窗,但是这种弹窗需要人工点
  • 使用JS获取网页URL地址及各类参数是网站制作过程中经常用到,例如通过JS获取完整URL,通过JS获取获取文件路径(文件地址)等等。下面汇总了JS获取网
  • 通过获取当前点击链接的值,然后将这个值传值并赋值其它元素,这个功能非常有用。具体使用方法如下:HTML代码:<div class="con">