jquery获取子节点和父节点的示例代码

当涉及到操作DOM时，jQuery是一个非常流行的选择。下面是几个获取子节点和父节点的jQuery示例。

获取子节点

子元素选择器示例

通过子元素选择器，可以轻松地获取一个元素的所有子元素，例如：

$(document).ready(function(){
  $("ul li").css("border", "1px solid red");
});

上面的代码将为文档中的所有<ul>元素的所有子元素添加红色的边框。

.children()方法示例

使用.children()方法，可以获取一个元素的所有子元素，就像这样：

$(document).ready(function(){
  $("ul").children().css("border", "1px solid blue");
});

上面的代码将为文档中的所有<ul>元素的所有子元素添加蓝色的边框。

获取父节点

.parent()方法示例

用.parent()方法，可以获取某个元素的父元素，例如：

$(document).ready(function(){
  $("li").click(function(){
    $(this).parent().css("background-color", "yellow");
  });
});

上面的代码将会使所有<li>元素有一个点击事件。当某个<li>元素被点击时，它的父级元素（在这种情况下是一个<ul>元素）的背景色将更改为黄色。

.closest()方法示例

借助.closest()方法，可以获取某个元素的最近的匹配元素（父元素或祖先元素），例如：

$(document).ready(function(){
  $("span").click(function(){
    $(this).closest("div").css("background-color", "red");
  });
});

上面的代码将会使所有的<span>元素有一个点击事件。当某个<span>元素被点击时，它的最近的包含一个<div>元素的祖先元素的背景色将更改为红色。

使用上述的示例应该可以帮助你更好地理解如何使用jQuery获取子节点和父节点。