iT邦幫忙

2021 iThome 鐵人賽

DAY 22
1
Modern Web

30天學網頁設計系列 第 22

Day22 jQuery 基本教學(二)

selector 選取

JQ 的 DOM 存取方式是透過 selector 來達到索引目標,會先轉換為 jQuery 之元件來取得後續行為。選取元件的方式範圍廣泛,主要概念採用了同於 CSS 的層級觀念。

基本的選擇器寫法:

$(selector)

selector 為文字串格式,方式如下:

selector 可以是全部,tagName,id,class…也能多選 selector,像是#one,#two 這樣同時多種不同對象合併選取,也能將外部的自身物件用 this 指定

selector(選取) 說明
$(“*”) 所有的 HTML 都列入選取
$(“p”) 找到 element 為 p 標籤之選取
$(“#header”) 找到 id 為”header”之選取
$(“.hot”) 找到 class 為”myclass”之選取
$(“#one,#two”) 多選 (or) 對象,譬如找#one 或#two,使一起共同選擇
$(“#one”).add(“#two”) 多選 (or) 對象,譬如找#one 或#two,使一起共同選擇
$(this) 同 JavaScript 觀念,傳入前一個外部元件的本體

用CSS的選擇器為觀念,使用節點層級做選取,彈性容易取得

選取的層級觀念 說明
$(“h1#header”) 找到該 h1 且 id=header
$(“ul li”) 找到該 ul 位置之子孫層級的標籤 li
$(“ul>li”) 找到該 ul 位置之子層級的標籤 li

多筆結果下,能進行不同過濾篩選條件

篩選條件 說明
$(“li:not(.hot)”)、$(“li”).not(“.hot”) 找到 li 標籤對象且該標籤不能有.hot
$(“li:first”)、$(“li”).first() 找到 li 標籤對象之第一筆
$(“li:last”)、$(“li”).last() 找到 li 標籤對象之最後筆
$(“li:even”) 找到 li 標籤對象之偶數筆
$(“li:odd”) 找到 li 標籤對象之奇數筆
$(“li:eq(n)”)、$(“li”).eq(n) 找到 li 標籤對象之第 n 筆,初值=0
$(“li:contains(‘我’)”) 找到 li 標籤內含文字”我”之選取
$(“ul:has(li)”)、$(“ul”).has(“li”) 找到 ul 標籤且持有 li 之選取(取 ul)

能根據 tag 裡面的屬性 (attr) 做選取,透過多種比較式去檢查布林條件

篩選依屬性 說明
$(“input[type=button]”) 找到 input 標籤且 type 為 button
$(“input[type!=button]”) 找到 input 標籤且 type 不是 button
$(“input[value^=aa]”) 找到 input 標籤且 value 開頭為 aa
$(“input[value$=aa]”) 找到 input 標籤且 value 結尾為 aa
$(“input[value*=aa]”) 找到 input 標籤且 value 中間為 aa
$(“input[value/=aa]”) 找到 input 標籤且 value 開頭為aa-
$(“input[type=button][value=”is loki”]”) 找到符合多筆屬性值

tagName 是 input 相關的互動表單型,能透過:type 去找到,也包含 checked 或 selectd 性質

選擇為表單類型 說明
$(“:input”) 所有輸入項目都中
$(“:text”) 所有 input:text 都中
$(“:checked”) 所有被勾選 checked 的都中

上一篇
Day21 jQuery 基本教學(一)
下一篇
Day23 jQuery 基本教學(三)
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言