230410 (jQuery)

jQuery

// 사용하려면 외부 라이브러리를 가져와야 함.

존 레식에 의해 개발된 JavaScript라이브러리

JavaScript코드를 쉽게 구현하기 위해 개발

 

장점

DOM과 관련된 처리를 쉽게 구현할 수 있음

Ajax통신, 이벤트 처리 등 폭 넓게 지원

별도의 플러그인을 통해 차트, 슬라이드쇼, 테이블 등 간단히 구현 가능

 

---

jQuery 연결

- CDN은 인터넷 연결이 되어있어야 함.

- 파일 다운로드는 파일을 끌어다 씀 (연결 필요 없음 / 안전)

---

jQuery 시작

$ 는 무조건 jQuery를 얘기하는 것이 아니다.

ready()는 페이지 로드 시 사용 (개수에 따라 여러 번 실행 가능)

 

- 선택자는 javaScript 때와 동일 (#, ., 띄어쓰기[후손전체], >[바로 뒤 후손] 등)

 

✔ 위의 기본 형태를 자바스크립트 코드로 변형하면

document.getElementsByTagName('h1');　→ const h1s = $('h1') 

for(const h1 of h1s){

　h1.style.color = 'red';

}

---

jQuery 라이브러리에서 가져오기

// 안 하면 $ is not defined로 정의되지 않아 오류

 

1. 온라인으로 jQuery 홈페이지에서 js 파일 불러와 실행

https://jquery.com/

CDN 방식으로 가져올 수 있는 url

≫ 드래그 복사 후 아래처럼 붙여넣기

 

2.  jQuery 홈페이지에서 js 파일 다운로드 후 연결

dev 폴더에 저장 - webapp 에 js 폴더 생성 - jquery-3.6.4.min.js 파일 끌어다 copy

---

$(document).ready()

:: 페이지를 로드한 후 실행 = JavaScript의 window.onload
// 자바스크립트의 window.onload 속성은 복수 개 설정 시 마지막에 쓴 것으로 덮어지지만
　jQuery는 복수 개를 설정한다 하더라도 각각이 모두가 연달아 실행됨

---

선택자와 메소드

:: 선택자를 지정하고 메소드를 통해 jQuery 적용

 

css() : 문서 객체의 스타일을 검사하거나 변경할 때 사용

attr() : 문서객체의 특정 속성 값을 알아내거나 추가시 사용

removeAttr() : 객체 속성 제거(여러 개 지우기 가능 : .removeAttr().removeAttr())

val() : value에 값을 설정하거나 value 값을 확인할 때 사용

// 자바스크립트 document.getElementById('아이디명').value; 와 다름

prop() : 속성 값의 여부를 true/false로 리턴

 

－attr()과 prop()의 차이

attr() 속성 값을 임의의 값으로 변경하거나 조회
　　ex. style, src, placeholder, rowspan, value, size ...

　　　　vs

prop() 속성의 실제적인 상태 제어
　　ex. checked, selected (true/false)

 

1) 전체 선택자 / 아이디 선택자 / 클래스 선택자 / 자식 선택자, 후손 선택자

 

2) 속성 선택자

 

3) input타입 필터 선택자

 

4) 순서에 따른 필터 선택자, 함수 형태의 필터 선택자

---

객체 탐색

 

필터링 메소드

필터링 메소드를 통해 문서 객체 선택 가능

eq(): 선택한 요소 집합에서 특정 인덱스에 해당하는 요소를 선택 (제로 인덱스 기준)
ex) $("li:eq(2)")는 문서에서 세 번째 li 요소를 선택 → $('li').eq(2);

 

text() 선택한 요소의 텍스트 내용을 반환

ex) $("p").text()는 문서에서 모든 p 요소의 텍스트 내용을 반환

---

Ancestors 메소드

선택된 요소의 상위 요소들을 선택할 수 있음

(상위 객체에 접근하는 것을 의미)

