jQuery Lite: jQuery を選択します

カスタム jQuery フィルターは、単独で使用すると要素を選択できます $('div:hidden') など、フィルターと組み合わせて使用される実際の要素を指定する必要はありません。セレクター式が必要な場合は、フィルターを個別に渡すだけです。

＃＃＃いくつかの例： ＃＃＃ リーリー

手探り:非表示フィルターと:表示フィルター カスタム jQuery セレクター フィルター :hidden および :visible は、予想されるように CSS 可視性プロパティを考慮しません。 jQuery は、要素がドキュメント内のスペースを占有しているかどうかによって、要素が非表示か表示かを判断します。具体的には、ブラウザによって報告された offsetWidth または offsetHeight が 0 より大きい場合、要素は表示されます。こうすることで、 display none 内に display CSS 値 block が含まれる可能性のある要素は、非表示であることを正確に報告します。 コードを注意深く確認し、選択した

のインライン スタイルが display:block であるにもかかわらず、戻り値が true になる理由を理解してください。 リーリー

Is() メソッドを使用してブール値を返す 選択した要素のセットに実際に特定の要素が含まれているかどうかを判断することが必要になることがよくあります。 is() メソッドを使用すると、式/フィルターに基づいて現在のセットを確認できます。指定された式/フィルターによって選択された要素がセットに少なくとも 1 つ含まれている場合、チェックは true を返します。要素が含まれていない場合は、 false 値が返されます。次のコードを確認してください: リーリー 明らかに、2 番目の

alert() は false 値を返します。これは、ラッパー セットに id 属性値 i2 ## が含まれていないためです。 。 is() メソッドは、ラッパー セットに特定の要素が含まれているかどうかを判断するのに非常に便利です。

注:

jQuery 1.3 以降、 is() メソッドはすべての式をサポートします。以前は、階層セレクターを含む複雑な式 ( 、 ~ 、 # など) は常に true を返していました。 フィルターは他の内部 jQuery 関数によって使用されます。したがって、ここで適用されるルールはすべてここでも適用されます。

一部の開発者は、 is('.class')

を使用して要素に特定のクラスがあるかどうかを判断します。 jQuery には、これを行うための hasClass('class') という方法がすでに用意されており、複数のクラス値を含む要素に使用できることを忘れないでください。しかし、正直に言うと、 hasClass() は is() メソッドの便利なラッパーにすぎません。

複数のセレクター式を jQuery に渡すことができます

jQuery 関数の最初のパラメーターには、複数のカンマ区切りの式を指定できます: $('式, 式, 式') 。つまり、要素を選択するために使用できる式は 1 つだけというわけではありません。たとえば、以下の例では、3 つのカンマ区切りの式を jQuery 関数に渡します。 リーリー 各式は、ラッパー セットに追加されたすべての DOM 要素を選択します。その後、jQuery メソッドを使用してこれらの要素を操作できます。選択したすべての要素が同じラッピング セットに配置されることに注意してください。これを行う非効率的な方法は、jQuery 関数を式ごとに 1 回ずつ、計 3 回呼び出すことです。

［wrapperset.length］をチェックして選択を決定します

ラッパー セットに長さがあるかどうかを確認することで、式が何かを選択しているかどうかを判断できます。これは、配列プロパティ length を使用して行うことができます。 length プロパティが 0 を返さない場合は、少なくとも 1 つの要素が jQuery 関数に渡した式と一致することがわかります。たとえば、以下のコードでは、ページ内に id "notHere" の要素があるかどうかを確認します。何だと思う？そこにはいないよ！ リーリー

注:

明らかではない場合、length プロパティはラッパー セット内の要素の数、つまり、jQuery 関数に渡される式によって選択される要素の数を報告することもできます。

要素を選択するためのカスタム フィルターを作成する

独自のカスタム フィルターを作成することで、jQuery セレクター エンジンの機能を拡張できます。理論上、ここで行うことはすべて、すでに jQuery の一部となっているカスタム セレクターに基づいています。たとえば、Web ページ上で絶対に配置されているすべての要素を選択するとします。 jQuery にはカスタム :positionAbsolute フィルターがまだないため、独自のフィルターを作成できます。 リーリー ここで理解すべき最も重要なことは、jQuery が提供するデフォルトのセレクターに限定されないということです。自分で作成することもできます。ただし、時間をかけて独自のバージョンのセレクターを作成する前に、指定したフィルター関数を使用して filter()

メソッドを試すことができます。たとえば、前の例の filter() メソッドに渡された関数を使用して 要素をフィルタリングするだけで、 :positionAbsolute セレクターの作成を回避できます。 // 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: jQuery を選択します

関連記事