wiki:javascript:jquery:jquery_note:jquery_references_html_css:jquery_addclass_method
목차
jQuery addClass() Method
- description : jQuery addClass() Method
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-09
The source of this article
Example
첫 번째 <p> 요소에 클래스 이름을 추가합니다.
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .intro { font-size: 150%; color: red; } </style> </head> <body> <h1>This is a heading.</h1> <p>This is a paragraph.</p> <!-- 버튼 클릭 시 첫 번째 p요소에 클래스가 추가되어 <p class="intro">This is a paragraph.</p>로 변경되어, 스타일이 적용된다. --> <p>This is another paragraph.</p> <button>Add a class name to the first p element</button> <script> $(document).ready(function () { $('button').click(function () { $('p:first').addClass('intro'); }); }); </script> </body>
Definition and Usage
addClass() 메서드는 선택한 요소들에 하나 이상의 클래스 이름을 추가합니다.
이 메서드는 기존 클래스 속성을 제거하지 않고, 클래스 속성에 하나 이상의 클래스 이름만 추가합니다.
Tip: 둘 이상의 클래스를 추가하려면, 공백(spaces)으로 클래스 이름을 구분하십시오.
Syntax
$(selector).addClass(classname, function(index,currentclass))
| Parameter | Description |
|---|---|
| classname | 필수입니다. 추가될 하나 이상의 클래스 이름을 지정합니다. |
| function(index,currentclass) | 선택입니다. 추가될 하아 이상의 클래스 이름을 반환하는 함수를 지정합니다. |
| index - 집합(set)에서 요소의 인덱스 위치를 반환합니다. | |
| currentclass - 선택한 요소의 현재 클래스 이름을 반환합니다. |
More Examples
Example
하나의 지정한 요소에 두 개의 클래스를 추가합니다.
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .intro { font-size: 30px; color: blue; } .note { background-color: yellow; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph</p> <!-- 버튼 클릭 시 <p class="intro note">This is a paragraph</p>처럼 p 요소에 intro class와 note class가 적용되어 스타일이 적용된다. --> <p>This is another paragraph</p> <button>Add two clsss name to the first p element</button> <script> $(document).ready(function () { $('button').click(function () { $('p:first').addClass('intro note'); /* 첫 번째 p 요소에 intro 클래스, note 클래스를 추가한다. */ }); }); </script> </body>
Example
함수를 사용하여 선택한 요소에 클래스를 추가합니다.
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .par_0 { color: blue; } .par_1 { color: red; } </style> </head> <body> <h1>This is a heading.</h1> <p>This is a paragraph</p> <!-- 버튼 클릭 시 <p class="par_0">This is a paragraph</p>로 변경됨 --> <p>This is another paragraph</p> <!-- 버튼 클릭 시 <p class="par_1">This is another paragraph</p>로 변경됨 --> <button>Add classes to p element</button> <script> $(document).ready(function () { $('button').click(function () { $('p').addClass(function (n) { return 'par_' + n; /* n은 요소 p의 인텍스. */ }); }); }); </script> </body>
Example
요소의 클래스 이름을 변경합니다.
addClass()와 removeClass()를 사용하여 하나의 클래스 이름을 삭제하고, 새로운 클래스 이름을 추가합니다.
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .intro { color: red; } .main { background-color: yellow; } </style> </head> <body> <h1>This is a heading</h1> <p>This is another paragraph</p> <p class="intro">This is a paragraph</p> <!-- 버튼 클릭 시 <p class="main">This is a paragraph</p>로 변경된다.--> <button>Change class name of the last p element</button> <script> $(document).ready(function () { $('button').click(function () { $('p:last').removeClass('intro').addClass('main'); /* 마지막 p 태그에서 intro 클래스를 제거하고, main 클래스를 추가 */ }); }); </script> </body>
/volume1/web/dokuwiki/data/pages/wiki/javascript/jquery/jquery_note/jquery_references_html_css/jquery_addclass_method.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
