클래스명으로 선택하여 스타일 주기
# Work/└ jQuery 2012. 4. 16. 11:10 |
<!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">span class="myClass oherClass"</span>
<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn</div>
<form>
<input name="email" disabled="disabled" /> <input name="id" />
</form>
<table border="1"> <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr> <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr> <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr> </table>
<script>
//클래스명으로 선택하여 스타일 주기
$(".myClass").css("border","3px solid red");
//클래스 명이 두 개일때
$(".myclass.otherclass").css("border","13px solid red");
//직계 자손요소를 선택하여 스타일 주기
$("ul.topnav > li").css("border", "3px double red");
// jQuery(':contains(text)') 특정 단어를 포함한 요소를 선택하여 스타일 주기
$("div:contains('John')").css("text-decoration", "underline");
// jQuery(':disabled')- 사용 불가 상태 선택
$("input:disabled").val("this is it");
// jQuery(':eq(index)')- 인덱스로 요소 찾기
$("td:eq(2)").css("color", "red");
</script>
</body> </html>
## 인덱스 요소 선택자
:eq(), :lt(), :gt(), :even, :odd
// :odd - 홀수번째 선택자, :even - 짝수번째 선택자
## $('.myclass:eq(1)') - 문서 상에 myclass 라는 클래스명을 가진 요소 중 2번째 요소를 의미
:eq(index) 함수는 그리 좋은 사용 방법이 아닙니다. .eq(index) 라고 사용하시는 것이 더 좋습니다. 이유는 :eq(index) 함수는 index 값에 음수가 들어왔을 때 아무런 값도 반환하지 않기 때문입니다. 예를 들어, $('li').eq(-1)를 하면 li 요소 중 마지막 값을 찾아 주지만 $('li:eq(-1)') 는 어떤 값도 찾아 주지 않습니다. 때에 따라서 잘 구분해서 사용해야 겠네요.
'# Work > └ jQuery' 카테고리의 다른 글
| show & hide (0) | 2012.04.26 |
|---|---|
| jquery 내용 정리 (0) | 2012.04.18 |
| 첫번째 자식 선택하여 스타일 주기. (0) | 2012.04.18 |
| 게시판 리스트 짝수, 홀수 찾아 스타일 주기 (1) | 2012.04.17 |
| jQuery 기초 (0) | 2012.01.04 |
호정찐 
