jQuery 选择器

jQuery的最基本概念是“选择一些元素并对其进行处理”。

jQuery选择器使您可以“查找”(或选择)网页中的HTML元素。

jQuery支持大多数CSS3选择器,以及一些非标准选择器。

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

元素选择器

jQuery元素选择器可用于根据元素名称选择元素。

您可以在页面上选择所有<p>元素,如下所示:

$("p")

当用户单击按钮时,以下jQuery代码将选择并突出显示所有<p>元素:

$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color", "yellow");
  });
});
测试看看‹/›

#id选择器

jQuery #id选择器使用HTML标记的id属性来查找特定元素。

元素的ID在页面中应该是唯一的,因此ID选择器用于选择一个唯一的元素。

要查找具有特定ID的元素,请写一个井号(#)字符,后跟HTML元素的ID:

$("#demo")

当用户单击按钮时,以下jQuery代码将选择并突出显示具有id="demo"的元素:

$(document).ready(function(){
  $("button").click(function(){
    $("#demo").css("background-color", "yellow");
  });
});
测试看看‹/›

.class选择器

jQuery .class选择器查找具有特定类名的元素。

要查找具有特定类的元素,请写一个句点(.)字符,后跟类的名称:

$(".demo")

当用户单击按钮时,以下jQuery代码将选择并突出显示class="demo"的所有元素:

$(document).ready(function(){
  $("button").click(function(){
    $(".demo").css("background-color", "yellow");
  });
});
测试看看‹/›

多个选择器

您可以根据需要选择多个选择器。只需用逗号分隔选择器。

多重选择器选择所有指定选择器的组合结果:

$("selector1, selector2, selectorN")

以下jQuery代码将选择每个<h2><div><span>元素:

$(document).ready(function(){
  $("h2, div, span").css("background-color", "lightgreen");
});
测试看看‹/›

当您想对不同的选择器执行相同的操作时,这很有用。

jQuery选择器的示例

jQuery提供了多种选择特定HTML元素的方法。

句法描述
$("*")选择所有元素演示
$(this)选择当前元素演示
$("p.demo")选择所有带有class="demo"的<p>元素演示
$("p:first")选择第一个<p>元素演示
$("div p:first-child")选择每个<div>元素的第一个<p>元素演示
$("[target]")选择具有target属性的每个元素演示
$("a[href='/CSS3/']")选择每个<a>元素的href属性值等于“ /CSS3/”演示
$("a[href!='/CSS3/']")选择每个<a>元素的href属性值不等于“ /CSS3/”演示
$(":text")选择类型为“text”的所有<input>元素演示
$("tr:even")选择所有偶数<tr>元素演示
$("tr:odd")选择所有奇数<tr>元素演示

jQuery选择器参考

有关完整的选择器参考,请访问我们的jQuery选择器参考