자바스크립트에서 공부했던 hide, show, toggle 은 제이쿼리에서는 어떻게 하는지 볼까?
■ hide, show
우선 첫째 hide, show 부터 보자구.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>show/hide-jQuery</title>
<style>
.menu {width:500px; background-color:#ccc; padding:10px; border:1px solid gray;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<div class="menu">
<div>
<span style="font-size:20px">알찬만두</span>
<button style="float:right" onclick="$('#subMenu').show()">메뉴보기</button>
<button style="float:right" onclick="$('#subMenu').hide()">메뉴닫기</button>
</div>
<!---- 숨겨진 부메뉴 ---->
<div id="subMenu" style="display:none;">
<hr>
<li><a href="#">만두소개</a></li>
<li><a href="#">오시는길</a></li>
</div>
</div>
</body>
</html>
별도 함수를 정의할 필요없이 버튼에 바로 제이쿼리 명령을 썼어.
왜냐하면 함수의 내용은 상단 <script>~</script>의 jquery.min.js 에 다 정의되어 있으니까.
우리는 그저 사용하기만 하면 되는거야.
그런데 hide, show 함수 사용법이 자바스크립트 때와 조금 다르지?
자바스크립트에서 함수로 만들었을 때는 함수의 ( ) 안에 선택자를 인자로 입력해서 사용했는데(예: show('#subMenu')) 여기서는 선택자와 함수를 점(.)으로 연결했어.
이것은 $('#subMenu') 가 객체이기 때문이야.
자바스크립트 학습에서
'객체(Object)' 라고 배웠지?
그리고 hide, show 는 이 객체에 대한 함수, 즉
'메소드(Method)'인거야.
뭐? 객체?, 메소드? 갑자기 뭐가 좀 어리둥절하지?
놀라지마. 자바스크립트 공부를 좀 해 보았으면 이상하지 않겠지만 이제 막 신입이면 뭔소리?..로 생각들거야.
그냥 제이쿼리에서는 이런식으로 함수를 쓴다고 생각하면 돼.
그리고 이렇게 점(.)으로 연결해서 쓰는 함수를 일반 함수와 구별하기 위해
메소드(Method) 라고 부르는 것 뿐이야.
우리들이 자바스크립트에서 배운 my.js 라이브러리도 메소드로 작동하게 만들 수 있어.
다만 그렇게 만들려면 설명이 복잡해 지고 여러분의 머리가 아프니까 가장 쉬운 방법으로 만들었던 거야.
지금 단계에서는 확실하게 이해하려고 다시 객체 공부로 되돌아 갈 필요없어.
그냥 몇 번 사용하다 보면 그냥 원래 이런식으로 쓰는구나.. 하는 생각이 들거야.
그리고 그러면 이해 된거야.
위 코드의 데모는 아래 링크에서 확인해봐. 자바스크립트와 똑같이 작동하지?
http://yogibbs.kr/jsDemo/showHide1-jquery.html
■ css 함수(메소드)
이번에는 버튼을 하나로 처리했던 예제를 제이쿼리로 구현해 보자구.
<div class="menu">
<div>
<span style="font-size:20px">알찬만두</span>
<button style="float:right" onclick="showHide()">메뉴</button>
</div>
<!---- 숨겨진 부메뉴 ---->
<div id="subMenu" style="display:none;">
<hr>
<li><a href="#">만두소개</a></li>
<li><a href="#">오시는길</a></li>
</div>
</div>
<script>
function showHide() {
if ($('#subMenu').css('display') == 'none') {
$('#subMenu').css('display', 'block');
} else {
$('#subMenu').css('display', 'none');
}
}
</script>
아래는 이전 자바스크립트 학습에서 사용한 방법이야. 기억나?
function showHide() {
var subMenu = document.getElementById('subMenu');
if (subMenu.style.display == 'none') {
subMenu.style.display = 'block';
} else {
subMenu.style.display = 'none';
}
}
거의 비슷하지?
style.display 를 css('display') 로 이름과 형식만 바뀐 것 뿐이야.
제이쿼리에서는 객체의 스타일 속성을 찾거나 바꿀 때
css( ) 메소드를 사용해.
$(선택자).css(스타일, 값);
스타일명만 사용하면 해당 스타일의 값을 알려주고, 두번째 인자로
'값'을 넣으면 스타일을 그 값으로 세팅해 주는 역할이야. 예를들어..
$("p").css("background-color");
이렇게 하면 p 태그의 배경색을 알려주고,
$("p").css("background-color", "yellow");
이렇게 하면 p 태그의 배경색을 모두 노란색으로 변경해 줄거야.
또 아래와 같이 해주면 여러가지 스타일 속성을 한꺼번에 지정할 수도 있어.
$("p").css({"background-color": "yellow", "font-size": "200%"});