最新的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»


❮ 上一页下一章 ❯