icon_home

10_제이쿼리_문서객체조작(DOM)_객체 탐색

• 제이쿼리에서는 DOM(문서객체모델) 구조에서 원하는 요소를 찾고자 할 때 탐색 메소드를 사용 할 수 있음

• 탐색 메소드는 기존의 CSS, JQUERY 선택자 보다 좀 더 html 문서의 요소들을 정확하게 선택 할 수 있는 메소드

1. 문서 안에서 요소들 중 부모 요소 찾기

2. 문서 안에서 요소들 중 자식 요소 찾기

3. 문서 안에서 요소들 중 형제 요소(siblings) 찾기

4. 문서객체조작을 활용한 탭콘텐츠 구현하기

• 탭메뉴 콘텐츠는 메뉴 클릭시 해당하는 콘텐츠가 바로 아래 나오면서 기존 콘텐츠는 숨겨지고, 영역안에서만 변경되는 콘텐츠이다.

• 특정 영역 안에서만 보여지기 때문에 좁은 공간에서 많은 콘텐츠는 보여주고자 할 때 사용함


구현 방법
1. HTML 목록 태그를 사용하여 목록(li)에 a요소 4개와 div 요소를 사용하여 콘텐츠 영역 4개를 만들고, CSS를 활용하여 첫번째 콘텐츠만 보이도록 스타일 서식을 지정함
2. tab 메뉴(a요소)를 클릭하면 해당 콘텐츠(div)가 보이도록 하고, 나머지 콘텐츠들은 숨겨줌 -> addCLass(); 메소드 사용
3. 메뉴 서식은 선택한 메뉴에만 적용되도록 하고, 그 외 나머지 메뉴는 적용된 서식을 제거함 -> removeClass(); 메소드 사용

사용 메소드 : addClass(), removeClass(), siblings(), find(), css()


			//1. 탭메뉴 변수선언
			let tab_mnu = $('.tab_con1 li a');

			//2. 탭메뉴 클릭시 해당요소의 다음요소(동색) div를 보이게 한다.
			tab_mnu.click(function(){
				//$('.tab_con1 div').hide(); //현재 보이는 div태그는 숨기고
				//$(this).next().show(); //해당요소의 다음 div 태그를 보이게 해줌

				//사용자가 선택한 a의 다음 div를 나오게 하고 a의 부모(li)의 형제요소
				$(this).next().show().parent().siblings().find('div').hide();

				//사용자가 선택한 a태그에 act서식을 적용하고 선택하지 않은 다른 lidml a태그는 act서식 제거
				$(this).addClass('act').parent().siblings().find('a').removeClass('act');

			return false;
			});