1. 기본 선택자

- $('h1').css('color', 'red'); - ('h1') 선택자와, css('color', 'red') 메서드

- 문서 객체를 다룰 때 사용하는 형태

- CSS 선택자와 유사




1.1. 전체 선택자 (Wildcard Selector) - *

- HTML 페이지에 있는 모든 문서 객체를 선택


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('*').css('color', 'red');
	});
</script>



1.2. 태그 선택자 - 태그명

- 특정한 태그를 선택


<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('h1').css('color', 'blue'); $('h2, p').css('color', 'orange'); }); </script>



1.3. 아이디 선택자 - #아이디명

- 특정한 id 속성이 있는 문서 객체를 선택


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h1#target').css('color', 'red');
	});
</script>
</head>
<body>
	<h1 id="header1">Header</h1>
</body>



1.4. 클래스 선택자 - .클래스명

- 특정한 class 속성이 있는 문서 객체를 선택


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h1.item').css('color', 'red');
		$('.item1, .item2').css('color', 'blue');
		$('.item.select').css('color', 'orange');
		$('.item.cc').css('color', 'gray');
	});
</script>
</head>
<body>
	<h1 class="item1">Header1</h1>
	<h1 class="item2">Header2</h1>
	<h1 class="item">Header</h1>
	<h1 class="item">Header</h1>
	<h1 class="item cc">Header</h1>
	<h1 class="item select">Header</h1>
</body>




2. 자손 선택자와 후손 선택자

- 기본 선택자의 앞에 붙여 사용

- 기본 선택자의 범위를 제한




2.1. 자손 선택자

- 자손을 선택하는 선택자

- '요소A' > '요소B' 형태로 사용


<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('body > *').css('color', 'red'); }); </script> </head> <body> <div> <ul> <li>Dog</li> <li>Cat</li> <li>Pig</li> </ul> </div> </body>



2.2. 후손 선택자

- 후손을 선택하는 선택자

- '요소A  요소B' 형태로 사용


<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('body *').css('color', 'red'); }); </script> </head> <body> <div> <ul> <li>Dog</li> <li>Cat</li> <li>Pig</li> </ul> </div> </body>




3. 속성 선택자

- 기본 선택자 뒤에 붙여 사용

- 입력 양식과 관련된 태그를 선택할 때 많이 사용


 선택자 형태 

 설명 

 요소[속성=값] 

 속성과 값이 같은 문서 객체를 선택 

 요소[속성|=값] 

 속성 안의 값이 특정 값과 같은 문서 객체를 선택 

 요소[속성~=값] 

 속성 안의 값이 특정 값을 단어로 시작하는 문서 객체를 선택 

 요소[속성^=값] 

 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택 

 요소[속성$=값] 

 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택 

 요소[속성*=값] 

 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택 


<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('input[type="text"]').val('Hello jQuery'); }); </script> </head> <body> <input type="text" />

<input type="password" />

<input type="radio" />

<input type="checkbox" />

<input type="file" />

</body>





4. 필터 선택자

- 선택자 중에 : 기호를 포함하는 선택자




4.1. 입력 양식 필터 선택자

- 속성 선택자 보다 간단한 방법으로 사용할 때 필터 선택자를 사용

- 기본 선택자 뒤에 사용


 선택자 형태

 설명 

 요소:button 

 input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택 

 요소:checkbox

 input 태그 중 type 속성이 checkbox인 문서 객체를 선택

 요소:file

 input 태그 중 type 속성이 file인 문서 객체를 선택

 요소:image

 input 태그 중 type 속성이 image인 문서 객체를 선택

 요소:password

 input 태그 중 type 속성이 password인 문서 객체를 선택

 요소:radio

 input 태그 중 type 속성이 radio인 문서 객체를 선택

 요소:reset

 input 태그 중 type 속성이 reset인 문서 객체를 선택

 요소:submit

 input 태그 중 type 속성이 submit인 문서 객체를 선택

 요소:text

 input 태그 중 type 속성이 text인 문서 객체를 선택


 선택자 형태 

 설명

 요소:checked

 체크되어 있는 입력 양식을 선택 

 요소:disabled 

 비활성화된 입력 양식을 선택 

 요소:enabled 

 활성화된 입력 양식을 선택 

 요소:focus 

 초점이 맞추어져 있는 입력 양식을 선택 

 요소:input 

 모든 입력 양식을 선택 

 요소:selected 

 option 객체 중 선택된 태그를 선택 


<!--hello_jQuery.html  -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello_jQuery</title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
			setTimeout(function() { // setTimeout 일정 시간 후에 코드 실행
				var value = $('select > option:selected').val();
				alert(value);
			}, 5000);
	});
</script>
</head>
<body>
	<select>
		<option>Dog</option>
		<option>Cat</option>
		<option>Pig</option>
	</select>
</body>
</html>



4.2. 위치 필터 선택자

