Javascript & JQuery & CSS

not() 함수 조건에 해당되지 않는 것이라고 하는게 맞는 표현이겠네요.

.not( selector )
    selector 선택자 표현
.not( elements )
    elements 하나 이상의 DOM 요소 표현
.not( function(index) )
    function(index) 조건을 검사할 함수

not() 함수를 사용하면 조건에 부합되는 DOM 요소들로 이루어진 새로운 jQuery 객체를 만들어 줍니다.
선택자가 제공되면 각 요소들을 테스트 하고 일치하지 않는 요소들을 결과에 포함시켜 줍니다.
예를 들어 보도록 하겠습니다.

			<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');

위 스크립트의 결과는 item 2와 4의 바탕색이 빨간색으로 변하게 됩니다. even은 인덱스 기준 짝수를 의미합니다.

.not() 함수이니 짝수가 아닌 것, 즉 인덱스 기준 홀수번째 리스트들이 선택되게 됩니다.

이번에는 elements를 인자로 하여 사용하는 방법에 대한 예제를 보도록 하겠습니다.

			<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() 함수를 사용하는 예제를 보도록 하겠습니다.
 

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

getElementById 함수를 사용해 id='notli'라는 항목을 찾아낸 후 not()함수의 인자로 사용합니다.

그러면 그 항목을 제외한 다른 항목들이 선택되게 되죠. 따라서 item 1, 2, 4, 5 의 바탕색이 빨간색으로 변경됩니다.

.not()함수는 .filter()함수와 유사합니다. 단 filter() 함수는 결과가 true인 것들만 모아서 집합을 만들어 준다는 차이점이 있습니다.

아래와 같은 다양한 방법으로 not() 함수를 사용할 수 있습니다.
 

		$("div").not(".green, #blueone").css("border-color", "red"); 

		$("p").not( $("#selected")[0] )

		$("p").not("#selected")

		$("p").not($("div p.selected"))

$("div").not(".green, #blueone").css("border-color", "red");
스크립트를 보면 class='green'이거나 id='blueone'인 것들이 아닌 것들을 찾아내서 빨간 테두리를 그리는 내용입니다.