W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery 选择器



jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。


jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。


元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

用户点击按钮后,所有 <p> 元素都隐藏:

Example

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

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下:

$("#test")

当用户点击按钮后,有 id="test" 属性的元素将被隐藏:

Example

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

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下:

$(".test")

当用户点击按钮,所有带有 class="test" 的元素将被隐藏:

Example

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

更多实例

语法 描述 实例
$("*") 选取所有元素 尝 试
$(this) 选取当前 HTML 元素 尝 试
$("p.intro") 选取 class 为 intro 的 <p> 元素 尝 试
$("p:first") 选取第一个 <p> 元素 尝 试
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 尝 试
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 尝 试
$("[href]") 选取带有 href 属性的元素 尝 试
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 尝 试
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 尝 试
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 尝 试
$("tr:even") 选取偶数位置的 <tr> 元素 尝 试
$("tr:odd") 选取奇数位置的 <tr> 元素 尝 试

独立文件中使用 jQuery 函数

如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):

Example

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