jQuery / Reference / .toggleClass()
개요
- .toggleClass()로 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있습니다.
문법
.toggleClass( className )
- 예를 들어 다음은 p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다.
$( 'p' ).toggleClass( 'xyz' );
예제
- 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.ab {
background-color: #f5f5f5;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button' ).click( function() {
$( 'h1' ).toggleClass( 'ab' );
} );
} );
</script>
</head>
<body>
<button>Click</button>
<h1>Lorem Ipsum Dolor</h1>
</body>
</html>
참고
- 클래스에 값을 추가할 때는 .addClass(), 제거할 때는 .removeClass()를 사용합니다.
jQuery의 .each() 함수는 주로 배열, 객체, 또는 jQuery 선택자로 선택된 요소 집합에 대해 반복 작업을 수행하기 위해 사용됩니다. JavaScript의 for 또는 forEach 루프와 유사하지만, jQuery의 특성과 통합된 방식으로 작동합니다.
jQuery / Reference / :contains()
:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다.
:button은 type이 button인 요소를 선택하는 선택자입니다.
.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.
개요 .val()은 양식(form)의 값을 가져오거나 값을 설정합니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. var jb = $( 'input#jbInput' ).val(); 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. $( 'input#jbInput' ).val( 'ABCDE' ); 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, ...