[새싹x코딩온] 웹 퍼블리싱 과정 5주차 - 1 | jQuery - 메소드(2), Bootstrap(1)

jQuery 메소드

요소 추가하기

append
$('선택자').append('추가할 요소');
# 선택자의 마지막 자식으로 요소가 추가된다.
# 태그 입력시 html 태그로 받아들인다.

prepend
$('선택자').prepend('추가할 요소');
# 선택자의 첫번째 자식으로 요소가 추가된다.

before
$('선택자').before('추가할 요소');
# 선택자의 이전 형제로 요소가 추가된다.

after
$('선택자').after('추가할 요소');
# 선택자의 다음 형제로 요소가 추가된다.

 

요소 삭제하기

remove
$('선택자').remove();
# 선택자를 삭제한다.

empty
$('선택자').empty();
# 선택자의 모든 자식 요소를 삭제한다.

 

요소 탐색하기

parent
$('선택자').parent();
# 선택자의 부모 요소를 찾는다.

parents
$('선택자').parents();
# 선택자의 조상 요소들을 찾는다.

next
$('선택자').next();
# 선택자의 다음 형제 요소를 찾는다.

prev
$('선택자').prev();
# 선택자의 이전 형제 요소를 찾는다.

children
$('선택자').children();
# 선택자의 자식 요소를 찾는다.

 

클래스 조작하기

addClass
$('선택자').addClass('클래스');
# 선택자에 해당 클래스를 추가한다.

removeClass
$('선택자').removeClass('클래스');
# 선택자에 해당 클래스를 삭제한다.

hasClass
$('선택자').hasClass('클래스');
# 선택자에 해당 클래스가 있는지 true, false로 반환한다.

toggleClass
$('선택자').toggleClass('클래스');
# 선택자에 해당 클래스가 있으면 삭제하고 없으면 추가한다.

 

이벤트 추가하기

$('선택자').on('동작', function(){});
# on은 addEventListener와 같은 의미이다.

 

※ hover() 이벤트

$('선택자').hover(function(){}, function(){});
# 마우스를 올렸을 때와 떼었을 때 각각 정의할 수 있다.

 

Bootstrap

Bootstrap이란?

웹 사이트를 쉽게 만들 수 있게 도와주는 공개 html, css, js 프레임워크(어떤 프로그램을 만들기 위한 기본 틀)

 

https://getbootstrap.com/docs/5.3/getting-started/introduction

Get started with Bootstrap

Bootstrap → Docs → Components에서 많은 기능들을 복사해서 손쉽게 만들 수 있다.