제이쿼리 .addClass ()
제이쿼리 .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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html>
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4796 | jQuery | 8년 전 | 1544 | ||
| 4795 | jQuery | 8년 전 | 1447 | ||
| 4794 | jQuery | 8년 전 | 1569 | ||
| 4793 | jQuery | 8년 전 | 1623 | ||
| 4792 | jQuery | 8년 전 | 1638 | ||
| 4791 | jQuery | 8년 전 | 1800 | ||
| 4790 | jQuery | 8년 전 | 1737 | ||
| 4789 | jQuery | 8년 전 | 1600 | ||
| 4788 | jQuery | 8년 전 | 1663 | ||
| 4787 | jQuery | 8년 전 | 1476 | ||
| 4786 | jQuery | 8년 전 | 1437 | ||
| 4785 | jQuery | 8년 전 | 1650 | ||
| 4784 | jQuery | 8년 전 | 1534 | ||
| 4783 | jQuery | 8년 전 | 1241 | ||
| 4782 | jQuery | 8년 전 | 1605 | ||
| 4781 | jQuery | 8년 전 | 1345 | ||
| 4780 | jQuery | 8년 전 | 1579 | ||
| 4779 | jQuery | 8년 전 | 1988 | ||
| 4778 | jQuery | 8년 전 | 1963 | ||
| 4777 | jQuery | 8년 전 | 1537 | ||
| 4776 | jQuery | 8년 전 | 1591 | ||
| 4775 | jQuery | 8년 전 | 1977 | ||
| 4774 | jQuery | 8년 전 | 1493 | ||
| 4773 | jQuery | 8년 전 | 1417 | ||
| 4772 | jQuery | 8년 전 | 2210 | ||
| 4771 | jQuery | 8년 전 | 3623 | ||
| 4770 | PHP | 8년 전 | 5588 | ||
| 4769 | 기타 | 8년 전 | 1969 | ||
| 4768 | 기타 | 8년 전 | 1788 | ||
| 4767 | 기타 | 8년 전 | 2075 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기