油猴子从入门到喵喵喵喵(实例:9/9 完结)

【本文为付费内容,如您尚未付费请点此】

【返回目录】 | 【上一章 需要的基础知识】

基本操作演示

校对完成,更新时间:2020-07-23 14:31:52

这些操作并不会很全面,主要作为演示,供大家了解。尽量去顾及趣味性,并有一定的实用性。

想到什么就写什么,并没有特定的条理,后面有时间我可能会再完善一下。

基本

最简单的输出方式

console.log('这里是要输出的内容')
const text = '也可以把这些内容放在一个变量或者常量里'
console.log(text)

然后我们就可以在浏览器的开发者工具中看到这些输出了,它们不会对程序的运行造成太大的影响(如果有大量输出,会让程序明显减慢),这在我们调试代码希望弄清楚究竟发生了什么的时候非常有用。

alert('这也是要输出的内容')

这行代码会弹出一个提示,所以这个输出很明确也很直接,不需要打开开发者工具就可以看到,所以可以用作和用户的交互。但它会将程序暂停,等到关闭这个提示框之后,程序才会继续。

代数运算

let a = 1
let b = 2
let c = a+b*5
console.log(c)

除了需要对变量进行声明,其他的用法和我们学习的代数几乎一致(初级用法),就可以用来很方便的进行数学运算。

连接字符串

const text = '小老鼠'+'他好帅呀~'

我们对两个字符串做加法,就可以将两个字符串连接在一起。

模板字符串

const css = `
	body {
		background: yellow;
	}
`

这个我们在前面接口中,讲向页面里添加 CSS 的时候提到过。简单的讲就是用反引号(主键盘数字 1 左侧的按键)来替代引号,这样在字符串之中可以放引号和换行,就更方便在其中写入,比如 CSS 或者 html 的代码。

函数

()=>{}

对于初学者,又希望快速使用,那么可以先用箭头函数,因为写起来方便一点,不过在很老旧的浏览器里是不被支持的,如果你真遇到这种情况,请把浏览器换掉。

前面小括号里用来写参与这个函数执行的一些数据,后面大括号里是对这些数据进行的一些操作。函数其实将一些固定操作打包成一个整体,方便使用,

如果没有数据需要传入函数之中,那么就写一个空的小括号;如果只有一个数据需要传入函数之中,可以只写这个数据的名称而省略小括号;如果有多个数据要传入函数之中,那么小括号必须存在,并且中间用逗号分隔。

现在来定义一个做加法的函数:

const add = (a, b)=>{
    const result = a+b
	console.log(result)
}

我们定义了一个函数,然后用 add 来指代这个函数。现在仅仅是完成了定义,我们设计了这样一套操作,然后这套操作应该怎样去做。对这个事情都说清楚了,但并没有实际的进行操作。

下面来执行这个函数:

add(1, 2)

我要使用叫做 add 的这个函数,后面的小括号里放入这个函数需要的数据,然后程序就会完成我们刚才设定好的那一套操作,它会把两个数字相加,然后输出出来。

函数本身是一个比较复杂的概念,这里演示的十分简陋,只能是有一个大约的概念。有时候我们使用函数是为了将这些代码打包成一个整体,有时候是为了将这套操作方便的放入其他位置,而不至于因为代码太多,导致混乱。

网页

标题

document.title = '这个页面的标题已经被帅气的小老鼠占领了'

这是 document 对象下面的一个属性,表示的是我们页面的标题,就是显示在浏览器标签上的那行文字。我们可以像上面那样对它进行赋值,就修改了它的内容,也可以像下面这样将它的内容赋值给其他的变量,来获取它当前的值。

const title = document.title
console.log(title)

身体

document.body

这个一般不会单独使用,但是要注意页面中的所有元素基本都在这个对象之下,对应的是网页 <body> 这个元素对象。

同理可得,用 document.head 可以获取网页的头部信息。

网址

window.location

这个对象中包含当前网页网址的相关信息。大部分时间我们会这样用来获取完整的网址:

window.location.href

有了完整网址以后,只要稍加分析就可以获得网址相关的各种信息。不过其实上面的网址对象已经帮我们完成了初步的分析操作,大家可以将它输出出来,然后查看一下。比较常用的属性如下:

  • href: 完整的网址
  • hostname: 网站的域名
  • pathname: 域名后面的路径部分
  • search: 网址中问号及其后面的部分
  • hash: 网址中井号及其后面的部分

选择一个元素

document.body.querySelector('a')

这样我们就获取了页面中第 1 个链接元素,小括号中的这个字符串用来书写对应元素的选择器。这个方法只获得第 1 个符合这个选择器的元素,所以它获得的就是一个元素对象。

选择多个元素

document.body.querySelectorAll('a')

这样获取的就是页面中所有的链接元素,和上面代码对比多了一个 All,这就很合理。因为是多个元素,所以这个方法获得的是所有符合这个选择器元素所组成的数组。一般情况下这个方法后面都会连接 forEach(后面会讲)。

其实对于元素的选择还有很多方法,但对于新手快速掌握上面这两种是最方便的,因为直接使用选择器学习成本相对要低一点,通用性又很高。

元素遍历

