📌 1. not()
not(): "~중에서 대상은 제외"라는 의미- 예시 : 클래스 엘리먼트 중 특정 id를 가진 엘리먼트를 제외한 엘리먼트 선택
$(".클래스명").not($("#id값));
- 예시 : 클래스 엘리먼트 중 특정 id를 가진 엘리먼트를 제외한 엘리먼트 선택
- 예시 코드
<head> ... <style type="text/css"> /** 기본 초기화 */ * { padding: 0; margin: 0; } ul { list-style: none;} .pull-left { float: left; } .clearfix:after { content: ''; display: block; float: none; clear: both; } .hide { display: none; } /** 탭 박스의 기본 크기와 중앙 정렬 및 상하 여백 */ .tab { width: 500px; margin: 20px auto; } /** 개별 버튼에 대한 기본 크기와 가로 정렬 */ .tab-button-item { width: 100px; height: 40px; } /** 현재 활성 탭의 배경 이미지 별도 처리 */ .tab-button-item-link.selected { background: url("img/tab_selected.jpg"); } /** 탭 버튼의 기본 배경 처리와 글자 형태 처리 */ .tab-button-item-link { background: url("img/tab.jpg"); display: block; color: #222; line-height: 40px; text-align: center; text-decoration: none; } /** 내용영역의 태두리처리 및 상단으로 -1px 이동시킴. * 버튼 영역과 1px 겹치게 처리해서 활성 탭이 뚫려 있는 효과 연출 */ .tab-panel { border: 1px solid #9FB7D4; position: relative; top: -1px; padding: 20px 10px; } /** 탭 버튼의 초기화 및 레이어 띄우기 > 내용영역과 1px 겹쳐져야 한다. */ .tab-button { position: relative; z-index: 10; } </style> </head> <body> <!-- 탭의 전체 박스 --> <div class="tab"> <!-- 탭 버튼 영역 --> <ul class="tab-button clearfix"> <li class="tab-button-item pull-left"> <a class="tab-button-item-link selected" href="#tab-page-1">HTML5</a> </li> <li class="tab-button-item pull-left"> <a class="tab-button-item-link" href="#tab-page-2">jQuery</a> </li> <li class="tab-button-item pull-left"> <a class="tab-button-item-link" href="#tab-page-3">Bootstrap3</a> </li> </ul> <!-- 내용영역 --> <div class="tab-panel"> <div id="tab-page-1"><h3>탭 페이지 1</h3></div> <div id="tab-page-2" class="hide"><h3>탭 페이지 2</h3></div> <div id="tab-page-3" class="hide"><h3>탭 페이지 3</h3></div> <div> </div> <script> $(".tab-button-item-link").click(function(e){ // 페이지 이동 방지 e.preventDefault(); // 클릭요소 제외 나머지에게 selected 제거 $(".tab-button-item-link").not(this).removeClass("selected") $(this).addClass("selected") let target = $(this).attr('href') $(target).removeClass("hide") $(".tab-panel div").not(target).addClass("hide") }); </script> </body> </html>
- 출력 형태
📌 2. each()
-
each()메소드는 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수이다.length속성이 있는 배열이나 배열과 같은 객체를 전달받아 그 길이만큼 반복해서 콜백함수를 실행한다.- 객체의 경우는 객체가 가지고 있는 프로퍼티의 개수만큼 반복해서 콜백함수를 실행한다.
-
배열 전달 용법 :
$.each(object, function(index,item){});object: 전달할 배열콜백함수:index는 인덱스 값을 의미,item은 해당 인덱스가 가진 값을 의미
- 예시 코드
<script> // 배열 let arr = [ {title : "다음", url : "https://daum.net"}, {title : "네이버", url : "https://naver.com"} ] $.each(arr,function(index,item){ let result = index + " : " + item.title + ", " + item.url; document.write(result + "<br>") }); </script>
- 출력 형태
- 직접 지정 용법 :
$('요소').each(function(index,item){})- 함수 내에서
$(item)또는$(this)로 현재 담긴 값을 받아올 수 있음
- 함수 내에서
- 예시 코드
<head> ... <style> .s1{color:tomato;} .s2{color:powderblue;} .s3{color:green;} .s4{color:brown;} </style> </head> <body> <p>HTML</p> <p>CSS</p> <p>Java</p> <p>DBMS</p> // each <script> $("p").each(function(index,item){ $(this).addClass("s"+(index+1)); }) </script> </body>
- 출력 형태
