Skip to content

jQuery 的語法構成:選取器與 action() 操作

jQuery 語法構成:選取器與 action 操作

jQuery 語法就是透過 選取 HTML 元素(DOM),並對選取到的對象進行 操作 。整個函式庫的用法,都建立在這兩個步驟上。

語法

  1. 選取對象。
  2. 操作。
js
$('選取器').action();

jQuery 選取對象

$('')

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

  • $:jQuery 這個物件的縮寫別名。
  • 單、雙引號:在引號中放置要尋找的對象。

h1

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

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>
js
$('h1'); // 在 HTML 文件中,選取所有 <h1> 元素
$('#Header'); // 在 HTML 文件中,選取一個 id 屬性為 Header 的元素
$('.footer'); // 在 HTML 文件中,選取所有 class 屬性為 footer 的元素
$('.box #Header'); // 在 HTML 文件中,選取父層 class 屬性為 box,且子元素的 id 屬性為 Header 的元素
$('img[alt]'); // 在 HTML 文件中,選取所有有 alt 屬性的 <img> 元素

選不到也不會報錯

jQuery 選不到元素時,會回傳一個長度為 0 的集合,後續操作等於沒作用,並不會像 原生的 DOM 選取 那樣拋出錯誤。方便歸方便,但也比較不容易察覺自己寫錯了。

jQuery 操作

.action()

代表著進行某項操作。

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

參數

某些方法可代入參數,其參數就是寫在 () 中。例如:css() 要傳入屬性與值、animate() 要傳入一組 CSS 屬性物件。

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>
js
// $('.box'): 從文件中,選取所有 class 屬性為 box 的元素
// .: 的
// hide(): 執行隱藏
$('.box').hide();

鏈式操作

jQuery 的方法大多會回傳同一個物件,因此可以把多個操作接在同一行,不必每次都重新選取一次元素。

js
$('#Dom').addClass('active').css('color', '#fff').fadeIn(400);

接下來就可以把 action() 換成各種實際的方法:事件動態效果DOM 操作物件樹遍歷

常見問題

錢字號在 jQuery 裡代表什麼?

它是 jQuery 這個物件的縮寫別名,$('h1') 等同於 jQuery('h1')。若與其他函式庫的符號衝突,可以用 jQuery.noConflict() 交出使用權。

jQuery 的選取器和 CSS 選取器一樣嗎?

基本上一樣。標籤、id、類別、後代、屬性等 CSS 選取器 規則都可以直接寫進選取的括號裡,此外 jQuery 還額外提供 :even:odd 這類自訂的 過濾選取器

選不到元素會報錯嗎?

不會。jQuery 選不到元素時會回傳一個長度為 0 的集合,後續的操作等於沒作用,因此不會像原生 JavaScript 那樣拋出錯誤,但也比較不容易發現寫錯了。

方法後面的括號可以省略嗎?

不行。括號代表執行這個方法,省略之後拿到的只是方法本身而不是執行結果,操作不會發生。若方法需要參數,參數就寫在括號中。

為什麼寫了 jQuery 卻沒有作用?

最常見的原因是 jQuery 資源沒有正確引入 ,或是自己的程式碼載入順序在 jQuery 之前。其次是 DOM 還沒準備好就執行選取,導致選不到任何元素。

延伸閱讀

參考資料:jQuery API Documentation