본문 바로가기
  • GDG on campus Ewha Tech Blog
3-2기 스터디/HTML+CSS+JS 실전 퍼블리싱

[2주차] jQuery Basics & Method

by Hangii 2022. 5. 5.

💡jQuery 링크하기

📌방식 1

마감 body tag 바로 위에 jQuery 오픈소스 파일과 내가 만드는 파일을 링크하기

	<script src=”script/jquery-1.12.4.js”></script>
	<script src=”script/custom.js”></script>
</body>

이때, 오픈소스 파일이 내가 작성한 파일보다 항상 위에 있어야 한다.

📌방식 2

htmld의 head 부분에 태그를 포함하기

💡jQuery 기본 구문 만들기, 선택자

📌기본 구문

$('선택자').함수(function(){
	실행 구문;
});

📌선택자(selector)의 종류

  • CSS 클래스 선택자
  • CSS 아이디 선택자
  • CSS 태그 선택자
  • this

📌필수 함수(function) 종류

  • click
  • mouseenter
  • mouseleave

📌필수 메서드(method) 종류

  • slideDown()
  • slideUp()
  • stop()
  • show()
  • hide()
  • fadeIn()
  • fadeout()
  • addClass()
  • removeClass()
  • children()
  • siblings()

 

💡jQuery 메서드(Methods)

📌메서드 종류와 대표적인 예시

이펙트클래스 제어요소 탐색

.show() .addClass() .children()
.hide() .removeClass() .parent()
.slideDown() .toggleClass() .siblings()
.slideUp()   .find()
.fadeIn()   .next()
.fadeOut()   .prev()
.stop()    

📌보이기/감추기 메서드

메서드설명

.show() 선택요소 보이기
.hide() 선택요소 감추기
.toggle() 선택요소 보이기/감추기
.slideDown() 선택요소 서서히 보이기
.slideUp() 선택요소 서서히 감추기
.slideToggle() 선택요소 서서히 보이기/감추기

📌페이드(fade)효과 메서드

메서드설명

.fadeIn(지속시간) 선택요소를 페이드로(서서히) 나타나게 하는 효과
.fadeOut(지속시간) 선택요소를 페이드로(서서히) 사라지게 하는 효과
.fadeToggle() 선택요소를 페이드로(서서히) 사라지고 나타나게 하는 효과

▶️지속시간 e.g.: "fast", "slow", 500(500ms라는 의미), 2000(2s라는 의미)

📌클래스 제어 메서드

▶️클래스 제어란?

  • html에 클래스를 만들었는데 css에는 해당 선택자에 대한 코드가 없는 상태에서 jQuery를 통해 클래스를 강제로 넣거나 뺄 수 있는 효과.

메서드설명

.addClass() 선택요소에 클래스 넣기
.removeClass() 선택요소에 클래스 빼기
.toggleClass() 선택요소에 클래스 넣고 빼기

▶️클래스 제어 메서드 예시 코드

  • HTML
<body>
	<div class=”container”>
		<a class=”show-btn” href=”#none”>보이기</a>
		<a class=”hide-btn” href=”#none”>감추기</a>
		<a class=”toggle-btn” href=”#none”>토글</a>
		<div>Box</div>
	</div>
  • CSS
.container{
	width: 300px;
}
a{
	background-color: red;
	color: #000;
	text-decoration:none;
	padding: 5px;
	width: 70px;
	display: inline-block;
	text-align: center;
}
	.container div{
	background-color: dodgerblue;
	width: 250px;
	height: 300px;
	margin-top: 10px;
	text-align: center;
	line-height: 300px;(복습:요소의 높이값만큼 line-height을 주면 가운데로 온다.)
}
.active(일반적으로 클래스를 넣고 뺄 때 사용하는 클래스명이다.){
	background-color:red;
}

현재 html에는 active라는 클래스가 없기 때문에 위의 css코드에서 .active 부분을 포함해도 아무런 일이 일어나지 않는다.

이제 jQuery를 통해 active클래스를 넣고 빼 보자.

  • JavaScript
$(‘.add-btn’).click(function(){
	$(‘container div’).addClass(‘active’)
})
$(‘.remove-btn’).click(function(){
	$(‘container div’).removeClass(‘active’)
})
$(‘.toggle-btn’).click(function(){
	$(‘container div’).toggleClass(‘active’)
})
  • 주의사항:
    클래스 제어 메서드 3가지의 괄호 안에 .과 함께 클래스명을 쓰면 안된다.
    css에서의 클래스 표기법, 그리고 잠시 후 나올 요소 탐색 메서드와 헷갈리지 말 것!

