認識 jQuery 的基本使用與安裝教學｜JavaScript｜CDN｜jQuery｜伊恩踩坑筆記

「jQuery」這是我繼 PHP 後第二個接觸的程式語言，也就是基於 JavaScript 的函式庫，一開始接觸的時候覺得實在是神奇，帶入我初步認識 JavaScrip。其實它就只是幫你簡寫了很多 JavaScript 的函數，讓你更簡潔使用罷了。它適用於小型網站，非常的方便快速（中大型不推薦使用，管理維護很作死）

只是現在我幾乎沒有什麼在用 jQuery 了，接觸到的項目都偏向中大型，因此就沒有考慮使用它

很意外的是它竟然還有在更新⋯

安裝

你可以透過 npm、yarn、bower 安裝 jQuery ，也可以使用 CDN 直接掛載到你的網頁上（所有 jQuery 版本）

用法也很簡單，將以下程式碼放置到你的 </body> 之前

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

然後在上面這一段 JS 的下面開始寫 jQuery 程式碼

或壓縮版本

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

你也可以將它下載下來放到自己的網站內，這樣即便 CDN 掛掉或沒有網路時，你也可以在 Local 端繼續編寫程式

元素選擇器

$(selector)

例如有個 div

<div id="abc"></div>

你想要在這個 div 裡面插入文字進去，就可以按照這樣子渲染進去指定的 div

$('#abc').text('Hello')
$('#abc').html('<span style="color: #ff0000;">Hello</span>')
// .html 可以插入 HTML 語法

如果是 id 屬性，在該網頁中必須要是唯一的，不可重複

如果是 class 屬性，就可以多個插入

<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
$('.abc').text('Hello')

這三個 class 的 div 就會都出現 Hello 了

更改屬性值

<div id="ccc"></div>

假設我要將以上的 id 屬性值 ccc 改為 abc，只要這樣做就可以了

$('#cc').attr('id', 'abc')

加入 CSS 樣式

<span class="text-red">Hello!</span>

假設我想把它改成綠色，有多種方式：

• 直接透過 css 語法改變文字顏色

$('.text-red').css('color', 'green')

• 先宣告一個樣式，將元素取名字後先移除原本樣式，再添加新的樣式進去

.green {
  color: green;
}
<span id="hello-text" class="text-red">Hello!</span>
$('#hello-text').removeClass('text-red').addClass('green')

• 直接把樣式移除，不讓它有 class 屬性

$('#hello-text').removeAttr('class')

控制欄位屬性值

<input name="name" id="name" value="" />

當然也可以針對欄位做處理，例如我要添加值給該欄位

$('#name').val('123')
$('input[name=name]').val('123')
$('input[id=name]').val('123')
// 任一種方法都行

動畫

<div id="layout" style="display: none;">你看不見我</div>

我先將這個 div 區塊隱藏，因為某些事件後把 div 叫出

$('#layout').fadeIn(2000)
// 每 1000 ms 為 1 秒
// 也可以使用 'slow', 'fast'

只要懂得選擇器怎麼使用，你就可以拿來做很多事，很建議初步程式的新手可以試著玩玩看 jQuery，可以稍微知道程式運作的原理。當然如果你一開始就接觸框架，例如 Vue, React… 可以直接跳過 jQuery 去學原生 JavaScript 也是個非常好的選擇！

程式都各有好壞，一切就是看你「要做什麼」而去選擇哪個程式語言

還有非常多的功能，上面只是提到一點皮毛而已，可以參考 jQuery 官方文件 一探究竟

ING Design 応設計
https://www.theingdesign.com/