jQuery.not(selector) 사용법에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery.not(selector) 사용법에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-06-22 17:51:57

원래의

2407명이 탐색했습니다.

.not(selector) 반환: jQuery

설명: 일치하는 요소 집합에서 요소를 제거합니다.

버전 추가: 1.0.not(선택기)

선택

유형: 선택기 또는 요소 또는 배열

선택기 표현식, DOM 요소 또는 이 세트와 일치하는 요소 배열을 포함하는 문자열입니다.

버전 증가: 1.4. (함수)

함수

유형: 함수(정수 인덱스, 요소 요소) => 부울

컬렉션의 각 요소에 대한 테스트로 사용되는 함수입니다. DOM 요소인 jQuery 컬렉션 요소의 요소 인덱스인 index라는 두 개의 매개 변수를 허용합니다. 이 함수 내에서 this는 현재 DOM 요소를 나타냅니다.

버전 추가: 1.4 선택되지 않음(선택됨)

선택됨

유형: jQuery

현재 요소 그룹과 일치하는 기존 jQuery 개체입니다.

DOM 요소 집합을 나타내는 jQuery 개체가 있는 경우.not(), 이 메서드는 일치하는 요소의 하위 집합에서 새 jQuery 개체를 구성합니다. 제공된 선택기는 각 요소에 대해 테스트됩니다. 선택기와 일치하지 않는 요소는 결과에 포함됩니다.

간단한 목록이 있는 페이지를 생각해 보세요:

five

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

로그인 후 복사

이 방법을 목록 항목 집합에 적용할 수 있습니다:

$( "li" ).not( ":even" ).css( "background-color", "red" );

로그인 후 복사

이 호출의 결과는 항목 2와 4에 대한 빨간색 배경입니다. 선택기와 일치합니다(기억하세요: 짝수:홀수 숫자는 0의 인덱스를 사용합니다).

특정 요소 제거

.not() 메서드의 두 번째 버전을 사용하면 이전에 다른 메서드를 통해 해당 요소를 찾았다는 가정 하에 일치하는 집합에서 요소를 제거할 수 있습니다. 예를 들어 목록에 해당 항목 중 하나에 ID가 적용되어 있다고 가정해 보겠습니다.

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="notli">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

로그인 후 복사

기본 JavaScript getElementById() 함수를 사용하여 세 번째 목록 항목을 가져온 다음 jQuery 개체에서 제거할 수 있습니다.

$( "li" ).not( document.getElementById( "notli" ) )
  .css( "background-color", "red" );

로그인 후 복사

This 성명서 항목 1, 2, 4, 5의 색상이 변경되었습니다. 더 간단한 jQuery 표현식을 사용하여 동일한 작업을 수행할 수 있지만 이 기술은 예를 들어 다른 라이브러리가 순수 DOM 노드에 대한 참조를 제공할 때 유용합니다.

jQuery 1.4부터 .not() 메소드는 .filter()와 동일한 방식으로 함수를 매개변수로 사용할 수 있습니다. true 함수에 의해 반환된 요소는 필터링된 컬렉션에서 제외됩니다. 다른 모든 요소는 포함됩니다.

참고: CSS 선택기문자열이 .not()에 전달되면 필터링 중에 텍스트 및 주석 노드가 결과 jQuery 개체에서 항상 제거됩니다. 특정 노드 또는 노드 배열을 제공할 때 텍스트 또는 주석 노드는 필터링된 배열의 노드 중 하나와 일치하는 경우에만 jQuery 개체에서 제거됩니다.

예:

녹색이나 파란색이 아닌 div에 테두리를 추가하세요.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
  .green {
    background: #8f8;
  }
  .gray {
    background: #ccc;
  }
  #blueone {
    background: #99f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div id="blueone"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).not( ".green, #blueone" )
  .css( "border-color", "red" );
</script>
 
</body>
</html>

로그인 후 복사

Demo:

모든 단락 컬렉션에서 ID가 "선택된" 요소를 제거합니다.