[Javascript]Javascript编程开发中如何使用jQuery获取$(this)选择器的子节点？

问题描述

在jQuery的javascript开发中，当前有类似如下的HTML结构代码：

<div id="..."><img src="..."></div>

现在想使用jQuery选择器来得到当点击div元素时div里的img子节点。

当点击div元素时，我们可以使用如下的选择器来获取到div，如下：

$(this)

但要获取到div元素中的img子节点，应该怎样实现呢？

方案一

jQuery构造函数接受第二个名为context的参数，可用于覆盖选择的上下文。因此，可像如下这样使用：

jQuery("img",this);

这种方式类似.find()方法的使用，如下：

jQuery(this).find("img");

此外，如果img元素是div元素的直接后代节点，我们还可以使用.children()方法来获取，如下：

jQuery(this).children("img");

方案二

使用.find()方法来获取，如下：

$(this).find("img");

注意：此方法会返回div元素中所有的匹配的img子节点元素集合。

方案三

使用.children()方法来获取，如果只需要返回第一个匹配的img元素，还可以添加选择器的修饰，如下：

$(this).children("img:first");

方案四

如果img是div的直接子节点，则可以：

$('> .child',this)[0];

或者

$(this).children()[0]

方案五

$(this).find("img"); // 返回所有的子节点或者子孙节点的img集合 
$(this).children("img"); // 返回所有直接后代(子节点)的img集合
$(this).find("img:first") // 返回所有的子节点或者子孙节点的第一个img的集合
$(this).children("img:first") // 返回直接后代(子节点)的第一个img元素
$(this).children("img:nth-child(1)") // 返回直接后代(子节点)的第一个img元素
$(this).next(); // 返回直接后代(子节点)的第一个img元素