테스트 사이트 - 개발 중인 베타 버전입니다
SIR

제이쿼리 .addClass ()

수다왕
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 8년 전 · 3085

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

목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
15819
jQuery 제이쿼리 jQuery( ":button" )
15818
jQuery 제이쿼리 .bind( eventType [, eventData ], handler )
15817
jQuery 제이쿼리 .before(content [,content])
15816
jQuery 제이쿼리 Attribute Starts With Selector [name^=”value”]
15815
jQuery 제이쿼리 Attribute Not Equal Selector [name!=”value”]
15814
jQuery 제이쿼리 Attribute Equals Selector [name=”value”]
15813
jQuery 제이쿼리 Attribute Ends With Selector [name$=”value”]
15812
jQuery 제이쿼리 Attribute Contains Word Selector [name~=”value”]
15811
jQuery 제이쿼리 Attribute Contains Selector [name*=”value”]
15810
jQuery 제이쿼리 attributeContainsPrefix selector
15809
jQuery 제이쿼리 .attr (attributeName)
15808
jQuery 제이쿼리 .appendTo( target )
15807
jQuery .append (content [, content])
15806
jQuery animated selector
15805
jQuery .animate (properties [, duration] [, easing] [, complete])
15804
jQuery 제이쿼리 andSelf()
15803
jQuery 제이쿼리 all selector
15802
jQuery 제이쿼리 .ajaxSuccess(handler)
15801
jQuery .ajaxStop(handler )
15800
jQuery .ajaxStart(handler )
15799
jQuery .ajaxSend (handler )
15798
jQuery 제이쿼리 .ajaxError (handler)
15797
jQuery 제이쿼리 .ajaxComplete (handler)
15796
jQuery 제이쿼리 .after()
15792
PHP 제이쿼리 .addClass () 현재글
15791
jQuery 제이쿼리 .addBack ()
15790
jQuery 제이쿼리 .add (selector)
15789
PHP is_null - 변수가 있는지 여부를 찾습니다.NULL
15788
PHP is_iterable - 변수의 내용이 반복 가능한 값인지 확인합니다.
15787
PHP is_int - 변수의 타입이 정수인지 찾기
이전 다음
전체 목록