제이쿼리
제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어이다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성있게 사용할 수 있도록 만들어지는 다양한 함수의 집합을 의미한다.
제이쿼리는 HTML에 포함되어 있는 클라이언트 사이드 스크립트 언어를 단수화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리 입니다.
제이쿼리 장점
- 제이쿼리 Css를 쉽게 적용할 수 있다
- 제이쿼리 크로스브라우징을 지원합니다
- 제이쿼리 플러그인이 풍부합니다
- 제이쿼리는 코드를 적게, 효율적이게 작성 할 수 있습니다.
- 제이쿼리는 좋은 확장성이과 Ajax기능을 구현합니다.
제이쿼리를 사용하는 이유 view
<!DOCTYPE html>
<html lang="en">
<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>jQiery Sample</h3>
<div>
<ul id="list1" clss="list">
<li class="ont1">one1</li>
<li class="ont2">one2</li>
<li class="ont3">one3</li>
<li class="ont4">one4</li>
<li class="ont5">one5</li>
<li class="ont6">one6</li>
<li class="ont7">one7</li>
<li class="ont8">one8</li>
<li class="ont9">one9</li>
<li class="ont10">one10</li>
</ul>
<ul id="list2" clss="list">
<li class="ont1">one1</li>
<li class="ont2">one2</li>
<li class="ont3">one3</li>
<li class="ont4">one4</li>
<li class="ont5">one5</li>
<li class="ont6">one6</li>
<li class="ont7">one7</li>
<li class="ont8">one8</li>
<li class="ont9">one9</li>
<li class="ont10">one10</li>
</ul>
</div>
</body>
</html>
제이쿼리 사용 방법
jQuery(docuument).ready(funtion(){
});
$(docuument).ready(funtion(){
});
$(funtion(){
});
});
$(docuument).ready(funtion(){
});
$(funtion(){
});
선택자
기본 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| 태그 선택자 | $("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:0 (영역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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {color :red; font-size: 30px;}
</style>
<script src="assets/js/jquery-1.11.0.min.js"> </script>
<script>
$(document).ready(function(){
//태그 선택자
//$("h1").css({"backgroundColor":"#bbdefb","border":"2px dashed #303f9f"});
//클래스 선택자
//$(".list").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$='4']").css({"backgroundColor":"#bbdefb","border":"2px dashed #303f9f"});
//속성 선택자[name*="value"]
// $("li[class*='4']").css({"backgroundColor":"#bbdefb","border":"2px dashed #303f9f"});
//속성 선택자[name!="value"]
//$("li[class!='list4']").css({"backgroundColor":"#bbdefb","border":"2px dashed #303f9f"});
//속성 선택자[name="value"][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").css({"backgroundColor":"#bbdefb","border":"2px dashed #303f9f"});
//기본 필터 선택자:last
//$("li:last").css({"backgroundColor":"#bbdefb","border":"2px dashed #303f9f"});
//기본 필터 선택자:odd
//$("li:odd").css({"backgroundColor":"#bbdefb","border":"2px dashed #303f9f"});
//기본 필터 선택자:even
//$("li:even").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").css({"backgroundColor":"#bbdefb","border":"2px dashed #303f9f"});
//내용 필터 선택자 : parent
//$("li:parent").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"});
$("li:only-child").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://webstoryboy.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() |
선택된 집합을 조건의 범위로 재선택해줍니다. |
변경
| 종류 | 설명 |
|---|---|
.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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<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>
<script src="assets/js/jquery-1.11.0.min.js"> </script>
<script>
// $(".list").append("<li>내용3</li>");
// $(".list").prepend("<li>내용0</li>");
// $("<li>내용3</li>").appendTo(".list");
// $("<li>내용3</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();
$(".plist").wrap("<div />");
$(".p").wrapAll("<div />");
$("li").wrapInner("<h4 />");
// $("h3").replaceWith("<h2>javascript</h2>")
$("h3").text("데스트");
$("h3").html("데스트");
$("h3").remove();
$(".list").empty();
</script>
</div>
</body>
</html>
.append view
선택된 요소 내부가장 뒤에 매개 변수 전달되는 문자열 및 요소를 추가 해주는 함수
속성
Attributes
| 메서드 | 설명 |
|---|---|
.attr() |
새로운 속성을 생성하거나 기존의 속성을 변경할 때 사용합니다. |
.prop() |
선택한 요소에 속성을 반환, 생성, 변환 할 때 상요합니다. |
.removeAttr() |
선택한 요소에서 기존의 속성을 삭제합니다. |
.removeProp() |
선택한 요소에서 기존의 속성을 삭제합니다. |
.val() |
입력 요소에 있는 속성 값을 불러오거나 변경 할 때 사용합니다. |
.attr() 속성 값 가져오기 View
<!DOCTYPE html>
<html lang="en">
<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 alt : <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 속성 값을 변수 tilte 저장
var id = $("#face").attr("id"); //#face의 id 속성 값을 변수 id 저장
var cl = $("#face").attr("class"); //#face의 class 속성 값을 변수 class 저장
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>.attr() 속성 값 변경하기</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":"200" });
});
$(".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>
.attr() 속성을 이용한 탭메뉴 만들기 View
<!DOCTYPE html>
<html lang="en">
<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;}
</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/img01.png" width="350" alt="이미지1">
</div>
</div>
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script>
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/img01.png","alt":"이미지1"});
});
$(".tab-btn ul li:eq(1)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/img02.png","alt":"이미지2"});
});
$(".tab-btn ul li:eq(2)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/img03.png","alt":"이미지3"});
});
$(".tab-btn ul li:eq(3)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/img04.png","alt":"이미지4"});
});
$(".tab-btn ul li:eq(4)").click(function(){
$(".tab-cont > img").attr({"src":"assets/img/img05.png","alt":"이미지5"});
});
</script>
</body>
</html>
Offset
요소의 위치 값을 알아내는 메서드입니다.
| 메서드 | 설명 |
|---|---|
.offset() |
웹 문서를 기준으로 위치값을 읽어오며 left와 top의 속성을 통해 x축과 y축의 좌표를 알려줍니다. |
.position() |
기준점을 통해 선택한 요소의 위치값을 읽어오며, left와 top의 속성을 통해 x축과 y축의 좌표를 알려줍니다. |
.scrollLeft() |
브라우저 요소의 가로 스크롤 이동 값을 가져옵니다. |
.scrollTop() |
브라우저 요소의 세로 스크롤 이동 값을 가져옵니다. |
offset View
<!DOCTYPE html>
DimensionsView
| 메서드 | 설명 |
|---|---|
width() |
요소의 가로 크기를 반환하거나 변경합니다. |
height() |
요소의 세로 크기를 반환하거나 변경합니다. |
innerWidth() |
padding 값을 포함한 가로 크기를 반환하거나 변경합니다. |
innerHeight() |
padding 값을 포함한 세로 크기를 반환하거나 변경합니다. |
outerWidth(boolean) |
padding 값과 border 값을 포함한 가로 크기를 반환하거나 변경합니다. |
outerHeight(boolean) |
padding 값과 border 값을 포함한 세로 크기를 반환하거나 변경합니다. |
<!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><br>
</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() |
css() 요소 값을 알아낼 수도 있고, 설정도 할 수 있습니다. |
.addClass() |
특정한 클래스 요소를 추가 할 수 있습니다. |
.hasClass() |
특정한 클래스를 있는지를 찾을 수 있습니다. |
.removeClass() |
특정한 클래스를 요소에서 제거할 수 있습니다. |
.toggleClass() |
특정한 클래스의 추가 제거를 한번에 할 수 있습니다. |
addClass()
.addClass() 속성을 이용한 tap메뉴 만들기 view
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>addClass</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: #ec407a; 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/ad.png) no-repeat; background-size: 350px;}
#tabImg.img2 {background: url(assets/img/ab.png) no-repeat; background-size: 350px;}
#tabImg.img3 {background: url(assets/img/ac.png) no-repeat; background-size: 350px;}
#tabImg.img4 {background: url(assets/img/ae.png) no-repeat; background-size: 350px;}
#tabImg.img5 {background: url(assets/img/af.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="img1" 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>
효과
Effect
| 메서드 | 설명 |
|---|---|
.hide() |
선택 한 요소를 숨김니다. |
.show() |
숨겨져 있던 요소를 보여줍니다. |
.toggle() |
숨겨져 있던 요소를 노출시키고, 노출되어 있던 요소는 숨깁니다. |
.fadeIn() |
opacity를 0에서 1로 전환하면서 서서히 나타나게 처리합니다. |
.fadeOut() |
opacity를 1에서 0으로 전환하면서, 서서히 사라지게 처리합니다. |
.fadeToggle() |
fldeIn()과 fadeOut()을 번갈아 가며 실행해줍니다. |
.fadeTo() |
불투명도를 지정하여 fode를 조절합니다. |
.slideDown() |
슬라이딩 스타일로 요소를 보이게 합니다. |
.slideUp |
슬라이딩 스타일로 요소를 숨기게 합니다. |
.slideToggle() |
slideDown()와 slideUp()을 반복하여 바꿔줍니다. |
.slideToggle()view
Animation
$(selector).animate(properties);
$(selector).animate(properties,duration);
$(selector).animate(properties,duration,easing);
$(selector).animate(properties,duration,easing,collback);
properties : border, margin, padding, hegite, width, font-size, bottom, left, right, top,line-height(background-colorX)
$(selector).animate(properties,duration);
$(selector).animate(properties,duration,easing);
$(selector).animate(properties,duration,easing,collback);
properties : border, margin, padding, hegite, width, font-size, bottom, left, right, top,line-height(background-colorX)
//폰트사이즈를 현재 크기에서 20px로 2초동안 애니메이션 합니다.
$(selector).animate({"font-size":"20px"},2000);
$(selector).animate({"fontSize":"20px"},2000);
//선택한 요소의 왼쪽, 오른쪽 마진을 100px로 변경하면서 600 밀리세컨드 동안 애니메이션 합니다.
$(selector).animate({"marginLeft":"100px","marginRight":"100px"},600);
$(selector).animate({"marginLeft":100,"marginRight":100},"slow");
//선택한 요소에 현제 위치를 기준으로 2초마다 오른쪽으로 20px 만큼 이동하는 애니메이션 합니다.
$(selector).animate({left:"+=20"},2000)
//선택한 요소에 현제 위치를 기준으로 2초마다 오른쪽으로 20px 만큼 이동하는 애니메이션 하고. 콜백함수를 호출 합니다.
$(selector).animate({"font-size":"20px"},2000);
$(selector).animate({"fontSize":"20px"},2000);
//선택한 요소의 왼쪽, 오른쪽 마진을 100px로 변경하면서 600 밀리세컨드 동안 애니메이션 합니다.
$(selector).animate({"marginLeft":"100px","marginRight":"100px"},600);
$(selector).animate({"marginLeft":100,"marginRight":100},"slow");
//선택한 요소에 현제 위치를 기준으로 2초마다 오른쪽으로 20px 만큼 이동하는 애니메이션 합니다.
$(selector).animate({left:"+=20"},2000)
//선택한 요소에 현제 위치를 기준으로 2초마다 오른쪽으로 20px 만큼 이동하는 애니메이션 하고. 콜백함수를 호출 합니다.
| 메서드 | 설명 |
|---|---|
.animate() |
선택한 요소에 애니메이션을 적용합니다. |
.stop() |
실행중인 애니메이션을 정지합니다. |
.delay() |
스택에 대기 중인 애니메이션 효과를 지연합니다. |
.queue() |
선택한 요소의 스택에 대기 중인 큐를 반환하거나 함수의 실행을 큐로 추가할 수 있습니다. |
.clearQueue() |
첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐를 모두 삭제합니다. |
.dequeue() |
스택에 쌓인 큐를 모두 제거합니다. |
.finish() |
선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 간 후 종료합니다. |
Animationview
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
#box {
width: 70px; height: 70px;
background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
border-radius: 50%;
position: absolute; left: 50%; top: 50%;
margin-left: -35px; margin-top: -35px;
}
button {
position: relative;
z-index: 1000;
}
</style>
</head>
<body>
<button class="btn1">Color</button>
<button class="btn2">Width</button>
<button class="btn3">Width</button>
<button class="btn4">hide</button>
<button class="btn5">hide</button>
<button class="btn6">top</button>
<button class="btn7">top</button>
<button class="btn8">top</button>
<button class="btn9">top</button>
<button class="btn10">top</button>
<button class="btn11">loop</button>
<button class="btn12">loop</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":"140","height":"140"});
});
//btn3을 클릭하면 box의 크기를 두배로 애니메이션
$(".btn3").click(function(){
$("#box").animate({"width":"140","height":"140"},600);
});
//btn4을 클릭하면 box를 사라지게 (4가지)
$(".btn4").click(function(){
//$("#box").css("display","none");
//$("#box").hide();
$("#box").fadeOut();
//$("#box").slideUp();
});
//btn5을 클릭하면 box를 사라지고 한번 더 클릭하면 나타나게 (4가지)
$(".btn5").click(function(){
//$("#box").toggle();
//$("#box").fadeToggle();
//$("#box").slideToggle();
$("#box").toggleClass("on");
if( $("#box").hasClass("on") ){
$("#box").hide();
} else {
$("#box").show();
}
});
//btn6을 클릭하면 box를 밑으로 이동
$(".btn6").click(function(){
$("#box").animate({ "margin-top":"400px" },200);
});
$(".btn7").click(function(){
$("#box").animate({ "margin-top":"400px" },200);
$("#box").animate({ "margin-left":"400px" },200);
$("#box").animate({ "margin-top":"0" },200);
$("#box").animate({ "margin-left":"0" },200);
});
$(".btn8").click(function(){
$("#box").animate({ "left":"+=20px" });
});
$(".btn9").click(function(){
$("#box").animate({ "height":"toggle" });
});
$(".btn10").click(function(){
$("#box").animate({ height:"100px", opacity:"0.4" },"slow");
$("#box").animate({ width:"100px", opacity:"0.8" },"slow");
$("#box").animate({ height:"70px", opacity:"0.4" },"slow");
$("#box").animate({ width:"70px", opacity:"0.8" },"slow");
});
$(".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() |
선택한 요소에 마우스를 눌렀을 때 이벤트가 발생합니다. |
.mouseover() |
선택한 요소에 마우스를 올렸을 때 이벤트가 발생합니다. |
.mouseenter() |
선택한 요소에 범위 내에서 마우스를 올렸을 때 이벤트가 발생합니다. |
.mouseleave() |
선택한 요소에 범위 내에서 마우스를 벗어 났을 때 이벤트가 발생합니다. |
.mousemove() |
선택한 요소에 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다. |
See the Pen Mouse Event by ilim1908 (@ilim1908) 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() |
이벤트가 발생한 요소를 알려줍니다. |