1. jQuery란?
▪ 자바스크립트 라이브러리
▪ Element를 쉽게 찾고 조작가능
▪ 뛰어난 호환성
✓ 거의 모든 웹브라우저에 적용가능
▪ 하락추세라고는 하나, 2020년 기준 점유율 75%
▪ jQuery 시작은 $ → jQuery객체 생성을 위해 $를 사용한다.
2. CDN (Contents Delivery Network)
▪ 자료를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템
▪ 데이터 저장소를 복사한 복제본이 여러군데에 있는 것
3. jQuery cdn 종류
▪ uncompressed, minified, slim, slim minified
▪ uncompressed
✓ 코드가 그대로 출력, 개발할 때 편리
✓ 용량 288kb
▪ slim minified
✓ 변수명, 함수명, 공백 등을 단축한 코드, 배포할 때 유용
✓ 용량 72kb
▪ 예시 : jQuery cdn uncompressed
✓ https://code.jquery.com/jquery -3.6.0.js
✓ 압축되지 않은 파일이라 해석가능
✓ uncompressed 상태인 jQuery 소스의 용량은 288579 byte다.
✓ jQuery 를 잘 사용하지 않으려는 움직임이 일어난 이유 중 하나가 큰 용량이다.
jQuery cdn import 방법 예시
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery1</title>
<!-- jquery cdn import-->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
4. onclick
<script></script> 안에 onclick 코드를 작성하고, <script>밖에서 button1을 생성한다.
예제에서는 button1에 id를 button1이라고 부여했다.
//jquery 방식의 이벤트 연결
//button1에 click이 발생하면 function작동
$('#button1').on('click', function () {
console.log('jquery 클릭1');
});
$('#button1').click(function () {
console.log('JQuery(2) 클릭 1 !!');
});5. 메서드 체인과 append
▪ jQuery 는 여러 메서드를 연결해서 사용가능
▪ mouseover, mouseleave도 사용가능
▪ append함수로 내용 이어쓰기
<script>
//1. 메서드 체인_ jquery는 항상 자기자신을 반환 _ 메서드를 계속 연결해서 사용
$('#button2').click(function (){
console.log('jquery 클릭2');
}).mouseover(function(){
console.log('jquery 마우스오버2');
}).mouseleave(function(){
console.log('jquery 마우스 떠나기2')
});
//2. append
$('#button4').click(function(){
$('#text2').append('<b>b 태그</b>').append('Hello');
});
</sciprt>
<append 함수 적용예시>
위 예시에서는 클릭4버튼을 클릭하면 append함수가 동작해서 기존내용의 끝에 내용이 이어쓰기 된다.
참고자료
w3schools
'언어 > HTML,CSS,JS' 카테고리의 다른 글
| AJAX: fetch함수, 동기, 비동기 방식 (0) | 2022.06.08 |
|---|---|
| jQuery selector(선택자), val(), text(), html() (0) | 2022.06.02 |
| JavaScript Selector, mouse 관련 이벤트 (onmouseover, onmouseleave) (0) | 2022.05.31 |
| JavaScript관련 기본개념 : DOM, 함수선언 및 실행(alert, confirm, prompt )등 (0) | 2022.05.31 |
| CSS 내용, footer 수직정렬 (0) | 2022.01.30 |