제이쿼리 .addClass ()

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 3086 3086

제이쿼리 .addClass ()

일치하는 요소 세트의 각 요소에 지정된 클래스를 추가합니다.

jQuery를 버전 1.12 / 2.2 전에, .addClass()방법은 조작 className 특성 선택된 요소가 아닌의 class 속성 . 속성이 변경되면

그에 따라 특성을 업데이트 한 것은 브라우저입니다. 이 동작의 의미는이 방법이 HTML DOM 의미 (예 : 순수 XML 문서가 아닌)가있는 문서에만 적용된다는 것입니다.

jQuery 1.12 / 2.2부터이 동작은 SVG를 포함한 XML 문서에 대한 지원을 향상시키기 위해 변경되었습니다.

이 버전부터는 class 속성 이 대신 사용됩니다. 따라서 .addClass()XML 또는 SVG 문서에서 사용할 수 있습니다.

한 번에 두 개 이상의 클래스를 공백으로 구분하여 일치하는 요소 집합에 추가 할 수 있습니다. 예를 들면 다음과 같습니다.

$( "p" ).addClass( "myClass yourClass" );

이 메소드는 다음과 같이 .removeClass()요소 클래스를 서로 전환 하는 데 자주 사용됩니다 .

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

여기서 myClassand noClass는 모든 단락에서 제거되고 yourClass추가됩니다.

jQuery 1.4에서 .addClass()메소드의 인수는 함수를받을 수 있습니다.

$( "ul li" ).addClass(function( index ) {

return "item-" + index;

});

두 개의 <li>요소가 있는 정렬되지 않은 목록이 주어지면 이 예제는 클래스 "item-0"을 첫 번째 항목에 추가 <li>하고 "item-1"을 두 번째 요소에 추가합니다 .

예 :

일치하는 요소에 "selected"클래스를 추가하십시오.

<!doctype html>

<head>

<title>addClass demo</title>

<style>

p {

margin: 8px;

font-size: 16px;

}

.selected {

color: blue;

}

.highlight {

background: yellow;

}

</style>

</head>

<body>

<p>Hello</p>

<p>Goodbye</p>

$( "p" ).last().addClass( "selected" );

</script>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
4766	jQuery	event.isPropagationStopped ()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1673
4765	jQuery	event.isImmediatePropagationStopped ()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1349
4764	jQuery	event.isDefaultPrevented()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2163
4763	jQuery	event.delegateTarget	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1853
4762	jQuery	event.data	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1625
4761	jQuery	.eq( index )	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1932
4760	jQuery	.end()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1296
4759	jQuery	.empty ()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1596
4758	jQuery	.each()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1310
4757	jQuery	.die ()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1273
4756	jQuery	.detach ([selector])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1496
4755	jQuery	.dequeue( [queueName ] )	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1646
4754	jQuery	.delegate (selector, eventType, handler)	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1612
4753	jQuery	.delay (duration [, queueName])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1766
4752	jQuery	deferred.then (doneFilter [, failFilter] [, progressFilter])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1519
4751	jQuery	deferred.state ()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1838
4750	jQuery	deferred.resolveWith (context [, args])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1981
4749	jQuery	deferred.resolve( [args ] )	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1440
4748	PHP	http:// 를 https:// 로 이동하는 방법	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2809
4747	jQuery	deferred.rejectWith (context [, args])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1390
4746	jQuery	deferred.reject ([args])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1645
4745	jQuery	deferred.promise( [target ] )	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1652
4744	jQuery	deferred.progress (progressCallbacks [, progressCallbacks])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1532
4743	jQuery	deferred.pipe ([doneFilter] [, failFilter])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1612
4742	jQuery	deferred.notifyWith( context [, args ] )	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1703
4741	jQuery	deferred.notify (args)	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1597
4740	jQuery	deferred.isResolved ()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1603
4739	jQuery	deferred.isRejected()	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1797
4738	jQuery	deferred.fail (failCallbacks [, failCallbacks])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1306
4737	jQuery	deferred.done (doneCallbacks [, doneCallbacks])	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2097