document.body.querySelectorAll('a').forEach(e=>{  })

选择多个元素之后在后面直接接 forEach 对这些元素进行遍历,就是把这些元素都过一遍,对每一个元素执行相同的操作。后面的小括号里就是要进行的操作。

小括号里的内容是一个箭头函数,这里的 e 是我假定的一个值,用它来代表当前正在被操作的那个元素,就是现在轮到哪个元素它就代表哪个元素。就好像小学生排队打预防针,当然要一个一个进行,不过对每一个同学做的操作都是一样的。而医生和学生说话的时候,都是叫同学,但我们明白,他嘴里的同学是用来代表当前正在打针的那个同学。这样类比着去理解就容易一些。

然后大括号里再书写对元素的具体操作。很容易看出,这里是一个函数的定义。也就是程序会对每一个单独的元素去执行一下这里的函数。

元素操作

对于元素的大部分属性都可以用 元素.属性名 的形式调用,用起来和上面设置网页标题的操作一样。

document.body.querySelectorAll('a').href = 'https://dmnydn.com/'

我选择了一个链接元素,然后它的 href 属性被我重新赋值。这样就修改了这个链接的链接地址。其他属性也都类似,当然你只能给属性去赋予它能够接受的值,否则一般情况是不起作用。至于都有哪些属性,大家可以通过开发者工具去观察网页中的元素,不同元素可以拥有的属性也不太一样。

注意有一些特殊属性是没有办法按照上面方法进行操作的。

元素的内容

document.body.querySelectorAll('a').innerText = '小老鼠他超帅的'

这样我们就修改了这个链接显示的文字。如果一个元素中可以包含文字内容,那么就可以用这个方法进行设置。或者用它来获取这个元素中的文字内容。

元素的代码

但是上面的方法有一些问题,获取的时候,我们彻底忽略了元素中的其他代码。设置的时候这个元素里面就只能拥有文字了。那如果想让在这个元素里放入其他代码,可以用下面的方法:

document.body.querySelectorAll('a').innerHTML = '小老鼠他超帅的(<strong>确信</strong>'

追加元素

有时候我们需要向页面中插入某个元素,当然可以像上面那样去修改元素的代码,把我们的元素直接书写进去。但这样导致整个元素的代码都被重写了,原有的内容会被覆盖。

我们先获取原有的代码,然后通过修改来加入我们自己的元素。这看起来是可行的,但实际会有副作用。留下一句解释,新人可以忽略掉,因为很可能看不懂。这样的操作会导致这些代码中的元素全被更新,而绑定在它们上面的事件可能就丢失了。

正确的方法是像下面这样操作,比如我要在 <body> 元素中追加一个链接:

const newLink = document.createElement('a')
newLink.href = 'https://dmnydn.com/'
newLink.innerText = '可可爱爱'
document.body.appendChild(newLink)

第 1 行先创建了一个元素,它的标签是 a,下面两行用来设定这个元素的一些属性,最后将这个元素追加到 body 对象之中。

点击元素

document.body.querySelectorAll('a').click()

这样就对页面中的第 1 个链接元素进行了一个点击操作,这个方法可以用来自动化的完成一些事情。

数据

日期

时间日期是我最喜欢鼓捣的数据之一,因为用法简单,又十分实用,特别适合给新手用作练习。

那么先来一个时间:

const now = new Date()

我们说需要一个全新的时间对象,但是没有给出更多的要求(小括号里面是空的),于是它就返回了当前时间。所以这里我把这个时间对象放在了 now 之中。

它是一个对象,但是你可以把它直接输出出来,会显示成为一段文字,类似这样:Wed Jul 22 2020 16:14:59 GMT+0800 (中国标准时间)

我们也可以把它转换为数字,这时候代表的是时间戳,就表示这个时间相对于某个特定时间相差的毫秒数。也可以从中获取这个时间对象中的一些具体数据,比如下面这样:

const year = now.getFullYear()

这样就可以获取其中的年份信息,其他方法和详细解释请查阅文档。

类型转换

有时候我们需要对数据类型进行转换,比较常见的就是数字和字符串之间的转换。以下讲解不考虑无法转换而出错的情况。

const a = '123'
const b = +a
const c = Number(a)

这里的 a 是一个字符串,它的内容是一串数字。如果在它前面加一个正号,相当于进行了一次数学运算,所以程序会自动将它转换为数字之后再进行运算,这样得出的结果就是一个数字。而因为前面加正号,这个运算并不会对数字本身产生修改,所以就起到了类型转换的作用。

第二种写法(Number(a)),则是语义上十分明确,虽然长了一点,但还是很推荐使用。

const a = 666
const b = ''+a
const c = String(a)

两种方法的思路和解释都和上面类似.

操作

延时

window.setTimeout(()=>{
    // 一些操作
}, 2000)

小括号里是两个参数,第 1 个参数是一个函数,用来放我们希望进行的操作;第 2 个参数是一个时间,单位是毫秒。这样就会在经过这个时间之后再执行前面的函数。

window.setInterval(()=>{
    // 一些操作
}, 2000)

这段代码和上边非常相似,但它表示的是每经过这个固定的时间间隔就执行一次这个函数。

【返回目录】 | 【下一章 精通?!】