jQuery 選擇器

jQuery 選擇器可讓您對 HTML 元素群組或單一元素進行操作。

jQuery 選擇器

jQuery 選擇器可讓您對 HTML 元素組或單一元素進行操作。

jQuery 選擇器基於元素的 id、類別、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它是基於已經存在的 CSS 選擇器，除此之外，它還有一些自訂的選擇器。

jQuery 中所有選擇器都以美元符號開頭：$()。

元素選擇器

jQuery 元素選擇器是基於元素名稱選取元素。

在頁面中選取所有<p> 元素:

$("p")

實例

使用者點選按鈕後，所有<p> 元素都隱藏：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

#id 選擇器

jQuery #id 選擇器透過HTML 元素的id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要透過 #id 選擇器。

透過id 選取元素語法如下：

$("#test")

##實例

# #當使用者點擊按鈕後，有id="test" 屬性的元素將被隱藏：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

##運行實例»

點擊"運行實例" 按鈕查看線上實例

.class 選擇器

jQuery 類別選擇器可以透過指定的class 來尋找元素。

語法如下：

$(".test")

#實例

##使用者點擊按鈕後所有帶有class="test" 屬性的元素都隱藏：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

#選取所有target 屬性值不等於"_blank" 的<a> 元素

線上實例

$(":button")

選取所有type="button" 的<input> 元素與<button> 元素

線上實例

$("tr:even")

選取偶數位置的<tr> 元素

線上實例## ##########$("tr:odd")###### 選取奇數位置的<tr> 元素######線上實例######### #########獨立檔案中使用jQuery 函數######如果您的網站包含許多頁面，並且您希望您的jQuery 函數易於維護，那麼請將您的jQuery 函數放到獨立的.js 檔案中。 ######當我們在教學課程中示範 jQuery 時，會將函數直接加入到 <head> 部分。不過，把它們放到一個單獨的檔案中會更好，就像這樣（透過src 屬性來引用檔案）：#########例子######<head>### <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>######<script src="my_jquery_functions.js "></script>######</head>#############

← jQuery 語法

jQuery 事件 →

語法	描述








#$("ul li:first")	選取第一個<ul> 元素的第一個<li> 元素	線上實例
$("ul li:first-child")	選取每個<ul> 元素的第一個<li> 元素	#線上實例
$("[href]")	選取具有href 屬性的元素	線上實例
$("a[target='_blank']")	選取所有target 屬性值等於"_blank" 的<a> 元素	#線上實例

jQuery 選擇器