JavaScript 에서 init 이라는 내장함수는 없습니다. 사용자가 그냥 임의로 이름을 지어 만드는 것이 init 이라는 이름을 짓게 되는것이고, init 이라는 이름은 보통 초기화 의 의미를 지닌 함수나 객체를 작성할 때 많이 사용합니다. 작성자의 마음에 따라 initialize 라고 해도 상관없습니다.
winodw.history 프로퍼티는 History 객체에 대한 참조이며 윈도우의 열람 이력을 최근에 방문한 URL의 배열로 반환합니다. DOM의window객체는history객체를 통해 브라우저 히스토리에 접근할 수 있습니다. HTML5의 history 객체는 사용자 히스토리에서의 앞 뒤 이동이 가능하도록 유용한 메서드와 속성들을 제공하며, history stack의 내용을 조작할 수 있게 합니다. 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한합니다. (글 아래)
history.pushState()의 사용은 상태를 변경한 후에 생성되는XMLHttpRequest를 위한 HTTP 헤더 안에서 사용되는 참조자를 변경합니다.참조자는XMLHttpRequest객체가 생성되는 시점에this로 지정되는 도큐먼트의 URL입니다.
이해하기 쉬운 생활 예시로는 로그인 후 뒤로가기를 눌러 로그인페이지를 출력하고 또 뒤로가기를 또 눌렀을 때 보여줄 화면 배정(메인페이지 등)이 있겠습니다.
(1) history.pushState()
3개의 변수 state 객체, title (예약되나 내부역할 없음), 옵션인 URL 객체를 가집니다. history에 새로운 history를 추가하며 실제 페이지 이동은 일으키지 않습니다.
state 객체 — pushState()에 의해 생성된 새로운 히스토리 항을 포함하고 있는 자바스크립트 객체. 사용자가 새로운 상태로 이동할 때 마다,popstate이벤트가 발생하고, 이 이벤트의state속성은 히스토리의state객체 사본을 가집니다.
state 객체는 직렬화할 수 있는 어떤 것도 될 수 있습니다. state 객체의 직렬화 결과 크기는 최대 640k로 제한됩니다. 만약 사용자가 더 큰 직렬 표현 데이타를pushState()로 보낸다면, 메소드는 예외를 발생시킵니다. 만약 사용자가 이 보다 더 큰 공간이 필요하면sessionStorage나localStorage를 사용하십시오.
title— 나중에 사용될 수도 있기 때문에 빈 문자열을 지정해 놓는 것은 안전합니다. 빈 문자열 대신 이동하고자 하는 state 마다 짧은 명칭을 부여하는 것도 좋습니다.
URL — 새로운 히스토리 엔트리의 URL을 지정합니다. pushState() 호출 이후에는 브라우저가 이 URL을 로딩하지 않지만 사용자가 브라우저를 다시 시작하거나 할 경우 나중에도 로딩이 가능합니다.
새롭게 할당되는 URL은 현재의 URL에 기준하기 때문에, 절대 경로일 필요는 없습니다. 새로운 URL은 기존의 URL을 기준으로 해석됩니다. 새로운 URL은 현재 URL에서 유추될 수 없다면pushState()는 예외를 발생시킵니다. 이 변수는 선택 사항으로, 명시되지 않는다면, 현재 URL로 지정됩니다.
(2) history.replaceState()
히스토리를 추가하지 않고 덮어씁니다.
history.replaceState()는history.pushState()와 동일하게 동작하지만,replaceState()는 새로운 히스토리를 하나 생성하는 대신에 현재의 히스토리 엔트리를 변경합니다. 하지만 전역 브라우저 히스토리에 새로운 항목을 추가하는 것을 막지는 않습니다. replaceState() 는 state 객체나 사용자의 동작에 따라 현재 히스토리 엔트리의 URL을 업데이트 하려고 할 때 매우 유용합니다.
<Link to= “somewhere” replace={true}/>
(3) history.popstate()
popstate이벤트는 현재 활성화된 히스토리 엔트리에 변화가 있을 때 마다 실행됩니다. 만약pushState함수나replaceState함수에 의해 현재 활성화되어 있는 히스토리 엔트리가 조작 및 변경된다면,popstate이벤트의state속성은 히스토리 항의 state 객체의 사본이 됩니다.
현재 상태 읽기
페이지가 로딩이 되었을 때, state 객체는 아마 null이 아닐 수 있습니다. history.state속성에 접근하면,state객체는 마치popstate발생시에 얻었을 객체와 동일하게 될 것입니다. popstate이벤트를 기다릴 필요 없이, 아래와 같은 명령어를 이용하여 현재 히스토리 엔트리의 상태에 접근할 수 있습니다.
var currentState = history.state;
Window.history와 브라우저 히스토리의 차이
Window.history속성은 읽기 전용이고 Historyobject를 반환 브라우저 세션 히스토리 (현재 페이지가 있는 탭 또는 브라우저에서 방문한 페이지) 조작을 위한 인터페이스를 제공
.stacked-radial {
background:
radial-gradient(circle at 50% 0,
rgba(255,0,0,.5),
rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%,
rgba(0,0,255,.5),
rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%,
rgba(0,255,0,.5),
rgba(0,255,0,0) 70.71%) beige;
border-radius: 50%;
}
반복형 그라데이션 효과
linear-gradient(), radial-gradient(), conic-gradient()는 자동 반복 기능을 지원하지 않지만 repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()는 반복기능을 제공합니다.
그라데이션 이펙트로 패턴 만들기
.repeating-linear {
background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}
사용자가 웹사이트에 방문해서 동작을 취했을 때 제이쿼리 코드가 실행되도록 만드는 방법을 다루는 단원입니다.
이벤트 : 사이트에서 방문자가 취하는 모든 행위
이벤트 핸들러 : 이벤트가 발생했을 때 코드를 실행시키는 것
이벤트 메서드 : 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행
제이쿼리 이벤트 메서드는 하나의 이벤트만 등록할 수 있는단독이벤트 메서드,2개 이상의 이벤트를 등록할 수 있는그룹이벤트등록 메서드로 나뉩니다. 단독이벤트 등록 메서드는 로딩, 마우스, 포커스, 키보드, 기타 이벤트로 나눌 수 있습니다.
구분
종류
설명
로딩 이벤트
load()
선택한 이미지나 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트 발생
ready()
지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트 발생
error()
이벤트 대상 요소에서 오류가 발생하면 이벤트 발생
마우스 이벤트
click()
선택한 요소를 클릭했을 때 이벤트 발생
dbclick()
선택한 요소를 연속 두 번 클릭했을 때 이벤트 발생
mouseout()
선택한 요소의 영역에 마우스 포인터가 벗어났을 때 이벤트 발생 * 하위 요소의 영향을 받음
mouseover()
선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트 발생
hover()
선택한 요소에 마우스 포인터를 올렸을 때, 벗어났을 때 각각 이벤트 발생
mousedown()
선택한 요소에 마우스 버튼을 눌렀을 때 이벤트 발생
mouseup()
선택한 요소에 마우스 버튼을 눌렀다 뗐을 때 이벤트 발생
mouseenter()
선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트 발생
mouseleave()
선택한 요소의 영역에 마우스 포인터가 벗어났을 때 이벤트 발생
mousemove()
선택한 요소의 영역에서 마우스 포인터를 움직였을 때 이벤트 발생
scroll()
가로, 세로 스크롤바를 움직일 때마다 이벤트 발생
포커스 이벤트
focus()
선택한 요소에 포커스가 생성될 때 이벤트 발생 or 선택한 요소에 강제로 포커스 생성
focusin()
선택한 요소에 포커스가 생성되었을 때 이벤트 발생
focusout()
포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생
blur()
포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생 or 선택한 요소의 포커스가 강제로 사라지게 함
change()
이벤트 대상인 입력 요소의 값이 변경되고 포커스가 이동하면 이벤트 발생 * 강제로 change 이벤트를 발생시킬 때도 사용
키보드 이벤트
keypress()
선택한 요소에서 키보드를 눌렀을 때 이벤트 발생 문자 키를 제외한 키의 코드값 반환
keydown()
선택한 요소에서 키보드를 눌렀을 때 이벤트 발생 키보드의 모든 키의 코드값 반환
keyup()
선택한 요소에서 키보드에서 손을 떼었을 때 이벤트 발생
이벤트 등록방식 알아보기
지정한 요소에 이벤트를 등록하려면 한 가지 동작에 대한 이벤트 등록은 단독이벤트 등록 방식, 두 가지 이상의 동작에 대한 이벤트 등록은 그룹이벤트 등록 방식이 있습니다. 그룹 이벤트 등록 메서드는 on() 메서드를 사용하여 이벤트를 등록합니다.
1 단독 이벤트 등록 메서드
$("이벤트대상").이벤트 등록 메서드(function(){
code;
});
// example
$(".btn1").click(function(){
alert();
});
2 그룹 이벤트 등록 메서드
// on() 메서드 등록 방식 1
$("이벤트 대상 선택").on("이벤트종류1 이벤트종류2 ... 이벤트종류n",
function(){
자바스크립트 코드;
}
});
// example
$(".btn1").on("mouseover focus",
function(){
console.log("welcome");
}
});
// on() 메서드 등록 방식 2
$("이벤트 대상 선택").on({
"이벤트종류1 이벤트종류2 ... 이벤트종류n" : function(){
자바스크립트 코드;
}
});
// example
$(".btn1").on({
"mouseover focus" : function(){
console.log("welcome");
}
});
// on() 메서드 등록 방식 3
$("이벤트 대상 선택").on({
"이벤트종류1" :function(){ 자바스크립트 코드;1 },
"이벤트종류2" :function(){ 자바스크립트 코드;2 },
...
"이벤트종류n" :function(){ 자바스크립트 코드;n };
});
// example
$(".btn1").on({
"mouseover" :function(){ console.log("welcome"); },
"focus" :function(){ console.log("welcome"); }
});
3 강제로 이벤트 발생하기
이벤트가 강제로 발생했다는 것은 사용자가 아닌 핸들러에 의해 자동으로 이벤트가 발생한 것입니다. 변수의 값을 사용자가 직접 버튼을 눌러 증가시키지 않고 trigger() 메서드를 사용하거나 단독 이벤트 등록 메서드를 사용하면 강제로 이벤트를 발생해 변수를 증가할 수 있습니다.
$("이벤트 대상").단독 이벤트 등록 메서드();
$("이벤트 대상").trigger("이벤트 종류");
$(function(){
$(".btn1").click(function(){
$(".btn1").parent().next().css({"color" : "#f00"});
}); //버튼에 클릭이벤트가 발생하며 이벤트 핸들러가 실행
$(".btn2").on({
"mouseover focus" : function(){
$(".btn2").parent().next().css({"color" : "#0f0"});
}
});
$(".btn1").click();
$(".btn2").trigger("mouseover");
//버튼에 mouseover 가 되면 이벤트 핸들러(function)이 자동 실행
});
이벤트 제거 메서드는 off()가 있습니다. 등록된 이벤트가 제거되면 브라우저의 개발자 도구의 Event Listners에서도 사라지는 걸 확인할 수 있습니다.
$("이벤트 대상").off("제거할 이벤트 종류");
// 예
$(".btn1").off("click");
5 로딩 이벤트 메서드
로딩 이벤트 메서드는 사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행합니다. ready(), load()가 있습니다. ready() 메서드는 사이트를 방문할 떄 요청한 HTML문서 객체 (document) 로딩이 끝나면 이벤트를 발생하고(즉 html에 전체 요소가 로딩되면), load() 메서드는 외부에 연동된 소스(img, video, iframe)의 로딩이 끝나면 이벤트를 발생시킵니다.
지정한 요소를 클릭하는 것부터 마우스 포인터를 올리는 등 사용자가 마우스를 이용해서 취하는 모든 행위를 캐치합니다.
click() / dblclick()
// 이벤트 등록
$("이벤트대상").click(function(){ code; });
$("이벤트대상").on("click", function(){ code; });
// 강제 발생
$("이벤트대상").click();
// 이벤트 등록
$("이벤트대상").dblclick(function(){ code; });
$("이벤트대상").on("dblclick", function(){ code; });
// 강제 발생
$("이벤트대상").dblclick();
<a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트를 차단하기
<a> 요소에 click이나 dblclick을 등록하면 클릭할 때마다 태그에 링크된 주소로 이동하는 문제점이 있습니다. 해결하려면 <a> 요소의 기본 이벤트를 차단해야합니다. <form> 요소의 submit 버튼도 action에 등록된 주소로 이동시키는 문제가 있어 '등록한 이벤트를 정상 작동하려면' 기본 이벤트를 차단해야 합니다. 기본 이벤트의 차단은 return false 를 사용하거나preventDefault() 메서드를 사용하여 차단할 수 있습니다.
mouseover()과 mouseenter()의 차이는 mouseover는 대상 요소에 마우스 포인터가 올라가면 발생하는 이벤트이고, mouseenter는 이벤트 대상이 포함된 범위에 마우스 포인터가 들어오면 발생하는 이벤트입니다. mouseout은 대상 '요소'에서 마우스 포인트가 벗어나면 발생하는 이벤트이고, mouseleave는 대상이 포함된 '범위'에서 마우스 포인터가 벗어나면 발생하는 이벤트입니다.
// 이벤트 등록
$("이벤트대상").mouseover(function(){ code; });
$("이벤트대상").on("mouseover", function(){ code; });
// 강제 발생
$("이벤트대상").mouseover();
// 이벤트 등록
$("이벤트대상").mouseout(function(){ code; });
$("이벤트대상").on("mouseout", function(){ code; });
// 강제 발생
$("이벤트대상").mouseout();
// 이벤트 등록
$("이벤트대상").hover(
function(){ code; },
function(){ code; }
);
// 이벤트 등록
$("이벤트대상").mouseenter(function(){ code; });
$("이벤트대상").on("mouseenter", function(){ code; });
// 강제 발생
$("이벤트대상").mouseenter();
// 이벤트 등록
$("이벤트대상").mouseleave(function(){ code; });
$("이벤트대상").on("mouseleave", function(){ code; });
// 강제 발생
$("이벤트대상").mouseleave();
// 이벤트 등록
$("이벤트대상").mousemove(function(){ code; });
$("이벤트대상").on("mousemove", function(){ code; });
// 이벤트 발생
$("이벤트대상").mousemove();
mousemove 이벤트가 발생할 때마다 마우스 포인터의 좌표값을 span에 출력하는 예제
pageX, pageY가 생소하시죠? 곧이어 나옵니다.
이벤트 객체와 종류
사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있습니다.
$("이벤트 대상 선택").mousemove(function(매개변수){
매개변수(이벤트 객체).속성;
});
구분
종류
설명
마우스 이벤트
clientX
마우스 포인터의 X 좌표값 반환(스크롤 이동거리 무시)
clientY
마우스 포인터의 Y 좌표값 반환(스크롤 이동거리 무시)
pageX
스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌표값 반환
pageY
스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌표값 반환
screenX
화면 모니터를 기준으로 마우스 포인터의 X 좌표값 반환
screenY
화면 모니터를 기준으로마우스 포인터의 Y좌표값 반환
layerX
position을 적용한 요소를 기준으로 마우스 포인터의 X 좌표값 반환
layerY
position을 적용한 요소를 기준으로마우스 포인터의 Y 좌표값 반환
button
마우스 버튼의 종류에 따라 값 반환(왼쪽:0, 휠:1, 오른쪽:2)
키보드 이벤트
keyCode
키보드의 아스키코드값 반환
altKey
이벤트 발생 시 Alt 키가 눌렸으면 true, or false 반환
ctrlKey
이벤트 발생 시 Ctrl 키가 눌렸으면 true, or false 반환
shiftKey
이벤트 발생 시 Shift키가 눌렸으면 true, or false 반환
전체 이벤트
target
이벤트가 전파된 마지막 요소를 가르킴
cancelBubble
이벤트 전파를 차단하는 속성으로 기본값 false true로 설정하면 이벤트 전파가 차단
stopPropagation()
이벤트 전파 차단
preventDefault()
기본 이벤트 차단 (앞에 나온 내용)
scroll()
대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데 사용됩니다.
// 이벤트 등록
$("이벤트대상").scroll(function(){ code; });
$("이벤트대상").on("scroll", function(){ code; });
// 강제 발생
$("이벤트대상").scroll();
포커스 이벤트
포커스는 마우스로 <a>나 <input> 태그를 클릭하거나 Tab 키를 누르면 생성됩니다. 키보드 접근성을 높이기 위해서는 마우스 이벤트를 되도록이면<a>나 <input> 태그에 등록하고, 키보드가 없을 경우를 고려하여 마우스 이벤트에 대응할 수 있는 키보드 이벤트까지 등록해야합니다. 마우스 이벤트에 대응하는 키보드 이벤트 메서드는 focus(), focusin(), blur(), focusout()가 있겠습니다.
// 키보드 접근성을 배려한 이벤트 적용
// 예시는 버튼 숨기기 이벤트
$(".btn").on("mouseover focus", function(){
$(".txt_1").hide();
});
focus() : 대상 요소로 포커스가 이동하면 이벤트 발생, mouseover에 대응 blur() : 포커스가 대상요소에서 다른요소로 이동하면 이벤트 발생, mouseout에 대응 focusin() : 대상 요소의 하위요소 중 입력요소로 포커스가 이동하면 이벤트 발생 focusout() : // 입력요소에서 외부 요소로 이동하면 이벤트 발생
change() 이벤트 메서드
선택한 폼 요소의 value를 새 값으로 바꾸고 포커스가 다른 요소로 이동하면 이벤트를 발생시킵니다.
keydown()은 한글 키 제외 모든 키에 대해 이벤트를 발생시키지만 keypress()는 기능키에 대해서는 이벤트를 발생시키지 않습니다. (F1~F12, Alt, Ctrl, Shift, ↑, Backspace, Caps Lock, 한/영, Tab 등) 키보드 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있고, 이를 이용해서 단축키 기능을 만들 수 있습니다.
// 이벤트 등록
$("이벤트대상").keydown(function(){ code; });
$("이벤트대상").on("keydown", function(){ code; });
// 강제 발생
$("이벤트대상").keydown();
// 이벤트 등록
$("이벤트대상").keyup(function(){ code; });
$("이벤트대상").on("keyup", function(){ code; });
// 강제 발생
$("이벤트대상").keyup();
// 이벤트 등록
$("이벤트대상").keypress(function(){ code; });
$("이벤트대상").on("keypress", function(){ code; });
// 강제 발생
$("이벤트대상").keypress();
이벤트가 발생한 요소 추적하기
$(this) 선택자 : 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있습니다.
index() 인덱스 반환 메서드 : 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환합니다.
$("이벤트 대상 선택").on("이벤트 종류", function(){
$("이벤트 대상 선택").index(this);
});
그룹 이벤트 등록 및 삭제하기
단독이벤트가 아닌 그룹으로 여러 개의 이벤트를 등록하는 메서드입니다. 이미 등록된 이벤트를 삭제하는 메서드도 살펴볼 것입니다.
종류
설명
on()
이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다. 이벤트를 등록한 이후에도 '동적'으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다.
bind()
이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다.
delegate()
선택한 요소의 하위 요소에 이벤트를 등록합니다. 이벤트를 등록한 이후에도 '동적'으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다.
one()
(이벤트 대상 요소에 1개 이상의 이벤트를 등록합니다.) 지정한 이벤트가 1회 발생하고 자동으로 해제됩니다.
앞에서 배운 이벤트 등록 방식으로는 객체 조작 메서드에 의해 새로이 생성, 복제된 요소에 이벤트를 등록할 수 없습니다. on() 메서드는 '라이브 이벤트 등록 방식'으로 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다. one() 메서드도 특정 방식으로 라이브 이벤트를 등록할 수 있습니다.
$([document | "이벤트 대상의 상위 요소 선택"]).on("이벤트 종류", "이벤트 대상 선택", function(){
자바스크립트 코드;
});
$([document | "이벤트 대상의 상위 요소 선택"]).delegate("이벤트 대상 요소 선택", "이벤트 종류", function(){
자바스크립트 코드;
});
// 기본 이벤트 등록 방식
$("이벤트 대상 요소 선택").one("이벤트 종류", function(){
자바스크립트 코드;
});
// 라이브 이벤트 등록 방식
$([document | "이벤트 대상의 상위 요소 선택"]).one("이벤트 종류", "이벤트 대상 선택", function(){
자바스크립트 코드;
});
이벤트 제거 메서드
이벤트 등록 메서드에 따라 이벤트를 해제하는 방법이 달라집니다. 기본 이벤트를 제거하느냐 라이브 이벤트를 제거하느냐에 따라서도 그렇습니다.
종류
설명
off()
on() 메서드로 등록한 이벤트 제거
unbind()
bind() 메서드로 등록한 이벤트 제거
undelegate()
delegate() 메서드로 등록한 이벤트 제거
// 기본 이벤트 제거
$("이벤트 대상 요소 선택").off("이벤트 종류");
$("이벤트 대상 요소 선택").unbiind("이벤트 종류");
$("이벤트 대상 요소 선택").delegate("이벤트 종류");
// 라이브 이벤트 제거
$([document | "이벤트 대상의 상위 요소 선택"]).off("이벤트 종류", "이벤트 대상 선택");
$([document | "이벤트 대상의 상위 요소 선택"]).undelegate("이벤트 대상 선택", "이벤트 종류");
추가 실습 : 제이쿼리 글자 확대, 축소 버튼 만들기
본 내용은 DO IT! 자바스크립트+제이쿼리 입문 도서를 참고하여 공부하며 요약해본 것입니다.
대표적인 탐색 선택자에는 배열의 index를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있습니다. 콘텐츠 포함 여부로 재선택 가능한 '콘텐츠 탐색 선택자'와 '필터링 선택자'도 있습니다.
위치 탐색 선택자
기본 선택자로 선택한 요소는 배열에 담깁니다. 이 때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택 가능합니다.
위치 탐색 선택자 종류
종류
사용법
설명
$("요소 선택:first") $("요소 선택").first()
$("li:first") $("li").first()
전체 <li> 요소 중 첫 번째 요소만 선택
$("요소 선택:last") $("요소 선택").last()
$("li:last") $("li").last()
전체 <li> 요소 중 마지막 요소만 선택
$("요소 선택:odd")
$("li:odd")
<li> 요소무리 중 짝수 번째 요소만 선택 (홀수 인덱스)
$("요소 선택:even")
$("li:even")
<li> 요소무리 중 홀수 번째 요소만 선택 (짝수 인덱스)
$("요소 선택:first-of-type")
$("li:first-of-type")
<li> 요소무리 중첫 번째 요소만 선택
$("요소 선택:last-of-type")
$("li:last-of-type")
<li> 요소무리중마지막 요소만 선택
$("요소 선택:nth-child(숫자)")
$("li:nth-child(3)")
<li> 요소무리중 세 번째 요소만 선택
$("요소 선택:nth-child(숫자n)")
$("li:nth-child(3n)")
<li> 요소무리중3의 배수 번째요소만 선택
$("요소 선택:nth-last-of-type"(숫자)")
$("li:nth-last-of-type(2)")
<li> 요소무리 중 마지막부터 두 번째 요소만 선택
$("요소 선택:only-child(숫자)")
$("li:only-child ")
부모요소 내에 <li> 요소가 1개뿐인 <li>요소만 선택
$("요소 선택:eq(index)") $("요소 선택").eq(index)
$("li:eq(2)") $("li").eq(2)
<li> 요소 중 인덱스 2가 참조하는 요소 불러옴
$("요소 선택:gt(index)")
$("li:gt(1)")
<li> 요소중 인덱스 1보다 큰 인덱스가 참조하는 요소 불러옴
$("요소 선택:lt(index)")
$("li:lt(1)")
<li> 요소중 인덱스 1보다 작은 인덱스가 참조하는 요소 불러옴
$("요소 선택:slice(index)")
$("li").slice(2)
<li> 요소중 인덱스 2부터 참조하는 요소 불러옴
first : 선택된 요소 중 첫번째만 last : 선택된 요소 중 마지막만 even : 홀수번째 요소 odd : 짝수번째 요소
eq : 지정요소 lt : less than gt : greater than
first-of-type : 선택 요소의 무리 중 각각의 첫번째 last-of type : 선택 요소의 무리 중 각각의마지막
nth-child : 선택 요소의 무리 중 지정한 숫자의 요소 nth-child(숫자n) : 선택 요소의 무리 중 지정한 배수의 요소 nth-last-child(숫자) : 선택한 요소의 무리 중 마지막 위치에서 지정한 숫자의 요소
only-child : 부모 요소에게 하나뿐인 자식 요소인 경우 선택 -> ($("li:onliychild")면 li 자식요소가 하나만 있는 부모요소 선택 slice(start index, end index) : 선택 요소의 지정된 구간 인덱스의 요소 -->($(slice(1,3)은 인덱스 1부터 3번째까지)
선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택 즉, 특정 속성을 포함하는 요소를 선택할 때 주로 사용
종류
사용법
설명
$("요소 선택[속성]")
$("li[title]")
li 요소 중 title 속성이 포함된 요소만 선택
$("요소 선택[속성=값]")
$("li[title='리스트']")
li 요소 중 title 속성이 리스트인 요소만 선택
$("요소 선택[속성^=텍스트]")
$("li[href^='http://']")
li 요소 중 href 속성값이 http://로 시작하는 요소만 선택
$("요소 선택[속성$=텍스트]")
$("li[href$='.com']")
li 요소 중 href 속성값이 .com로 끝나는 요소만선택
$("요소 선택[속성*=텍스트]")
$("li[href*='resta']")
li 요소 중href 속성값이 resta를 포함하는 요소만선택
$("요소 선택:hidden")
$("li:hidden")
li 요소 중 숨겨진 요소만 선택
$("요소 선택:visible")
$("li:visible")
li 요소 중보이는 요소만 선택
$(":text")
$(":text")
input 요소 중 type 속성값이 text인 요소만 선택
$(":selected")
$(":selected")
selected 속성이 적용된 요소만 선택
$(":checked")
$(":checked")
checked 속성이 적용된 요소만 선택
그 외의 선택자 : 콘텐츠 탐색 선택자
콘텐츠 탐색 선택자는 요소 또는 속성의 포함 여부에 따라 틀정 요소를 선택
종류
사용법
설명
$("요소 선택:contains(텍스트)")
$("li:contains('내용2')")
li 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택
$("요소 선택").contents()
$("p").contents()
선택요소의 하위요소 중 가장 가까운 하위 요소 선택
$("요소 선택:has(요소명)") $("요소 선택").has(요소명)
$("li:has('span')") $("li").has('span')
li 요소 중 <span>을 포함하는 요소만 선택
$("요소 선택:not(제외요소)") $("요소 선택").not(제외요소)
$("li:not(first)") $("li").not(first)
li 요소 중 첫 번째 요소만 제외하고 선택
$("요소 선택").filter(필터요소)
$("li").filter(".list2")
li 요소 중 class 값이 "list2"인 요소만 선택
$("요소 선택").find(요소선택2)
$("li").find("strong")
li 요소의 하위요소인 <strong>만 선택
$("요소 선택").closest("요소선택2")
$("strong").closest("div")
strong을 감싸는 상위 div 요소 중 가장 가까운 상위 요소 선택
end()
$("li").children("a").end()
필터링이 실행되기 이전인 요소인 li가 선택
contains() 탐색 선택자는 선택 요소 중 지정한 텍스트를 포함하는 요소만 선택하고, contents() 탐색 선택자는 선택한 요소의 하위 요소 중 1깊이의 텍스트와 태그 노드를 선택하고, has() 탐색 선택자는 선택 요소 중 지정한 태그를 포함하는 요소만 선택, not() 탐색 선택자는 선택한 요소 중 지정요소만 제외하고 선택, end() 탐색 선택자는 필터링 이전의 선택자가 적용되도록 합니다. find() 탐색 선택자와 filter() 탐색 선택자의 차이는 선택한 하위 요소 중 필터링하느냐, 선택한 요소 중 필터링하느냐의 차이입니다.
선택자와 함께 알아두면 유용한 메서드
선택자와 함께 알아두면 편리한 몇가지 메서드들입니다.
종류
사용법
설명
.is(":요소상태")
.is(":txt1").is(".visible")
선택한 요소가 일치하면(보이면) true 반환 / 없으면 false
$.noConflict()
var 변수 = $.noConflict(); 변수("요소선택")
이 함수를 이용하면 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용
get()
$("요소선택").get(0).style.color = '#000'
선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 사용할 수 있음
is() 메서드
입력 요소의 체크 박스나 선택 상자의 선택 여부, 보이는지의 여부 등을 알아볼 때 주로 사용하고 반환값은 true or false 입니다.
prompt("question", "answer");
//answer 부분 비워둘 수 있음
Confirm()
: 확인/취소 창 띄움
confirm("are you sure?");
일정한 간격으로 코드 실행
setInterval() / clearInterval()
: 일정한 간격으로 코드를 반복 실행
* clearInterval() : setInterval 메서드를 취소
var test = setInterval(function() { code } , 시간 간격 (ms));
var test = setInterval("code", 시간 간격(ms));
// ms : 1000분의 1초
clearInterval(test);
//ex
var intv = setInterval("i++", 3000); //3초간격
var intv = setInterval(function(){i++;}, 3000);
예제
//ex
var intv = setInterval("i++", 3000); //3초간격
var intv = setInterval(function(){i++;}, 3000);
setTimeout() / clearTimeout()
: 일정한 시간 후 코드 실행 후 종료
screen 객체
: 사용자 모니터 정보(속성)을 제공하는 객체 --> 모니터의 너비나 높이, 컬러 표현(bit)를 반환
screen.속성;
screen.width
화면의 너비값
screen.height
화면의 높이값
screen.availWidth
작업표시줄을 제외한 화면의 너비값
screen.availHeight
작업표시줄을 제외한 화면의높이값
screen.colorDepth
사용자 모니터가 표현가능한 컬러 bit반환
location 객체
: 사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체 --> 현재 URL에 대한 정보(속성)과 새로고침(reload) 메서드를 제공
location.href
사용자 브라우저의주소영역의 참조주소를 설정하거나 URL 경로 값을 반환
location.hash
URL의 해시값을 반환 (#에 명시된 값)
location.hostname
URL의 호스트 이름을 설정하거나 반환
location.host
URL의 호스트 이름과 포트번호를 반환
location.protocol
URL의 프로토콜 반환
location.search
URL의 쿼리(요청값) 반환
location.reload()
새로고침
history 객체
: 사용자가 방문한 사이트를 기록, 이전방문사이트와 다음방문사이트로 다시 돌아갈 수 있는 속성과 메서드 제공
history.back()
이전 방문 사이트로 이동
history.forward()
다음 방문 사이트로 이동
history.go()
-2 : 2단계 이전의 방문 사이트로 이동 (history.go(-2))
history.length()
방문 기록에 저장된 목록의 개수 반환
navigator 객체
: 현재 방문자가 사용하는 브라우저 정보와 운영체제(Operating System) 정보를 제공하는 객체
navigator.userAgent;
// 결과
Mozilla/5.0 (Macintosh; Intel Mac OS X....) // 기본플랫폼, () : 운영체제정보
AppleWebKit/537.3.. (KHTML, like Gecko) //브라우저 엔진이름
Chrome/79.0..... //사용중인 브라우저 이름
Safari/537.3.. // 같은 엔진 사용중이며 호환 가능한 다른 브라우저
AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술로, 서버와 통신시 데이터 포맷은 주로 XML과 Json을 사용합니다. 파싱속도는 Json이 XML보다 약간 더 빠르다고 알려져 있으며 구문 분석, 파싱((syntactic) parsing)은 일련의 문자열을 의미있는 토큰(token)으로 분해하고 이들로 이루어진 파스 트리(parse tree)를 만드는 과정을 말합니다. 쉽게, 주로 어떤 데이터를 다른 모양으로 가공하는 걸 말합니다.
Encodes a set of form elements as an array of names and values
Get방식과 Post 방식의 차이
Get 요청은 웹브라우저의 주소창에주소를 입력한 후 엔터를 칠 때, 페이지에서링크를 클릭했을 때,입력폼의 method속성이 get 일 때, AJAX에서 서버에 연결할 때 get 으로 설정한 경우 발생한다. HTTP GET 요청 프로토콜은 서버에 보내는 데이터를요청-URI 안에 포함되어 따로 message-body를 보낼 필요가 없다. 따라서 Get 방식이 Post 방식보다 간단하고, 빠르고, 거의 모든 경우에 사용할 수 있다.
예:/webapp/student/list.json?pageNo=2&pageSize=5 (서버에 보내는 데이터:?pageNo=2&pageSize=5)
즐겨 찾기에 데이터와 URL을 함께 저장할 수 있어서 다시 요청하기 편하다.
손쉽게 다른 사람에게 전달할 수 있다.
용도: 데이터 조회 요청에 적합하다.
데이터가 타인에게 쉽게 노출될 수 있다.
로그인과 같은 보안 전송에는 사용하기 적합하지 않다.
바이너리 데이터를 전송할 수 없다. 전송하려면 base64와 같은 ASCII 형식으로 변환해야 한다.
보통 Request-Line의 크기가 8KB나 16KB로 제한되어 있어서, 대량의 데이터를 보낼 수 없다.
Post 요청은입력폼의 method속성이 post 일 때,AJAX에서 서버에 연결할 때post로 설정한 경우 발생하며 Post 방식을 꼭 사용해야 할 경우는저장된 파일일때 ( 서버 상의 파일이 나 데이터베이스를 수정할 때 ),서버에 많은 양의 데이터를 보낼때 ( POST 방식은 사이즈 제한이 없다),사용자의 입력을 보낼때 ( 알 수 없는 문자열이 포함되어 있을 가능성이 있을 경우 )가 있다. HTTP POST 요청 프로토콜은 서버에 보내는 데이터가 요청-URI 안에 포함되지 않고 따로message-body 부분에 첨부
보통 웹서버에서는 message-body 부분으로 전송되는 데이터의 경우 대량으로 전송 받는 것을 허락
대용량 데이터를 첨부할 수 있다.
웹브라우저 주소창에 보이지 않는다.
멀티파트 방식을 결합하면 바이너리 데이터도 보낼 수 있다.
용도: 게시글, 파일업로드 등 대량 데이터 전송 시, 로그인 폼처럼 보안을 요구하는 데이터 전송 시.
즐겨 찾기에 추가할 때 데이터가 포함되지 않기 때문에 조회 용 URL을 저장할 수 없다.
특정 페이지의 링크 정보를 다른 사람에게 전달할 수 없다.
$.post & $.get
$.post & $.get 는 $.ajax를 상속 $.post & $.get는 고수준으로 구현했다고 보면 되고, $.ajax 는 저수준 수준이 낮은게 아니라 더 낮은 단계의 api를 사용할 수 있다
jQuery $ .get() 메소드
HTTP GET 요청을 사용하여 서버에서 데이터를 요청 선택적 콜백 매개 변수는 요청이 성공하면 실행될 함수의 이름
$.get(URL,callback);
jQuery $ .post () 메소드
HTTP POST 요청을 사용하여 서버에서 데이터를 요청 필수 URL 매개 변수는 요청하려는 URL을 지정 선택적 data 매개 변수는 요청과 함께 전송할 일부 데이터를 지정 선택적 콜백 매개 변수는 요청이 성공하면 실행될 함수의 이름
요청경로(URL) : 필요한 경로에 맞게 사용. 실제 웹루트안에 XML 파일에 요청, 서버에서 XML을 만들어서 리턴, 페이지 자체를 XML페이지로 등등 type : 생략해도 jQuery가 알아서 잘 잡음 결과 : 콘솔창에 XML문서가 표시
// script
$.ajax({
url: 'document.xml', // 읽어올 문서
type: 'GET', // 방식
dataType: 'xml', // 문서 타입
timeout: 1000, // 시간 설정
error: function(){ // 로딩 에러시
alert('Error loading XML document');
},
success: function(xml){
$(xml).find('item').each(function(){ // xml 문서 item 기준으로 분리후 반복
var link = $(this).find("link").text();
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var tag = $(this).find("tag").text();
var view_text = link + title + description + tag ;
$("#id").append(view_text); // #id 에 view_text 삽입
});
}
});
// 출처: https://abisuk.tistory.com/entry/ajax-기본-샘플-소스-xml-파싱해서-읽어서-뿌리기 [아비분석실]
먼저 우리는 ajax success함수에서 리턴받을 XML 명을 xml 이라고 적어놨으므로 첫번째 선택자는 xml
// $(xml); //서버에 요청하여 받은 XML 이 선택
var txt = $(xml).find('첫번째문단').text();
// find 함수로 노드명을 적으면 셀렉트가 되고,
// 그뒤에 text 함수를 사용하시면 해당 노드의 텍스트를 가지고옵니다.
// 출처: https://annotations.tistory.com/58 [Annotation]
노드의 속성값을 가지고 오려면 attr 사용
var attr = $(xml).find('두번째문단').attr('순서');
출처: https://annotations.tistory.com/58 [Annotation]
