jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드
.addClass()
.addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다.
문법
.addClass( className )
클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다.
$( 'h1' ).addClass( 'abc' );
띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다.
$( 'h1' ).addClass( 'ab cd ef' );
페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 수도 있습니다.
예제
h1 요소에는 bg 클래스를 추가하여 배경색을 만들고, h2 요소는 bg와 bd 클래스를 추가하여 배경색과 테두리를 만듭니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.bg { background-color: #eeeeee; }
.bd { border: 1px solid #666666; }
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'h1' ).addClass( 'bg' );
$( 'h2' ).addClass( 'bg bd' );
});
</script>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
<h2>Lorem ipsum dolor.</h2>
</body>
</html>
참고
- 클래스 값 삭제는 .removeClass()로 합니다.
- jQuery / Method / .toggleClass()
jQuery / Method / .toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드
.toggle() .toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다. 문법 .toggle( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 ...
jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성
개요 .length는 선택한 요소의 개수를 반환하는 속성이다. 예를 들어 다음은 div 요소의 개수를 반환한다. $( 'div' ).length 예제 1 버튼을 클릭하면 li 요소의 개수를 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ...
jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드
.replaceWith() .replaceWith()는 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p ...
jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드
.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다. 예제 span 요소를 복제하여 h1 태그 안에 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...
jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드
.slice() .slice()는 일치하는 요소의 일부분만 선택합니다. 문법 .slice( start ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 5번째까지 빨간색으로 만듭니다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 li 요소 중 ...
jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자
:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...
jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '.check-all' ).click( function() { ...
jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기
상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...
jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드
.prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다. 문법 1 - 속성의 값 가져오기 propertyName 속성의 값을 가져온다. .prop( propertyName ) 문법 2 - 속성 추가하기 propertyName 속성에 value 값을 추가한다. .prop( propertyName, value ) 예제 1 - 속성의 값 가져오기 a 요소의 href 속성값을 .attr()과 ...
.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...