需要的基础知识
校对完成,更新时间: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 对象,涉及时间就会用到它,弄个时钟日历啥的,都和它有关。
这些就根据你希望侧重的方向和需求去了解就好。如果对某方面感兴趣,一定记得自己去阅读文档哦。遇到问题的话,可以来找小老鼠。
下一章我会给大家演示一些基础的操作和套路,算是给大家几块基础形状的积木,供大家尝试和理解。