English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
使用jQuery,我们可以轻松地从DOM元素列表中过滤掉各种元素。
在本章中,我们将说明如何缩小对DOM树中元素的搜索范围。
我们有以下jQuery方法,用于根据特定元素在一组元素中的位置来选择它们:
下面将向您展示如何使用每种方法。
jQuery first()方法返回所选元素的第一个元素。
以下示例突出显示了第一段:
$(document).ready(function(){ $("p").first().css("background", "coral"); });Testen Sie heraus‹/›
jQuery last()方法返回所选元素的最后一个元素。
以下示例突出显示了最后一段:
$(document).ready(function(){ $("p").last().css("background", "coral"); });Testen Sie heraus‹/›
jQuery eq()方法返回具有选定元素的特定索引号的元素。
索引号始终从0开始,因此第一个数字将具有索引0(而不是1)。
下面的示例选择第三段(索引号2):
$("button").click(function(){ $("p").eq(2).css("background-color", "red"); });Testen Sie heraus‹/›
jQuery filter()方法返回与特定条件匹配的元素。
此方法过滤掉所有不符合所选条件的元素,并且将返回那些匹配项。
下面的示例返回所有类名为“ demo”的段落:
$(document).ready(function(){ $("p").filter(".demo").css("background", "coral"); });Testen Sie heraus‹/›
下面的示例返回所有偶数列表项:
$(document).ready(function(){ $("li").filter(":even").css("background", "coral"); });Testen Sie heraus‹/›
jQuery not()方法返回不符合特定条件的元素。
此方法与该filter()方法相反。
下面的示例返回所有不具有类名称“ demo”的段落:
$(document).ready(function(){ $("p").not(".demo").css("background", "coral"); });Testen Sie heraus‹/›
jQuery has()Diese Methode gibt alle Elemente zurück, die mit dem angegebenen Auswähler übereinstimmen, einschließlich einer oder mehrerer Elemente.
Der folgende Beispiel gibt alle Absätze zurück, die einen <span>-Element enthalten:
$(document).ready(function(){ $("p").has("span").css("background-color", "coral"); });Testen Sie heraus‹/›
jQuery is()Diese Methode überprüft, ob eines der ausgewählten Elemente mit dem angegebenen Parameter übereinstimmt.
Falls mindestens eines dieser Elemente mit dem angegebenen Parameter übereinstimmt, gibt diese Methode true zurück, andernfalls false.
Der folgende Beispiel überprüft, ob der Elternteil von <p> ein <div>-Element ist:
$(document).ready(function(){ $("p").parent().is("div"); });Testen Sie heraus‹/›
Für eine vollständige Durchsuchungsmethode besuchen Sie bitte unserejQuery Durchsuchen Referenz.