제이쿼리 .addClass ()

수다왕

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

· 8년 전 · 조회 3091 3091

제이쿼리 .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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5306	JavaScript	당신이 알아야 할 자바스크립트의 강력한 7가지 팁 [3]	niceguys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1223
5305	JavaScript	자바스크립트 코드를 더 깔끔하고 보기 좋게 작성하는 팁 [1]	niceguys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1120
5304	PHP	chatgtp	niceguys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	747
5303	JavaScript	textarea 자동 높이 설정하기. [1]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1313
5302	PHP	페이징 개선 그러나 기본적으로 이해불가능한 소스로 비춰질수도 있음	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	808
5301	JavaScript	자바스크립트 플래이그라운드 - RUNJS	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	620
5300	PHP	이걸 개발팁이라고 해야하나..타게시판 이관후 검색 안되는거 해결했습니다.	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	675
5299	jQuery	페이지 height 길이 파악후 페이지 스크롤 해서 바 표현하기	잠실삼촌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	702
5298	JavaScript	16진수 색상코드 확인함수	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	636
5297	기타	개발자의 ChatGPT 활용 [3]	시우시우9082 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1112
5296	기타	ActiveX 방식의 KCP 모듈 -> 최신 모듈로 변경	kalcapt 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	802
5295	PHP	PHP 를 http 타임아웃이후에도 동작하게 하기 [1]	티프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1137
5294	JavaScript	동영상파일 썸네일 만들기 [8]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1904
5293	JavaScript	div태그의 사이즈가 변경되는 이벤트를 처리하기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	820
5292	JavaScript	초->hh:mm:ss로 변환하는 함수 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1009
5291	JavaScript	JSON Beautify	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	696
5290	PHP	JSONP실례	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	800
5289	PHP	js와 같은 리소스의 캐쉬문제로 인한 업그레이드 안되는 문제 해결하기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	818
5288	JavaScript	ThreeJS로 3디지구에 포인트 찍고 정보 현시기능	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	833
5287		특수글자들을 안전하게 처리하기 [10]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1374
5286		자바스크립로 만든 문제풀이 [14]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1583
5285		100% 꽝을 보장하는 간단한 로또번호 생성 함수 [4]	메이드 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1307
5284		라라곤 6.0 설치 (윈도우용) [6]	자바패드 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1723
5283		롤링배너(?) 갤러리 [20]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1750
5282		모바일 메인에 Tabs넣기 [6]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1441
5281		관리자가 아닐때 사이트에 마우스 오른쪽버튼과 f12개발자 도구 금지시키기 [7]	안드류KIM 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1741
5280		pc outlogin 아래에 비디오효과 적용하기 [6]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1174
5279		유튜브 90도 회전 반응형 [21]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1811
5278	JavaScript	유튜브 풀화면 묵음배경 예제 [9]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1614
5277		유튜브 배경 모바일 묵음 자동재생 [9]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1408