[name="value"] 는 태그의 name 속성명에 들어가 있는 문자가 "value" 와 일치하는 요소를 찾습니다.
원문 링크 
http://api.jquery.com/attribute-equals-selector/
개요 : 태그가 가진 속성(attributes)의 값(value)과 문자열이 일치하는 요소를 찾아 줍니다.
- jQuery('[attribute="value"]')
- attribute 태그의 속성
- value 속성의 값, 따옴표를 사용해야 합니다.
예 제
type 이 radio인 input 태그들 중에 name 속성(attribute)의 값이 "newsletter" 인 요소를 찾아서 그 다음 요소(태그)의 텍스트를 "is 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?</span>
</div>
<div>
<input type="radio" name="newsletters" value="Cold Fusion" />
<span>name?</span>
</div>
<div>
<input type="radio" name="accept" value="Evil Plans" />
<span>name?</span>
</div>
<script>$('input[name="newsletter"]').next().text(' is newsletter');</script>
</body>
</html>
미리보기
좀 헷갈리시죠? 설명드리겠습니다. 9~10라인을 보시면 name="newsletter"라고 되어 있습니다. 23라인의 $('input[name="newletter']')는 9라인의 input 요소를 찾아서 객체로 지니고 있습니다. 계속해서 .next() 라는 함수가 사용되었는데요. 이 함수는 현재 요소 다음의 요소를 지칭하게 됩니다. 즉, 10라인의 <span>name?</span> 가 됩니다. 그 다음 함수가 .text('is newsletter') 입니다. 이 함수는 어떤 요소에 'is newsletter' 텍스트를 집어 넣는 함수이죠. 그래서 데모를 보시면 제일 위쪽에 있는 텍스트가 'name?' 이 아니고 'is newsletter' 로 되어 있는 겁니다. 23라인이 없다면 3개 모두 'name?' 이 나와야 되죠.
이해가 되시나요? 다시 쭉 붙여 써보면 'input 들중에 name 이 newletter 인 놈을 찾아서 그 다음에 오는 요소의 텍스트를 'is newsletter' 로 만들어라' 라는 구문이 되겠습니다.
아마 지금까지 설명드린 선택자 중에 가장 많이 쓰일 것 같은 선택자입니다. 이 선택자는 꼭 기억해 두시는게 좋겠네요. 하면 할수록 참 편리한 jQuery 라는 생각이 듭니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : button 을 찾자 (3) | 2011.01.25 |
|---|---|
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name^="value"] (4) | 2011.01.24 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name!="value"] (5) | 2011.01.24 |
| jQuery 를 이용한 슬라이드 이미지 (133) | 2011.01.22 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name$="value"] (2) | 2011.01.22 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name~="value"] (2) | 2011.01.21 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name*="value"] (2) | 2011.01.21 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name|="value"] (2) | 2011.01.20 |
