[Traversing] JQ - not() 메서드 - 일치 안 하는 요소 선택 (= not메서드 = 낫메서드)

1. not() 예제 - 지정 클래스 안 갖는 p요소 선택
2. not() 정의
3. not() 구문
4. not() 예제 - 짝수 아닌 요소
5. not() 예제 - 다중 기준
6. not() 예제 - jQuery 객체 사용
7. not() 예제 - DOM 사용
8. not() 예제 - 함수 사용

not() 예제 - 지정 클래스 안 갖는 p요소 선택

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").not(".code").css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>코딩언어 강의</p>

<p class="code">HTML CSS JS</p>

<p class="code">PHP SQL</p>

<p>그누보드 강의</p>

 

결과보기

not() 정의

 

지정 기준에 해당 않는 요소 반환.

 

---

 

1.

메서드 사용하면 선택 기준 정할 수 있으면,

기준에 부합 안 하면 선택되고, 기준에 부한되면 선택됨.

 

2.

선택 요소 그룹에서 하나 이상의 요소 제거할 때 자주 사용.

 

3. 

예제 더 보기: https://api.jquery.com/not/

 

4. cf.

filter() 메서드 - 기준에 부합되면 선택.

 

not() 구문

 

$(selector).not(criteria)

또는,

$(selector).not(function(index))

---

[매개변수]

 

criteria

기준 지정. 

• 가능값 종류: Selector, Element, Array, jQuery Object
• 콤마(,) 구분자 이용해 여러 기준 나열 가능.

 

function(index)

선택. 요소 집합에서 각 요소에 대한 작동할 함수 지정.

• true 반환 시 요소 제거. /  false 반환시, 유소 유지.
• index : 요소 집합에서 각 요소의 색인번호 (※ 0부터 색인 시작)
• this : 현재 DOM 요소

 

not() 예제 - 짝수 아닌 요소

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").not(":even").css("background-color", "yellow");

});

</script>

<p>홈짱닷컴 (index 0).</p>

<p>Homzzang.com (index 1).</p>

<p>코딩언어 강의 (index 2).</p>

<p>그누보드 강의 (index 3).</p>

<p>영카트 강의 (index 4).</p>

<p>서버관리 강의 (index 5).</p>

 

결과보기

not() 예제 - 다중 기준

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").not(".front,#back").css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>코딩언어 강의</p>

<p class="front">HTML CSS JS</p>

<p id="back">PHP SQL</p>

<p>그누보드 강의</p>

 

결과보기

not() 예제 - jQuery 객체 사용

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").not($("div p.hz")).css("background-color", "yellow");

});

</script>

<div style="border:1px solid black;">

  div

  <h1>div>h1</h1>

  <p>div>p</p>

  <p class="hz">div p.hz</p>

  <p>div>p</p>

</div>

<p class="hz">p.hz</p>

<p>p</p>

 

결과보기

not() 예제 - DOM 사용

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").not(document.getElementById("hz")).css("background-color", "yellow");

});

</script>

<h1>h1</h1>

<p>p</p>

<p id="hz">p.hz</p>

<p>p</p>

결과보기

not() 예제 - 함수 사용

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").not(function(){  

    return $("span", this).length == 2;}).css("background-color", "yellow");

});

</script>

<div>

  <p>p <span>span</span></p>

  <p>p <span>span</span> <span>span</span></p>

  <p>p <span>span</span></p>

  <p>p <span>span</span> <span>span</span></p>

  <p>p</p>

</div>

<div>div</div>

 

결과보기