티스토리 뷰

jQuery

[jQuery] .addClass()

.addClass()

선택한 요소의 클래스를 추가합니다.


.addClass()

.addClass() 메서드는 선택한 요소에 클래스를 추가하는 메서드입니다.

문법(Syntax)

$("선택자").addClass("클래스이름");
$("선택자").addClass("함수");

정의(Definition)

  • .addClass() 메서드는 기존의 클래스 이름을 대처하는 메서드가 아닙니다.
  • .addClass() 메서드는 클래스 이름 두 개 이상도 사용할 수 있습니다.
  • .addClass() 메서드는 함수를 사용 할 수 있습니다.

샘플(Sample)

.addClass(className) : 선택한 요소에 클래스 이름을 추가 할 수 있으며, 두 개 이상도 가능한 예제입니다.

Sample1

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".list1 .select").addClass("rLine");
$(".list1 .select").addClass("rLine bLine");
html
<h3>탐색(Traversing)</h3>
<div class="list1">
    <ul>
        <li class="select">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li class="select">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list1">
        <ul>
            <li class="select">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li class="select">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>select</em>에 클래스를 추가합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>select</em>에 클래스를 두 개 추가합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 li").removeClass("rLine");
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 .select").addClass("rLine");
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list1 .select").addClass("rLine bLine");
        });
    </script>

</body>
</html>

샘플(Sample)

.addClass(function(index)) : 함수를 사용하요 선택한 요소 각각에게 번호를 부여하여 클래스를 추가하는 예제입니다.

Sample2

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".list2 li").addClass(function(index){
    return "select" + index;
});
html
<h3>탐색(Traversing)</h3>
<div class="list2">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list2">
        <ul>
            <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 li에 클래스를 순서대로 추가합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .off1").on("click", function(e){
            e.preventDefault();
            $(".list2 li").removeClass();
        });
        $(".choice2 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list2 li").addClass(function(index){
                return "select" + index;
            });
        });
    </script>

</body>
</html>

샘플(Sample)

.addClass(function(index,currentClass)) : 함수를 사용하여 원하는 클래스를 찾은 후 클래스를 추가하는 예제입니다.

Sample3

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".list3 li").addClass(function(index, currentClass){
    var addClass;

    if(currentClass === "select"){
        addClass = "bLine";
    }
    return addClass;
});
html
<h3>탐색(Traversing)</h3>
<div class="list3">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li class="select">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list3">
        <ul>
            <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li class="select">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice3">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 li에 클래스를 순서대로 추가합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice3 .off1").on("click", function(e){
            e.preventDefault();
            $(".list3 li").removeClass();
        });
        $(".choice3 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list3 li").addClass(function(index, currentClass){
                var addClass;
                
                if(currentClass === "select"){
                    addClass = "bLine";
                }
                return addClass;
            });
        });
    </script>

</body>
</html>

샘플(Sample)

.addClass()를 이용한 탭 메뉴 만들기 예제입니다.

Sample4
jquery
$("#tab-btn ul li").click(function(e){
    e.preventDefault();
    var target = $(this);
    var index = target.index()+1;
    //alert(index);
    target.find("a").text("Menu"+index);
    $("#tab-cont").removeClass().addClass("img"+index)
});
html
<div id="tab-menu">
    <div id="tab-btn">
        <ul>
            <li><a href="#">Tab1</a></li>
            <li><a href="#">Tab2</a></li>
            <li><a href="#">Tab3</a></li>
            <li><a href="#">Tab4</a></li>
            <li><a href="#">Tab5</a></li>
        </ul>
    </div>
    <div id="tab-cont" class="img1">

    </div>
</div>
css
* {padding: 0; margin:0;}
li {list-style: none;}
a {text-decoration: none; color: #666;}
#tab-menu {width: 350px; margin:50px auto;}
#tab-btn {margin-bottom: 1px;  }
#tab-btn ul {overflow: hidden;}
#tab-btn li {float: left; width: 20%; text-align: center;}
#tab-btn li a {padding: 14px 10px 10px 10px ; display: block; background-color: #1e88e5; margin-right: 1px; color:#fff;}
#tab-cont {width: 350px; height: 300px;}
#tab-cont.img1 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg) no-repeat; background-size:350px;}
#tab-cont.img2 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover02.jpg) no-repeat; background-size:350px;}
#tab-cont.img3 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover03.jpg) no-repeat; background-size:350px;}
#tab-cont.img4 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg) no-repeat; background-size:350px;}
#tab-cont.img5 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg) no-repeat; background-size:350px;}
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        * {padding: 0; margin:0;}
		li {list-style: none;}
		a {text-decoration: none; color: #666;}
		#tab-menu {width: 350px; margin:50px auto;}
		#tab-btn {margin-bottom: 1px;  }
		#tab-btn ul {overflow: hidden;}
		#tab-btn li {float: left; width: 20%; text-align: center;}
		#tab-btn li a {padding: 14px 10px 10px 10px ; display: block; background-color: #1e88e5; margin-right: 1px; color:#fff;}
        #tab-cont {width: 350px; height: 300px;}
        #tab-cont.img1 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg) no-repeat; background-size:350px;}
        #tab-cont.img2 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover02.jpg) no-repeat; background-size:350px;}
        #tab-cont.img3 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover03.jpg) no-repeat; background-size:350px;}
        #tab-cont.img4 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg) no-repeat; background-size:350px;}
        #tab-cont.img5 {background:url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg) no-repeat; background-size:350px;}
    </style>
</head>
<body>
    
    <div id="tab-menu">
		<div id="tab-btn">
			<ul>
				<li><a href="#">Tab1</a></li>
				<li><a href="#">Tab2</a></li>
				<li><a href="#">Tab3</a></li>
				<li><a href="#">Tab4</a></li>
				<li><a href="#">Tab5</a></li>
			</ul>
		</div>
		<div id="tab-cont" class="img1">
			
		</div>
	</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
		//글씨를 클릭하면 tab --> menu로 변경해주세요.
        //$("#tab-btn ul li").click(function(){
        //    $("#tab-btn ul li a").text("Menu");
        //});
		
		//글씨를 클릭하면 tab3 --> menu3로 변경해주세요.
        //$("#tab-btn ul li").click(function(){
        //    var target = $(this);
        //    var index = target.index()+1;
        //    //alert(index);
        //    target.find("a").text("Menu"+index);
        //});
		
		//해당 버튼을 클릭하면 해당 이미지 나오게 하기		
        //$("#tab-btn ul li:eq(0)").click(function(e){
        //    $("#tab-cont").removeClass().addClass("img1");
        //});
        //$("#tab-btn ul li:eq(1)").click(function(e){
        //    $("#tab-cont").removeClass().addClass("img2");
        //});
        //$("#tab-btn ul li:eq(2)").click(function(e){
        //    $("#tab-cont").removeClass().addClass("img3");
        //});
        //$("#tab-btn ul li:eq(3)").click(function(e){
        //    $("#tab-cont").removeClass().addClass("img4");
        //});
        //$("#tab-btn ul li:eq(4)").click(function(e){
        //    $("#tab-cont").removeClass().addClass("img5");
        //});
        
		//한번에 쓰기
		$("#tab-btn ul li").click(function(e){
            e.preventDefault();
			var target = $(this);
			var index = target.index()+1;
			//alert(index);
			target.find("a").text("Menu"+index);
            $("#tab-cont").removeClass().addClass("img"+index)
		});
	</script>
	
</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