JQuery : 기본함수 - hide() / show(), list 요소에 접근하기

* List에 접근하는 방법

 

<!-- list에 접근하는 방법 : list안에 list 존재할 경우의 접근-->

// 다중 리스트로 구성된 구조를 정의

<ul id = "list">
	<li>Coffee
		<ol type="1">
			<li>black</li>
			<li>milk</li>
		</ol>
	</li>
	<li>Tea</li>
	<li>Milk</li>
</ul>


// JQuery로 리스트의 요소들 가져오기

<script type="text/javascript">

$(function () {

	$("#btn").click(function () {
    
    
		// $("#list").hide();	// 아이디가 list인 태그의 모든 리스트 요소(li)다 삭제 
		

		// $('ul li:first').hide();	// ul의 첫번째 리스트에 함수 적용
		// $('#list li:first').hide();	// ul의 첫번째 리스트에 함수 적용
       	 // 두 코드는 모두 같은결과
		
        
		// $('ul ol li:first').hide();			//ul 안의 ol의 첫번째 리스트에 적용
		// $('ul ol li:first-child').hide();	//ul 안의 ol의 첫번째 리스트에 적용
		// 두 코드는 모두 같은결과
        
        
        
        $('ul ol li:nth-child(2)').hide();		
        // li:nth-child(숫자) ul 안의 ol의 n번째 리스트에 적용
		
		
		
	});
	
});

 

 

1. hide ( )

: 해당 태그를 숨긴다

 

<!-- 일반태그, 아이디, 클래스, 네임 -->

<p>p tag</p>

<p id="pid"> p tag id pid</p>

<p class="cls">p tag class cls</p>

<p name="_name">p tag name _name</p>

<button type="button">click</button>
 
 
 
<script type="text/javascript">

$(document).ready(function() {

	//1. p 태그 클릭시 이벤트 
	$("p").click(function () {
    
		console.log( $(this).text() ); 
        // 클릭하면 일반 태그의 값(텍스트)을 가져옴
	
    });


	// 2. 버튼 클릭 시 이벤트
	$("button").click(function () {
    
		// $("p").hide();	
        // 모든 p태그 사라짐
		
        // $("*").hide();	 	
        // 모든 태그들이 다 사라짐
		
        // $("#pid").hide();	
        // 아이디가 pid만 사라짐	
        
        // $('p.cls').hide();		
        // 클래스가 cls만 사라짐
		
        $('[name=_name]').hide();	
        // name이 _name인 태그만 사라짐
        // [name=이름명] : name설정했을 때 JQuery 적용방법

});
});

</script>

 

2.show ( )

: 해당 태그를 나타낸다.

<script type="text/javascript">
$(function () {

	$("#btn1").click(function () {
		
        // 버튼 클릭하면 해당 태그 보이기
		$('#text').show();		
  
		
	});
});

</script>