KDT 포스코X코딩온 웹 과정 14기 13일 - JQuery

JQuery란?

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 오픈 소스 기반의 자바스크립트 라이브러리

 

라이브러리란?

자주 사용하는 기능들을 모아두었다가 필요할 떄 가져다 쓸 수 있도록 만들어놓은 기계 부품 같은 것.

 

JQuery가 가진 장점?

주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능
HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능
애니메이션 효과나 대화형 처리를 간단하게 적용
같은 동작을 하더라도 더욱 짧게 구현 가능 • 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

 

 

jQuery를 사용하는 방법

1. JQuery 홈페이지에서 직접 프로그램을 다운 받는다.
2. Code를 작성할 때마다, 접근하여 사용할 수 있도록 CDN 코드를 넣는다.(주로 후자 사용)
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

 

jQuery 기초 - 값의 변경

#. $(선택자).동작함수()의 간단한 형태로 쓸 수 있는 게 강점

1. $( 선택자 ).val() : 해당 선택자의 요소가 가진 value값을 반환
2. $(선택자).val(“설정할 값”); : 해당 선택자의 요소가 가진 value값을 변경함.
3. $( 선택자 ).css( “속성” , “속성값” ) : 해당 선택자의 요소가 가진 css 속성을 변경함.
4. $( 선택자 ).attr( “속성”, “속성값” ) : 해당 선택자의 요소가 가진 속성값을 변경, css도 style을 속성으로 넣는 방식으로 변경할 수 있다.(attrutbute랑 동일함)
5. $( 선택자 ).text( “글자” ) : 해당 선택자의 text 값을 변경함(innerText와 동일한 의미)
6. $( 선택자 ).html( html ) : html 테그를 포함하여 해당 선택자의 자식으로 추가함.

 

JQuery 기초 - 요소의 추가

$( 선택자 ).append( 요소 ) : 선택된 요소의 자식요소 중 마지막에 추가.
$( 선택자 ).prepend( 요소 ); 선택된 요소의 자식 요소 중 첫번쨰로 추가
$( 선택자 ).before( 요소 ) : 선택된 요소의 형제 요소로 앞에다 추가.
$( 선택자 ).after( 요소 ) : 선택된 요소의 형제 요소로 뒤에다 추가.

 

JQuery 기초 - 요소의 삭제

$( 선택자 ).remove() : 선택한 요소를 DOM 트리에서 삭제
                                    인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제

$( 선택자 ).empty(); : 선택한 요소의 자식 노드를 전부 제거함.

 

JQuery의 기초 - 요소의 탐색

$( 선택자 ).parent().함수() : 바로 위에 존재하는 하나의 부모 요소 선택
$( 선택자 ).parents().함수() : 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택
$( 선택자 ).next().함수() : 선택된 요소 바로 다음에 위치한 형제 요소 선택
$( 선택자 ).prev().함수() : 선택된 요소 바로 이전에 위치한 형제 요소 선택
$( 선택자 ).children().함수() : 선택된 요소의 자식 요소 모두 선택

 

JQuery의 클래스 조작

$( 선택자 ).addClass(“클래스명”) : 선택된 요소의 클래스 추가(ClassName과 동일함)
•$( 선택자 ).removeClass(“클래스명”) : 선택된 요소의 클래스 삭제
$( 선택자 ).hasClass(“클래스명”) :  Contains와 동일한 의미로 선택한 요소의 클래스 유무를 bool 대수로 나타냄.
$( 선택자 ).toggleClass(“클래스명”) : 선택된 요소에 클래스가 있으면 추가, 없으면 삭제
$( 선택자 ).switchClass(“클래스명1”, “클래스명2”, 시간) : 특정 시간이 지나면, 클래스1에서 클래스2로 바꿈

 

jQuery 이벤트리스너

•이벤트가 발생했을 때 그 처리를 담당하는 함수

 

문서가 시작했을 떄 함수를 작동시키고 싶으면?

$().ready() : 문서가 다운로드 되었을 떄 () 안에 넣어둔 함수가 실행됨(ready() 생략 가능)

 

JQuery의 마우스 이벤트

click() • mouseover() • hover() • scroll()

 

JQuery의 키보드 이벤트

keydown() • keyup()