1. 제이쿼리 CSS 조작메서드 종류
- 제이쿼리는 CSS 조작을 위한 몇가지 방법이 있습니다. 표로 정리해보도록 하겠습니다.
| 메서드명 | 메서드사용법 | 설명 |
| addClass() | $('문서객체선택').addClass('클래스명'); | 문서객체에 매개변수 클래스를 추가하는 메서드 |
| removeClass() | $('문서객체선택').removeClass('클래스명'); | 문서객체에 매개변수 클래스를 제거하는 메서드 |
| toggleClass() | $('문서객체선택').toggleClass('클래스명'); | 문서객체에 매개변수 클래스를 추가/제거를 번갈아 실행하는 메서드 |
| css() | $('문서객체선택').css('css속성명',값); | 문서객체 CSS를 컨트롤하는 메서드 |
- 뒤에 Class가 붙은 메서드들은 전부 매개변수가 한개입니다. 해당 클래스명을 작성합니다. 이때 주의사항은 앞에 [.]을 붙이지 않는다는 것입니다.
- css() 메서드는 문법이 많은 메서드입니다. 하단부분에서 자세히 설명하도록 하겠습니다.
2. addClass()와 removeClass() 메서드
- addClass() 메서드와 removeClass() 메서드는 같이 해보도록 하겠습니다.
- 이번에는 문서객체에 마우스를 올리면 클래스가 추가되고, 마우스를 내리면 클래스가 제거되게 할겁니다.
- 그래서 이벤트 관련 메서드인 hover() 메서드 문법을 먼저 보고 가겠습니다.
## hover() 메서드문법
$('문서객체선택').hover(콜백함수,콜백함수);
$('문서객체선택').hover(function(){},funciton(){});- hover() 메서드는 매개변수로 콜백함수를 두개를 갖습니다.
- 이 메서드는 마우스를 올렸을때 명령과 마우스를 내렸을때 명령을 한번에 처리해줍니다.
- 그래서 첫번째 콜백함수는 마우스를 올렸을때의 명령을 담고, 두번째 콜백함수는 마우스를 내렸을때의 명령을 담습니다.
## 코드 보기
- 아래 코드는 <h1> 태그를 세개 작성하고, 마우스를 올렸을때는 [ .active ]클래스를 추가하고, 마우스를 내렸을 때는 [ .active ]클래스를 제거해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - CSS조작 메서드</title>
<style>
.active{
background-color: black;
color: yellow;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('h1').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>- [ .active ]클래스는 CSS에서 배경색은 검정색으로, 글자색은 노란색으로 처리해봤습니다.
- 이때 hover() 메서드의 콜백함수에 $(this) 라는 코드가 있습니다.
- 자바스크립트에서의 this 키워드는 객체가 자신의 코드블록 내부에서 자신을 호출할 때 사용합니다.
- 그걸 제이쿼리에서도 쓰는데 대신 $() 내부에 작성합니다.
- 이때의 this 는 이벤트받는 대상을 의미합니다.
- $(this) 파트에 $('h1') 이라고 쓰면 맨 첫번째 <h1> 태그에만 마우스를 올려도 전부 색상이 변경되는 오류가 발생되기 때문입니다.
## 결과보기
- 마우스를 올리면 배경색이 검정색/글자색이 흰색으로 변하고, 마우스를 내리면 원래 상태로 돌아오는 것이 확인됩니다.
3. toggleClass() 메서드
- toggleClass() 메서드는 addClass() 와 removeClass() 를 번갈아 실행해주는 메서드입니다.
- 위에서는 이벤트가 [ 1. 마우스올렸을때 ], [ 2. 마우스내렸을때]로 두개가 있어서 각각의 메서드를 각각 실행했지만, 이벤트가 하나라면 불가능합니다. 그래서 toggleClass() 메서드가 있는 겁니다.
- 컴퓨터에서 토글(toggle)이라고 부르는 것은 버튼이나 키가 두가지 기능을 번갈아 쓸 때 토글이라고 부릅니다.
- 키보드를 예시를 보자면 [한영키], [CapsLock키]같은 것들입니다. [한영키]는 한번누르면 영문, 또 누르면 한글 나오죠? 이런식으로 기능을 번갈아 쓰는 것을 토글이라고 합니다.
- 그래서 제이쿼리에서 toggleClass() 라는 명칭을 붙인 겁니다.
## 코드 보기
- 아래 코드는 <h1> 태그를 세개 작성하고, 한번 클릭하면 [ .active ]클래스를 추가하고 , 또 한번 클릭하면 [ .active ]클래스를 제거하게 명령을 주겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - CSS조작 메서드</title>
<style>
.active{
background-color: black;
color: yellow;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('h1').click(function(){
$(this).toggleClass('active');
});
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>- click() 메서드를 통해 클릭이벤트를 구현했습니다.
- 이때도 $(this) 키워드는 클릭 이벤트를 받는 문서객체라고 생각하시면 됩니다.
## 결과보기
- 각각의 태그가 한번 클릭하면 배경색 검정색/글자색 흰색으로 변하고, 다시 클릭하면 원래 상태로 돌아오는 것을 확인할 수 있습니다.
4. css() 메서드
- css() 메서드는 문서객체의 스타일을 컨트롤 하는 메서드입니다.
- 그래서 게터(getOO)와 세터(setOO)로 나뉘어 있고 다양한 문법이 있는 메서드입니다.
1) 매개변수가 한개인 유형
- css메서드는 매개변수가 한개인 것이 게터인 유형입니다.
- css는 스타일을 컨트롤하는 메서드이기 때문에 다양한 css속성을 갖고 있기 때문입니다.
- 게터는 배열된 객체인 경우는 첫번째 요소의 값을 가져옵니다.
## 문법
$('선택자').css('CSS속성명');
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 메서드 문법</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var color = $('h1').css('color');
alert(color);
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>
## 코드 결과
- 검정색으로 잘 반환되는 것을 확인할 수 있습니다.
2) 매개변수가 두개인 유형
- css메서드는 매개변수가 두개인 것이 세터인 유형입니다.
- CSS속성 한개를 바꿉니다.
## 문법
$('선택자').css('CSS속성명',값);- 값은 숫자일수도 문자일수도 있어서 따옴표처리하지 않았습니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 메서드 문법</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('h1').css('color','red');
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>
## 코드 결과
3) 매개변수가 객체인 유형
- css메서드는 CSS속성을 컨트롤하기 때문에 여러 개의 CSS속성을 바꿀 수도 있습니다.
- 그래서 객체방식을 사용해서, 글자색은 무엇으로 변경, 배경색은 무엇으로 변경, 이런식으로 변경해줘야합니다.
## 문법
$('선택자').css({
CSS속성명: 값,
CSS속성명: 값
})
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 메서드 문법</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('h1').css({
backgroundColor: 'black',
color: 'yellow'
});
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>- 배경색은 검정색으로, 글자색은 노란색으로 변경했습니다.
## 코드 결과
4) 매개변수가 함수인 유형
- 문서객체가 배열(나열)되어 있을때 각각의 CSS속성을 다르게 주고 싶을 때 사용합니다.
## 문법
$('선택자').css('CSS속성명',function(index){
//반환값 지정
});- 콜백함수의 [ index ]라는 매개변수는 문서객체의 배열번호를 의미합니다. 이때 영문은 무엇이든 상관없습니다. 첫번째 작성된 매개변수는 무조건 배열번호를 의미합니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 메서드 문법</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('h1').css('fontSize',function(index){
return (index + 1) * 10;
});
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>- index번호는 0번부터 시작하기 때문에 더하기 1을 해주었습니다.
- 차례대로 10px, 20px, 30px로 글자크기를 지정하기 위해서 입니다.
## 코드 결과
- 차례대로 커진 것을 확인할 수 있습니다.
5) 매개변수가 객체와 함수를 같이 사용하는 유형
- 속성도 여러개 변경하고 싶고, 배열된 것을 다르게 적용하고 싶을 때 사용하면 됩니다.
## 문법
$('선택자').css({
CSS속성명1: 값,
CSS속성명2: function(index){
//반환할 값
}
}
## 코드 예시
- 이번에는 배경색은 모두 검정색, 글자색은 각각 빨강, 녹색, 파랑으로 지정해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 메서드 문법</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var c = ['red','green','blue'];
$('h1').css({
backgroundColor: 'black',
color: function(index){
return c[index];
}
});
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>
## 코드 결과
'웹언어 > jQuery' 카테고리의 다른 글
| [jQuery강좌] 11강 제이쿼리 이벤트 관련 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
|---|---|
| [jQuery강좌] 10강 문서객체 영역 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
| [jQuery강좌] 8강 문서객체 추가/이동/복제/삭제 메서드 - 오쌤의 니가스터디 (0) | 2022.08.09 |
| [jQuery강좌] 7강 문서객체 HTML요소관련 메서드 - text(), html(), attr(), prop()메서드 (0) | 2022.08.08 |
| [jQuery강좌] 6강 문서객체 DOM Tree 이동 메서드 (0) | 2021.06.29 |