＋parentNode(부모노드), parentElement(부모요소)

---

Descendants 메소드

선택된 요소의 하위 요소들을 선택할 수 있음

＋childNodes(자식 노드), children(자식 요소)

---

Sideways 메소드

---

실습문제

 

 

<th>인 이름, 나이, 취미를 제외하고 <td>중 아무곳을 선택했을 때

표 아래 결과처럼 선택한 게시물 : '이름' / '나이' / '취미' 가 출력되게 만들자.

 

---

---

---

★ 위의 코드를 자바스크립트 함수로 바꾸어 보기

---

객체 조작

 

기본 설정

each()

:: 배열을 관리하는 for in/for of 와 비슷한 메소드로 객체나 배열의 요소 검사

$.each(object, function(index, item){})

$(선택자).each(function(index, item){})

index : 배열의 인덱스 또는 객체의 키

item : 해당 인덱스나 키가 가진 값

위의 주석은 each()를 사용하지 않고 작성한 함수

아래는 each를 활용해 작성한 함수 (결과는 동일)

---

map(function(element, index, array){})

:: 배열을 하나하나씩 돌려주는 메소드

---

addClass()

:: 선택된 요소에 클래스 추가

---

★ 위의 코드를 자바스크립트 함수로 바꾸어 보기

---

객체 생성 및 추가

.append() : 요소 추가 // 추가할 곳이 뒤에 오면 .appendTo()

.prepend() : 맨 앞에 요소 추가  // 추가할 곳이 뒤에 오면 .prependTo()

.before() : 선택한 요소 앞에 새 요소 추가  // 추가할 곳이 뒤에 오면 .insertBefore()

.after() : 선택한 요소 앞에 새 요소 추가  // 추가할 곳이 뒤에 오면 .insertAfter();

---

객체 복제

☆ 원래 clone()은 구조만 복사를 해올 수 있기 때문에

이벤트까지 복사를 하고 싶다면 .clone(true)를 해 줘야 함.

---

☆ 요소 삭제

아래 스크립트 안에 주석 내용처럼 효과를 주고 싶음 ▼

✔ 답 + 요소 삭제

remove() : 데이터 형태로 유지되나, 이벤트는 전부 제거

detach() : 데이터 형태와 이벤트 모두 유지

empty() : 데이터 유지되지 않고 제거한 객체만 리턴

 

＋ 읽어보고 정리하기

removeVal, detachVal, emptyVal는 각각 remove(), detach(), empty() 메소드로 선택한 요소들을 삭제 또는 분리(detach)한 후에 반환된 jQuery 객체입니다.

removeVal은 remove() 메소드를 통해 선택한 요소를 완전히 삭제한 후에 반환된 jQuery 객체이므로, 이 객체를 HTML 문자열 형태로 다시 삽입할 때는 html() 메소드를 사용하여 선택한 요소들을 대체합니다.

반면에 detachVal은 detach() 메소드를 통해 선택한 요소를 문서 구조에서 분리(detach)한 후에 반환된 jQuery 객체이므로, 이 객체를 문서 구조의 다른 위치에 다시 삽입할 때는 append()나 appendTo()와 같은 메소드를 사용하여 해당 위치에 붙여넣습니다.

emptyVal은 empty() 메소드를 통해 선택한 요소의 하위 요소들만 삭제하고 해당 요소 자체는 유지한 후에 반환된 jQuery 객체이므로, 이 객체를 다시 문서 구조에 삽입하더라도 해당 요소는 빈 상태로 유지됩니다. 따라서 이 객체를 삽입할 때는 해당 요소를 비우기 위한 추가적인 작업이 필요합니다.

---

객체 조작 테스트

≫ 아래 복사한 div에서도 복사, 삭제가 가능해졌다!

 

↓ 위의 코드를 다르게 적어볼 수도 있다.

 

★ ready 함수는 문서가 로드 됐을 때, 읽혀졌을 때만 적용

