[name!="value"] 는 태그의 name 속성값과 "value" 가 일치하지 않는 요소만 찾아주는 선택자입니다.
원문 링크 
http://api.jquery.com/attribute-not-equal-selector/
개요 : 태그가 가진 속성(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를 이용해서 동적으로 추가한 것이죠. 자 확인하셨죠? ^^
이번 포스팅은 원 포스트보다 파이어폭스 관련 포스팅 같이 되어 버렸네요 ^^;;. 어쨌든 확인하는 방법도 있어야 하니까요. 잘 보고 계신지 모르겠습니다. 반복적인 내용에 좀 지루하실듯 하네요. 그래도 힘내세요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크된 체크박스만 알아내기 (4) | 2011.01.26 |
|---|---|
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크박스를 찾자 (6) | 2011.01.26 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : button 을 찾자 (3) | 2011.01.25 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name^="value"] (4) | 2011.01.24 |
| jQuery 를 이용한 슬라이드 이미지 (133) | 2011.01.22 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name="value"] (7) | 2011.01.22 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name$="value"] (2) | 2011.01.22 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name~="value"] (2) | 2011.01.21 |