("#id") 는 요소의 id 속성값을 이용해서 원하는 요소를 찾을 수 있습니다.
원문 링크 
http://api.jquery.com/id-selector/
- jQuery('#id')
- id 이 아이디를 찾기위해 요소들의 id 속성들을 검색합니다.
가장 핵심 선택자가 나왔네요. 아마 클래스명으로 선택하기와 이 아이디로 선택하는 선택자가 가장 많은 활용도가 있을 거라고 생각됩니다. 레이아웃을 작성하면서 id 와 class 속성을 직접 부여하는 일들이 많을 테니까요.
간혹 동적으로 요소들을 생성하거나 삭제하는 경우에는 주로 클래스명으로 사용하는 경우가 많게 되더군요. 어찌됬든 중요한 선택자입니다. 돼지꼬리~. 별표 땡땡 하세요.
개요 : 주어진 id 값으로 단 하나의 요소만 선택합니다.
jQuery 에서 id 선택자는 JavaScript의 아주 효과적인 함수인 document.getElementById() 를 이용합니다. h2#pageTitile 과 같이 id 선택자와 다른 선택자를 혼용해서 써야할 때 jQuery 는 일치하는 요소가 있는 찾기 전에 추가적인 검사를 실행하게 됩니다.
개발자(developer)라면 항상 기억해야 합니다. 시간이 가장 중요한 요소라는 것을 말입니다. 선택자 최적화에 초점을 맞추기 보다는 성능향상이 더 중요한 것은 너무도 자명한 일입니다.
위 부분은 아무래도 원문이 있어야 겠네요. 박스에 집어넣고 아주 하고 싶은 얘기인 것 같습니다.
As always, remember that as a developer, your time is typically the most valuable resource. Do not focus on optimization of selector speed unless it is clear that performance needs to be improved.
사실 아무리 좋은 라이브러리라 하더라도 성능 전반에 영향을 준다고 판단되면 과감히 삭제할 수 있는 것도 중요합니다. 그렇다 하더라도 이미 검증되고 나보다 더 그 부분에 대해서 고민하는 사람들이 만들어 낸 라이브러리이 사용이 주는 이점이 더 많은 것은 사실입니다.
id 값은 한 문서에서 유일한 값이어야 합니다. 만약 중복된 id 가 있다면 DOM 구조 상에서 해당 id 로 가장 먼저 만나는 요소만을 찾아 줍니다. 문서 내에서 같은 ID 가 한개 이상의 요소에 잘못 사용되고 있다면 이 선택자가 반환하는 데이터를 전적으로 신뢰하시면 안됩니다.
또한, id 에 마침표(".")나 콜론(":") 등과 같은 특수문자가 섞여 있다면 이 요소를 선택하기 위해서는 백슬래쉬("\")와 같이 사용해야 합니다. 백슬래시 사용법 보러가기(해결방법이 제시되어 있지만 사실 이런식으로 사용안하셔야 겠죠 ^^ )
예 제
"myDiv" 라는 id 속성값을 가진 요소를 찾아서 빨간 테두리를 두룹니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 90px;
height: 90px;
float:left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<script>$("#myDiv").css("border","3px solid red");</script>
</body>
</html>
미리보기
예 제
"myID.entry[1]" 이라는 특수문자가 섞인 id 를 찾아서 빨간 테두리를 두룹니다. 백슬래시 사용법을 유심히 보시기 바랍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
float:left;
padding: 2px;
margin: 3px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div id="myID.entry[0]">id="myID.entry[0]"</div>
<div id="myID.entry[1]">id="myID.entry[1]"</div>
<div id="myID.entry[2]">id="myID.entry[2]"</div>
<script>$("#myID\\.entry\\[1\\]").css("border","3px solid red");</script>
</body>
</html>미리보기
위 2번째 예제에서 백슬래시의 사용법을 유심히 보세요. 백슬래시를 두개를 사용해야만 정상적으로 해당 요소를 찾아낼 수 있습니다. 딱 보기에도 복잡해 보이시지 않나요. 가급적이면 이런 코드는 작성하지 않는게 아마 오래 사시는데 도움이 되지 않을까 합니다. ^^;; 뭐 부득이하게 사용해야 한다면 머리 너무 쥐어 뜯지 않으시길 부탁드립니다. :-)
다시 말씀드리지만 아주 중요한 선택자 입니다. 아주 사용하기도 쉽고요. 잘 익혀두시길 바랍니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 마지막 자식 요소 찾기 : last (2) | 2011.02.12 |
|---|---|
| jQuery API 정복 - 마지막 자식 요소들 찾기 : last-child (2) | 2011.02.11 |
| jQuery API 정복 - 폼에 속한 input 들 선택하기 : jQuery(':input') (0) | 2011.02.11 |
| jQuery API 정복 - image 폼 요소 찾기 : jQuery(":image") (0) | 2011.02.10 |
| jQuery API 정복 - 안보이는 요소 찾기 : jQuery(':hidden') (1) | 2011.02.10 |
| jQuery API 정복 - 제목 태그(h1)를 찾자 : jQuery(':header') (8) | 2011.02.09 |
| jQuery API 정복 - 자식 중에 태그 찾기 : jQuery(':has(selector)') (30) | 2011.02.09 |
| jQuery API 정복 - 속성이 있는지 찾기 : jQuery('[attribute]') (10) | 2011.02.08 |