jquery获取不是自己的元素

在使用jQuery进行网页开发时，我们经常需要获取非自身元素的相关信息，这可以通过多种方法实现，包括使用选择器、事件委托以及遍历DOM树等，本文将详细介绍如何使用jQuery获取非自身元素，并提供一些实际应用示例。

我们需要了解jQuery选择器，选择器是jQuery中用于查找和选择DOM元素的强大工具，通过使用选择器，我们可以轻松地获取到特定元素，无论它们是否是当前元素的子元素，以下是一些常用的选择器示例：

1、标签选择器：通过指定HTML标签名称来选择元素。$('div') 会选取所有的<div>元素。

2、类选择器：通过指定类名来选择具有该类的元素。$('.my-class') 会选取所有类名为my-class的元素。

3、ID选择器：通过指定ID来选择具有该ID的元素。$('#my-id') 会选取ID为my-id的元素。

4、属性选择器：通过指定属性名和属性值来选择具有该属性的元素。$('a[href="https://example.com"]') 会选取所有href属性值为https://example.com的<a>元素。

接下来，我们将探讨如何使用这些选择器来获取非自身元素，假设我们有一个如下的HTML结构：

<div id="parent">
  <button id="btn1">Click me</button>
  <button id="btn2">Click me too</button>
</div>

我们希望在点击#btn1时，获取#btn2的文本内容，这里我们可以使用jQuery的.on()方法进行事件委托：

$('#parent').on('click', '#btn1', function() {
  var textContent = $('#btn2').text();
  console.log(textContent);
});

在这个例子中，我们为#parent元素绑定了一个点击事件，当#btn1被点击时，事件处理程序会被触发，在事件处理程序中，我们使用$('#btn2')选择器来获取#btn2元素，并使用.text()方法获取其文本内容。

事件委托是一种非常有效的方法，因为它允许我们在不直接操作目标元素的情况下获取它们的信息，这在处理动态生成的元素或具有大量子元素的元素时尤为有用。

除了事件委托，我们还可以通过遍历DOM树来获取非自身元素，我们可以使用.parent()、.children()、.siblings()等方法来访问DOM树中的其他元素，以下是一些使用这些方法的示例：

1、.parent()：获取当前元素的父元素。

```javascript

$('#btn1').parent();

```

2、.children()：获取当前元素的子元素。

```javascript

$('#parent').children();

```

3、.siblings()：获取当前元素的兄弟元素。

```javascript

$('#btn1').siblings();

```

通过结合使用jQuery选择器、事件委托和DOM遍历方法，我们可以轻松地获取非自身元素的信息，这在开发复杂的Web应用程序时非常有用，可以帮助我们更高效地处理各种交互和事件。