> 웹 프론트엔드 > 프런트엔드 Q&A > jquery 속성 필터에 포함되지 않음

jquery 속성 필터에 포함되지 않음

PHPz
풀어 주다: 2023-05-18 17:55:38
원래의
1098명이 탐색했습니다.

jQuery를 배우고 사용할 때 속성 선택기는 매우 중요한 선택기 유형입니다. 속성 선택기는 속성 값을 기준으로 요소를 필터링할 수 있습니다. 일반적인 요소에는 같음, 같지 않음, 포함 및 포함하지 않음이 포함됩니다.

그런데 속성 필터 중 제외 필터는 다른 속성 필터에 비해 많이 사용되지 않는 것 같습니다. 제외 필터는 필터링하려면 특정 선택기를 입력해야 하는 비교적 복잡한 필터입니다. 이 기사에서는 jQuery의 제외 필터와 그 사용법을 살펴보겠습니다.

1. 속성 필터를 포함하지 않는 구문

속성 필터를 제외하는 구문은 다른 속성 필터의 구문과 유사하지만 대괄호 안에 콜론을 사용해야 합니다. 일반적인 형식은 다음과 같습니다:

$('selector:not([attribute!=value])') $('selector:not([attribute!=value])');

这个选择器使用了not()方法,它将筛选器包裹起来并排除了所有满足选择器的元素。我们可以在方括号内使用一个或多个属性、值和运算符。

如果我们不希望元素匹配一个特定的属性值,则可以使用不包含的筛选器。在方括号内使用一个感叹号!,跟随一个等号=。在等号后面的引号内,我们可以编写我们不希望匹配的属性值。

二、不包含属性筛选器的使用

为了更好地理解不包含属性筛选器,让我们看一些具体的例子。

我们有如下的HTML代码:

    <div class="example" data-value="9"></div>
    <div class="example" data-value="10"></div>
    <div class="example" data-value="12"></div>
로그인 후 복사

现在,我们希望在这些元素中,只选择那些data-value属性的值不包含“5”的元素。我们可以使用以下代码来实现:

$('.example:not([data-value="5"])');

这将给我们返回data-value属性为9、10和12的三个元素。这是因为5是我们不想要的属性值,not()方法将匹配的结果反转,并返回我们想要的元素。

接下来,我们可以使用其他的属性和运算符来扩展这个选择器。例如,我们可以使用<运算符来选择data-value属性小于十的元素:

$('.example:not([data-value<"10"])');

이 선택기는 필터를 래핑하고 제외하는 not() 메서드를 사용합니다. 선택자를 만족하는 모든 요소. 대괄호 안에 하나 이상의 속성, 값 및 연산자를 사용할 수 있습니다.

요소가 특정 속성 값과 일치하지 않도록 하려면 제외 필터를 사용할 수 있습니다. 대괄호 안에 느낌표 !를 사용하고 그 뒤에 등호 =를 사용하세요. 등호 뒤의 따옴표 안에는 일치시키고 싶지 않은 속성 값을 쓸 수 있습니다.

2. 포함하지 않는 속성 필터의 사용

포함하지 않는 속성 필터를 더 잘 이해하기 위해 몇 가지 구체적인 예를 살펴보겠습니다.

다음 HTML 코드가 있습니다. 🎜rrreee🎜이제 이러한 요소 중 데이터 값 속성에 "5"가 포함되지 않은 요소만 선택하려고 합니다. 이를 달성하기 위해 다음 코드를 사용할 수 있습니다: 🎜🎜 $('.example:not([data-value="5"])') 🎜🎜이것은 우리에게 데이터 값을 반환합니다. 9, 10, 12의 세 가지 요소로 속성을 지정합니다. 5는 우리가 원하지 않는 속성값이고, not() 메소드는 일치된 결과를 반전시켜 우리가 원하는 요소를 반환하기 때문입니다. 🎜🎜다음으로 이 선택기를 다른 속성과 연산자로 확장할 수 있습니다. 예를 들어 < 연산자를 사용하여 데이터 값 속성이 10보다 작은 요소를 선택할 수 있습니다. 🎜🎜 $('.example:not([data-value<"10"])') 🎜🎜이렇게 하면 데이터 값 속성이 10과 12 대신 9와 5인 요소가 선택됩니다. 🎜🎜3. 요약🎜🎜 비속성 필터는 원하는 요소를 필터링하는 코드를 빠르게 작성하는 데 도움이 되는 매우 유용한 선택기입니다. 다소 복잡하기는 하지만 기본 구문과 사용법을 이해한다면 이 기능을 활용하여 코드를 더욱 간결하고 읽기 쉽게 만들 수 있습니다. 🎜🎜jQuery 선택기를 작성하기 전에 구문과 사용법을 완전히 이해하고 코드를 테스트하여 올바르게 작동하는지 확인하세요. 이 글을 읽어주셔서 감사합니다. jQuery 코드를 작성할 때 도움이 되기를 바랍니다. 🎜

위 내용은 jquery 속성 필터에 포함되지 않음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