jQuery Lite: Wählen Sie jQuery

Der benutzerdefinierte jQuery-Filter kann Elemente auswählen, wenn er alleine verwendet wird Es ist nicht erforderlich, das tatsächliche Element anzugeben, das in Verbindung mit dem Filter verwendet wird, wie z. B. $('div:hidden') . Sie können den Filter einfach separat überall dort übergeben, wo ein Selektorausdruck erforderlich ist.

Einige Beispiele:

// Selects all hidden elements $(':hidden'); // Selects all div elements, then selects only even elements $('div').filter(':even'); Bereich für :versteckte und :sichtbare Filter Benutzerdefinierter jQuery-Auswahlfilter :hidden 和 :visible 没有像人们预期的那样考虑 CSS 可见性属性。 jQuery 确定元素是否隐藏或可见的方式是该元素是否占用文档中的任何空间。确切地说，如果浏览器报告的 offsetWidth 或 offsetHeight 大于 0，则该元素是可见的。这样，一个元素可能具有 display 的 CSS 值 block 包含在具有 display none meldet es genau als unsichtbar.

Überprüfen Sie den Code sorgfältig und stellen Sie sicher, dass Sie verstehen, warum der zurückgegebene Wert true ，即使选择的 具有 display:block inline gestaltet ist.

