jQuery 的語法構成:選取器與 action() 操作
jQuery 語法就是透過 選取 HTML 元素(DOM),並對選取到的對象進行 操作 。整個函式庫的用法,都建立在這兩個步驟上。
語法
- 選取對象。
- 操作。
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:操作的 方法名稱 。():接續在方法名稱的後面,不可省略 !
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 還沒準備好就執行選取,導致選不到任何元素。