js和jquery获取父级元素、子级元素、兄弟元素的方法
jquery获取父页面的方法
jquery获取父页面的方法在前端开发中，经常需要通过jQuery来获取父页面的元素或执行父页面的方法。
本文将介绍几种常见的方法，以帮助读者更好地理解和应用jQuery来获取父页面的相关操作。
一、使用parent()方法获取父页面的元素在jQuery中，可以使用parent()方法来获取当前元素的直接父元素。
而如果需要获取父页面的元素，则可以通过多次调用parent()方法来获取。
例如：```javascriptvar parentElement = $(window.parent.document).find("#parentElementId");```上述代码中，$(window.parent.document)表示父页面的document 对象，通过find("#parentElementId")方法可以获取父页面中id 为"parentElementId"的元素。
二、使用parent()方法执行父页面的方法如果需要执行父页面的方法，可以将方法名作为参数传递给parent()方法，然后在父页面中定义相应的方法。
例如：```javascript$(window.parent.document).parent().myFunction();```上述代码中，myFunction()是父页面中定义的方法，通过parent()方法调用该方法。
三、使用window对象获取父页面的元素除了使用parent()方法，还可以使用window对象来获取父页面的元素。
例如：```javascriptvar parentElement = window.parent.document.getElementById("parentElementId");```上述代码中，window.parent.document表示父页面的document对象，通过getElementById()方法可以获取父页面中id为"parentElementId"的元素。
javascript获取指定节点父节点、子节点的方法
用javascript获取指定节点父节点、子节点的方法我们在实际的开发当中经常要获取页面中某个html元素，动态的更新该元素的样式、内容属性等。
那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种，下面是总结的一些方法.1. 通过document节点获取：（1）document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。
如果页面上含有多个相同id的节点，那么只返回第一个节点。
如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。
这个方法可以看作是document.getElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。
（2）document.getElementsByName(elementName)：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。
然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。
如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。
（3）document.getElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName('A')将会返回页面上所有超链接节点。
在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。
但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。
jquery获取元素的方法
jquery获取元素的方法jQuery是一款流行的JavaScript库，它简化了JavaScript编程的许多任务。
在本文中，我们将探讨jQuery中获取元素的方法。
1. 通过ID获取元素使用jQuery中的$()函数可以通过元素ID获取元素。
例如，如果我们要获取ID为“myElement”的元素，则可以使用以下代码： ```var element = $('#myElement');```2. 通过标签名获取元素可以使用标签名来获取元素。
例如，如果我们要获取所有的段落元素，则可以使用以下代码：```var elements = $('p');```3. 通过类名获取元素可以使用类名来获取元素。
例如，如果我们要获取类名为“myClass”的所有元素，则可以使用以下代码：```var elements = $('.myClass');```4. 通过属性获取元素可以使用属性来获取元素。
例如，如果我们要获取所有具有“data-attribute”属性的元素，则可以使用以下代码：```var elements = $('[data-attribute]');```5. 通过父元素获取子元素可以使用父元素来获取子元素。
例如，如果我们要获取所有ID 为“parent”的父元素中所有类名为“child”的子元素，则可以使用以下代码：```var elements = $('#parent .child');```总结这些是jQuery中获取元素的常用方法。
通过这些方法，我们可以轻松地访问和操作HTML元素，从而实现更好的交互体验。
JSJQuery获取当前元素的上一个下一个兄弟级元素等元素的方法
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获取：var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode; //得到s的父节点var ns=s.nextSibling; //获得s的下一个兄弟节点var ps=s.previousSibling; //得到s的上一个兄弟节点var fc=s.firstChild; //获得s的第一个子节点var lc=stChild; //获得s的最后一个子节点JS获取节点父级，子级元素：JS的方法会比JQUERY麻烦很多，主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素：空的text元素，目前IE 也是这样<div id="test"><div></div><div></div></div>原生的JS获取ID为test的元素下的子元素。
JQUERY获取元素父节点,子节点,兄弟节点及指定元素
jQuery.parent(expr) //找父元素jQuery.parents(expr) //找到所有祖先元素，不限于父元素jQuery.children(expr) //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙jQuery.contents() //查找下面的所有内容，包括节点和文本。
jQuery.prev() //查找上一个兄弟节点，不是所有的兄弟节点jQuery.prevAll() //查找所有之前的兄弟节点jQuery.next() //查找下一个兄弟节点，不是所有的兄弟节点jQuery.nextAll() //查找所有之后的兄弟节点jQuery.siblings() //查找兄弟节点，不分前后jQuery.find(expr) //跟jQuery.filter(expr)完全不一样，jQuery.filter(expr)是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集中筛选出一部分，比如：$("p").find("span")是从元素开始找，等于$("p span")一,js 获取元素(父节点,子节点,兄弟节点)var test = document.getElementById("test");var parent = test.parentNode; // 父节点var chils = test.childNodes; // 全部子节点var first = test.firstChild; // 第一个子节点var last = stChile; // 最后一个子节点var previous = test.previousSibling; // 上一个兄弟节点var next = test.nextSbiling; // 下一个兄弟节点二,jquery 获取元素(父节点,子节点,兄弟节点)$("#test1").parent(); // 父节点$("#test1").parents(); // 全部父节点$("#test1").parents(".mui-content");$("#test").children(); // 全部子节点$("#test").children("#test1");$("#test").contents(); // 返回#test里面的所有内容，包括节点和文本$("#test").contents("#test1");$("#test1").prev(); // 上一个兄弟节点$("#test1").prevAll(); // 之前所有兄弟节点$("#test1").next(); // 下一个兄弟节点$("#test1").nextAll(); // 之后所有兄弟节点$("#test1").siblings(); // 所有兄弟节点$("#test1").siblings("#test2");$("#test").find("#test1");三,元素筛选// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first(); // 选取ul li中匹配的第一个元素$("ul li").last(); // 选取ul li中匹配的最后一个元素$("ul li").slice(1, 4); // 选取第2 ~ 4个元素$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素JQ 查找子元素下的指定元素1、为什么要用find：通常，选择一个元素很简单，$("#id")就可以搞定，但是如果想选择某个id为x1的div下的某个id为x2的元素就很困难了，可以通过用find来解决这个问题。
请列举javascript中获取元素对象的几种方法
请列举javascript中获取元素对象的几种方法一、通过ID获取元素对象通过ID获取元素对象是最常见的方法之一。
可以使用`document.getElementById()`方法来实现。
```javascript// HTML代码<div id="myDiv">Hello, world!</div>// JavaScript代码var myDiv = document.getElementById("myDiv");```二、通过标签名获取元素对象可以使用`document.getElementsByTagName()`方法来获取指定标签名的所有元素对象。
```javascript// HTML代码<p>This is a paragraph.</p><p>This is another paragraph.</p>// JavaScript代码var paragraphs = document.getElementsByTagName("p");```三、通过类名获取元素对象可以使用`document.getElementsByClassName()`方法来获取指定类名的所有元素对象。
```javascript// HTML代码<div class="myClass">This is a div with class "myClass".</div> <div class="myClass">This is another div with class "myClass".</div>// JavaScript代码var elements = document.getElementsByClassName("myClass"); ```四、通过选择器获取元素对象可以使用`document.querySelector()`方法来根据选择器选择第一个匹配的元素对象，或者使用`document.querySelectorAll()`方法来选择所有匹配的元素对象。
js和jquery获取父级元素、子级元素、兄弟元素的方法
js和jquery获取父级元素、子级元素、兄弟元素的方法先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素原生的JS获取ID为test的元素下的子元素。
可以用：比如：<div id="dom"><div></div><div></div><div></div></div>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<elem_child.length;i++){ //遍历子元素if(elem_child.nodeName == "#text"&& !/\S/.test(elem_child.nodeValue)) {elem.removeChild(elem_child)}}}}上述函数遍历子元素，当元素里面有节点类型是文本并且该节点的节点值是空的。
jquery获取父窗口的元素、父窗口、子窗口
jquery获取⽗窗⼝的元素、⽗窗⼝、⼦窗⼝⼀、获取⽗窗⼝元素： $("#⽗窗⼝元素ID",window.parent.document)；对应javascript版本为window.parent.document.getElementById("⽗窗⼝元素ID")； 取⽗窗⼝的元素⽅法：$(selector, window.parent.document); 那么你取⽗窗⼝的⽗窗⼝的元素就可以⽤：$(selector, window.parent.parent.document); 类似的，取其它窗⼝的⽅法⼤同⼩异 $(selector, window.top.document); $(selector, window.opener.document); $(selector, window.top.frames[0].document);⼆、Javascript弹出⼦窗⼝ 可以通过多种⽅式实现，下⾯介绍⼏种⽅法(1) 通过window对象的open()⽅法，open()⽅法将会产⽣⼀个新的window窗⼝对象 其⽤法为：window.open(URL,windowName,parameters); URL: 描述要打开的窗⼝的URL地址，如何为空则不打开任何⽹页； windowName:描述被打开的窗⼝的名称，可以使⽤'_top'、'_blank'等内建名称，这⾥的名称跟<a href="..." target="...">⾥的target属性是⼀样的。
parameters:描述被打开的窗⼝的参数值，或者说是样貌，其包括窗⼝的各个属性值，及要传⼊的参数值。
例如：//打开⼀个400 x 100 的⼲净的窗⼝：open('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes')//也可以这样写：var newWindow = open('','_blank'); 参数说明如下：top=# 窗⼝顶部离开屏幕顶部的像素数left=# 窗⼝左端离开屏幕左端的像素数width=# 窗⼝的宽度height=# 窗⼝的⾼度menubar=... 窗⼝有没有菜单，取值yes或notoolbar=... 窗⼝有没有⼯具条，取值yes或nolocation=... 窗⼝有没有地址栏，取值yes或nodirectories=... 窗⼝有没有连接区，取值yes或noscrollbars=... 窗⼝有没有滚动条，取值yes或nostatus=... 窗⼝有没有状态栏，取值yes或noresizable=... 窗⼝给不给调整⼤⼩，取值yes或no (2) 在javascript中除了通过open()⽅法建⽴window对象实现弹出窗⼝外，还可以通过建⽴对话框的⽅式弹出窗⼝。
js获table 父节点和兄弟节点的方法
js获table 父节点和兄弟节点的方法以JS获取table父节点和兄弟节点的方法在Web开发中，经常需要通过JavaScript来操作HTML元素。
其中，获取元素的父节点和兄弟节点是常见的需求。
本文将介绍如何使用JavaScript来获取table元素的父节点和兄弟节点。
一、获取table元素的父节点要获取一个元素的父节点，可以使用parentNode属性。
对于table元素来说，它的父节点可能是一个div、一个section或者是body元素。
下面是一个示例代码：```javascriptvar table = document.getElementById("myTable");var parent = table.parentNode;```在上述代码中，我们首先通过getElementById方法获取到id为"myTable"的table元素。
然后，通过parentNode属性获取到该table元素的父节点。
最后，将父节点赋值给变量parent。
二、获取table元素的兄弟节点要获取一个元素的兄弟节点，可以使用nextSibling和previousSibling属性。
对于table元素来说，它的兄弟节点可能是其他元素或者是文本节点。
下面是一个示例代码：```javascriptvar table = document.getElementById("myTable");var nextSibling = table.nextSibling;var previousSibling = table.previousSibling;```在上述代码中，我们首先通过getElementById方法获取到id为"myTable"的table元素。
然后，通过nextSibling属性获取到该table元素的下一个兄弟节点，通过previousSibling属性获取到该table元素的上一个兄弟节点。
js获取 多层次元素的方法
js获取多层次元素的方法获取多层次元素的方法可以通过使用JavaScript的DOM（文档对象模型）来实现。
DOM允许开发者使用JavaScript来操作HTML 文档中的元素。
一种常见的方法是使用getElementById()来获取具有特定ID 的元素。
如果元素位于多层次结构中，可以使用该元素的父元素来定位它。
例如，如果有一个ID为"parent"的元素包含了ID为"child"的子元素，可以使用以下代码获取子元素：javascript.var childElement =document.getElementById("parent").getElementById("child");另一种常见的方法是使用querySelector()或querySelectorAll()方法来选择元素。
这些方法允许使用类似CSS 选择器的语法来选择元素。
例如，如果要选择所有class为"example"的子元素，可以使用以下代码：javascript.var elements =document.querySelectorAll("#parent .example");如果元素的层次结构非常复杂，也可以使用递归的方式来遍历整个DOM树，以查找特定的元素。
这种方法可以使用childNodes属性和递归函数来实现，例如：javascript.function findElement(node, id) {。
if (node.id === id) {。
return node;} else {。
for (var i = 0; i < node.childNodes.length; i++) {。
var found = findElement(node.childNodes[i], id);if (found) {。
jquery获取元素（父节点,子节点,兄弟节点）
jquery获取元素（⽗节点,⼦节点,兄弟节点）⼀, js 获取元素(⽗节点,⼦节点,兄弟节点)var test = document.getElementById("test"); var parent = test.parentNode; // ⽗节点 var chils = test.childNodes; // 全部⼦节点 var first = test.firstChild; // 第⼀个⼦节点 var last = stChile; // 最后⼀个⼦节点 var previous = test.previousSibling; // 上⼀个兄弟节点 var next = test.nextSibling; // 下⼀个兄弟节点⼆, jquery 获取元素(⽗节点,⼦节点,兄弟节点)$("#test1").parent(); // ⽗节点$("#test1").parents(); // 全部⽗节点$("#test1").parents(".mui-content");$("#test").children(); // 全部⼦节点$("#test").children("#test1");$("#test").contents(); // 返回#test⾥⾯的所有内容，包括节点和⽂本$("#test").contents("#test1");$("#test1").prev(); // 上⼀个兄弟节点$("#test1").prevAll(); // 之前所有兄弟节点$("#test1").next(); // 下⼀个兄弟节点$("#test1").nextAll(); // 之后所有兄弟节点$("#test1").siblings(); // 所有兄弟节点$("#test1").siblings("#test2");$("#test").find("#test1");三, 元素筛选$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)$("ul li").first(); // 选取ul li中匹配的第⼀个元素$("ul li").last(); // 选取ul li中匹配的最后⼀个元素$("ul li").slice(1, 4); // 选取第2 ~ 4个元素$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素。
js与jQuery获取父窗、子窗的iframe
js与jQuery获取⽗窗、⼦窗的iframe在web开发中，经常会⽤到iframe，难免会碰到需要在⽗窗⼝中使⽤iframe中的元素、或者在iframe框架中使⽤⽗窗⼝的元素在⽗窗⼝中获取iframe中的元素格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();实例：window.frames["ifm"].document.getElementByIdx_x("btnOk").click();格式：var obj=document.getElementByIdx_x("iframe的name").contentWindow;var ifmObj=obj.document.getElementByIdx_x("iframe中控件的ID");ifmObj.click();var obj=document.getElementByIdx_x("ifm").contentWindow;var ifmObj=obj.document.getElementByIdx_x("btnOk");ifmObj.click();格式：window.parent.document.getElementByIdx_x("⽗窗⼝的元素ID").click();实例：window.parent.document.getElementByIdx_x("btnOk").click();在⽗窗⼝中获取iframe中的元素格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery ⽅法1实例：$("#ifm").contents().find("#btnOk").click();//jquery ⽅法1格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery ⽅法2实例：$("#btnOk",document.frames("ifm").document).click();//jquery ⽅法2格式：$('#⽗窗⼝中的元素ID', parent.document).click();实例：$('#btnOk', parent.document).click();。
jquery获取兄弟元素的方法
jquery获取兄弟元素的方法在使用jquery的过程中，我们经常需要获取某个元素的兄弟元素，可以通过以下几种方式来实现：1. siblings()方法siblings()方法可以获取指定元素的所有兄弟元素，返回一个jquery对象，可以使用链式操作获取兄弟元素的属性或者对兄弟元素进行操作。
示例代码：```$(document).ready(function(){$('li').siblings().css('background-color', 'yellow'); });```2. next()和prev()方法next()方法可以获取指定元素的下一个兄弟元素，prev()方法可以获取指定元素的前一个兄弟元素，返回一个jquery对象，可以使用链式操作获取兄弟元素的属性或者对兄弟元素进行操作。
示例代码：```$(document).ready(function(){$('li:first').next().css('background-color', 'yellow'); $('li:last').prev().css('background-color', 'yellow');});```3. nextAll()和prevAll()方法nextAll()方法可以获取指定元素后面的所有兄弟元素，prevAll()方法可以获取指定元素前面的所有兄弟元素，返回一个jquery对象，可以使用链式操作获取兄弟元素的属性或者对兄弟元素进行操作。
示例代码：```$(document).ready(function(){$('li:eq(2)').nextAll().css('background-color','yellow');$('li:eq(2)').prevAll().css('background-color','yellow');});```通过以上几种方式，我们可以方便地获取某个元素的兄弟元素，并对其进行操作。
jquery获取父元素方法
jquery获取父元素方法在前端开发中，我们经常需要获取元素的父元素。
使用 jQuery 可以很方便地获取元素的父元素。
下面就来详细介绍一下如何通过jQuery 获取元素的父元素。
步骤一：先获得目标子元素对象在使用 jQuery 获取元素的父元素之前，我们首先需要先获得目标子元素对象。
jQuery 选择器可以帮助我们获取目标子元素对象。
我们可以使用 CSS 选择器或 jQuery 自带的选择器来获取元素。
比如下面代码可以获取一个 id 为 child 的元素。
```let elem = $('#child');```步骤二：使用 .parent() 获取父元素获取了目标子元素对象之后，我们可以使用 .parent() 方法来获取元素的父元素。
.parent() 方法会返回最近的匹配父元素对象。
比如要获取一个元素的父元素，我们可以做如下操作。
```let elem = $('#child');let parent = elem.parent();```使用 .parent() 方法可以获取到最近的匹配父元素对象。
如果想要获取多级父元素对象，则需要在 .parent() 方法中传递一个选择器参数。
比如下面的代码可以获取一个元素的父元素的父元素。
```let elem = $('#child');let parent = elem.parent().parent();```步骤三：使用 .parents() 获取所有父元素如果想要获取目标元素的所有父元素，则可以使用 .parents() 方法。
这个方法可以获取目标元素的所有祖先元素。
我们可以给 .parents() 方法传递一个选择器参数，来过滤需要获取的祖先元素。
比如下面的代码可以获取一个元素的所有祖先元素。
```let elem = $('#child');let parents = elem.parents();```使用 .parents() 方法可以获取到目标元素的所有祖先元素，以及这些祖先元素的父元素对象。
jQuery获取兄弟元素的几种不错方法
jQuery获取兄弟元素的⼏种不错⽅法获取指定元素的兄弟元素时，可以使⽤adjacent sibling combinator (+)，其中+的两侧内容都是selector expression. 如果要获取下例中所有的 h1的直接兄弟元素h2复制代码代码如下:<div><h1>Main title</h1><h2>Section title</h2><p>Some content...</p><h2>Section title</h2><p>More content...</p></div>可以直接使⽤复制代码代码如下:$('h1 + h2')// Select ALL h2 elements that are adjacent siblings of H1 elements.如果要过滤h1的兄弟元素，当然也可以使⽤复制代码代码如下:$('h1').siblings('h2,h3,p');// Select all H2, H3, and P elements that are siblings of H1 elements.如果要获取当前元素之后的所有兄弟元素，可以使⽤nextAll()例如，针对下⾯的html代码复制代码代码如下:<ul><li>First item</li><li class="selected">Second Item</li><li>Third item</li><li>Fourth item</li><li>Fifth item</li></ul>如果要获取第⼆个条⽬之后的所有li元素，可以使⽤如下代码复制代码代码如下:$('li.selected').nextAll('li');上例也可以使⽤general sibling combinator (~)来实现复制代码代码如下:$('li.selected ~ li');获取直接兄弟元素也可以不使⽤selector，直接使⽤next()．复制代码代码如下:var topHeaders = $('h1');topHeaders.next('h2').css('margin', '0);。
jQuery----获取兄弟元素的方法
jQuery----获取兄弟元素的⽅法① $(this).next()；获取的是当前元素的下⼀个兄弟元素②$(this).nextAll(); 获取的是当前元素的后⾯的所有的兄弟元素③$(this).prev(); 获取的是当前元素的前⼀个兄弟元素④$(this).prevAll(); 获取的是当前元素的前⾯的所有的兄弟元素⑤$(this).siblings(); 获取的是当前元素的所有的兄弟元素(⾃⼰除外)案例练习：需求分析：⿏标进⼊⽂字，当前⽂字背景变红⾊，当点击时候，当前⽂字前⾯⽂字背景颜⾊变为黄⾊，后⾯⽂字背景颜⾊变为蓝⾊，当⿏标移出时，所有背景颜⾊取消效果：代码如下：1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 <style>7 ul {8 list-style-type: none;9 width: 200px;10 margin: 100px auto;11 }1213 ul li {14 margin-top: 10px;15 cursor: pointer;16 text-align: center;17 font-size: 20px;18 }19 </style>20 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>21 <script>22//获取ul中所有的li,有⿏标进⼊事件,⿏标离开事件,点击事件23// $(function () {24// //获取ul->li25// $("ul>li").mouseenter(function () {26// $(this).css("backgroundColor","red").siblings().css("backgroundColor","");27// }).mouseleave(function () {28// $(this).css("backgroundColor","").siblings().css("backgroundColor","");29// }).click(function () {30// //当前元素前⾯的所有兄弟元素背景颜⾊为黄⾊31// //$(this).prevAll().css("backgroundColor","yellow");32// //当前元素后⾯的所有兄弟元素背景颜⾊为蓝⾊33// //$(this).nextAll().css("backgroundColor","blue");34//35// //链式编程代码36// //断链:对象调⽤⽅法,返回的不是当前的对象,再调⽤⽅法,调⽤不了,37// //解决断链--->恢复到断链之前的⼀个效果--修复断链38// //.end()⽅法恢复到断链之前的效果39// $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");40// });41// });4243 $(function(){44//链式编程⿏标进⼊--⿏标点击--⿏标移出45//$("ul>li").mouseover().click().mouseout();46 $("ul>li").mouseover(function(){47 $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");48 }).click(function(){49 $(this).prevAll().css("backgroundColor","yellow");50 $(this).nextAll().css("backgroundColor","blue");51 }).mouseout(function(){52 $("ul>li").css("backgroundColor","");53 });54 });55 </script>56 </head>57 <body>58 <ul>59 <li>青岛啤酒（TsingTao）</li>60 <li>⽡伦丁（Wurenbacher）</li>61 <li>雪花（SNOW）</li>62 <li>奥丁格教⼠（Franziskaner）</li>63 <li>科罗娜喜⼒柏龙（Paulaner）</li>64 <li>嘉⼠伯Kaiserdom</li>65 <li>罗斯福（Rochefort）</li>66 <li>粉象（Delirium）</li>67 <li>爱⼠堡（Eichbaum）</li>68 <li>哈尔滨牌蓝带</li>69 </ul>7071 </body>72 </html>注意：上述代码第49、50⾏可以压缩成⼀⾏，这样就引⼊了⼀个新的⽅法end()；作⽤是恢复短链。
JS获取子、父、兄节点方法小结
JS获取⼦、⽗、兄节点⽅法⼩结我们在实际的开发中，经常要获取页⾯中某个html元素，动态更新元素的样式、内容属性等。
我们已经知道在JavaScript中提供下⾯的⽅法获取⼦、⽗、兄节点的⽅法： 常规通过⽗节点获取⼦节点：parentObj.firstChild 获取已知⽗节点的第⼀个⼦节点stChild 获取已知⽗节点的最后⼀个⼦节点parentObj.childNodes 获取已知⽗节点的⼦节点数组(这⾥我在IE 7中获取的是所有直接的⼦节点) parentObj.children 获取已知节点的直接⼦节点数组（在IE7中和childNodes效果⼀样）parentObj.getElementsByTagName(tagName) 返回已知⼦节点中类型为指定值的⼦节点数组通过临近节点获取兄弟节点：neighbourNode.previousSibing 获取已知节点的前⼀个兄弟节点neighbourNode.nextSibing 获取已知节点的下⼀个兄弟节点通过⼦节点获取⽗节点： 1、childNode.parentNode 获取已知节点的⽗节点上⾯的⽅法基本都是可以递归是使⽤的，parentObj.firstChild.firstChild.firstChild...但是这样的代码有⼀种傻傻的赶脚。
扩展在扩展之前，我们需要知道⼀些关于节点基础的知识：Dom节点中，每个节点都拥有不同的类型 W3C规范中常⽤的Dom节点的类型有以下⼏种元素节点每⼀个HTML标签都是⼀个元素节点1属性节点元素节点（HTML标签）的属性，如id，class，name等2⽂本节点元素节点或属性节点中的⽂本内容3注释节点便是⽂档的注释，形式如<!--comment Text-->8⽂档节点表⽰整个⽂档（Dom树的根节点，即document）9关于节点的名称，不同类型的节点对应不同的名称元素节点HTML的名称（⼤写）属性节点属性的名称⽂本节点它的值永远的都#text⽂档节点它的值永远都是#document可以分别通过nodeType（节点类型），nodeName（节点名称），以及nodeValue（节点值）分别返回节点的类型、节点名称以及节点值（⽐如元素节点返回1，属性节点返回2）JS获取兄弟节点的两种⽅法 ⽅法⼀：通过⽗元素的⼦元素先找到含⾃⼰在内的“兄弟元素”，然后在剔除⾃⼰function sibling(elem){var a = [];var b = elem.parentNode.children;for (var i = 0 ; i < b.length ; i++){if(b[i] !== elem) a.push(b[i]);}return a;}⽅法⼆：jQuery中实现⽅法，先通过查找元素的第⼀个⼦元素，然后在不断往下找下⼀个紧邻元素，判断并剔除⾃⼰。
jQueryDOM节点操作-父节点、子节点、兄弟节点
jQueryDOM节点操作-⽗节点、⼦节点、兄弟节点 -------------------------------------------------------------------⼦(/孙)节点: .children([selector]). 获得匹配元素集合中每个元素的所有直接⼦元素（选择器可选）。
实例:<div><a href="#"><span>welcome to </span>zhenheinfo</a><p id="p1">欢迎来到臻和信息</p><p id="p2">欢迎来到臻和信息</p></div>操作: $("div").children();结果: 得到<a></a>和<p></p>总共3个节点. 操作: $("div").children("#p1");结果: 得到<p id="p1"></p>节点. .find(selector). 获得当前匹配元素集合中每个元素的后代（选择器必须）。
实例:<div> <a href="#"><span>welcome to </span>zhenheinfo</a> <p id="p1">欢迎来到<span>臻和信息</span></p> <p id="p2">欢迎来到臻和信息</p> </div> 操作: $("div"). find ("span");结果: 得到2个<span></span>节点.兄弟节点: .siblings([selector]). 获得匹配元素集合中所有元素的同辈元素（选择器可选）。
简述如何获取兄弟元素节点。
要获取兄弟元素节点，可以使用JavaScript中的DOM操作方法。
以下是一种常见的做法：1. 获取当前节点的父节点：使用`parentNode`属性获取当前节点的父节点。
2. 获取父节点的子节点：使用`childNodes`属性获取父节点的所有子节点列表。
3. 遍历子节点列表：使用`for`循环或其他遍历方法遍历父节点的子节点。
4. 过滤兄弟元素节点：在遍历过程中，使用`nodeType`属性判断当前节点的类型是否为元素节点，并排除当前节点本身。
以下是一个示例代码，演示了如何获取兄弟元素节点：```javascript// 假设当前节点为当前页面中的某个元素节点var currentNode = document.getElementById("currentNode");// 获取当前节点的父节点var parentNode = currentNode.parentNode;// 获取父节点的所有子节点列表var childNodes = parentNode.childNodes;// 遍历子节点列表for (var i = 0; i < childNodes.length; i++) {var siblingNode = childNodes[i];// 判断节点类型是否为元素节点，且排除当前节点本身if (siblingNode.nodeType === 1 && siblingNode !== currentNode) { // 在此处进行对兄弟元素节点的处理console.log(siblingNode);}}```在上述示例中，我们通过`currentNode`变量表示当前节点，然后获取其父节点`parentNode`，再通过遍历父节点的子节点列表`childNodes`，排除当前节点本身，对兄弟元素节点进行处理。
需要注意的是，在实际应用中，可能会根据具体的需求和情况对代码进行适当的调整和优化。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
原文地址：js和jquery获取父级元素、子级元素、兄弟元素的方法作者：草根gis 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。
JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素
原生的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把换行也当做一个元素了。
所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。
functiondel_ff(elem){
varelem_child = elem.childNodes;
for(vari=0; i< p="">
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则是删除元素的子元素。
之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了
下面介绍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")。