- 위치와 관련된 필터 선택자


 선택자 형태 

 설명 

 요소:odd 

 홀수 번째에 위치한 문서 객체를 선택 

 요소:even 

 짝수 번째에 위치한 문서 객체를 선택 

 요소:first 

 첫 번째에 위치한 문서 객체를 선택 

 요소:last 

 마지막에 위치한 문서 객체를 선택 



<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('tr:odd').css('background', '#F9F9F9'); $('tr:even').css('background', '#9F9F9F'); $('tr:first').css('background', '#000000').css('color', '#FFFFFF'); }); </script> </head> <body> <table> <tbody> <tr> <td>이름</td> <td>제조사</td> </tr> <tr> <td>갤럭시S4</td> <td>삼성</td> </tr> <tr> <td>갤럭시노트3</td> <td>삼성</td> </tr> <tr> <td>G2</td> <td>엘지</td> </tr> <tr> <td>Vu3</td> <td>엘지</td> </tr> <tr> <td>아이폰5S</td> <td>애플</td> </tr> <tr> <td>아이폰5C</td> <td>애플</td> </tr> </tbody> </table> </body>



4.3. 함수 필터 선택자

- 함수 형태의 필터 선택자


 선택자 형태 

 설명 

 요소:contains(문자열)

 특정 문자열을 포함하는 문서 객체를 선택 

 요소:eq(n) 

 n번째에 위치하는 문서 객체를 선택 

 요소:gt(n) 

 n번째 초과에 위치하는 문서 객체를 선택 

 요소:has(h1) 

 h1 태그가 있는 문서 객체를 선택 

 요소:lt(n) 

 n번째 미만에 위치하는 문서 객체를 선택 

 요소:not(선택자) 

 선택자와 일치하지 않는 문서 객체를 선택 

 요소:nth-child(3n+1) 

 3n+1번째에 위치하는 문서 객체를 선택 



<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('tr:eq(0)').css('background', '#000000').css('color', '#FFFFFF');
		$('td:nth-child(2n+1)').css('background', '#565656');
		$('td:nth-child(2n)').css('background', '#F9F9F9');
	});
</script>




5. 배열 관리

- jQuery로 배열을 관리할 때는 each() 메서드를 사용

- $.each(object, function(index, item) {})

- $(selector.each(function(index, item) {})




5.1. 자바스크립트 배열 관리

- $.each() 메서드의 첫 번째 매개변수 배열, 두 번째 매개변수 index, item을 갖는 함수

- index는 배열의 인덱스 또는 객체의 키, item은 해당 인덱스나 키가 가진 값


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var array = [
			{ name: 'Google', link: 'http://www.google.co.kr' },
			{ name: 'Naver', link: 'http://www.naver.com' },
			{ name: 'Daum', link: 'http://www.daum.net' },
		];
		
		$.each(array, function (index, item) {
			var output = '';
			
			output += '<a href="' + item.link + '">';
			output += '<h1>' + item.name + '</h1>';
			output += '</a>';
			
			document.body.innerHTML += output;
		});
	});
</script>



5.2. jQuery 배열 관리

- 선택자로 여러 개의 문서 객체를 선택할 때 생성


<style type="text/css">
	.high-light-0 { background: yellow; }
	.high-light-1 { background: orange; }
	.high-light-2 { background: blue; }
	.high-light-3 { background: red; }
	.high-light-4 { background: green; }
	.high-light-5 { background: gray; }
</style>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h1').each(function(index, item) {
			// high-light 클래스 속성 추가
			// $(item).addClass('high-light-' + index);
			
			// this 키워드와 item은 의미가 같다
			$(this).addClass('high-light-' + index);
		});
	});
</script>
</head>
<body>
	<h1>item0</h1>
	<h1>item1</h1>
	<h1>item2</h1>
	<h1>item3</h1>
	<h1>item4</h1>
	<h1>item5</h1>
</body>




6. 객체 확장

- $.extend() 메서드 : 많은 수의 속성을 추가할 때 사용


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var object = { name: '갱짱' };
		
		$.extend(object, { region: '홍대', blog: 'http://gangzzang.tistory.com' });
		
		var output = '';
		$.each(object, function(key, item) {
			output += key + ' : ' + item + '\n';
		});
		
		alert(output);
	});
</script>




7. jQuery 충돌 방지

- 여러 자바스크립트 프레임워크를 함께 사용할 때에는 충돌이 발생할 수 있음

- 총돌을 방지하지 위해서 $.noConflict() 메서드 사용, 메서드를 사용하면 더이상 식별자 $ 대신 jQuery 사용

- 간단하게 사용하고 싶다면 jQuery 객체를 다른 변수에 저장해서 사용


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$.noConflict();
	jQuery(document).ready(function() {
		alert('A');
	});
	
	var J = jQuery;
	J(document).ready(function() {
		alert('B');
	});
</script>


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

제이쿼리(jQuery) 문서 객체 조작 - #2  (0) 2013.11.28
제이쿼리(jQuery) 문서 객체 조작 - #1  (0) 2013.11.26
제이쿼리(jQuery) 선택자 - #2  (0) 2013.11.26
제이쿼리(jQuery) 기본  (0) 2013.11.25

+ Recent posts