[JQuery] 웹 class속성 제어

1. addClass()

요소에 class 속성을 추가하는 메소드입니다.

 

실행 분류	형식
추가	$("div").addClass("클래스명");
콜백 함수	$("div").addClass(function(index, className){      // index는 각 div 요소의 index 0,1,2      // className은 각 div의 class 속성      return ​class 속성 // 각 div에 class 속성을 추가한다.  });  ................  <div>내용1</div>  <div>내용2</div>   <div>내용3</div>

 

[추가설명] 

[CSS] display 속성	설명
inline	전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.  대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등을 들 수 있습니다.
block	전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.  대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.
inline-block	기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.   하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.

 

 

ex)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<style>

* {
	margin: 0;
	padding: 0;
}
#m2 {
	text-align: center;
}
.box {
	border-bottom: 2px solid #ccc;
	text-align: center;
	padding: 20px;
}
.circle0,
.circle1,
.circle2 {
	width: 100px;
	height: 100px;
	border-radius: 54px;
	border: 4px solid #ff0000;
	line-height: 100px;
	display: inline-block;
}
</style>

<script>
	$(document).ready(function(){
		$("#m1 > div").addClass("box");
		$("#m2 > div").addClass(function(index){
			return "circle"+index;

	});
	});
</script>

<div id="m1">
	<div>jQuery</div>
</div>
<div id="m2">
	<div>html</div>
	<div>css</div>
	<div>javascript</div>

</div>

결과

2. removeClass()

요소에 class 속성을 제거하는 메소드입니다.

 

실행 분류	형식
추가	$("div").removeClass("클래스명");
콜백 함수	$("div").removeClass(function(index, className){      // index는 각 div 요소의 index 0,1,2      // className은 각 div의 class 속성      return ​class 속성 // 각 div에 class 속성을 제거한다.  });  ................  <div class="m1">내용1</div>  <div class="m2">내용2</div>   <div class="m3">내용3</div>

 

3. toggleClass()

요소에 class 속성이 없으면 addClass()가 적용되고. class 속성이 있으면 removeClass()가 적용됩니다.

 

실행 분류	형식
추가, 제거	$("div").toggleClass("클래스명");

 

 

[추가설명]

 

메서드	설명
.siblings()	선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.
.next()	선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.
.addBack()	현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다.      $( 'ul' ).find( 'li' ).addBack();      // ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다.
.end()	현재 선택된 요소의 이전 요소를 선택하는 메서드입니다.
.parent()	어떤 요소의 부모 요소를 선택합니다.      $( 'p' ).parent().css( 'color', 'green' );      // p의 부모 요소의 색을 녹색으로 만든다.
.find()	어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다.      $( 'h1' ).find( 'span' )      // h1 요소의 하위 요소 중 span 요소를 선택합니다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<style>
* {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a {
	font-family: "굴림", sans-serif;
	color: #999;
	font-size: 0.9em;
	text-decoration: none;
}
#m_menu{
	position: absolute;
	width: 50%;
	height: 100%;
	background: #262626;
}
#m_menu a{
	display: block;
	padding: 20px;
	border-top: 1px solid #2e2e2e;
	border-bottom: 1px solid #2e2e2e;
}
#m_menu a.m{
	background: #111;
	font-weight: bold;
}
#m_menu a.m.on{
	color: #ff6600;
}
#m_menu ul a{
	background: #3a3a3a;
	text-indent: 20px;
}
#m_menu li ul{
	display: none;
} 
#m_menu li ul.on{
	display: block;
}
</style>
    
<script>
	$(document).ready(function() {
		$("#m_menu  a.m").click(function() {
			$(this).next().addBack().toggleClass("on").end().find(".m, ul").removeClass("on").end().parent().siblings().find(".m, ul").removeClass("on");
			return false;
		});
	});
</script>

<ul id="m_menu">
	<li><a href="#" class="m">메뉴1</a>
		<ul>
			<li><a href="#" class="m">메뉴1_1</a>
				<ul>
					<li><a href="#">메뉴1_1_1</a></li>
					<li><a href="#">메뉴1_1_2</a></li>
				</ul>
			</li>
			<li><a href="#" class="m">메뉴1_2</a>
				<ul>
					<li><a href="#">메뉴1_2_1</a></li>
					<li><a href="#">메뉴1_2_2</a></li>
				</ul>
			</li>
			<li><a href="#" class="m">메뉴1_3</a>
				<ul>
					<li><a href="#">메뉴1_3_1</a></li>
					<li><a href="#">메뉴1_3_2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#" class="m">메뉴2</a>
		<ul>
			<li><a href="#">메뉴2_1</a></li>
			<li><a href="#">메뉴2_2</a></li>
			<li><a href="#">메뉴2_3</a></li>
		</ul>
	</li>
	<li><a href="#" class="m">메뉴3</a>
		<ul>
			<li><a href="#">메뉴3_1</a></li>
			<li><a href="#">메뉴3_2</a></li>
			<li><a href="#">메뉴3_3</a></li>
        </ul>
	</li>
</ul>

결과