正文

学会用jQuery轻松提取页面所有引用文件名，快速掌握实用技巧

/0 浏览量
0401

在网页开发中，我们经常需要提取页面中所有引用的文件名，比如图片、CSS、JavaScript等。jQuery是一个非常强大的JavaScript库，可以帮助我们轻松实现这一功能。下面，我将详细讲解如何使用jQuery来提取页面中所有引用的文件名。

准备工作

在开始之前，请确保你已经将jQuery库引入到你的项目中。以下是一个简单的引入方法：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

提取页面中所有图片的文件名

首先，我们来提取页面中所有图片的文件名。图片通常在<img>标签中引用，文件名位于src属性中。

$(document).ready(function() {
    // 获取所有图片标签
    var images = $('img');

    // 遍历图片标签，提取文件名
    images.each(function() {
        var src = $(this).attr('src');
        var filename = src.split('/').pop(); // 分割路径，获取文件名
        console.log(filename); // 打印文件名
    });
});

提取页面中所有CSS文件的文件名

CSS文件通常在<link>标签中引用，文件名位于href属性中。

$(document).ready(function() {
    // 获取所有CSS文件标签
    var links = $('link[rel="stylesheet"]');

    // 遍历CSS文件标签，提取文件名
    links.each(function() {
        var href = $(this).attr('href');
        var filename = href.split('/').pop(); // 分割路径，获取文件名
        console.log(filename); // 打印文件名
    });
});

提取页面中所有JavaScript文件的文件名

JavaScript文件通常在<script>标签中引用，文件名位于src属性中。

$(document).ready(function() {
    // 获取所有JavaScript文件标签
    var scripts = $('script');

    // 遍历JavaScript文件标签，提取文件名
    scripts.each(function() {
        var src = $(this).attr('src');
        var filename = src.split('/').pop(); // 分割路径，获取文件名
        console.log(filename); // 打印文件名
    });
});

总结

通过以上方法，我们可以轻松地使用jQuery提取页面中所有引用的文件名。这些技巧可以帮助你在网页开发过程中更加高效地处理资源文件。希望这篇文章对你有所帮助！

-- 展开阅读全文 --