如何轻松愉快的写你的第一个油猴脚本
大家应该都用过油猴吧？这玩意简直就是大学生，程序员等等各类宅男的梦中工具，可以实现很多想不到的功能，但是它使用了JS的功能，听到JS，大家可能就有点懵了：我又没学过JS，我怎么轻松的写脚本呢？这不是开玩笑呢嘛？当然不是，作为一个初学者，现在我来教大家怎么写一个简简单单的油猴脚本。这个网站由于是Gitee page原因，不能太大，为了节约资源，我就不放图片了
准备
首先，大家应该准备一个编辑器，啥都行，记事本应该也行（吧），尽量能高级一点，这样会有代码高亮等提示和缩进，更方便自己写代码，然后确定一下自己的需求，比如，我想要实现在我们学校教务系统的评教模块写一个一键评教的功能，懒得点按键，网站如下：http://218.197.101.69:8080/index（对没错就这么简单粗暴的的网站，是不是感觉很离谱），点开后你会发现有很多选项（当然为了给面子一般都选的是非常好选项），那我们的任务就是一键选择所有的非常好选项咯。
实操
代码头信息块
代码语言：javascript复制// ==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，这个指的是我们所要应用的网站，有的时候是这个，有的时候是哪个，这个就自己确定了，*表示的是随意，你可以随便填入你自己所需要的个性化网站。
然后开始看以下内容：
代码语言：javascript复制'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的严格模式，具体啥意思……大家自己看链接吧，俺也不太能讲明白，后面的一些，很简单，随便创建了一个按钮，然后修改了按钮的各个信息而已，大家自己了解一下，就可以进行下一个内容了。
按钮响应函数
代码语言：javascript复制button.addEventListener('click', () => {
setTimeout(() => {
// 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(‘*’)获取所有信息。
然后随便遍历所有关键字进行查找，找到后点击即可：
代码语言：javascript复制 elements.forEach((element) => {
if (element.innerText === 'A、非常好') {
element.click();
console.log(element)
}
});最后一部分：
代码语言：javascript复制var bar = document.getElementsByClassName('btns-r')[0]; //getElementsByClassName 返回的是数组，所以要用[] 下标
bar.appendChild(button); //把按钮加入到 x 的子节点中这个是添加我们的按钮的，我想要将其添加到标题栏，所以选择了最顶部分的一堆按钮之中，这对按钮虽在的标签是<class = “btns-r”>,所以直接获取，注意这是一个数组，里面会有很多的按钮，所以需要【】获取，最后将其添加进来即可
