<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


1. http://jquery.com 에서 다운받기.


2. **.min.js 파일은 minified버전. 파일용량을 최소화한 버전임.

  이클립스에 포함시키면 빨간표시가 나는데 실행하는데는 상관없음.이클립스상에 체크에 걸려서 표시 되는것이므로 문법상 오류는 아님.



3.  기본형식


$(document).ready(function(){

});


1)  window.onload = function(){} 와 동일한 기능.

2) 이벤트에 여러개 함수 연결 가능.


$(document).ready(function(){

...

});

$(document).ready(function(){

,,,

});

...


3) 간단한 형식

$(function(){

...

});



4. 기본 선택자

- css와 유사함.


1) 전체 선택자

  • $('*').css('color','Red');


2) 태그 선택자

: 태그명을 사용한다.


  • $('h1').css('color','Orange');
  • $('h1','p').css('color','blue');



3) 아이디 선택자

: id를 가지는 문서객체 선택

: id는 페이지내 단하나만 존재해야 한다.


  • $('#header').css('color','orange');



4) 클래스 선택자


$('.class').css('color','blue');

$('h1.item').css('background','red');


ex>

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

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

<script>

$(document).ready(function(){

$('.item').css('color','orange');

$('.item.select').css('color','red');

});

</script>

</head>

<body>

<h1 class="item">header 1</h1>

<h1 class="item select">header 2</h1>

<h1 class="item">header 3</h1>

</body>

</html>





; class에 item과 select 를 찾을려면 .item.select 붙여서 찾는다.

저작자표시

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

2. jQuery 선택자(자식/후손/속성/필터)  (0) 2013.04.17

+ Recent posts

티스토리툴바