📌요소 탐색 메서드

▶️요소 탐색이란?

  • 선택 요소를 기준으로 두고 목표하는 요소를 찾는 것이다.
.children() 선택 요소의 바로 아래 단계인 자식 요소만 선택
.siblings() 선택 요소의 형제 요소를 선택

▶️요소 탐색 메서드 예시 코드

  • HTML
<ul class=”menu”>
	<li>
		<a href=”#none”>MENU-1</a>
		<div class=”sub-menu”>
			<a href=”#none”>SUB-MENU-1</a>
			<a href=”#none”>SUB-MENU-2</a>
			<a href=”#none”>SUB-MENU-3</a>
			<a href=”#none”>SUB-MENU-4</a>
		</div>
		<a href=”#none”>MENU-2</a>
		<div class=”sub-menu”>
			<a href=”#none”>SUB-MENU-1</a>
			<a href=”#none”>SUB-MENU-2</a>
			<a href=”#none”>SUB-MENU-3</a>
			<a href=”#none”>SUB-MENU-4</a>
		</div>
	</li>
</ul>

 

  • CSS
.menu{
	Padding: 0;
	List-style:none;
	Width:200px;
	Border: 1px solid red;
	Text-align:center;
}
.menu li>a /*(menu밑의 li바로 아래의 a tag자식요소들만 선택한 것임)*/{
	Background-color: #000;
	Color: #fff;
	Display: block; /*(가로배치 되었던 요소들을 새로배치로 바꿈)*/
	Text-align:center; /*(가운데정렬)*/
	Padding: 5px;
}
.sub-menu{
	Border: 1px solid #000;
	Display:none; /*.sub menu a가 아니라 .sub-menu에 적용해야 한다.*/
}
.sub-menu a {
	Display:block;
	Padding: 5px;
}

 

  • JavaScript
$(‘.menu li’).mouseenter(function(){
	$(this).children(‘.sub-menu’).stop().slideDown()
});

$(‘.menu li’).mouseleave(function(){
	$(this).children(‘.sub-menu’).stop().slideUp()
});
  • this란, 현재 선택된(이 경우 mouseenter로 선택된 바로 그 클래스)를 받아오는 것이다. 코드를 이렇게 짜면 MENU-1에 마우스를 올렸을 경우 MENU-1의 SUB-MENU들을, MENU-2에 마우스를 올렸을 경우 MENU-2의 SUB-MENU들을 slideDown하게 되는 것이다.
  • 이 때 slideDown/slideUp을 해야하는 요소는 this 인 ‘.menu li’의 자식요소들이므로 .children()을 써야 한다. .children()의 괄호 사이에 아무것도 적지 않으면 .menu li의 모든 자식요소를 선택하라는 것이다.
    sub-menu들만 선택하고 싶은 경우 .children(‘.sub-menu’)라고 구체적으로 작성해야 한다.

 

▶️선택 요소의 형제 요소 관리하기
:어떤 요소를 클릭하면 형제 요소들의 에니메이션은 제거하고 싶을 때 작성하는 코드 예시

  • HTML
<div class=”btn”>
	<span class=”active”>요소 1</span>
	<span>요소 2</span>
</div>

 

  • CSS
.btn{
	Width:300px;
}
.btn span{
Background-color: #ccc;
Padding: 5px;
Width: 100px;
Display: inline-block;
Text-align: center;
Border-radius: 5px;
}

 

  • JavaScript
$(‘.btn span’).click(function(){
	$(this).addClass(‘active’) /* . 없음 주의!!(위의 내용참고)*/
	$(this).siblings().removeClass(‘active’)
});
저작자표시 비영리

'3-2기 스터디 > HTML+CSS+JS 실전 퍼블리싱' 카테고리의 다른 글

[6주차] before, after, 순서체크 가상클래스, 체크박스  (0) 2022.05.22
[5주차] 확장선택자, 콘텐츠 slider  (0) 2022.05.22
[4주차] before after 가상클래스와 순서 체크 가상클래스  (0) 2022.05.21
[3주차] CSS 키프레임 애니메이션과 가상클래스 hover  (0) 2022.05.08
[1주차] Basic HTML & CSS Overview  (0) 2022.05.05

관련글

댓글

티스토리툴바