最新的Web開發教程
 

jQuery選擇器

❮ 上一頁下一章 ❯

jQuery選擇器是jQuery庫中最重要的部分之一。

jQuery的選擇器

jQuery選擇器允許您選擇和操作HTML元素（S）。

jQuery選擇用於“查找”（或選擇）的基礎上自己的姓名，ID，類，類型，屬性，屬性以及更多價值的HTML元素。It's based on the existing CSS Selectors , and in addition, it has some own custom selectors. 它是基於現有的CSS選擇 ，此外，它也有一些自己的定制選擇器。

jQuery中所有的選擇開始與美元符號和括號：$（）。

元素選擇

jQuery的元素選擇器選擇基於元素名稱的元素。

您可以選擇這樣的頁面上的所有<p>元素：

$("p")

例

當用戶點擊一個按鈕，所有的<p>元素將被隱藏：

例

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
試一試»

該#ID選擇

jQuery的#ID選擇使用HTML標籤的id屬性來找到特定元素。

一個ID應該是一個頁面內唯一的，所以，當你想找到一個單一的，獨特的元素應該使用#ID選擇。

找到一個特定ID的元素，寫一個哈希字符，後面的HTML元素的ID：

$("#test")

例

當用戶點擊一個按鈕，使用id =“測試”的元素會被隱藏：

例

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
試一試»

在選擇的.class

jQuery的類選擇中找到與特定類的元素。

要找到特定類的元素，寫了一段字，後跟類的名稱：

$(".test")

例

當用戶點擊一個按鈕，帶班=“測試”的元素會被隱藏：

例

$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});
試一試»

jQuery的選擇器的更多示例

Syntax Description Example
$("*") Selects all elements Try it
$(this) Selects the current HTML element Try it
$("p.intro") Selects all <p> elements with class="intro" Try it
$("p:first") Selects the first <p> element Try it
$("ul li:first") Selects the first <li> element of the first <ul> Try it
$("ul li:first-child") Selects the first <li> element of every <ul> Try it
$("[href]") Selects all elements with an href attribute Try it
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" Try it
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" Try it
$(":button") Selects all <button> elements and <input> elements of type="button" Try it
$("tr:even") Selects all even <tr> elements Try it
$("tr:odd") Selects all odd <tr> elements Try it

使用我們的jQuery選擇測試儀來演示不同的選擇。

對於所有的jQuery選擇器的完整參考，請訪問我們的jQuery選擇器參考 。

功能在單獨的文件

如果您的網站包含了大量的頁面，你想你的jQuery函數是易於維護，你可以把你的jQuery函數在一個單獨的.js文件。

當我們在本教程演示了jQuery，該功能被直接添加到<head>部分。However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file): 但是，有時最好是將它們放在一個單獨的文件，像這樣（使用src屬性來引用.js文件）：

例

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

自測練習用！

練習1» 練習2» 練習3» 練習4» 練習5» 練習6»


❮ 上一頁下一章 ❯