阿嬷都看得懂的 JQuery 怎麽写

昨天我们聊到怎麽使用 document 这个咒语，让神灯精灵帮我们操纵 DOM。但是，每次都要重复写 document.getElementsBy... 以及 .addEventListener() 实在太不 DRY 了吧！

没错，於是有人开始想，我们是否能够把所有的 document 这种语法都合并呢？当我们想指定元素的时候，如果可以直接使用 CSS 选择器挑出来，然後直接加上简单的功能，让我们可以直接操纵 DOM 元素，这样不是很方便吗？

没错，JQuery 这个已经盛行 10 年以上的外挂，就是帮助我们这些懒人高效工程师而产生的！在我们引入 JQuery 以後，我们以前要写得很麻烦的

let pinkText = document.getElementsByClassName("pink")[0].childNodes[1]
pinkText.addEventListener("click",function(){
 	pinkText.innerText += "Clicked" 
})

现在只要写成

$(".pink>p").click(function(){
  let text = $(".pink>p").text()
  $(".pink>p").text(text+" Clicked")
})

是不是很开心呢！

那麽，我们应该怎麽引入这个外挂呢？这个外挂是由 JavaScript 写成的。换句话说，它其实就是个强者写好的 .js 档。因此，我们引入这个外挂的方法，就像我们昨天引入我们的 .js 档那样，写在 body 标签最後，用 script 标签引入。引入的方法，可以是将整个 JQuery 套件下载下来，或者像前面提到 CDN 方式以往只引入也可以。

那麽，接下来就让我们看看，怎麽使用 JQuery 简化 JavaScript 在操纵 DOM 方面的语法吧！

首先，观察上面的改写，我们可以发现，我们可以使用钱字号 ("$", dollar sign) 加上圆括弧，并且在当中放上 CSS 选择器的文字串，来找出网页上的元素。

其次，我们不再需要使用 .addEventListener() 这个方法，来监听元素发生的事件，而只需要使用 .click() 方法，里面放上点击事件发生後需要执行的功能即可。同理，我们也有 .dbclick()、.mouseover() 等等对应的方法。

不过，值得注意的是，JQuery 提供了 .toggle() 方法，让元素被点击的时候，从隐藏变成显现，或从显现变成隐藏。这对於设计需要重复开关的元素而言，是非常好用的方法。

那麽，如果我们要在使用者点击「粉红贴纸」的字样时，让绿色贴纸在显示时消失，又在消失时出现，应该怎麽用 JQuery 写呢？

第三，我们不再需要使用 .innerText 属性，而是改用 .text() 找出元素的 text，并且使用 .text(文字串) 来改变元素的 text。另外，我们也可以使用 .prop(属性文字串) 这个方法找出元素的某个属性，并且使用 .css(属性文字串, 值文字串) 的方式，改变元素属性的值。

那麽，如果我们要在使用者点击「粉红贴纸」的字样时，把黄色贴纸都变成白色，应该怎麽用 JQuery 写呢？

答案在这边：
https://codepen.io/LogosChen/pen/ExvPBmm

想一想：使用 JQuery 写就的这些指令，如果单纯只用 JavaScript 会怎麽写呢？