(function($){ // Returns true because the parent div is hidden, so the // encapsulated div reports zero offsetWidth and offsetHeight alert($('#childDiv').is(':hidden')); })(jQuery); Verwenden Sie die Is()-Methode, um einen booleschen Wert zurückzugeben Oft muss festgestellt werden, ob der ausgewählte Satz von Elementen tatsächlich ein bestimmtes Element enthält. Verwenden Sie den Wert is() 方法，我们可以根据表达式/过滤器检查当前集。如果该集合至少包含一个由给定表达式/过滤器选择的元素，则检查将返回 true 。如果不包含该元素，则返回 false . Überprüfen Sie den folgenden Code:

jQuery jQuery (function($){ // Returns true alert($('div').is('#i1')); // Returns false. Wrapper set contains no with id="i2" alert($('div').is('#i2')); // Returns false. Wrapper set contains no hidden alert($('div').is(':hidden')); })(jQuery); Natürlich ist die zweite alert() 将返回 false 值，因为我们的包装器集不包含具有 id 属性值 i2 的 。 is() Methode sehr praktisch, um festzustellen, ob der Wrapper-Satz ein bestimmtes Element enthält.

Hinweis: Ab jQuery 1.3, is() 方法支持所有表达式。以前，诸如包含层次结构选择器的复杂表达式（例如 + 、 ~ 和 > ）始终返回 true .

Filter werden von anderen internen jQuery-Funktionen verwendet. Daher gelten auch hier alle Regeln, die hier gelten.

Einige Entwickler verwenden einen Convenience-Wrapper für die is('.class') 来确定元素是否具有特定的类。不要忘记 jQuery 已经有一种方法可以执行此操作，称为 hasClass('class') ，该方法可用于包含多个类值的元素。但说实话， hasClass() 只是 is() -Methode.

Sie können mehrere Selektorausdrücke an jQuery übergeben Sie können mehrere durch Kommas getrennte Ausdrücke für den ersten Parameter einer jQuery-Funktion angeben: $('表达式, 表达式, 表达式') . Mit anderen Worten: Sie sind nicht darauf beschränkt, nur einen einzigen Ausdruck zum Auswählen von Elementen zu verwenden. Im folgenden Beispiel übergebe ich beispielsweise drei durch Kommas getrennte Ausdrücke an eine jQuery-Funktion.

jQuery is the

best! (function ($) { // Alerts jQuery is the best! alert($('div, p, ul li').text()); // Inefficient way. Alerts jQuery is the best! alert($('div').text() + $('p').text() + $('ul li').text()); })(jQuery); Jeder Ausdruck wählt alle DOM-Elemente aus, die dem Wrapper-Set hinzugefügt wurden. Wir können dann jQuery-Methoden verwenden, um diese Elemente zu bearbeiten. Denken Sie daran, dass alle ausgewählten Elemente im selben Verpackungssatz platziert werden. Eine ineffiziente Möglichkeit hierfür besteht darin, die jQuery-Funktion dreimal aufzurufen, einmal für jeden Ausdruck.

Überprüfen Sie wrapperset.length, um die Auswahl zu bestimmen Sie können feststellen, ob ein Ausdruck etwas auswählt, indem Sie prüfen, ob der Wrapper-Satz eine Länge hat. Sie können das Array-Attribut length 来执行此操作。如果 length 属性不返回 0，那么您就知道至少有一个元素与您传递给 jQuery 函数的表达式相匹配。例如，在下面的代码中，我们检查页面中是否存在 id für „notHere“-Elemente verwenden. Erraten Sie, was? Es ist nicht da!

(function($){ // Alerts "0" alert($('#notHere').length); })(jQuery);

Hinweis: Wenn es nicht offensichtlich ist, kann die Längeneigenschaft auch die Anzahl der Elemente im Wrapper-Set angeben – mit anderen Worten, wie viele Elemente durch den an die jQuery-Funktion übergebenen Ausdruck ausgewählt werden

Erstellen Sie benutzerdefinierte Filter zur Auswahl von Elementen Es ist möglich, die Funktionalität der jQuery-Auswahl-Engine zu erweitern, indem Sie Ihre eigenen benutzerdefinierten Filter erstellen. Theoretisch basiert alles, was Sie hier tun, auf benutzerdefinierten Selektoren, die bereits Teil von jQuery sind. Nehmen wir zum Beispiel an, wir möchten alle Elemente auf einer Webseite auswählen, die absolut positioniert sind. Da jQuery noch keinen benutzerdefinierten :positionAbsolute -Filter hat, können wir unseren eigenen erstellen.

absolute absolute static absolute static absolute (function ($) { // Define custom filter by extending $.expr[':'] $.expr[':'].positionAbsolute = function (element) { return $(element).css('position') === 'absolute'; }; // How many elements in the page are absolutely positioned? alert($(':positionAbsolute').length); // Alerts "4" // How many div elements are absolutely positioned? alert($('div:positionAbsolute').length); // Alerts "2" })(jQuery); Das Wichtigste hierbei ist, dass Sie nicht auf die von jQuery bereitgestellten Standardselektoren beschränkt sind. Sie können Ihr eigenes erstellen. Bevor Sie sich jedoch die Zeit nehmen, Ihre eigene Version des Selektors zu erstellen, können Sie einfach die Methode filter() mit einer angegebenen Filterfunktion ausprobieren. Beispielsweise könnte ich das Schreiben des filter() 方法。例如，我可以通过简单地使用传递给 filter() 方法的函数来过滤前面示例中的 元素，从而避免编写 :positionAbsolute -Selektors vermeiden, indem ich einfach die an die Methode filter() übergebene Funktion verwende, um die Elemente im vorherigen Beispiel zu filtern.

// Remove elements from the wrapper // set that are not absolutely positioned $('div').filter(function () { return $(this).css('position') === 'absolute'; }); // or // Remove all elements from the wrapper // set that are not absolutely positioned $('*').filter(function () { return $(this).css('position') === 'absolute'; });

注释： 有关创建自己的选择器的更多信息，我建议阅读以下内容：http://www.bennadel.com/blog/1457-How-To-Build-A-Custom- jQuery-Selector.htm

按数字顺序过滤与 DOM 关系过滤之间的差异 jQuery 提供了过滤器，用于通过集合中元素的数字上下文来过滤包装器集。

这些过滤器是：

:first :last :even :odd :eq(index) :gt(index) :lt(index)

注释： 过滤包装器集本身的过滤器通过过滤集合中起始点 0 或索引 0 的元素来实现这一点。例如 :eq(0) 和 :first 访问集合中的第一个元素 - $('div:eq(0)') - 索引为 0。这与单索引的 :nth-child 过滤器形成对比。这意味着，例如 :nth-child(1) 将返回第一个子元素，但尝试使用 :nth-child(0) 将不起作用。使用 :nth-child(0) 将始终不选择任何内容。

使用 :first 将选择集合中的第一个元素，而 :last 将选择集合中的最后一个元素。请记住，它们根据集合内的关系（从 0 开始的数字层次结构）过滤集合，而不是 DOM 上下文中元素的关系。有了这些知识，就应该很明显为什么过滤器 :first 、 :last 和 :eq(index) 将始终返回单个元素。

如果还不是很明显，请允许我进一步解释。 :first 只能返回单个元素的原因是，当只有一个集合时，集合中只能有一个元素被首先考虑。这应该是相当合乎逻辑的。检查下面的代码，看看这个概念的实际应用。

1 2 3 4 5 6 7 8 9 10 (function ($) { // Remember that text() combines the contents of all // elements in the wrapper set into a single string. alert('there are ' + $('li').length + ' elements in the set'); // Get me the first element in the set alert($('li:first').text()); // Alerts "1" // Get me the last element in the set alert($('li:last').text()); // Alerts "10" // Get me the 6th element in the set, 0 based index alert($('li:eq(5)').text()); // Alerts "6" })(jQuery); 有了对操作集合本身的清晰理解，我们可以通过使用过滤器来选择与实际 DOM 中其他元素具有唯一关系的元素，从而增强对选择元素的理解。 jQuery 提供了几个选择器来执行此操作。其中一些选择器是自定义的，而另一些则是众所周知的用于选择 DOM 元素的 CSS 表达式。

祖先后代 父级>子 上一个 + 下一个 prev ~ 兄弟姐妹 :nth-child(选择器) :first-child :last-child :only-child :empty :has(选择器) :parent 使用这些选择器过滤器将根据元素在 DOM 中与 DOM 中其他元素的关系来选择元素。为了演示这个概念，让我们看一些代码。

1 2 3 4 5 1 2 3 4 5 (function ($) { // Remember that text() combines the contents of all // elements in the wrapper set into a single string. alert($('li:nth-child(2)').text()); // Alerts "22" alert($('li:nth-child(odd)').text()); // Alerts "135135" alert($('li:nth-child(even)').text()); // Alerts "2424" alert($('li:nth-child(2n)').text()); // Alerts "2424" })(jQuery); 如果您对 $('li:nth-child(odd)').text() 返回值 135135 感到惊讶，那么您还没有掌握关系过滤器。 $('li:nth-child(odd)') 口头上说的是“查找网页中所有属于子元素的 元素，然后按奇数子元素过滤它们”。好吧，碰巧页面中有两个结构，它们有一组由 s 组成的兄弟结构。我的观点是这样的：包装器集由基于过滤器的元素组成，该过滤器考虑了元素与 DOM 中其他元素的关系。这些关系可以在多个位置找到。

要记住的概念是，并非所有过滤器都是平等创建的。确保您了解哪些是基于 DOM 关系进行过滤的，例如 :only-child -以及哪些按元素的位置进行过滤-例如 :eq() -在包装集中。

当值包含元字符时按 ID 选择元素 jQuery 选择器使用一组元字符（例如 # ~ [] = > ），当用作名称的文字部分时（例如 id="#foo[bar]" ）应该被逃脱。可以通过在字符前放置两个反斜杠来转义字符。检查下面的代码，了解如何在选择表达式中使用两个反斜杠来选择 id 属性值为 #foo[bar] 的元素。

jQuery (function ($) { // Alerts "jQuery" alert($('#\\#foo\\[bar\\]').text()); })(jQuery); 以下是用作名称的文字部分时需要转义的字符的完整列表。

# ; & , . + * ~ ' : “ ! ^ $ [ ] ( ) = > | / 堆叠选择器过滤器 可以堆叠选择器过滤器 - 例如 a[title="jQuery"][href^="http://"] .一个明显的例子是选择一个具有特定属性和特定属性值的元素。例如，下面的 jQuery 代码将仅选择 HTML 页面中的 元素：

包含 href 属性，起始值为“http://” 有一个值为“jQuery”的 title 属性 仅选择一个 正在被选择。

jQuery.com

jQuery.com 1

jQuery.com

(function ($) { // Alerts "1" alert($('a[title="jQuery"][href^="http://"]').length); })(jQuery); 请注意代码中我们如何堆叠两个过滤器来完成此选择。

除了属性过滤器之外，还可以堆叠其他选择器过滤器。例如：

// Select the last contained in the // wrapper set that contains the text "jQuery" $('div:last:contains("jQuery")') // Get all check boxes that are both visible and selected $(':checkbox:visible:checked') 要掌握的概念是选择器过滤器可以堆叠并组合使用。

注释： 您还可以嵌套和堆叠过滤器 - 例如 $('p').filter(':not(:first):not(:last)')

嵌套选择器过滤器 选择器过滤器可以嵌套。这使您能够以非常简洁和强大的方式使用过滤器。下面，我将举例说明如何嵌套过滤器来执行复杂的过滤。

javascript jQuery javascript jQuery javascript jQuery (function ($) { // Select all div's, remove all div's that have a child element with class="jQuery" alert($('div:not(:has(.jQuery))').text()); // Alerts combined text of all div's // Select all div's, remove all div's that are odd in the set (count starts at 0) alert($('div:not(:odd)').text()); // Alerts combined text of all div's })(jQuery); 要掌握的概念是选择器过滤器可以嵌套。

注释： 您还可以嵌套和堆叠过滤器 - 例如 $('p').filter(':not(:first):not(:last)')

摸索 :nth-child() 过滤器 :nth-child() 过滤器有很多用途。例如，假设您只想选择 元素中包含的每三个 元素。可以使用 :nth-child() 过滤器。检查以下代码以更好地了解如何使用 :nth-child() 过滤器。

1 2 3 4 5 6 7 8 9 10 (function ($) { // Remember that text() combines the contents of all // elements in the wrapper set into a single string. // By index alert($('li:nth-child(1)').text()); // Alerts "1" // By even alert($('li:nth-child(even)').text()); // Alerts "246810" // By odd alert($('li:nth-child(odd)').text()); // Alerts "13579" // By equation alert($('li:nth-child(3n)').text()); // Alerts "369" // Remember this filter uses a 1 index alert($('li:nth-child(0)').text()); // Alerts nothing. There is no 0 index. })(jQuery); 通过使用正则表达式搜索属性值来选择元素 当用于选择元素的 jQuery 属性过滤器不够健壮时，请尝试使用正则表达式。 James Padolsey 为过滤器选择器编写了一个很好的扩展，它允许我们创建用于过滤的自定义正则表达式。我在这里提供了一个代码示例，但请确保您还查看了 http://james.padolsey.com 上的文章以了解所有详细信息。

text

(function ($) { // Each statement alerts "2" because there are // two direct child elements inside of alert($('div').children().length); // or alert($('>*', 'div').length); alert($('div').find('>*').length);

// Each statement alerts 6 because the contains // 6 descendants, not including the text node. alert($('div').find('*').length); // or alert($('*', 'div').length); })(jQuery); 当上下文已设置时选择直接子元素 当已经提供了上下文时，可以在没有上下文的情况下使用组合器 > 来选择直接子元素。检查下面的代码。

text text text text (function ($) { // Select only the direct children. Alerts "3". alert($('ul:first').find('> li').length); // or alert($('> li', 'ul:first').length); } )(jQuery); 基本上，当上下文已经确定时， '>元素' 可以用作表达式。

jQuery Lite: Wählen Sie jQuery

In Verbindung stehende Artikel