자바스크립트
웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.
2025.02.22 02:50
jQuery의 `.addClass()` 메서드
jQuery는 자바스크립트 라이브러리 중 하나로, 웹 개발을 쉽게 하기 위해 설계되었습니다. `.addClass()` 메서드는 HTML 요소에 클래스를 추가하는 데 사용됩니다.
`.addClass()` 메서드의 사용법
`.addClass()` 메서드는 다음과 같은 형식으로 사용됩니다.
- `$(selector)` : 선택자(selector)로 HTML 요소를 선택합니다.
- `addClass(className)` : 선택한 요소에 클래스를 추가합니다.
예제
이 예제에서는 버튼을 클릭하면 `.container` 요소에 `active` 클래스가 추가됩니다.
소스 코드 분석
`.addClass()` 메서드는 jQuery의 `core.js` 파일에 정의되어 있습니다. 다음은 `.addClass()` 메서드의 소스 코드 분석입니다.
`.addClass()` 메서드는 다음과 같은 과정을 거칩니다.
1. 선택한 요소의 길이를 확인합니다.
2. 선택한 요소의 클래스를 확인합니다. 만약 클래스가 없다면, 클래스를 추가합니다.
3. 클래스를 추가합니다. 만약 클래스가 이미 존재한다면, 클래스를 합칩니다.
이러한 과정을 거쳐 `.addClass()` 메서드는 선택한 요소에 클래스를 추가합니다.
[PHP] pi - pi 값 가져오기
[PHP] min - 가장 낮은 값 찾기
[PHP] join - implode의 별칭
제이 쿼리 addClass() 함수 사용하기
- 나우호스팅 21일 전 2025.02.22 02:50
-
13
0
jquery .addClass()jQuery의 `.addClass()` 메서드
jQuery는 자바스크립트 라이브러리 중 하나로, 웹 개발을 쉽게 하기 위해 설계되었습니다. `.addClass()` 메서드는 HTML 요소에 클래스를 추가하는 데 사용됩니다.
`.addClass()` 메서드의 사용법
`.addClass()` 메서드는 다음과 같은 형식으로 사용됩니다.
#hostingforum.kr
javascript
$(selector).addClass(className);
- `$(selector)` : 선택자(selector)로 HTML 요소를 선택합니다.
- `addClass(className)` : 선택한 요소에 클래스를 추가합니다.
예제
#hostingforum.kr
html
<!DOCTYPE html>
<html>
<head>
<title>addClass 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="btn">클릭</button>
<div class="container">클래스가 없는 요소</div>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$(".container").addClass("active");
});
});
</script>
</body>
</html>
이 예제에서는 버튼을 클릭하면 `.container` 요소에 `active` 클래스가 추가됩니다.
소스 코드 분석
`.addClass()` 메서드는 jQuery의 `core.js` 파일에 정의되어 있습니다. 다음은 `.addClass()` 메서드의 소스 코드 분석입니다.
#hostingforum.kr
javascript
// jQuery의 core.js 파일
// ...
// .addClass() 메서드
addClass: function( className ) {
var self = this,
className = jQuery.trim( className || "" ),
i = 0,
l = self.length,
parts,
cur;
if ( self.length > 1 ) {
while ( i < l ) {
cur = self[i];
if ( cur.nodeType === 1 && !cur.className ) {
cur.className = className;
} else {
parts = className.split(/s+/);
cur.className = jQuery.trim( cur.className + " " + parts.join(" ") ).replace( /s+/g, " " );
}
i++;
}
} else {
if ( self[0].nodeType === 1 && !self[0].className ) {
self[0].className = className;
} else {
parts = className.split(/s+/);
self[0].className = jQuery.trim( self[0].className + " " + parts.join(" ") ).replace( /s+/g, " " );
}
}
return this;
},
// ...
`.addClass()` 메서드는 다음과 같은 과정을 거칩니다.
1. 선택한 요소의 길이를 확인합니다.
2. 선택한 요소의 클래스를 확인합니다. 만약 클래스가 없다면, 클래스를 추가합니다.
3. 클래스를 추가합니다. 만약 클래스가 이미 존재한다면, 클래스를 합칩니다.
이러한 과정을 거쳐 `.addClass()` 메서드는 선택한 요소에 클래스를 추가합니다.
이 게시물에 포함된 라이브러리
[PHP] trim - 문자열의 시작과 끝에서 공백(또는 다른 문자)을 제거합니다.[PHP] pi - pi 값 가져오기
[PHP] min - 가장 낮은 값 찾기
[PHP] join - implode의 별칭
댓글목록
등록된 댓글이 없습니다.