jQuery Reference v1.0 </doc>
leehun.dothome.co.kr
제이쿼리
제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성있게 사용 할 수 있도록 만들어진 다양한 함수의 집합을 의미합니다.
제이쿼리는 HTML에 포함되어 있는 클라이언트 사이트 스크립트 언어를 단순화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리입니다.
제이쿼리 장점
- 제이쿼리 CSS를 쉽게 적용할 수 있습니다.
- 제이쿼리 크로스브라우징을 지원합니다.
- 제이쿼리 플러그인이 풍부합니다.
- 제이쿼리는 코드를 적게, 효율적으로 작성할 수 있습니다.
- 제이쿼리는 좋은 확장성이과 Ajax기능을 구현합니다.
제이쿼리를 사용하는 이유
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* #list2 li {color: red;}*/
</style>
<script>
window.onload = function ( ){
var list2 = document.getElementById("list2");
var lilist = list2.getElementsByTagName("li");
for (var i=0; i<lilist.length; i++){
var li = lilist[i];
li.style.color = "#f00";
}
}
</script>
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("#list1 li").css("color","blue");
});
</script>
</head>
<body>
<h3>jQuery Sample</h3>
<div>
<ul id="list1" class="list">
<li class="one1">one1</li>
<li class="one2">one2</li>
<li class="one3">one3</li>
<li class="one4">one4</li>
<li class="one5">one5</li>
<li class="one6">one6</li>
<li class="one7">one7</li>
<li class="one8">one8</li>
<li class="one9">one9</li>
<li class="one10">one10</li>
</ul>
<ul id="list2" class="list">
<li class="one1">one1</li>
<li class="one2">one2</li>
<li class="one3">one3</li>
<li class="one4">one4</li>
<li class="one5">one5</li>
<li class="one6">one6</li>
<li class="one7">one7</li>
<li class="one8">one8</li>
<li class="one9">one9</li>
<li class="one10">one10</li>
</ul>
</div>
</body>
</html>
제이쿼리 사용방법
jQuery(document).ready(function(){
});
$(document).ready(function(){
});
$(function(){
});
});
$(document).ready(function(){
});
$(function(){
});
선택자
기본선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| 태그 선택자 | $("p") | 기본 태그를 선택합니다. |
| 클래스 선택자 | $(".class") | 클래스 태그를 선택합니다. |
| 아이디 선택자 | $("#id") | 아이디 태그를 선택합니다. |
| 그룹 선택자 | $("p, .class, #id") | 여러가지 태그를 선택합니다. |
| 전체 선택자 | $("*") | 전체 태그를 선택합니다. |
계층 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| 자손 선택자 | $("div li") | 자식(하위) 태그 모두 선택합니다. |
| child 선택자 | $("div > p") | 자식(하위) 태그만 선택합니다.(자손은 포함안됨) |
| sibling 선택자 | $("div + p") | 자식 태그 다음 형제 태그를 선택합니다. |
| siblings 선택자 | $("div ~ li") | 자식 태그 다음 모든 형제태그를 선택합니다. |
속성 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| [name="value"] | $("li a[href='#page']") | 속성 중에 #page와 일치하는 태그를 선택합니다. |
| [name^="value"] | $("li a[href^='http']") | 속성 중에 http로 시작하는 태그를 선택합니다. |
| [name$="value"] | $("li a[href$='.com']") | 속성 중에 .com로 끝나는 태그를 선택합니다. |
| [name*="value"] | $("li a[href*='web']") | 속성 중에 "web"가 포함되어 있는 태그를 선택합니다. |
| [name!="value"] | $("li a[href!='naver.com']") | 속성 중에 naver.com와 일치하지 않는 태그를 선택합니다. |
| [name="value"][name="value"] | $("li a[href][class]") | 속성 중에 href 속성과 class 속성이 있는 태그를 선택합니다. |
기본 필터 선택자
| 종류 | 설명 |
|---|---|
:animated |
show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다. |
:eq(index) |
선택된 태그들의 인덱스 번호를 통해 선택합니다. |
:gt(index) |
선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다. |
:lt(index) |
선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다. |
:header |
제목 요소(h1~h6) 태그들을 선택합니다. |
:first |
선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다. |
:last |
선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다. |
:odd |
선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다. |
:even |
선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다. |
:not() |
현재 선택한 요소의 반대 요소를 선택합니다. |
내용 필터 선택자
| 종류 | 설명 |
|---|---|
:contains() |
()안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환합니다. |
:empty |
요소에 텍스트 없을 때 선택됩니다. |
:has() |
요소 내부에서 찾고 싶은 태그를 후손 요소까지 살펴본 후 요소가 있으면 반환합니다. |
:parent |
empty와 반대로 요소에 텍스트가 존재할 때에 선택됩니다. |
보임 필터 선택자
콘텐츠 영역을 보이지 않게 하는 방법
- display : none ~ display : block (영역X) (애니메이션X)
- visibility : hidden ~ visibility : visible (영역O (애니메이션X))
- opacity : 0 ~ opacity : 1 (영역O) (애니메이션O)
- width:0; height:0; overflow:hidden;
- form 요소 주에 type="hidden
- 부모 요소가 보이지 않거나 숨겨져 있을 때
visibility : hidden이나 opacity : 0은 위치가 제거되지 않았기 때문에 :hidden 선택자에게 선택되지 않습니다.
| 종류 | 설명 |
|---|---|
:hidden |
보이지 않는 요소를 선택합니다. |
:visible |
보이는 요소를 선택합니다. |
자식 필터 선택자
| 종류 | 설명 |
|---|---|
:first-child |
첫 번째 자식 요소를 선택합니다. |
:last-child |
마지막 번째 자식 요소를 선택합니다. |
:nth-child(index) |
index번째에 있는 자식 요소를 선택합니다. |
:nth-child(even) |
짝수번째에 있는 자식 요소를 선택합니다. |
:nth-child(odd) |
홀수번째에 있는 자식 요소를 선택합니다. |
:nth-child(2n) |
2배수 번째에 있는 자식 요소를 선택합니다. |
:nth-child(2n+1) |
2배수+1 번째에 있는 자식 요소를 선택합니다. |
:only-child |
자식 요소가 오직 하나인 요소를 선택합니다. |
폼 필터 선택자
| 종류 | 설명 |
|---|---|
:input |
모든 입력 양식을 선택합니다. |
:file |
파일 업로드 양식을 선택합니다. |
:hidden |
숨겨진 입력 양식을 선택합니다. |
:image |
이미지 입력 양식을 선택합니다. |
:password |
암호 입력 양식을 선택합니다. |
:radio |
라디오 버튼 입력 양식을 선택합니다. |
:reset |
리셋 입력 양식을 선택합니다. |
:submit |
데이터 보내기 입력 양식을 선택합니다. |
:text |
텍스트 박스 양식을 선택합니다. |
선택자
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
//태그 선택자
// $("h1").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//클래스 선택자
// $(".list8").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//아이디 선택자
// $("#list2").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//그룹 선택자
// $("#list2, .list8").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//전체 선택자
// $("*").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//자손 선택자
// $(".list li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//child 선택자
// $(".list > li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//sibling 선택자
// $(".list3 + li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//siblings 선택자
// $(".list3 ~ li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//속성 선택자[name="value"]
// $("li[class='list4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//속성 선택자[name^="value"]
// $("li[class^='list4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//속성 선택자[name$="value"]
// $("li[class$='list4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//속성 선택자[name*="value"]
// $("li[class*='list4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//속성 선택자[name!="value"]
// $("li[class!='list4']").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//속성 선택자[name=="value"]
// $("li a[href] [title]").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//기본 필터 선택자 :eq(index)
// $("li:eq(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//기본 필터 선택자 :lt(index)
// $("li:lt(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//기본 필터 선택자 :gt(index)
// $("li:gt(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//기본 필터 선택자 :first
// $("li:first(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//기본 필터 선택자 :last
// $("li:last(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//기본 필터 선택자 :odd
// $("li:odd(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//기본 필터 선택자 :even
// $("li:even(3)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//기본 필터 선택자 :not
// $("li:not(:eq(4))").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//내용 필터 선택자 : contains
// $("li:contains('list4')").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//내용 필터 선택자 : empty
// $("li:empty('list4')").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//내용 필터 선택자 : parent
// $("li:parent('list4')").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//내용 필터 선택자 : has()
// $("li:has('li')").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//보임 필터 선택자 : hidden
// $("li:hidden").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//보임 필터 선택자 : visible
// $("li:visible").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//자식 필터 선택자 :
// $("li:first-child").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
// $("li:first").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
// $("li:last-child").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
// $("li:last").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
// $("li:nth-child(4)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
// $("li:nth-child(even)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
// $("li:nth-child(odd)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
// $("li:nth-child(4n)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
// $("li:nth-child(4n+2)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
});
</script>
</head>
<body>
<h1>jQuery</h1>
<div id="sample">
<ul id="list1" class="list">
<li class="list1"><a href="#list2">list1</a></li>
<li class="list2"><a href="http://naver.com">list2</a></li>
<li class="list3"><a href="http://www.daum.net">list3</a></li>
<li class="list4"><a href="http://leehun.dothome.co.kr" title="사이트">list4</a></li>
<li class="list5">list5</li>
<li class="list6">list6</li>
<li class="list7">list7</li>
<li class="list8">list8</li>
<li class="list9">list9</li>
<li class="list10">list10</li>
</ul>
<ul id="list2" class="list">
<li class="list1">list1</li>
<li class="list2">list2</li>
<li class="list3">list3</li>
<li class="list4">list4</li>
<li class="list5"></li>
<li class="list6">list6</li>
<li class="list7">list7</li>
<li class="list8">list8</li>
<li class="list9">list9</li>
<li class="list10">list10
<ul>
<li>list10-1</li>
<li style="width:0; height:0; overflow:hidden;">list10-2</li>
<li style="opacity:0;">list10-3</li>
<li style="visibility:hidden;">list10-4</li>
<li style="display:none;">list10-5</li>
<li>list10-6</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
탐색
제이쿼리의 선택자를 기준으로 선택한 요소 중 원하는 요소를 다시 한번 더 선택할 수 있는 탐색과 관련된 제이쿼리 메서드입니다.
트리구조 탐색
| 메서드 | 설명 |
|---|---|
.children() |
선택한 요소의 모든 자식 요소를 선택합니다.(자손요소 포함안됨) |
.find() |
선택한 요소의 자손 요소 중 조건에 맞는 요소를 선택합니다. |
.next() |
선택한 요소의 다음 요소를 선택합니다. |
.nextAll() |
선택한 요소의 다음 모든 요소를 선택합니다. |
.parent() |
선택한 요소의 부모 요소를 선택합니다. |
.parents() |
선택한 요소의 모든 부모 요소를 선택합니다. |
.prev() |
선택한 요소의 이전 요소를 선택합니다. |
.prevAll() |
선택한 요소의 이전 모든 요소를 선택합니다. |
.closest() |
선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다. |
.nextUntil() |
다음에 위치한 요소를 조건에 맞을 때까지 찾습니다. |
.parentsUntil() |
조건이 참이 될 때까지 부모 요소를 찾습니다. |
.prevUntil() |
이전에 위치한 요소를 조건에 맞을 때까지 찾습니다. |
.siblings() |
형제 요소를 모두 찾습니다. |
필터링
| 메서드 | 설명 |
|---|---|
.eq() |
인덱스 번호에 해당하는 요소를 찾습니다. |
.filter() |
선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다. |
.first() |
선택된 요소 집합에서 첫번째 자식 요소를 찾습니다. |
.has() |
선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다. |
.is() |
문서 객체의 특징을 판별합니다. |
.last() |
선택된 노드 집합에서 마지막 자식 요소를 찾습니다. |
.map() |
대상이 되는 요소 집합의 배열을 새롭게 변경합니다. |
.not() |
조건에 맞지 않은 것들만 찾아서 선택합니다. |
.slice() |
선택된 집합을 조건의 범위로 재선택해줍니다. |
필터링View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
//$(".list li:eq(2)").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list li").eq(2).css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list li").first().css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list li:first()").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list li").last().css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list li:last").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list li").filter(".list5").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list li").has ("li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list").children ("li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list").find ("li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list4").prev ("li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list4").prevAll ("li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list4").next ("li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list4").nextAll ("li").css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list4").siblings ().css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
//$(".list4").parent ().css({"backgroundColor":"#bbdefb" , "border":"2px dashed #303f9f"});
});
</script>
</head>
<body>
<h1>jQuery</h1>
<div id="sample">
<ul id="list1" class="list">
<li class="list1"><a href="#list2">list1</a></li>
<li class="list2"><a href="http://naver.com">list2</a></li>
<li class="list3"><a href="http://www.daum.net">list3</a></li>
<li class="list4"><a href="http://leehun.dothome.co.kr" title="사이트">list4</a></li>
<li class="list5">list5</li>
<li class="list6">list6</li>
<li class="list7">list7</li>
<li class="list8">list8</li>
<li class="list9">list9</li>
<li class="list10">list10</li>
</ul>
<ul id="list2" class="list">
<li class="list1">list1</li>
<li class="list2">list2</li>
<li class="list3">list3</li>
<li class="list4">list4</li>
<li class="list5"></li>
<li class="list6">list6</li>
<li class="list7">list7</li>
<li class="list8">list8</li>
<li class="list9">list9</li>
<li class="list10">list10
<ul>
<li>list10-1</li>
<li style="width:0; height:0; overflow:hidden;">list10-2</li>
<li style="opacity:0;">list10-3</li>
<li style="visibility:hidden;">list10-4</li>
<li style="display:none;">list10-5</li>
<li>list10-6</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
속성
Attributes
| 메서드 | 설명 |
|---|---|
.attr() |
새로운 속성을 생성하거나 기존의 속성을 변경할 때 사용합니다. |
.prop() |
선택한 요소에 속성을 반환, 생성, 변환 할 때 상요합니다. |
.removeAttr() |
선택한 요소에서 기존의 속성을 삭제합니다. |
.removeProp() |
선택한 요소에서 기존의 속성을 삭제합니다. |
.val() |
입력 요소에 있는 속성 값을 불러오거나 변경 할 때 사용합니다. |
.attr
attr() 메서드는 요소의 속성 값을 설정하거나 반환합니다.
.attr() 속성 값 가져오기view
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Attr</title>
</head>
<body>
<h1>.attr</h1>
<a href="#" title="얼굴이미지" id="face" class="face1">
<img src="assets/img/face1.png" alt="얼굴">
</a>
<h2>a의 속성 값</h2>
<ul>
<li>title : <span class="a1">0</span></li>
<li>id : <span class="a2">0</span></li>
<li>class : <span class="a3">0</span></li>
<li>img alt : <span class="a4">0</span></li>
<li>img src : <span class="a5">0</span></li>
</ul>
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script>
var title = $("#face").attr("title"); //#face의 title 속성 값을 변수 title에 저장
var id = $("#face").attr("id"); //#face의 id 속성 값을 변수 id에 저장
var cl = $("#face").attr("class"); //#face의 class 속성 값을 변수 cl에 저장
var alt = $("#face img").attr("alt");
var src = $("#face img").attr("src");
$(".a1").text(title); //.a1 span 영역에 변수 title 값을 넣어준 것입니다.
$(".a2").text(id); //.a2 span 영역에 변수 id 값을 넣어준 것입니다.
$(".a3").text(cl); //.a3 span 영역에 변수 cl 값을 넣어준 것입니다.
$(".a4").text(alt);
$(".a5").text(src);
</script>
</body>
</html>
.attr() 속성 값 변경하기view
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>.atter( )속성값 변경하기</h1>
<a href="#" title="얼굴 이미지" id="face" class="face1">
<img src="assets/img/face2.png" alt="얼굴">
</a>
<ul>
<li><span class="a1">width:100(클릭)</span></li>
<li><span class="a2">width:200(클릭)</span></li>
<li><span class="a3">width:300(클릭)</span></li>
<li><span class="a4">width:400(클릭)</span></li>
<li><span class="a5">width:500(클릭)</span></li>
</ul>
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script>
$("#face").attr({"title":"일러스트 얼굴","id":"face2"});
//a1을 클릭했을 때 img의 속성 width값, height값을 변경
$(".a1").click(function(){
$(".face1 > img").attr({"width":"100", "height":"100"});
});
$(".a2").click(function(){
$(".face1 > img").attr({"width":"200", "height":"300"});
});
$(".a3").click(function(){
$(".face1 > img").attr({"width":"300", "height":"300"});
});
$(".a4").click(function(){
$(".face1 > img").attr({"width":"400", "height":"400"});
});
$(".a5").click(function(){
$(".face1 > img").attr({"width":"500", "height":"500"});
});
</script>
</body>
</html>
atter( ) 속성을 이용한 탭메뉴 만들기View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Atter을 이용한 탭 메뉴 만들기</title>
<style>
* {padding: 0; margin: 0; }
li {list-style: none;}
a {text-decoration: none;}
#tab-menu {width: 350px; margin: 50px auto;}
.tab-btn ul {overflow: hidden; margin-bottom: 1px;}
.tab-btn li {float: left; width: 20%; text-align: center;}
.tab-btn li a {padding: 14px; display: block; background-color: #1e88e5; color: #fff; margin-right: 1px; }
.tab-btn li:last-child a (margin-right: 0;)
</style>
</head>
<body>
<div id="tab-menu">
<div class="tab-btn">
<ul>
<li><a href="#">Tab1</a></li>
<li><a href="#">Tab2</a></li>
<li><a href="#">Tab3</a></li>
<li><a href="#">Tab4</a></li>
<li><a href="#">Tab5</a></li>
</ul>
</div>
<div class="tab-cont">
<img src="assets/img/1.png" width="350" alt="이미지1">
</div>
</div>
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script>
//tab1번을 클릭하면 버튼 배경색을 빨간색으로 변경해주세요.
//$(".tab-btn ul li:eq(0)").click(function( ){
//$(".tab-btn ul li:eq(0) a").css("background","red" );
//});
var src = $(".tab-cont img").attr("src");
console.log(src);
$(".tab-btn ul li:eq(0)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/1.png", "alt": "이미지1"});
});
$(".tab-btn ul li:eq(1)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/2.png", "alt": "이미지2"});
});
$(".tab-btn ul li:eq(2)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/3.png", "alt": "이미지3"});
});
$(".tab-btn ul li:eq(3)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/4.png", "alt": "이미지4"});
});
$(".tab-btn ul li:eq(4)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/5.png", "alt": "이미지5"});
});
</script>
</body>
</html>
Offset
요소의 위치 값을 알아내는 메서드입니다.
| 메서드 | 설명 |
|---|---|
.offset() |
웹 문서를 기준으로 위치값을 읽어오며 left와 top의 속성을 통해 x축과 y축의 좌표를 알려줍니다. |
.position() |
기준점을 통해 선택한 요소의 위치값을 읽어오며, left와 top의 속성을 통해 x축과 y축의 좌표를 알려줍니다. |
.scrollLeft() |
브라우저 요소의 가로 스크롤 이동 값을 가져옵니다. |
.scrollTop() |
브라우저 요소의 세로 스크롤 이동 값을 가져옵니다. |
offset View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>offset</title>
<style>
*{padding: 0; margin: 0;}
body {width: 2000px; height: 4000px;}
#box{position: absolute; width: 100px; height: 100px; left: 50%; top: 50; background: #000;}
#info{position: fixed; left: 10px; top: 10px;}
</style>
</head>
<body>
<div id="info">
<span>offset().left =</span><span class="offset_left">0</span><br>
<span>offset().top =</span><span class="offset_top">0</span><br>
<span>position().left =</span><span class="position_left">0</span><br>
<span>position().top =</span><span class="position_top">0</span><br>
<span>scrollLeft =</span><span class="scroll_left">0</span><br>
<span>scrollTop =</span><span class="scroll_top">0</span><br>
</div>
<div id="box">Drag</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
//#box 요소에게 백그라운드 컬러를 #f06292를 적용하세요
//color : #fff, border-radius: 50% 적용
$("#box").css({
'backgroundColor':'#f06292',
'color':'#fff',
'borderRadius':'50%',
'textAlign':'center',
'lineHeight':'100px'
});
//$(".offser_left").text("offset( ).left");
//$("#info span:eq(0)").text();
// var tt = $("#info span:eq(0)").text( );
// $(".offset_left").text(tt);
$("#box").draggable({
drag:function(){
$('.offset_left').text($("#box").offset().left);
$('.offset_top').text($("#box").offset().top);
$('.position_left').text($("#box").position().left);
$('.position_top').text($("#box").position().top);
}
});
$(window).scroll(function(){
$(".scroll_left").text($(window).scrollLeft());
$(".scroll_top").text($(window).scrollTop());
});
</script>
</body>
</html>
Dimensions
| 메서드 | 설명 |
|---|---|
width() |
요소의 가로 크기를 반환하거나 변경합니다. |
height() |
요소의 세로 크기를 반환하거나 변경합니다. |
innerWidth() |
padding 값을 포함한 가로 크기를 반환하거나 변경합니다. |
innerHeight() |
padding 값을 포함한 세로 크기를 반환하거나 변경합니다. |
outerWidth(boolean) |
padding 값과 border 값을 포함한 가로 크기를 반환하거나 변경합니다. |
outerHeight(boolean) |
padding 값과 border 값을 포함한 세로 크기를 반환하거나 변경합니다. |
Dimensions
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Dimensions</title>
<style>
#box {margin: 10px; padding: 10px; border: 10px solid #ccc;}
</style>
</head>
<body>
<div id="box">
<span>박스의 width = </span><span id="width">0</span><br>
<span>박스의 height = </span><span id="height">0</span><br>
<span>박스의 innerWidth = </span><span id="innerWidth">0</span><br>
<span>박스의 innerHeight = </span><span id="innerHeight">0</span><br>
<span>박스의 outerWidth = </span><span id="outerWidth">0</span><br>
<span>박스의 outerHeight = </span><span id="outerHeight">0</span>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
//
$(window).resize(function(){
$("#width").text( $("#box").width());
$("#height").text( $("#box").height());
$("#innerWidth").text( $("#box").innerWidth());
$("#innerHeight").text( $("#box").innerHeight());
$("#outerWidth").text( $("#box").outerWidth());
$("#outerHeight").text( $("#box").outerHeight());
});
</script>
</body>
</html>
스타일
제이쿼리는 CSS 속성을 알아 낼 수도 있으며, 속성을 줄 수도 있습니다.
| 메서드 | 설명 |
|---|---|
.css() |
css() 요소 값을 알아낼 수도 있고, 설정도 할 수 있습니다. |
.addClass() |
특정한 클래스 요소를 추가 할 수 있습니다. |
.hasClass() |
특정한 클래스를 있는지를 찾을 수 있습니다. |
.removeClass() |
특정한 클래스를 요소에서 제거할 수 있습니다. |
.toggleClass() |
특정한 클래스의 추가 제거를 한번에 할 수 있습니다. |
.addclass( ) 속성을 이용한 탭메뉴 만들기View
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Attr을 이용한 탭 메뉴 만들기</title>
<style>
* {padding: 0; margin: 0;}
li {list-style: none;}
a {text-decoration: none;}
#tab-menu {width: 350px; margin: 50px auto;}
.tab-btn ul {overflow: hidden; margin-bottom: 1px;}
.tab-btn li {float: left; width: 20%; text-align: center;}
.tab-btn li a {padding: 14px; display: block; background-color: #1e88e5; color: #fff; margin-right: 1px;}
.tab-btn li:last-child a {margin-right: 0;}
#tabImg{width: 350px; height: 300px;}
#tabImg.img1 {background:url(assets/img/img01.png) no-repeat; background-size: 350px;}
#tabImg.img2 {background:url(assets/img/mavel1.png) no-repeat; background-size: 350px;}
#tabImg.img3 {background:url(assets/img/mavel2.png) no-repeat; background-size: 350px;}
#tabImg.img4 {background:url(assets/img/mavel3.png) no-repeat; background-size: 350px;}
#tabImg.img5 {background:url(assets/img/mavel1.png) no-repeat; background-size: 350px;}
</style>
</head>
<body>
<div id="tab-menu">
<div class="tab-btn">
<ul>
<li><a href="#">Tab1</a></li>
<li><a href="#">Tab2</a></li>
<li><a href="#">Tab3</a></li>
<li><a href="#">Tab4</a></li>
<li><a href="#">Tab5</a></li>
</ul>
</div>
<div class="tab-cont" id="tabImg"></div>
</div>
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$(".tab-btn ul li:eq(0)").click(function(){
$("#tabImg").removeClass().addClass("img1");
});
$(".tab-btn ul li:eq(1)").click(function(){
$("#tabImg").removeClass().addClass("img2");
});
$(".tab-btn ul li:eq(2)").click(function(){
$("#tabImg").removeClass().addClass("img3");
});
$(".tab-btn ul li:eq(3)").click(function(){
$("#tabImg").removeClass().addClass("img4");
});
$(".tab-btn ul li:eq(4)").click(function(){
$("#tabImg").removeClass().addClass("img5");
});
});
</script>
</body>
</html>
탭메뉴 만들기View
See the Pen Tab Menu by wognsl305 (@wognsl305) on CodePen.
햄버거 메뉴 만들기
See the Pen Menu - Hamburger Style1 by wognsl305 (@wognsl305) on CodePen.
변경
| 종류 | 설명 |
|---|---|
.clone() |
선택한 요소를 복사합니다. |
.unwrap() |
선택한 요소의 부모 요소를 삭제합니다. |
.wrap() |
선택한 요소에 새로운 요소를 추가합니다. |
.wrapAll() |
선택한 요소에 새로운 요소를 한꺼번에 추가합니다. |
.wrapInner() |
선택한 요소에 새로운 요소를 각각 추가합니다. |
.append() |
선택한 요소 마지막 위치에 새로운 요소를 추가합니다. |
.appendTo(target) |
선택한 요소(타겟) 마지막 위치에 새로운 요소를 추가합니다. |
.prepend() |
선택한 요소 처음 위치에 새로운 요소를 추가합니다. |
.prependTo(target) |
선택한 요소(타겟) 처음 위치에 새로운 요소를 추가합니다. |
.after() |
선택한 요소 다음 위치에 새로운 요소를 추가합니다. |
.before() |
선택한 요소 이전 위치에 새로운 요소를 추가합니다. |
.insertafter(target) |
선택한 요소(타겟) 다음 위치에 새로운 요소를 추가합니다. |
.insertbefore(target) |
선택한 요소(타겟) 이전 위치에 새로운 요소를 추가합니다. |
.empty() |
선택한 요소의 하위 내용들을 삭제합니다. |
.remove() |
선택한 요소를 삭제합니다. |
.replaceAll() |
선택한 요소를 새로운 요소로 바꿉니다. |
.replaceWidt() |
선택한 요소를 새로운 요소로 바꿉니다. |
.html() |
선택한 요소 내부의 html을 읽고 쓸 수 있습니다. |
.text() |
선택한 요소의 텍스트를 읽고 쓸 수 있습니다. |
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>append</title>
<script>
</script>
</head>
<body>
<h3>jquery</h3>
<div>
<ul class="list">
<li class="slist1">내용1</li>
<li class="slist2">내용2</li>
</ul>
<p class="plist1">데스크1</p>
<p class="plist2">데스크2</p>
<p class="plist3">데스크3</p>
<p class="plist4">데스크4</p>
</div>
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script>
// $(".list").append("<li>내용3</li>");
// $(".list").prepend("<li>내용0</li>");
// $("<li>내용3</li>").appendTo(".list");
// $("<li>내용0</li>").prependTo(".list");
// $(".slist1").before("<li>내용0</li>");
// $(".slist2").after("<li>내용3</li>");
// $("<li>내용0</li>").insertBefore(".slist1");
// $("<li>내용3</li>").insertAfter(".slist2");
$(".list").unwrap();
$(".plist1").wrap("<div />");
$("p").wrapAll("<div />");
$("li").wrapInner("<h4 />");
// $("h3").replaceWith("<h2>javascript</h2>");
$("h3").text("데스트");
$("h3").html("<em>데스트</em>");
$("h3").remove();
$(".list").empty();
</script>
</body>
</html>
.append()View
선택된 요소 내부 가장 뒤에 매개 변수로 전달되는 문자열 및 요소를 추가 해주는 함수입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>append()</title>
</head>
<body>
<button id="append">append</button>
<div id="container">
</div>
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script>
//버튼을 클릭하면 alert으로 "클릭했습니다." 출력
$("button").click(function(){
$("#container").append(fun1);
});
function fun1(){
var number = Math.ceil(Math.random()*9);
var img = "<img src='assets/img/"+number+".png' alt='' width='100'>";
return img;
}
</script>
</body>
</html>
효과
Effect
| 메서드 | 설명 |
|---|---|
.hide() |
선택 한 요소를 숨김니다. |
.show() |
숨겨져 있던 요소를 보여줍니다. |
.toggle() |
숨겨져 있던 요소를 노출시키고, 노출되어 있던 요소는 숨깁니다. |
.fadeIn() |
opacity를 0에서 1로 전환하면서 서서히 나타나게 처리합니다. |
.fadeOut() |
opacity를 1에서 0으로 전환하면서, 서서히 사라지게 처리합니다. |
.fadeToggle() |
fldeIn()과 fadeOut()을 번갈아 가며 실행해줍니다. |
.fadeTo() |
불투명도를 지정하여 fode를 조절합니다. |
.slideDown() |
슬라이딩 스타일로 요소를 보이게 합니다. |
.slideUp |
슬라이딩 스타일로 요소를 숨기게 합니다. |
.slideToggle() |
slideDown()와 slideUp()을 반복하여 바꿔줍니다. |
.slideToggle()View
<!DOCTYPE html>
Animation
| 메서드 | 설명 |
|---|---|
.animate() |
선택한 요소에 애니메이션을 적용합니다. |
.stop() |
실행중인 애니메이션을 정지합니다. |
.delay() |
스택에 대기 중인 애니메이션 효과를 지연합니다. |
.queue() |
선택한 요소의 스택에 대기 중인 큐를 반환하거나 함수의 실행을 큐로 추가할 수 있습니다. |
.clearQueue() |
첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐를 모두 삭제합니다. |
.dequeue() |
스택에 쌓인 큐를 모두 제거합니다. |
.finish() |
선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 간 후 종료합니다. |
$(selector).animate(properties);
$(selector).animate(properties,duration);
$(selector).animate(properties,duration,easing);
$(selector).animate(properties,duration,easing,collback);
properties : border, margin, padding, hegiht, width, font-size, bottom, left, right, top, line-height(background-color X)
$(selector).animate(properties,duration);
$(selector).animate(properties,duration,easing);
$(selector).animate(properties,duration,easing,collback);
properties : border, margin, padding, hegiht, width, font-size, bottom, left, right, top, line-height(background-color X)
//폰트 사이즈를 현재 크기에서 20px로 변경하면서 2초동안 애니메이션 합니다.
$("selector").animate({"font-size":"20px"},2000);
$("selector").animate({fontSize:"20px"},2000);
//선택한 요소의 왼쪽, 오른쪽 margin을 100px로 변경하면서 600밀리세컨드동안 애니메이션 합니다.
$("selector").animate({"margin-left":"100px","margin-right":"100px"},600);
$("selector").animate({marginLeft:100,marginRight:100},"slow");
//선택한 요소의 현재 위치를 기준으로 2초마다 오른쪽으로 20px만큼 애니메이션 합니다.
$("selector").animate({left:"+20"},2000); //선택한 요소의 현재 위치를 기준으로 2초마다 오른쪽으로 20px만큼 애니메이션 하고, 콜백함수를 호출합니다.
$("selector").animate({left:"+20"},2000,function());
$("selector").animate({"font-size":"20px"},2000);
$("selector").animate({fontSize:"20px"},2000);
//선택한 요소의 왼쪽, 오른쪽 margin을 100px로 변경하면서 600밀리세컨드동안 애니메이션 합니다.
$("selector").animate({"margin-left":"100px","margin-right":"100px"},600);
$("selector").animate({marginLeft:100,marginRight:100},"slow");
//선택한 요소의 현재 위치를 기준으로 2초마다 오른쪽으로 20px만큼 애니메이션 합니다.
$("selector").animate({left:"+20"},2000); //선택한 요소의 현재 위치를 기준으로 2초마다 오른쪽으로 20px만큼 애니메이션 하고, 콜백함수를 호출합니다.
$("selector").animate({left:"+20"},2000,function());
.animation()View
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
#box {
width: 70px; height: 70px;
background: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%); border-radius: 50%;
position: absolute; left: 50%; top: 50%;
margin-left: -35px; margin-right: -35px;
}
.btn1 {
position: relative; z-index: 1000;
}
</style>
</head>
<body>
<button class="btn1">Color</button>
<button class="btn2">btn2</button>
<button class="btn3">BTN3</button>
<button class="btn4">BTN4</button>
<button class="btn5">BTN5</button>
<button class="btn6">BTN6</button>
<button class="btn7">BTN7</button>
<button class="btn8">BTN8</button>
<button class="btn9">BTN9</button>
<button class="btn10">BTN10</button>
<button class="btn11">loop</button>
<button class="btn12">lp</button>
<div id="box"></div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
//btn1을 클릭하면 box의 백그라운드 색을 빨간색으로 변경해주세요!
$(".btn1").click(function(){
$("#box").css("background","red");
});
//btn2을 클릭하면 box의 크기를 두배로 변경해주세요!
$(".btn2").click(function(){
$("#box").css({"width":"140px","height":"140px"});
});
//btn3을 클릭하면 box의 크기를 2배로 애니메이션 해주세요!
$(".btn3").click(function(){
$("#box").animate({"width":"140px","height":"140px"},600);
});
//btn4을 클릭하면 box를 사라지게 해주세요!
$(".btn4").click(function(){
// $("#box").css("display","none");
// $("#box").hide();
$("#box").fadeOut();
// $("#box").slideUp();
});
//55555555
$(".btn5").click(function( ){
//$("#box").slideToggle( );
//$("#box").fadeToggle( );
$("#box").toggleClass("on" );
if($("#box").hasClass("on")){
$("#box").hide();
}else{
$("#box").show( );
}
});
//btn6을 클릭하면 box 밑으로 이동시켜 주세요!
$(".btn6").click(function(){
$("#box").animate({"margin-top":"400px"},200);
});
//btn7을 변경해주세요!
$(".btn7").click(function(){
$("#box").animate({"margin-top":"400px"},200);
$("#box").animate({"margin-left":"400px"},200);
$("#box").animate({"margin-top":"0px"},200);
$("#box").animate({"margin-left":"0px"},200);
});
//btn8
$(".btn8").click(function(){
$("#box").animate({left:"+=20px"});
});
//9
$(".btn9").click(function(){
$("#box").animate({height:"toggle"});
});
//10
$(".btn10").click(function(){
$("#box").animate({height:"100px","border-radius":"100%", opacity:"0.4"},"slow");
$("#box").animate({width:"100px", "border-radius":"100%",opacity:"0.8"},"slow");
$("#box").animate({height:"70px", "border-radius":"50%",opacity:"0.4"},"slow");
$("#box").animate({width:"70px", "border-radius":"50%",opacity:"0.8"},"slow");
});
//11
$(".btn11").click(function(){
loop();
});
function loop(){
$("#box")
.css({"width":"200","height":"200"})
.animate({marginTop:100},1000)
.animate({marginLeft:100},1000,)
.animate({marginTop:0},1000)
.animate({marginLeft:0},1000,loop);
};
$(".btn12").click(function(){
setInterval(time,4000);
});
function time(){
$("#box")
.animate({opacity: "0.1"},1200)
.animate({opacity: "1"},1200)
.slideUp("slow")
.slideDown("fast");
};
time();
</script>
</body>
</html>
이벤트
브라우저에서 사용자가 취하는 모든 동작을 이벤트라고 합니다. 마우스로 클릭을 하거나 마우스를 오버하는 행위가 이벤트에 해당되며, 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 합니다.
이벤트 핸들러
| 메서드 | 설명 |
|---|---|
.bind() |
선택한 요소에 한 개 이상의 이벤트를 등록할 수 있다. |
.unbind() |
선택한 요소에 한 개 이상의 이벤트를 제거합니다. |
.delegate() |
선택한 요소에 지정한 하위 요소에 이벤트를 등록합니다. |
.undelegate() |
선택한 요소에 한 개 이상의 이벤트를 제거합니다. |
.on() |
선택한 요소에 이벤트를 등록합니다. |
.off() |
선택한 요소에 이벤트를 제거합니다. |
.one() |
선택한 요소에 이벤트를 한번만 등록합니다. |
.triggle() |
선택한 요소에 이벤트를 수동으로 발생합니다. |
마우스 이벤트
| 메서드 | 설명 |
|---|---|
.click() |
선택한 요소에 클릭 했을때 이벤트가 발생합니다. |
.dblclick() |
선택한 요소에 더블클릭 했을때 이벤트가 발생합니다. |
.hover() |
선택한 요소에 마우스를 올렸을 때와 벗어 낫을 때 각각 이벤트가 발생합니다. |
.mousedown() |
선택한 요소에 마우스 버튼을 눌렀을 때 이벤트가 발생합니다. |
.mouseout() |
선택한 요소에 마우스가 벗어 났을 때 이벤트가 발생합니다. |
.mouseup() |
선택한 요소에 마우스를 눌렀을 때 이벤트가 발생합니다. |
.mousehover() |
선택한 요소에 마우스를 올렸을 때 이벤트가 발생합니다. |
.mouseenter() |
선택한 요소에 범위 내에서 마우스를 올렸을 때 이벤트가 발생합니다. |
.mouseleave() |
선택한 요소에 범위 내에서 마우스를 벗어 났을 때 이벤트가 발생합니다. |
.mousemove() |
선택한 요소에 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다. |
See the Pen RBaQGb by wognsl305 (@wognsl305) on CodePen.
See the Pen Mouse Hover Image Change by wognsl305 (@wognsl305) on CodePen.
See the Pen Image Effect by wognsl305 (@wognsl305) on CodePen.
입력양식 이벤트
| 메서드 | 설명 |
|---|---|
.blur() |
선택한 요소에 포커스가 떠날 때 이벤트가 발생합니다. |
.change() |
선택한 요소에 값이 변경될 때 이벤트가 발생합니다. |
.focusin() |
선택한 요소에 포커스를 획득했을 때 이벤트가 발생합니다. |
.focusout() |
선택한 요소에 포커스가 사라졌을 때 이벤트가 발생합니다. |
.select() |
입력 양식 텍스트를 선택했을 때 이벤트가 발생합니다. |
.submit() |
전송 버튼을 눌렀을 때 이벤트가 발생합니다. |
.reset() |
reset 버튼을 누르면 이벤트가 발생합니다. |
키보드 이벤트
| 메서드 | 설명 |
|---|---|
.keydown() |
선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다. |
.keypress() |
선택한 요소에서 키보드를 계속 누르고 있을 때 이벤트가 발생합니다. |
.keyup() |
선택한 요소에서 키보드를 눌렀다가 떼었을 때에 이벤트가 발생합니다. |
웹브라우저 이벤트
| 메서드 | 설명 |
|---|---|
.resize() |
웹 브라우저의 사이즈 변화가 있을 때에 이벤트가 발생합니다. |
.scroll() |
웹 브라우저의 스크롤 변화가 있을 때에 이벤트가 발생합니다. |
.ready() |
해당 페이지가 로딩 되었을 때 이벤트가 발생합니다. |
.load() |
문서를 불러 들일 때 이벤트가 발생합니다. |
.error() |
해당 페이지가 에러가 있을 때 이벤트가 발생합니다. |
.index() |
이벤트가 발생한 요소의 인덱스 값을 반환합니다. |
이벤트 객체
| 메서드 | 설명 |
|---|---|
.clintX() |
document에서 스크롤 값을 제외하고 마우스의 X좌표 값을 알려줍니다. |
.clintY() |
document에서 스크롤 값을 제외하고 마우스의 Y좌표 값을 알려줍니다. |
.data() |
이벤트 생성이 매개변수 두 번째에 값을 넘겨주면, 이벤트 프로퍼티를 통해서 전달됩니다. |
.offsetX() |
이벤트 발생시 이벤트의 대상으로부터 마우스의 X좌표 값을 알려줍니다. |
.offsetY() |
이벤트 발생시 이벤트의 대상으로부터 마우스의 Y좌표 값을 알려줍니다. |
.pageX() |
document에서 스크롤 이동값을 포함한 마우스의 X좌표 값을 알려줍니다. |
.pageY() |
document에서 스크롤 이동값을 포함한 마우스의 Y좌표 값을 알려줍니다. |
.screenX() |
모니터 화면을 기분으로 마우스의 X좌표 값을 알려줍니다. |
.screenY() |
모니터 화면을 기분으로 마우스의 Y좌표 값을 알려줍니다. |
.target() |
이벤트가 발생한 요소를 알려줍니다. |