목차
- not() 예제 - 지정 클래스 안 갖는 p요소 선택
- not() 정의
- not() 구문
- not() 예제 - 짝수 아닌 요소
- not() 예제 - 다중 기준
- not() 예제 - jQuery 객체 사용
- not() 예제 - DOM 사용
- 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>
결과보기
