jQuery
🔎 라이브러리
🔎 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.
🔎 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구다.
🔎 javascript 구현에 필요한 상당수의 기능들을 미리 구현해 놓은 함수들의 집약체
🔎 이처럼 프로그래밍에 필요한 함수들을 언제든지 필요할 때 참조할 수 있도록 집약해 놓은 형태를 '라이브러리'라고 한다.
🔎 HTML 요소 제어가 손쉬워진다.
🔎 요소의 탐색과 생성을 간단하게 해줄 수 있다.
🔎 ajax에 대한 통신처리또한 간단해진다.
🔎 익숙한 구문(문법 난이도가 높지는 않음)
🔎 다양한 플러그인 제공
-- Java와 jQuery 구문 비교 --
-- jQuery로 css 입히기 --
jQuery 세팅
- jquery.com 들어가기
- download
- 원하는 경로 링크 클릭
- jquery 구조 확인해보기
- 스크롤을 내려 Other CDNs에서 google CDNs 클릭
- src경로 복사 (나는 3.x 스니펫 경로 복사했다)
- head태그 마지막에 복사한 경로 붙여넣기
- jQuery사용 가능
jQuery 제어의 대상 찾기
$('li').css('color,','red');
$ : jQuery가 사용되는 구나~
('li') : css선택자
.css('color,','red'): 선택된 객체들에게 style을
color:red로 변경한다.
축약된 코드
- innerHTML
-> 선택자.html("문장");
- window.onload = function(...){} //Js
-> $(document).ready(function(){...});
-> $(function(){...}); // jQuery
jQuery로 제어할 대상에 접근하는 방법
🔎 jQuery는 제어할 요소를 획득하기 위하여 $() 함수 안에 제어할 대상을 가리키는 CSS셀렉터를 파라미터로 전달한다.
🔎 태그 요소
let tag = $('h1'); // 이렇게 접근🔎 css클래스 요소
let mycss = $(".hello");🔎 hello라는 id 속성을 갖는요소
let myid = $("#id"); // 중복이 없는 id로 접근하는 방법을 많이 사용.jQuery 공홈 API문서
https://api.jquery.com/category/selectors/basic-css-selectors/
-> 해당 경로에서 selector의 기초 코드 정보를 알아올 수 있음
🔎 조합형
let my = $("a,b");🔎 자식 항목
let my = $("a b");
id로 접근하기 -> 가장 많이 쓰이긴 한다.
$("#htmlID").addClass('selected');
class로 접근하기
$('.selectClass').addClass('selected');
tag로 접근하기
$('li').addClass('selected');
여러개 접근해보기1
$('#htmlID, .selectClass').addClass('selected');
여러개 접근해보기2
list라는 id를 가진 태그 안에있는 li 모든 태그 선택 -> 자식 클래스 선택
$("#list li").addClass('selected');
인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
2라는 숫자는 index(인덱스는 0부터 시작) - 2는 0 1 2 해서 3번째 인덱스가 뽑힘
$("#list li:eq(2)").addClass('selected'); -> eq(2) : equal
인자보다 인덱스가 큰 엘리먼트를 찾아내는 선택자
$("#list li:gt(1)").addClass('selected'); -> gt(1) : 인덱스가 1보다 큰 인덱스가 뽑힘
인자보다 인덱스가 작은 엘리먼트를 찾아내는 선택자
index값이 2보다 작은 값
$("#list li:lt(2)").addClass('selected'); -> li(2) : 인덱스가 2보다 작은 인덱스가 뽑힘
짝수 인덱스 값을 가진 엘리먼트 (0번 인덱스 포함)
$("#list li:even").addClass('selected');
첫째줄 뽑기
$("#list li:first").addClass('selected');
마지막줄 뽑기
$("#list li:last").addClass('selected');jquery 비교 표현식 / Selector
eq = equal ( = )
ne - not equal ( <> )
lt - litte ( < )
le - little or equal ( <= )
gt - greater ( > )
ge - greater or equal ( >= )
even - 짝수 인덱스 ( 0 , 2 , 4 , ... )
odd - 홀수 인덱스 ( 1 , 3 , 5 , ...)
first - 첫번째 줄 인덱스 선택
last - 마지막 줄 인덱스 선택
...이벤트
- id가 btn이라는 버튼에다가 click 이벤트를 바인딩하는 방법
$("#btn").click(function(event){ ... }); $("#btn").bind()(function(event){ ... }); $("#btn").on(function(event){ ... });
<예제>
-- 마우스 이벤트를 이용한 기능 --
1) 네모 구간으로 들어갈때 mouse enter 출력
2) 네모 구간에서 마우스를 누를 때 mouse down 출력
3) 네모 구간에서 마우스를 뗄 때 mouse up 출력
4) 네모 구간에서 나갈 때 mouse leave 출력
mouseenter : Mouse Enter
mouseleave : Mouse Leave Enter
mousedown : Mouse Down
mouseup : Mouse Up.on(); 맛보기
1) 특정 구간에 마우스가 들어가기 전
2) 특정 구간에 마우스가 출입했을 때
3) 클릭 기능
.bind();
🔎 이벤트 등록 함수
unbind : 어떤 이벤트의 어떤 이벤트 핸들러를
제거할지에 대해서 정확하게 기입1) handler가 적용된 상태
2) handler가 제거된 상태
Keyevent
-
keypress 이벤트는 영문, 특수문자에 대해서는 동작하지만
한글에 대해서는 동작하지 않는다. -
그러므로 균등한 키 이벤트 구현을 위해서는 keyup 이벤트를 사용해야 한다.
Keycode
🔎 키보드가 자신의 어떤 키가 눌러졌는지 컴퓨터에게 보내는 데이터
🔎 키보드의 키 하나하나에 각각 일련의 숫자값들이 할당되어 있다.
🔎 키보드는 눌려진 키에 대응되는 숫자값을 컴퓨터에게 전달한다.
🔎 javascript keycode
-- KeyCode 예제 (키보드를 눌렀을 때의 키코드 값과 enter가 입력됐을 때의 변화 출력 --
1) KeyCode (o) Enter (x)
2) KeyCode (o) Enter (o)
Chain
chain : 연계해서 값을 계속 바꿀 수 있다.
attr : 속성값을 바꿀 때 사용하는 메서드
-- 연결되는 링크를 https://naver.com 에서 https://google.com으로 바꿀 수 있다.
JSON
JSON 표기법이란?
🔎 JSON(JavaScript Object Notaion)은 경량의 데이터 교환형식으로, 프로그래밍 언어로부터 완전히 독립적이다.
🔎 떄문에, 서로 다른 프로그래밍 언어간에 데이터를 교환하는데 가장 널리 사용되는 표기법이다.
-> 다음 그림처럼 json으로 주면 json으로 회답받는 데이터 교환 방식이다.
JSON 표기법의 중요성
🔎 문법으로서의 사용
🔎 javascript에서는 하나의 객체안에 함수와 변수를 함께 그룹화하여 포함시키기 위한 문법의 형태로서 JSON 표기법이 사용된다.
🔎 jQuery에서의 기본 문법 체계는 JSON으로 구성된다.
🔎 javascript 소스코드 안에서 여러개의 변수값들을 계층적으로 표현하기 위해 사용된다.
🔎 Ajax에서 사용되는 데이터 규격으로 JSON이 사용된다.
표기법의 기본 구조
🔎 이름(key)과 값(value)의 쌍으로 이루어진 객체 구조
-
빈 객체('{}') 안에 배열과 같이 콤마(,)로 구별하여 여러개의 값을 하나의 객체 안에 포함시킨다. 이 때, "이름:값"의 형태로 할당한다.
let 객체이름 = { 이름 : 값, 이름 : 값 }; // 값에 함수도 들어갈 수 있다.
🔎 데이터에 접근
객체이름.이름; //key, value
-- json을 통해 회사 정보를 받아오는 예제 --
jquery 도움링크
