iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 29

[Day 29] 阿嬤都看得懂的 JQuery 怎麼寫

阿嬤都看得懂的 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 會怎麼寫呢?


上一篇
[Day 28] 阿嬤都看得懂的怎麼操縱 DOM
下一篇
[Day 30] 阿嬤成為網頁前端工程師的下一步
系列文
你阿嬤成為網頁前端工程師的第一步30

1 則留言

0
Logos50607
iT邦新手 5 級 ‧ 2021-10-19 02:08:25

文章已更新囉~

我要留言

立即登入留言