【油猴脚本】00015 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。优化UI界面，Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写

引言

在现代网页开发中，使用油猴（Tampermonkey）脚本可以非常方便地进行网页内容的修改与爬虫操作。油猴脚本允许我们在访问特定网页时自动执行JavaScript代码，从而实现诸如数据抓取、用户界面优化等功能。本文将介绍如何利用油猴脚本进行UI界面的优化，并结合jQuery和原生JavaScript进行简单的爬虫操作。

环境准备

首先，你需要在浏览器中安装Tampermonkey插件。安装完成后，你可以创建新的用户脚本，并在其中编写代码。我们将以一个简单的示例为基础，展示如何抓取网页上的数据，并优化其界面。

爬虫基础

假设我们需要爬取一个网页中的标题和链接信息。我们将使用jQuery进行DOM操作，因为它提供了更简洁的API来操作HTML元素。

示例脚本

// ==UserScript==
// @name         爬虫与UI优化示例
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  爬取网页数据并优化UI界面
// @author       Your Name
// @match        *://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 引入jQuery
    let script = document.createElement('script');
    script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
    document.head.appendChild(script);

    script.onload = function() {
        // 确保jQuery加载完成后执行代码
        $(document).ready(function() {
            // 爬虫逻辑：获取所有文章的标题和链接
            let articles = [];
            $('h2 a').each(function() {
                articles.push({
                    title: $(this).text(),
                    url: $(this).attr('href')
                });
            });

            console.log(articles);  // 在控制台打印抓取的数据

            // UI优化：添加一个按钮显示抓取的信息
            $('body').append('<button id="show-articles" style="position:fixed; top:10px; right:10px;">显示文章</button>');

            $('#show-articles').click(function() {
                let output = '<h3>抓取的文章</h3><ul>';
                articles.forEach(article => {
                    output += `<li><a href="${article.url}" target="_blank">${article.title}</a></li>`;
                });
                output += '</ul>';

                // 创建一个模态框显示文章信息
                let modal = `<div id="modal" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); color:white; z-index:1000; display:flex; justify-content:center; align-items:center; flex-direction:column; ">
                              <div style="background:white; color:black; padding:20px; border-radius:10px;">
                               ${output}
                               <button id="close-modal" style="margin-top: 10px;">关闭</button>
                              </div>
                             </div>`;
                $('body').append(modal);

                // 关闭模态框
                $('#close-modal').click(function() {
                    $('#modal').remove();
                });
            });
        });
    };
})();

代码解析

1. 脚本头部：通过// ==UserScript==标记了该用户脚本的基本信息，包括名称、版本和适用的网页地址。

2. 引入jQuery：使用JavaScript动态加载jQuery库，以便后续使用其方法。

3. 爬虫逻辑：

4. 使用jQuery选择器$('h2 a')选择页面中所有标题链接。

5. 使用each()遍历这些链接，将标题和链接存放在一个数组中。

6. UI优化：

7. 动态创建一个按钮，点击后显示爬取的数据。
8. 创建模态框，展示抓取到的文章列表，点击关闭按钮可以关闭模态框。

结论

通过以上示例，我们展示了如何使用Tampermonkey脚本来进行基本的网页爬虫和UI优化。油猴脚本为我们提供了便利的自定义功能，让我们能够根据个人需求修改和优化网页。然而，在使用爬虫技术时，务必遵循网站的使用条款和法律规范，确保不影响他人的正常使用。希望本文能为你提供一个良好的起点，激发你对网页开发和爬虫技术的兴趣。