선택자_jQuery

직접 선택자

- 제이쿼리 함수를 실행 시 인수에 css 선택자가 삽입

- id, class, 태그명, 속성, 속성명과 속성값, and, or

- 가상선택자

<div class="div01">안녕하세요.</div>
<div class="div01">안녕하세요.</div>
<div class="div01">안녕하세요.</div>

<script type="text/javascript">
	console.log($('.div01'));
</script>

console.log($('.myCheck:checked'));

인접관계 선택자

- 검색된 객체에서 제이쿼리 메서드를 활용하여 상하관계의 객체를 검색 할 수 있다.

parent

- 검색된 객체의 한단계 상위 객체 선택

- $('선택자').parent();

<ul>
	<li>
		<button type="button" class="btn01">버튼</button>
	</li>
	<li>
		<button type="button" class="btn01">버튼</button>
	</li>
	<li>
		<button type="button" class="btn01">버튼</button>
	</li>
</ul>
<script type="text/javascript">
	$(function(){
		$('.btn01').click(function(){
			console.log(this);
//제이쿼리 함수 실행 시 dom 객체 삽입
//parent 상위 한단계 위 객체를 찾아 제이쿼리 객체에 담아 반환
			var parent = $(this).parent();
			console.log(parent);
		});
	});
	
</script>

parents

- 검색된 객체의 모든 상위 객체 선택

- 인수값이 있다면 인수에 해당되는 상위 객체만 반환

- $('선택자').parents();

- $('선택자').parents('상위 선택자');

//parents 상위 모든 객체 반환
$(function(){
	$('.btn01').click(function(){
		var parents = $(this).parents();
		console.log(parents);
	});
});

//parents 상위 모든 객체 반환
$(function(){
	$('.btn01').click(function(){
		var parents2 = $(this).parents('ul');
		console.log(parents2);
	});
});

children, find

- children : 선택된 객체 1단계 아래 하위 전체 요소 객체 반환,

인수값이 있다면 인수에 해당되는 객체 1단계 아래 하위 요소 객체만 반환

- children('선택자');

<div class="div02">
	<ul>
		<li>안녕하세요.</li>
		<li>안녕하세요.</li>
		<li>안녕하세요.</li>
	</ul>
	<h5>서브타이틀</h5>
	<article>본문내용</article>
</div>
<script type="text/javascript">
	$(function(){
		$('.div02').click(function(){
			var child01=$(this).child();
			console.log(child01,'children');

			var child02=$(this).children('h5');
			console.log(child02,'children 인수 h5');
		});
	});
</script>

- find : 하위 요소 중 인수값에 해당되는 객체만 반환

- find('선택자');

$(function(){
		var find01=$(this).find('li');
		console.log(find01,'find01 인수 li');
	});
});