본문 바로가기
프로그래밍/jQuery

jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name|="value"]

by zoo10 2011. 1. 20.

[name|="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 앞쪽에 들어가 있는지 확인하는 선택자입니다.

원문 링크 http://api.jquery.com/attribute-contains-prefix-selector/

attributeContainsPrefix selector

개요 : 태그가 가진 속성(attributes)의 값(value)에 하이픈(-)이 포함되어 있을 때 해당 문자열로 시작되는 요소를 찾아 줍니다.

  • jQuery('[attribute|="value"]')
  • attribute 태그의 속성
  • value 속성의 값

예 제
문서에 모든 링크 중에 hreflang 속성(attribute)의 값이 "en" 으로 시작되는 요소를 찾아서 3px 의 테두리를 그립니다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  
  <a href="#" hreflang="en">Some text</a> 

  <a href="#" hreflang="en-UK">Some other text</a>
  
<script>$('a[hreflang|="en"]').css('border','3px dotted green');</script>

</body>
</html>

미리보기

예제를 보시면 en-UK 라고 하이픈으로 연결된 문자가 있습니다. 하이픈 앞에 "en" 이 있는지 확인해서 찾아주는 선택자이네요.

 

문법이 조금 어렵게 보입니다. 특정한 문자가 들어간 요소(element)를 찾고 싶을 때 사용하면 좋겠네요. 실제 사용은 아마 별로 없을 거예요 ^^;;.

그럼 즐프하세요.

※ 잘못된 내용이 있어 수정합니다. (2011.01.21)
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.