jQuery

등장배경

이벤트 등록하기 방법

인터넷 브라우저 차이에서 오는 코드의 차이!

호환이 정말 어렵다

 

jQuery 가 등장한 이유!

모든 브라우저에서 동작하는 자바스크립트를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 라이브러리!

 

Javascript

~~~~가로 값을 50px로 저장/  for문을 이용

 

jQuery를 이용했을떄

JQuery 특징

• DOM
• 효율적인 Selctor
• Ajax 단순화(비동기 통신)
• Cross Browsing 지원
• 시각적 효과
• 애니메니션 구현
• 단순화, 메소드 체인

공개된 코드는 jQuery인 이유

카카오부터 시작해서~~

이유 : 매번 라이브러리를 import 해야하므로

카카오

 

 

jQuery 문법 사용을 위한 2가지 방법

가장 많이 사용 1번.

2번은 카카오같은 곳에서 파일을 같이 함께 넣어서 보내줌.

 

jQuery 다운 방법

다운 버튼 클릭

압축한 것, 압축하지 않은것?

모든 공백을 죽이는 것이 압축하는 것!

 

slim : 밑에 있는거는 이용만 가능 ajax 이용 불가능

 

compressed, production : 상품 배포를 위해서, 일반 사용자의 경우

이걸 복사해서 쓰는게 아니라, 다른 이름으로 저장해야한다

그냥쓰게 되면, 내부 방식으로 되서 코드가 f12 클릭시 노출될 수 있다

다른 이름으로 저장한 상태에서 현재 코딩을 진행중인 위체에다가 끌어온다

외부 방식을 통해 import 하는 방식

폴더 하위방식을 정할때 한번 거칠때마다 . 을 붙여야한다!!

나는 지금 위치를 알고 있는 상태이므로!!

 

 

 

development : 개발자용!

코드를 확인하기 위함

 

 

내부에 내용을 바꿀때

기존 자바스크립트

 

jquery는 다음과 같이 변경가능!

달러 표시를 사용한다

 

 

선택자가 달러 괄호안에 들어간다

$~

 

불편함이 있어, 순수한 자바스크립트는 다음과 같은 기능이 추가되었다!!

 

인접형제 쓸 수 있다!!

 

개념이 조금 다른것도 있다!

제이쿼리는 함수형 실행형이다!

자반 기반의 라이브러리, 함수이다, 그래서 () 소괄호가 들어가 있다!!

오타! html

제이쿼리는 함수형 이다보니 수정할 내용을 괄호안에 넣고 변경한다

 

글자만 가져올떄,

 

수정을 하고 싶을때,

 

 

예제1

자바스크립트 vs 제이쿼리

 

객채는 키와 밸류

$("#txt").css("color","red");

여러개의 속성값을 넣을때

다중 스타일 처리

객체로 묶어서 정리하기!

스타일 지정하기 위햐서는 다음과 같이 속성을 불러와서 값을 넣는다

 

여러 개의 스타일을 변경하는 방법은

다음 코드의 문제

아직, h1 태그가 생성되기 전에 script 코드가 실행됬기 때문에, 

 

수정할 수 있는 코드의 내용: 저기 보이는 모든 문서(html) 준비가 되면, 실행 좀 시켜줘!!!

 

$(document).ready(function())

이렇게 하면, 스크립트가 어디에 있던지 간에 실행이 되는 방법이다!

 

오른쪽은 직관적이지 않아서, 왼쪽 방식을 사용한다!!

 

 

제이쿼리 이벤트 예제

제이쿼리 라이브러리를 불러오지 않았을때 나오는 에러현상!!

정말 많이 나오게 될 것!

 

css 형식으로 하는 경우가 있는데 왜?

각기 다른 기능을 갖기에 필요한 상황에서 사용하기!

 

이렇게하면 코드가 길어지므로,

이제 마우스를 뺏을때도 색깔이 바뀔 수 있게 하는 방법은

근데 이것을 한번에 합칠 수 있다 =>

객체화!!

객체에서는 함수도 넣을 수 있다!!

시연 연상!