[juqery] != 선택자
개요 : 태그가 가진 속성(attributes)의 값(value)과 문자열이 일치하지 않는 요소를 찾아 줍니다.
not([attr="value"]) 의 표현과 일치합니다.
- jQuery('[attribute!="value"]')
- attribute 태그의 속성
- value 속성의 값, 따옴표를 사용해야 합니다.
예 제
문서에 있는 input 태그들 중에 name 속성(attribute)의 값이 "newsletter" 가 아닌 요소를 찾아서 그 다음 요소에 굵은 글씨체 스타일로 '; not newsletter' 문자열을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div>
<input type="radio" name="newsletter" value="Hot Fuzz" />
<span>name is newsletter</span>
</div>
<div>
<input type="radio" value="Cold Fusion" />
<span>no name</span>
</div>
<div>
<input type="radio" name="accept" value="Evil Plans" />
<span>name is accept</span>
</div>
<script>$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script>
</body>
</html>미리보기
결과를 보시면 input 태그의 name 속성의 값이 newsletter 가 아닌 요소들(2,3번째 input 이죠)의 다음 요소인 <span> 요소에 append 함수를 이용하여 문자열이 추가된 것을 보실 수 있습니다.
여기서 잠깐!! 미리보기 처럼 화면상에 눈으로는 확인이 되지만 실제로 요소가 추가되었는지 확인할 방법은 있을까요? 네 있습니다. 아래 내용을 참고해 보세요.
위 예제를 적당한 이름으로 저장하세요.(확장자는 html입니다.) 저는 4.8.1.html 로 저장했습니다. 이 저장된 파일을 파이어폭스에서 열어봅니다. 이 파일을 여는 방법은 아시죠? 파이어폭스에 드래그를 하셔도 되고, 파이어폭스의 파일 > 파일열기 메뉴를 이용하셔도 됩니다. 단, 파이어폭스에 파이어버그 플러그인이 설치되어 있어야 합니다. 이 부분에 대해 정보를 원하시면 아래 포스트를 참고하세요.
jQuery 쉽게하기 - 파이어폭스의 파어어버그 사용하여 디버깅하기 
새창으로 보기
F12 또는 도구 > 파이어버그 메뉴를 클릭해서 파이어버그를 활성화 합니다. 4.3.1.html 파일을 파이어폭스로 열면 아래와 같이 화면이 분할됩니다.
캡쳐를 위해 창을 좀 조절했습니다. 정확히 제 화면과 일치하지는 않으실 겁니다. 하단 화면에서 탭을 html 로 바꾸고 아래 처럼 확장을 합니다.
빨간 부분 보이시나요? 원래 예제에는 이런 태그가 존재하지 않습니다. 위에 확인해 보세요. 그런데 jQuery를 이용해서 동적으로 추가한 것이죠. 자 확인하셨죠? ^^