그래서 복사된 애들까지는 이벤트를 적용시키지 않는다.

근데 아래는 document를 읽을 때마다 이벤트를 적용하는 것이기 때문에

추가된 요소들에게도 일치되는 것이 있다면 똑같이 클릭 이벤트를 줄 수 있다.

≫ 그렇게 되면 아래는 clone()에 true를 주지 않아도 된다.

---

이벤트

 

이벤트 관련 속성

이벤트 핸들러의 매개인자로 event객체 전달

인라인에서는 무조건 event라는 이름으로 키워드를 전달해야 함

≫ 만약 test1()로 인라인 함수를 전달하는데 매개인자를 넣어주지 않으면

　콘솔로 출력 시 undefined가 나오게 된다. (무조건 event 기입해야 함)

---

이벤트 연결 종류

on() : 현재 존재하는 문서 객체에 이벤트 연결

off() : on()으로 연결된 이벤트 제거

≫ 마우스가 올라가고 내려갈 때 '마우스 올라감' / '마우스 내려감' 이 번갈아 뜨다가

　해당 div를 클릭하는 순간 '기본 상태'가 되며 이벤트가 더 이상 발생하지 않고 제거됨

---

이벤트 종류

mouseover() / mouseout()

:: 자식 요소 접근 시에도 이벤트 발생 → 버블링

mouseenter() / mouseleave()

:: 자식 요소 접근해도 이벤트 발생하지 않음

 

---

hover()

:: mouseenter와 mouseleave를 동시에 사용하는 효과

 

1) hover()를 사용하지 않는 코드

 

2) hover() 사용한 코드

 

예를 들어 설명하면

$('#hoverEvent').hover(function(){

　mouseenter일 때 실행

}, function(){

　mouseleave일 때 실행

});

≫ 첫 번째 함수는 mouseenter, 두 번째 함수는 mouseleave일 때 실행!

 

toggle

on / off 상태와 비슷한 것들을 toggle이라 함.

(ex. 스위치 '켬 끔', 문 '열림 닫힘' 등)

≫ toggleClass 사용한 것을 확인해 보자

---

키보드 이벤트

keydown() 메소드는 키보드에서 키를 눌렀을 때 발생하는 이벤트를 처리
keypress() 메소드는 키보드에서 키를 눌렀을 때 발생하는 이벤트를 처리

≫ 다만, keydown()과 달리, 모든 키에 대해 이벤트가 발생하지 않으며

문자를 입력할 수 있는 키(예: a, b, c, ...)에 대해서만 이벤트가 발생
keyup() 메소드는 키보드에서 키를 눌렀다가 떼었을 때 발생하는 이벤트를 처리

---

동적으로 글자 수 세기

keypress()는 한글 입력 못 함

keydown() 새롭게 적은 글자를 인지하지 못함 (그 전 입력만)

 

따라서 keyup() 사용!

 

---

★

	javaScript	jQuery
사용자 직접 값 입력 (textarea, input 등)	value	val()
사용자 직접 값 입력X (div, p 등)	innerHTML innerText	html() text()

---

효과

show()와 hide()

문서 객체를 보여주거나 사라지게 함

≫ 안에 들어가는 숫자가 커지면 천천히 동작

≫ show/hide()를 굳이 쓰지 않아도 toggle() 하나로 동작이 가능

---

slideDown()과 slideUp()

≫ 안에 들어가는 숫자가 커지면 천천히 동작

≫ 마찬가지로 slideToggle() 사용 시 닫힘/열림 나눌 필요 없음

---

fadeIn()와 fadeOut()

≫ 마찬가지로 Toggle을 사용할 수 있다.

---

BACK (백 단)

JAVA : 기능

ORACLE : 데이터 

JDBC : JAVA + ORACLE 연결

 

BACK과 FRONT를 연결하는 Servlet → FrameWork

 

FRONT (화면 단)

HTML

CSS 

JavaScript

jQuery