- click 함수
a태그 보이기 클릭 -> p display: block
a태그 감추기 클릭 -> p display: none
<div>
<h2>p 태그 감추기</h2>
<a href="#none" class="show-btn">보이기</a>
<a href="#none" class="hide-btn">감추기</a>
<p>
태그선택자 a를 클릭했습니다.
</p>
</div>// custom.js
// css()는 사용하기보다는 css파일에 직접 작성하는 것이 좋다. 예시로 작성
$('p').css({'display':'none'});
// 클래스이름이 .show-btn을 클릭
$('.show-btn').click(function() {
$('p').css({'display':'block'});
});
$('.hide-btn').click(function() {
$('p').css({'display':'none'});
});
- show() hide() 메서드
<head>
<style>
a {
display: inline-block;
padding: 5px;
color: #000;
background-color: #ddd;
width: 100px;
text-align: center;
}
.box {
margin-top: 10px;
width: 220px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: dodgerblue;
color: #fff;
display: none;
}
</style>
</head>
<body>
<div>
<h2>show hide</h2>
<a href="#none" class="show">보이기</a>
<a href="#none" class="hide">감추기</a>
<div class="box">box</div>
</div>
<!-- js -->
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
</body>
</html>// custom.js
// show() hide() 메서드 사용
$('.show').click(function() {
$('.box').show();
});
$('.hide').click(function() {
$('.box').hide();
})
- mouseenter, mouseleave 함수
mouseenter 마우스를 올렸을 때
mouseleave 마우스가 떠날 때
나머지 css는 위랑 같음
width 값만 210px로 변경
팝업(모달창)은 click함수, 네비게이션은 mouseenter함수를 보통 사용한다.
<div>
<h2>mouseenter</h2>
<a href="#none" class="btn">show/hide</a>
<div class="box">Box</div>
</div>$('.btn').mouseenter(function() {
$('.box').show();
});
$('.btn').mouseleave(function() {
$('.box').hide();
});
- 필수 함수 : click mouseenter mouseleave
- 메서드(이펙트) :
.show() .hide()
.slideDown() .slideUp()
.fadeIn() .fadeout()
.stop()
- 메서드(클래스 제어) :
.addClass() .removeClass() .toggleClass()
- 메서드(요소 탐색) :
.children() .siblings()
.parent()
.find() .next() .prev()
'Web > Java Script' 카테고리의 다른 글
| tab menu (with jquery) #1 프로토타입 (0) | 2021.07.15 |
|---|---|
| js 변수와 조건문 - 20세 체크, 별점 주기(with jquery) (0) | 2021.07.14 |
| 제이쿼리(jQuery) 시작하기 #4 addClass(), children() (0) | 2021.07.10 |
| 제이쿼리(jQuery) 시작하기 #3 효과 메서드 (slideDown|Up, fadeIn|Out) (0) | 2021.07.10 |
| 제이쿼리(jQuery) 시작하기 #1 폴더구조, 링크 (0) | 2021.07.09 |