오픈소스 자바스크립트 라이브러리
달러함수는 제이쿼리 라이브러리에 있음 → 다운로드 받거나 cdn 링크 걸어야 함
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
jQuery를 사용하면 자바스크립트 프로그램에서 DOM 객체 참조작업을 쉽게 할 수 있음
jQuery는 이벤트 처리, DOM 객체 변경, ajax연동을 쉽게 할 수 있음
CSS선택자를 사용 → #ID .class
CSS Pseudo class 하위, 동일레벨, 폼 선택자 : 콜론으로 되어있는
(유사하다)
예시) 이메일 목록을 보면 목록이 그리드형태로 나타나는데 홀수번째의 그리드는 row가 되는데
그런애들의 배경색을 다르게 주고싶을때 (가독성 좋게)
진짜예시
$('tr:even').css('backgroundColor', 'pink')
셀렉터
$() 제이쿼리 함수호출
.css 함수호출
() 매개변수
$( function ); 어떤 함수를 호출하면서 매개변수로 함수를 걸어둠 : 초기화, 초기설정과 관련있음
함수의 매개변수로 문자열(CSS선택자)을 기술하여 선택함
→ DOM 엘리먼트를 찾아서 결과 값으로 객체 리턴
→ 이렇게 얻어진 객체를 jQuery 확장 객체 집합 이라고 함
jQuery 사용처
- 이벤트와 이벤트 핸들러 등록
- DOM 객체 다루기
- 시각 효과
- Ajax 통신
돔객체
JS Event
자바스크립트 이벤트 처리 절차
- 해당 요소의 이벤트 핸들러 등록
- 해당 요소에서 이벤트 발생
- 등록된 핸들러가 수행됨
- 수행이 끝나면 다음 이벤트를 처리할 준비 상태로 대기
이벤트 핸들러가 필요로 하는 것
- 이벤트 타겟
- 이벤트 종류
- 함수
자주 사용하는 이벤트 종류
| onclick | 요소를 클릭할 때 |
| onchange | 값이 변했을 때 |
| onfocus | 포커스를 받았을 때 |
| onkeypress | 키보드의 키를 눌렀을 때 |
| onmouseout | 요소 내에 있던 마우스가 요소를 벗어났을 때 |
| onload | 문서의 로딩이 끝났을 때 |
| onsubmit | 폼을 전송할 때 |
이벤트 핸들러 등록
<body>
<!--1.요소의 속성에 직접 지정-->
<button onclick="alert('direct')">Click Me!</button>
<script>
//2.스크립트에서 요소의 프로퍼티로 지정
let mydiv = document.getElementById('mydiv');
mydiv.onclick = function() {
alert('mydiv');
}
//3.이벤트리스너 등록 함수로 등록
let mydiv = document.getElementById('mydiv');
mydiv.addEventListener('click', clickMyDiv, false);
let clickMyDiv = function() {
alert('mydiv');
}
</script>
</body>
jQuery Event
jQuery는 버블링만 지원함
내부적으로 브라우저의 이벤트 객체 사용법을 따르므로 크로스 브라우징 문제가 발생하지 않음
이벤트가 발생한 DOM 요소를 this 키워드로 참조하며, 매개변수로 이벤트를 전달받아 참조함
종류
- 마우스, 키보드 이벤트
- 폼태그 이벤트
- 윈도우 이벤트
- 브라우저 이벤트
이벤트 핸들러 등록
bind() 메서드나 on(), 또는 click() 등의 메서드 사용하여 등록함
$('#mybtn').on('click', function() {
alert('버튼 클릭 하셨나용?');
})
초기화 코드
//1
$(function () {
});
//2
document.addEventListener('DOMContentLoaded', function() {
});
예시
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
</head>
<body>
<input type="button" value="전송" id="myBtn" />
<script>
//1.$함수에 전달된 함수를 실행시켜주는군
$(function() {
//alert('hi jq');
//방법3
$('#myBtn').on('click', () => {
alert('jq로 인해 myBtn이 클릭되었어용');
});
});
//2.초기설정을 이렇게 하면 되겠군
let myBtn = document.querySelector('#myBtn');
myBtn.addEventListener('click', function () {
//방법1
alert('myBtn이 클릭되었어용');
});
myBtn.onclick = function () {
//방법2
alert('myBtn이 클릭되었어용');
}
</script>
</body>
</html>
'Language > Javascript' 카테고리의 다른 글
| [JS] 상속 (0) | 2024.07.25 |
|---|---|
| [JS] 자바스크립트 기초 (코딩애플 유튜브 무료강의) (0) | 2024.03.28 |
| [JS] DOM (0) | 2023.09.07 |
| [JS] 함수 (0) | 2023.09.06 |
| [JS] JavaScript (0) | 2023.09.06 |