제이쿼리 .addClass () > 개발자팁

개발자팁

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

제이쿼리 .addClass () 정보

PHP 제이쿼리 .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>

추천
0

댓글 0개

전체 1,168
개발자팁 내용 검색 PHP에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT