jQuery(제이쿼리) 강좌와 예제모음

셀렉터 기초 : 요소 이름(태그명)으로 셀렉트하기

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
URL : https://ktsmemo.cafe24.com/s/jquery/107
등록일 : ,

요소 이름으로 셀렉트 하기

제이쿼리 셀렉터는 CSS 셀렉터 형식을 사용합니다.
이 셀렉터는 전혀 어렵지 않습니다.
아래는 요소명으로 셀렉트 해보는 예제입니다.


셀렉터 : $('요소명')


예제1
셀렉터 : $('div') - div 요소를 셀렉트 합니다.

<div>제이쿼리 입니다.</div>
<span>제이쿼리 에요.</span>
<div>제이쿼리 입니다.<div>
<span>제이쿼리 에요.</span>


예제2
셀렉터 : $('span') - span 요소를 셀렉트 합니다.

<div>제이쿼리 입니다.</div>
<span>제이쿼리 에요.</span>
<div>제이쿼리 입니다.<div>
<span>제이쿼리 에요.</span>


예제3
셀렉터 : $('div, span') - 컴마로 구분하여 div, span 둘 다 셀렉트 합니다.

<div>제이쿼리 입니다.</div>
<span>제이쿼리 에요.</span>
<div>제이쿼리 입니다.<div>
<span>제이쿼리 에요.</span>

모든 요소 셀렉트 하기

모든 요소는 * 을 사용하여 셀렉트 합니다.
모든 요소를 상대로 * 을 사용할 일은 거의 없겠지만 ^^;
특정 요소의 자식 요소를 셀렉트 할때 사용 할 수 있겠죠.


셀렉터 : $('*')


예제1
셀렉터 : $('*') - 현재 문서의 모든 요소를 셀렉트 합니다.


아래 버튼을 누르면 문서 전체가 서서히 사라집니다.

HTML

<br>
아래 버튼을 누르면 문서 전체가 서서히 사라집니다.<br>
<br>
<button onclick="$('*').fadeOut(5000)">그동안 즐거웠습니다.</button>

예제 : 새키우기

아래 버튼을 눌러보세요! 해당 요소에 있는 새들이 커집니다.
기초 예제에 조금 안어울리는 셀렉터를 사용한 예제입니다.
그래도 재미로 한번 구경해 보세요. ^^*

- 클릭시 계속 커짐 그리고 1초 후 다시 작아짐.
- 커지거나 작아지는 중일때 버튼을 눌러도 동작하지 않음.



div

span

div

span

div

span

HTML

<button type="button" onclick="gogogo('div')">div새 키우기</button>
<button type="button" onclick="gogogo('span')">span새 키우기</button>
<br><br>
<div class="cage">
	<div><img src="/img/bird.gif" /><br>div</div>
	<span><img src="/img/bird.gif" /><br>span</span>
	<div><img src="/img/bird.gif" /><br>div</div>
	<span><img src="/img/bird.gif" /><br>span</span>
	<div><img src="/img/bird.gif" /><br>div</div>
	<span><img src="/img/bird.gif" /><br>span</span>
</div>
<div id="selector"></div>

자바스크립트

function gogogo(v){

	var sel = '.cage ' + v + ' img:not(:animated)';

	// 선택한 요소의 새 이미지의 높이를 늘려서 커져보이게 만듭니다.
	// 조건으로, 커지는 중이거나 작아지는 중일때는 동작하지 않습니다.
	// 현재 셀렉터 예제에 비해서 좀 어려운 코드이지만 그냥 한번 봐주세요 ^^
	$(sel).animate({height:'+=20'}, 300, 'easeInOutBack', function(){
		var o = this;

		// 1초후에 다시 작아 지도록 합니다.
		setTimeout(function(){
			$(o).animate({height:'-=20'}, 500, 'easeInOutBack');
		}, 1000);
	});

	$('#selector').html('셀렉터 : $(\'' + sel + '\')');

}