.class 는 클래스명이 일치하는 요소를 찾는 선택자입니다.
원문 링크 
http://api.jquery.com/class-selector/
- jQuery('.class')
- class 클래스명을 검색합니다. 2개 이상의 클래스를 가지고 있는 요소가 있다면 그 중에 하나만 일치해도 선택됩니다.
JavaScript 의 기본 함수인 getElementsByClassName() 이 지원되는 브라우져에서는 jQuery 도 해당 함수를 사용합니다.(헉; 저는 왜 이 네이티브 함수를 모르고 있었죠 ㅡ.,ㅡ)
예 제
"myClass" 라는 클래스명을 가진 요소를 찾아서 3px 짜리 빨간 테두리를 두룹니다.
<!DOCTYPE html> <html> <head> <style> div,span { width: 100px; height: 40px; float:left; padding: 10px; margin: 10px; background-color: #EEEEEE; } </style> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> </head> <body> <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass otherClass">span class="myClass oherClass"</span> <script>$(".myClass").css("border","3px solid red");</script> </body> </html>
미리보기
보시면 span 태그에 2개의 클래스명이 있지만 하나만 일치해도 빨간 테두리가 쳐지는 것을 보실 수 있습니다.
예 제
"myClass" 와 "otherclass" 라는 2개의 클래스명을 가진 요소를 찾아서 13px 짜리 빨간 테두리를 두룹니다.
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 100px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div class="myclass">div class="notMe"</div>
<div class="myclass otherclass">div class="myClass"</div>
<span class="myclass otherclass">span class="myClass"</span>
<script>$(".myclass.otherclass").css("border","13px solid red");</script>
</body>
</html>미리보기
활용도가 아주 높은 선택자입니다. 사용법을 눈여겨 보세요. 자주 쓰시게 되서 아마 익숙해 지실 겁니다. 사실 이 선택자와 ID 선택자가 주로 많이 쓰이는 선택자가 아닐까 합니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 인덱스로 요소 찾기 : jQuery(':eq(index)') (6) | 2011.01.28 |
|---|---|
| jQuery API 정복 - 사용 불가 상태 선택하기 : jQuery(':disabled') (2) | 2011.01.28 |
| jQuery API 정복 - 자식 요소 선택하기 : jQuery('ancestor descendant') (2) | 2011.01.27 |
| jQuery API정복 - 특정 단어 포함 요소 선택하기 : jQuery(':contains(text)') (6) | 2011.01.27 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 하위 요소 선택 ("parent > child") (8) | 2011.01.27 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크된 체크박스만 알아내기 (4) | 2011.01.26 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : 체크박스를 찾자 (6) | 2011.01.26 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : button 을 찾자 (3) | 2011.01.25 |