需要的基础知识
校对完成，更新时间：2020-07-23 13:40:55
如果你已经具备前端基础，那就别听老鼠在这里磨叽了，动手写吧，你可以的.
如果你对基础有所了解，但要想知道的更多，就去认真的研读文档吧。在技术精进的道路上，除了学和做真的没有任何捷径。如果谁说有，那么把他打死，因为他和小老鼠讲的不一样，哼唧~（霸道！
如果你毫无基础，那么往下读，我会告诉你一些最基本的东西，让你可以做一些非常简单的操作，从中获取成就感，也更有利于你对这些技术有一个比较直观的印象。
但是就不要期望我完全展开，因为那样真的就成了大长篇的教程了。如果对前端有兴趣，推荐阅读 MDN 的开发文档；或者阅读我书写的《代码能有多难？》（ https://2019.dmnydn.com/ ），相对通俗浅显的将基础知识串讲了一遍，可能更有利于入门吧~如果你想学，又觉得难以坚持，那就来找小老鼠，我们一起探讨，或者让老鼠拿着小皮鞭每天督促你。
是的，以上是广告。这是多么良心的广告啊，难道你不想多读几遍么？！
以下所讲的内容，是写油猴脚本所必须的最基础的东西。当然别抬杠，就算是最基础的东西，也有可能一直都用不上它。一日三餐还是很基础的事情呢，但中午才起床的同学可能几年都没吃过早餐了。
HTML
认识标签，了解标签的结构，还有网页的基本结构。
下面是标签的最基本结构：
<这是开始标签>这是标签里面的文字或者代码</这是结束标签>
像这种东西，只要你不一看代码就吱哇的喊着：难呀难呀~应该有两分钟时间，自己就参悟透了。
<开始标签 属性名=“属性值”>内容</结束标签>
上面这样就给这个标签增加了一个属性。然后你看着代码对号入座就行了。
不知道有哪些标签，不知道有哪些属性，那你就先以为你不知道的就用不上，掩耳盗铃就很快活。因为油猴子很多时候都是去修改别人的网页，所以并不一定要求你对这些东西有特别深的了解，我也不知道你这是啥，我也不知道有什么用，但我就是想把这里的 1 改成 2，这没问题。
CSS
如果你想改变网页的样式，那需要学习 CSS；如果你想要一些看起来酷炫的动画，那最好也学习一下 CSS。
如果你只是想修改网页中的某个基本样式，那也许不需要深入的学习，只要能够通过开发者工具去查看这个元素所具有的样式，然后尝试修改就可以了，反正这些样式的属性名写的还算是比较直白，只不过是用英文单词去表述它的功能而已。大部分英文单词也都是非常基础的说。
但是，CSS 的选择器是必须学会的，想操作一个元素，你总要告诉脚本我要操作的是哪一个元素。而描述这件事情，就需要选择器的帮助。
这里简单的讲一下，记住，我只是简单的讲一下（强调！），所以还有更多更复杂的选择器，如果展开讲，你可能会看睡着的，而且有一些真的非常不常用。（但是学会了冷门的技能，遇到特殊情况的时候，就可以显示出自己比别人牛逼的地方来了，诶嘿嘿，我看你骨骼清奇，要不要跟我学习啊~~
选择器
- 用标签选择： 就直接用标签名进行选择，
a指的就是链接，p就是段落 - 用 id 选择： 如果这个元素具有 id 属性，我们可以用井号加它的 id 去选择这个元素，比如：
#meow - 用 class 选择： 如果这个元素具有 class 属性，我们可以用英文的句号加上它的 class 去选择这个元素，比如：
.meow - 用通配符选择： 星号代表一切元素
- 后代选择：把上面这些组合使用，中间用空格分隔，就表示什么里面的什么，比如：
#cat .meow就是说我们要找的是 id 为cat这个元素中所有具有值为meow的 class 属性的元素。 - 子元素选择：如果把上面的空格换成大于号（大于号左右可以加上空格，只是为了好看），就表示什么里面的直接子元素中的什么。直接子元素就是，被套在里面又紧挨着的。反正就是儿子辈儿，不是孙子辈儿，也不是更下面的后代
JavaScript
这里就很重点了，因为这是我们主要写的东西，哪怕只是写一句代码，我们要写的也是它，这是真正绕不过去的。
有人跟我说：你就直接告诉我怎么去做这件事情，我不想听你从头讲起，深入展开。
如果可以，我也真的想这样做，但实际上那样你并没有学会，什么都没学会。都不如不学，然后请我喝杯咖啡，帮你写这句简单的代码。我这样说肯定有人不太相信，毕竟也有很多教程，告诉你一句代码解决什么问题，又好学又厉害，隔壁的小孩都馋哭了。
那我就按照这个思路给你们掰扯一下：我现在要把网页中所有链接都变成链接到我的网站：
document.querySelectorAll('a').forEach(e=>{ e.href = 'https://dmnydn.com/' })
这代码不算长吧，如果我说这是一句代码，虽然不是很严谨，但也绝对不算过分。现在你可以把这句代码拿走了，而且不需要我讲解，你就知道修改后面的网址可以改变最终的结果。
好了，一句话，学会一个功能，多厉害！但如果真的是零基础，除了最后那个网址，你还能修改什么？而且在特定的情况下只是替换网址都可以导致出错，出错了也不知道发生什么，那就是小老鼠教给你的技巧有问题，嗯，都是小老鼠的错。还有，如果页面中的链接是用 JS 控制跳转的，那这个方法可能修改不了，于是，这个方法没起作用，全是小老鼠不好！！
那么上面一行代码中包含着多少相关的知识呢，我列个表看看吧：
| 代码 | 对应知识 | 讲解难度（十分粗略） |
|---|---|---|
| document | DOM 对象 系统对象 属性、方法、事件 …… |
仅基本理解这些概念 大概需要一万字 |
| querySelectorAll | 方法 元素对象 |
表面看几百字能说明白 但要了解相关方法也需要几千字 这个方法是选择所有符合元素的 还有只选择一个元素的方法 和一些其他选择方法 |
| ‘a’ | 字符串 选择器 HTML 标签 HTML 基础 |
选择器本身就是一个比较复杂的事情 如果你想要准确的选择到自己想操作的元素 就必然需要对这方面有足够的了解 再加上 HTML 基础，得一万字以上才能讲清楚 |
| forEach | 数组 遍历 循环 |
都是重要概念，都是基础 只是弄明白这是在干啥 也需要三千字以上的讲解 |
| e => {} | 函数 箭头函数 函数的参数 形参和实参的分辨 元素对象 |
函数可是个大重点 用一万字讲解不算过分 |
| e.href | 元素对象 对象 |
这些前面已经提到过了 |
| = | 赋值 运算符 |
赋值操作对于没有基础的人 是第一个需要重点理解的概念 只要想再稍微多了解一点 就必然涉及到运算符的问题 聊个五千字完全挡不住啊 |
| ‘https://dmnydn.com/’ | 字符串 | 这个前面已经提到过了 |
所谓的讲解字数，你就当我是开玩笑就好，我只是为了让完全对此没有概念的朋友能拥有一个相对直观的感受。这个形容方式十分的不精确，因为讲解的字数并不能真正的表达这个问题的复杂程度，有些概念的一句话都需要我们认真的琢磨半天。
那就有人说了，我不想搞得这么深入，我就想对页面做一点非常小的修改，所以像上面那样，给我一句代码，告诉我这句代码是做什么的，就好啦。这样毫无痛苦的学习，难道它不香吗？！
你开心就好。那如果需要修改链接的其他属性呢？如果是修改其他元素的其他属性？不同的属性还有不同的特点呢，它们的注意事项也不相同……然后我们就为每个属性去记录一条代码，那笔记可就真成代码大全了。不过这也挺好，就这样穷举每一句可能的写法，这活儿能干到孙子辈儿。（如果技术停滞不前不再进行发展的话
如果一个人会煮凉面或者能用电饭锅做米饭，他说自己会做饭，也算能够接受的；如果一个人会炒鸡蛋或者哪怕是凉拌个黄瓜，他说自己会做菜，也算能够接受的。水平高低放在一边，但起码饿不着自己。然而有的人就希望别人把菜做好了，然后他端到餐桌上去跟大家说：别客气，尝尝我的手艺……这种我就不是很能理解。
下面我列举的这些知识，仅仅是让大家可以动手开始书写的基础，就是勉强可以让你下凉面、蒸米饭、炒鸡蛋、拌黄瓜的意思。
基础知识
常量、变量
我们在描述的时候不可能总是去说这个数据的值，为了方便就会使用变量或者常量去指代它们。连带出来的问题就是变量和常量的声明、赋值和作用域。
const a = 1
let b = 2
const 声明的是一个常量，let 声明的是一个变量。它们的作用域可以粗略的认为是它们所在的大括号范围。= 是赋值符，表示把右侧的值赋给左侧的量。
再次强调，这里只是非常粗略的告诉大家需要这些知识，并没有进行展开。如果需要了解，可以自己去查阅文档。查询所需要用到的关键词，我基本都已经讲出来了。
运算符
上面的赋值符也是一种运算。我们最熟悉的就是加减乘除。但除此之外还有非常多的运算符，了解它们会带来许多便利，让代码更加简洁。
数据类型
基本的是数字，然后我们会经常用到字符串，就是一串字符，它们会用引号进行包裹。
然后是布尔型，布尔型很简单，只有两个值：true 和 false ，分别表示真和假，或者说成立和不成立。当我们判断两个值，它们是否相等，或者大于、小于、大于等于、小于等于这类关系时，就可以获得一个布尔型的数据，就是讲这个关系是成立还是不成立。
数组，当你有一组同类的数据时，可能就需要用到数组。当数据的结构变得更加复杂，就需要用到对象。这两个概念对于新人理解起来有一点困难，初期可以考虑先把它们绕过去，熟悉了简单操作，再去慢慢理解。
判断
如果小括号里的条件成立就执行大括号里的内容，如果不成立就执行 else 后面的大括号。
if(这里是条件){
// 这里是条件成立时要执行的代码
}else{
// 这里是条件不成立时要执行的代码
}
还有一些其他的变种格式，上面这个仅仅是最基础的，如果是非常简单的判断操作，可能我们会使用三元运算符解决。
循环
随便换一种就可以，如果仅仅说循环，那么肯定推荐使用 while 循环，因为它书写起来和判断差不多：
while(条件){
// 如果条件达成就循环执行此大括号的内容，直到条件无法达成
}
但是，for 循环是无法躲避的，因为在很多情况下 for 循环都更加好用，但是它的格式挺多的，这里我只举例一个最基础的：
for(let i=0; i<10; i++){
console.log(i)
}
以上是起码要会的，已经算是极限压缩了。下面列举一些要用到的对象：
有用的对象
数学
Math 对象包含很多数学方法，稍微复杂一点的运算都可能用到它。
字符串、数组、对象
这三个数据类型本身会带有一定的对它们的操作方法，了解这些方法会带来很多便利。
window
网页中的一切都在这个对象之上，怎么也得认识一下它吧。
document
网页中的元素都在这个对象之上。
网页元素对象
网页元素都具有哪些属性，如何进行获取和设置，这应该算是修改网页的基础操作了。
时间日期对象
Date 对象，涉及时间就会用到它，弄个时钟日历啥的，都和它有关。
这些就根据你希望侧重的方向和需求去了解就好。如果对某方面感兴趣，一定记得自己去阅读文档哦。遇到问题的话，可以来找小老鼠。
下一章我会给大家演示一些基础的操作和套路，算是给大家几块基础形状的积木，供大家尝试和理解。