사용자 정의 jQuery 필터는 단독으로 사용할 때 요소를 선택할 수 있습니다 $('div:hidden') 등 필터와 함께 사용되는 실제 요소를 제공할 필요는 없습니다. 선택기 표현식이 필요할 때마다 필터를 별도로 전달할 수 있습니다. 일부 예: 으아악 :hidden 및 :visible 필터 범위 Custom jQuery 선택기 필터 :hidden 和 :visible 没有像人们预期的那样考虑 CSS 可见性属性。 jQuery 确定元素是否隐藏或可见的方式是该元素是否占用文档中的任何空间。确切地说,如果浏览器报告的 offsetWidth 或 offsetHeight 大于 0,则该元素是可见的。这样,一个元素可能具有 display 的 CSS 值 block 包含在具有 display none는 이를 보이지 않는 것으로 정확하게 보고합니다. 코드를 주의 깊게 확인하고 반환된 값이 인라인 스타일로 지정된 이유를 이해했는지 확인하세요. true,即使选择的 具有 display:block 으아악 Is() 메서드를 사용하여 부울 값을 반환합니다 선택한 요소 세트에 실제로 특정 요소가 포함되어 있는지 확인해야 하는 경우가 많습니다. 값을 사용하세요. 아래 코드를 확인하세요: is() 方法,我们可以根据表达式/过滤器检查当前集。如果该集合至少包含一个由给定表达式/过滤器选择的元素,则检查将返回 true。如果不包含该元素,则返回 false 으아악 두 번째 방법은 래퍼 세트에 특정 요소가 포함되어 있는지 확인하는 데 매우 편리합니다. alert() 将返回 false 值,因为我们的包装器集不包含具有 id 属性值 i2 的 。 is() 참고: jQuery 1.3부터 . is() 方法支持所有表达式。以前,诸如包含层次结构选择器的复杂表达式(例如 +、~ 和 >)始终返回 true 필터는 다른 내부 jQuery 함수에서 사용됩니다. 따라서 여기에 적용되는 모든 규칙은 여기에도 적용됩니다. 일부 개발자는 메서드에 편리한 래퍼를 사용합니다. is('.class') 来确定元素是否具有特定的类。不要忘记 jQuery 已经有一种方法可以执行此操作,称为 hasClass('class'),该方法可用于包含多个类值的元素。但说实话, hasClass() 只是 is() 여러 선택기 표현식을 jQuery에 전달할 수 있습니다 jQuery 함수의 첫 번째 매개변수에 대해 쉼표로 구분된 여러 표현식을 제공할 수 있습니다: . 즉, 요소를 선택하기 위해 단일 표현식만 사용하도록 제한되지 않습니다. 예를 들어 아래 예에서는 쉼표로 구분된 세 개의 표현식을 jQuery 함수에 전달합니다. $('表达式, 表达式, 表达式') 으아악 각 표현식은 래퍼 세트에 추가된 모든 DOM 요소를 선택합니다. 그런 다음 jQuery 메서드를 사용하여 이러한 요소에 대해 작업을 수행할 수 있습니다. 선택한 모든 요소는 동일한 포장 세트에 배치된다는 점을 기억하세요. 이를 수행하는 비효율적인 방법은 각 표현식에 대해 한 번씩 jQuery 함수를 세 번 호출하는 것입니다. wrapperset.length를 확인하여 선택 항목을 결정하세요 래퍼 세트에 길이가 있는지 확인하여 표현식이 무엇이든 선택하는지 확인할 수 있습니다. "notHere" 요소에는 배열 속성 을 사용할 수 있습니다. 뭔지 맞춰봐? 거기가 아니야! length 来执行此操作。如果 length 属性不返回 0,那么您就知道至少有一个元素与您传递给 jQuery 函数的表达式相匹配。例如,在下面的代码中,我们检查页面中是否存在 id 으아악 참고: 명확하지 않은 경우 길이 속성은 래퍼 세트의 요소 수, 즉 jQuery 함수에 전달된 표현식에 의해 선택된 요소 수를 보고할 수도 있습니다. 요소 선택을 위한 맞춤 필터 만들기 사용자 정의 필터를 생성하여 jQuery 선택기 엔진의 기능을 확장할 수 있습니다. 이론적으로 여기에서 수행하는 모든 작업은 이미 jQuery의 일부인 사용자 정의 선택기를 기반으로 합니다. 예를 들어 웹 페이지에서 절대 위치에 있는 모든 요소를 선택한다고 가정해 보겠습니다. jQuery에는 아직 사용자 정의 필터가 없으므로 직접 만들 수 있습니다. 으아악 :positionAbsolute여기서 파악해야 할 가장 중요한 점은 jQuery에서 제공하는 기본 선택자에만 국한되지 않는다는 것입니다. 당신은 자신의 것을 만들 수 있습니다. 그러나 자신만의 선택기 버전을 만들기 전에 지정된 필터 함수와 함께 filter() 메서드를 사용해 볼 수 있습니다. 예를 들어, 이전 예제에서 요소를 필터링하기 위해 filter() 메서드에 전달된 함수를 사용하면 선택기 작성을 피할 수 있습니다. // 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 上的文章以了解所有详细信息。 (function ($) { //James Padolsey filter extension jQuery.expr[':'].regex = function (elem, index, match) { var matchParams = match[3].split(','), validLabels = /^(data|css):/, attr = { method: matchParams[0].match(validLabels) ? matchParams[0].split(':')[0] : 'attr', property: matchParams.shift().replace(validLabels, '') }, regexFlags = 'ig', regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g, ''), regexFlags); return regex.test(jQuery(elem)[attr.method](attr.property)); } // Select div's where the id attribute contains numbers alert($('div:regex(id,[0-9])').length); // Alerts "2" // Select div's where the id attribute contains the string "Two" alert($('div:regex(id, Two)').length); // Alerts "1" })(jQuery); 로그인 후 복사 选择直系子代与选择所有后代之间的差异 直接子元素只能通过使用组合器 > 或通过 children() 遍历方法来选择。可以使用 * CSS 表达式选择所有后代。确保您清楚地了解两者之间的区别。下面的示例演示了这些差异。 text text (function ($) { // Each statement alerts "2" because there are // two direct child <p> elements inside of <div> alert($('div').children().length); // or alert($('>*', 'div').length); alert($('div').find('>*').length); // Each statement alerts 6 because the <div> 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 <li> children. Alerts "3". alert($('ul:first').find('> li').length); // or alert($('> li', 'ul:first').length); } )(jQuery); 로그인 후 복사 基本上,当上下文已经确定时,'>元素'可以用作表达式。