<body>

<div>

<ul>

<li>AA</li>

<li>BB</li>

<li>CC</li>

<li>DD</li>

<li>EE</li>

</ul>

</div>

</body>


1. body태그를 기준으로 바로 아래 div를 자식. body 아래 모든 태그를 후손



2. 자식선택자


- 형태 : '부모 > 자식' 


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script src="jquery-1.9.1.js"></script>

<script>

$(document).ready(function(){

$('body > *').css('color','red');

});

</script>

</head>

<body>

<div>

<ul>

<li>AA</li>

<li>BB</li>

<li>CC</li>

<li>DD</li>

<li>EE</li>

</ul>

</div>

</body>

</html>


자식에게만 적용된것을 확인할수 있다.




3. 후손선택자


- 형태 : '요소 A  요소 B'


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script src="jquery-1.9.1.js"></script>

<script>

$(document).ready(function(){

$('body *').css('color','red');

});

</script>

</head>

<body>

<div>

<ul>

<li>AA</li>

<li>BB</li>

<li>CC</li>

<li>DD</li>

<li>EE</li>

</ul>

</div>

</body>

</html>


;body 밑으로 모두 속성이 적용된다.




$('body ul').css('color','red');


; ul만 적용됨.



4. 속성선택자


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script src="jquery-1.9.1.js"></script>

<script>

$(document).ready(function(){

$('input[type=text]').val("이름을 입력하세요!");

});

</script>

</head>

<body>

<input type="text" /><br/>

<input type="password" /><br/>

<input type="radio" /><br/>

<input type="checkbox" /><br/>

<input type="file" /><br/>

</body>

</html>


; input 태그 중 type이 text인 것만 적용.

; id를 주면 복잡할수 있으므로.




5. 입력양식 필터 선택자


- 형태 :  '요소:값'

-

 요소:button

 input태그 중 type속성이button인 문서객체와 button태그를 선택
 요소: checkbox  
  요소:file  
  요소:image  
  요소:password  
  요소:radio  
  요소:reset  
  요소:submit  
  요소:text



** 

요소:checked

 check된 입력양식을 선택

 요소:disabled

 비활성화된 입력양식을 선택
 요소:enabled  활성화된 입력양식을 선택
 요소:focus  포커스가 된 입력양식을 선택
 요소:input  모든 입력양식을 선택
 요소:selected  option중 선택된 입력양식을 선택




예) 5초 후 선택된 값을 보여주는 예제


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script src="jquery-1.9.1.js"></script>

<script>

$(document).ready(function(){

//5초후 실행

setTimeout(function(){

//변수 선언

var value = $('select > option:selected').val();

alert(value);

}, 5000);


});

</script>

</head>

<body>

<select>

<option>국어</option>

<option>영어</option>

<option>수학</option>

<option>과학</option>

</select>

</body>

</html>





6. 필터 선택자


- 위치 관련 필터 선택자 : 테이블에 색상 


요소:odd    홀수번재 위치한 문서객체 선택

요소:even  짝수번재 위치한 문서객체 선택

요소:first    첫번재 위치한 문서객체 선택

요소:last    마지막 번재 위치한 문서객체 선택


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script src="jquery-1.9.1.js"></script>

<script>

$(document).ready(function(){

$('tr:odd').css('background','red');

$('tr:even').css('background','blue');

$('tr:first').css('background','orange');

});

</script>

</head>

<body>

<table>

<tr><td>요일</td><td>과목</td></tr>

<tr><td>월요일</td><td>국어</td></tr>

<tr><td>화요일</td><td>영어</td></tr>

<tr><td>수요일</td><td>수학</td></tr>

<tr><td>목요일</td><td>과학</td></tr>

<tr><td>금요일</td><td>사회</td></tr>

</table>

</body>

</html>



'WEB > jQuery' 카테고리의 다른 글

1. jQuery 시작  (0) 2013.04.17

+ Recent posts