如何使用 jQuery 循环取 img 标签中的 src
理解需求
在开始编写代码之前,我们首先需要明确我们的需求是什么。我们需要循环遍历页面中的所有 img 标签,并获取每个 img 标签的 src 属性值。
查找 img 标签
在使用 jQuery 进行 DOM 操作之前,我们需要先确保 jQuery 库已经被引入到页面中。
在确保 jQuery 库已经引入的情况下,我们可以通过以下代码来查找页面中的所有 img 标签:
var imgTags = $('img');
这样,我们就得到了一个包含了所有 img 标签的 jQuery 对象。
循环遍历 img 标签
接下来,我们需要对获取到的 img 标签进行循环遍历。我们可以使用 jQuery 的 each 方法来实现循环遍历:
imgTags.each(function() {
// 在这里进行每个 img 标签的处理
});
在 each 方法的回调函数中,我们可以对每个 img 标签进行处理。
获取 src 属性
在回调函数中,我们可以使用 $(this) 来访问当前正在遍历的 img 标签。然后,我们可以通过 attr 方法来获取 img 标签的 src 属性值:
这样,我们就得到了当前 img 标签的 src 属性值。
处理 src 属性
我们可以在获取到 src 属性值后进行各种操作,比如打印到控制台、保存到数组或进行其他的处理。以下是一个示例,将每个 img 标签的 src 属性打印到控制台:
console.log(src);
完整代码如下所示:
var imgTags = $('img');
imgTags.each(function() {
var src = $(this).attr('src');
console.log(src);
});