如何轻松愉快的写你的第一个油猴脚本

大家应该都用过油猴吧？这玩意简直就是大学生，程序员等等各类宅男的梦中工具，可以实现很多想不到的功能，但是它使用了JS的功能，听到JS，大家可能就有点懵了：我又没学过JS，我怎么轻松的写脚本呢？这不是开玩笑呢嘛？当然不是，作为一个初学者，现在我来教大家怎么写一个简简单单的油猴脚本。这个网站由于是Gitee page原因，不能太大，为了节约资源，我就不放图片了

准备

首先，大家应该准备一个编辑器，啥都行，记事本应该也行（吧），尽量能高级一点，这样会有代码高亮等提示和缩进，更方便自己写代码，然后确定一下自己的需求，比如，我想要实现在我们学校教务系统的评教模块写一个一键评教的功能，懒得点按键，网站如下：http://218.197.101.69:8080/index（对没错就这么简单粗暴的的网站，是不是感觉很离谱），点开后你会发现有很多选项（当然为了给面子一般都选的是非常好选项），那我们的任务就是一键选择所有的非常好选项咯。

实操

代码头信息块

// ==UserScript==
// @name          教务系统一键评教
// @namespace     https://willow-god.gitee.io/
// @version       1.0.3
// @description  打开教务系统，随便打开一个老师的评价页面，点击后会自动全选非常好选项
// @author       liushen
// @include      *://218.197.101.69:8080/edu/task/evaluate/*
// @include      *://218.197.101.69:8080/edu/task/evaluate/*
// ==/UserScript==

按钮信息设置

观察以上代码，我们可以看见一些信息，name呀啥的，我就不说了，我们最重要的就是那个include，这个指的是我们所要应用的网站，有的时候是这个，有的时候是哪个，这个就自己确定了，*表示的是随意，你可以随便填入你自己所需要的个性化网站。

然后开始看以下内容：

'use strict';
   var button = document.createElement("button"); //创建一个按钮
   button.textContent = "一键评教"; //按钮内容
   button.style.width = "90px"; //按钮宽度
   button.style.height = "30px"; //按钮高度
   button.style.align = "center"; //文本居中
   button.style.color = "white"; //按钮文字颜色
   button.style.background = "#13bbb3"; //按钮底色
   button.style.border = "1px solid #e33e33"; //边框属性
   button.style.borderRadius = "4px"; //按钮四个角弧度

第一行那个’use strict’是指的JAVASCRIPT的严格模式，具体啥意思……大家自己看链接吧，俺也不太能讲明白，后面的一些，很简单，随便创建了一个按钮，然后修改了按钮的各个信息而已，大家自己了解一下，就可以进行下一个内容了。

按钮响应函数

button.addEventListener('click', () => {
       ousetTimet(() => {
           // Find all instances of "非常好"
           const elements = document.querySelectorAll('span');

           // Click each element that contains "非常好"
           elements.forEach((element) => {
               if (element.innerText === 'A、非常好') {
                   element.click();
                   console.log(element)
               }
           });
           setTimeout(() => {
               document.querySelector('.btns-r').children[1].click();
           },100) //等待0.1秒后再退出
           document.querySelector('.btns-r').children[0].click();
       }, 100); // 等待 0.1 秒钟再执行评教操作
   });

这一段就是核心咯，注意听，首先，第一行“button.addEventListener(‘click’, () => {代码在这里})”，这就是一个标准的监听器函数，监听的行为是点击，如果有点击，执行里面的内容。第二行中的“setTimeout(() => {},毫秒数)”，这个就是为了给网站一点时间来刷新（我是这么理解的，如有错误请致电10086），然后，我发现一个严重的事情，这个网站上的所有的非常好按钮只有一个data-code参数的值不太一样，感觉不是很有大众性，所以这里，我直接按照文字来找他，使用函数document.querySelectorAll(‘span’)寻找所有span标签的内容（具体是什么标签可以试试右键检查后自己寻找），当然，如果不知道可以直接使用document.querySelectorAll(‘*’)获取所有信息。

然后随便遍历所有关键字进行查找，找到后点击即可：

	elements.forEach((element) => {
		if (element.innerText === 'A、非常好') {
		element.click();
		console.log(element)
	}
});

最后一部分：

1 2	var bar = document.getElementsByClassName('btns-r')[0]; //getElementsByClassName 返回的是数组，所以要用[] 下标 bar.appendChild(button); //把按钮加入到 x 的子节点中