jQuery 的語法構成

jQuery 語法就是通過 選取 HTML 元素（DOM），並對選取的對象進行 操作。

語法

1. 選取對象。
2. 操作。

jQuery 選取對象

$('')

代表著從 HTML 文件中開始尋找。

• $: jQuery。
• 單、雙引號: 在引號中放置要尋找的對象。

h1

代表網頁中，所有 <h1>...</h1>。

• 尋找的對象利用 CSS Selector 的規則定義。
  • 標籤 h1。
  • id #Header。
  • 類別 .footer。
  • 後代 .box #Header。
  • 屬性 img[alt]。

HTML

<div class="box"> 
  <h1>我是標題</h1>
  <header id="Header">header</header>
  <footer class="footer">footer</footer>
  <img src="./images/pic.jpg" alt="jQuery syntax">
</div>

JavaScript

$('h1') // 在 HTML 文件中，選取所有 <h1> 元素
$('#Header') // 在 HTML 文件中，選取一個 id 屬性為 Header 的元素
$('.footer') // 在 HTML 文件中，選取所有 class 屬性為 footer 的元素
$('.box #Header') // 在 HTML 文件中，選取所有父層 class 屬性為 box，且子元素的 id 屬性為 Header 的一個元素
$('img[alt]') // 在 HTML 文件中，選取所有 <img> 元素，且有 alt 屬性的元素。

jQuery 操作

.action()

代表著進行某項操作。

• .: 指的是獲取一個屬性或是方法的意思。比較簡單的翻譯方式為 的。
• action: 操作的 方法名稱。
• (): 接續在方法名稱的後面，不可省略!

參數

某些方法可代入參數，其參數就是寫在 () 中。

HTML

<div class="box"> 
  <h1>我是標題</h1>
  <header id="Header">header</header>
  <footer class="footer">footer</footer>
  <img src="./images/pic.jpg" alt="jQuery syntax">
</div>

JavaScript

// $('.box'): 從文件中，選取所有 class 屬性為 box 的元素
// .: 的
// hide(): 執行隱藏
$('.box').hide();