基本選擇器

ID選擇器: $(‘#message’)

元素選擇器:$(‘a’);


class選擇器

$(‘.submenu’)   <= 此為JQ選取class方式

$(‘.submenu’).hide();   <= 將class為submenu隱藏起來


進階選擇器

後裔(descendant)選擇器: $(‘#navBar a’)  <=取出名為navBar 裡面的a標籤

子(child)選擇器: $(‘body > p’)  <=選取<body>的子代<p>

相鄰(adjacent sibling):$(‘h2 + div’) <= 條件為前一個節點為左方選擇器(h2)

屬性(attribute)選擇器:

  1. [attribute]選出特定屬性的元素: $(‘a[href]’) <= 選出具有href屬性的<a>標籤
  2. [attribute="value"]選出有特定屬性值的元素: $(‘input[type="text"]’)   <=選取<input>型態為text的文字欄位
  3. [attribute^="value"]選出特定值開頭元素: $(‘a[href^="http://"]’) 選取連結開頭符合 “http://"的連結
  4. [attribute$="value"]選出屬性特定值的結尾元素: $(‘a[href$=".pdf"]’)選取結尾元素為 .PDF的連結
  5. [attribute*="value"]選出屬性值中間有特定值的元素: $(a[href*="missingmanuals.com"]’)選取中間值為"missingmanuals.com"的連結

Leave a Comment