jquery 采集

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的目标是“写得更少，做得更多”。

优势

轻量级：文件大小小，加载速度快。
跨浏览器兼容：支持大多数主流浏览器。
丰富的选择器：提供强大的 CSS 选择器扩展。
链式操作：允许连续调用多个方法。
易于使用：API 设计简洁，易于上手。
强大的 Ajax：简化了与服务器的异步通信。

类型

DOM 操作：选择元素、修改属性、添加/删除元素等。
事件处理：绑定事件、触发事件等。
动画效果：淡入淡出、滑动、动画等。
Ajax 交互：异步请求数据、处理响应等。

应用场景

网页交互：按钮点击、表单验证、动态内容加载等。
数据采集：从网页中提取数据，用于数据分析、展示等。
动态网页：实时更新内容，无需刷新页面。

采集示例

假设我们要从一个网页中采集所有的链接，可以使用以下 jQuery 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 采集示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <a href="https://example.com/page1">Page 1</a>
    <a href="https://example.com/page2">Page 2</a>
    <a href="https://example.com/page3">Page 3</a>

    <script>
        $(document).ready(function() {
            $('a').each(function() {
                var link = $(this).attr('href');
                console.log(link);
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：jQuery 未加载

原因：可能是 jQuery 库未正确引入，或者路径错误。

解决方法：确保 jQuery 库已正确引入，路径正确。例如：

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

问题：选择器不生效

原因：可能是选择器写错，或者元素未加载完成。

解决方法：确保选择器正确，使用 $(document).ready() 确保 DOM 加载完成后再执行操作。例如：

$(document).ready(function() {
    $('a').each(function() {
        var link = $(this).attr('href');
        console.log(link);
    });
});

问题：跨域请求失败

原因：浏览器的同源策略限制了跨域请求。

解决方法：使用 JSONP 或 CORS 解决跨域问题。例如，使用 jQuery 的 $.ajax 方法：

$.ajax({
    url: 'https://example.com/api',
    method: 'GET',
    dataType: 'jsonp',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});