제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 제이쿼리는 HTML에 포함되어 있는 클라이언트 사이트 스크립트 언어를 단순화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 함수의 집합을 의미합니다.
제이쿼리 언어의 특징
- 제이쿼리는 CSS를 쉽게 적용할 수 있습니다.
- 제이쿼리는 크로스브라우징을 지원합니다.
- 제이쿼리는 플러그인이 풍부합니다.
- 제이쿼리는 코드를 적게, 효율적으로 작성할 수 있습니다.
- 제이쿼리는 좋은 확장서과 ajax 기능을 구현합니다.
제이쿼리 사용방법
jQuery 라이브러리는 jQuery 공식사이트
다운 받아서 사용하는 방법 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 제이쿼리 3.x 버전 -->
<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
<!-- 제이쿼리 2.x 버전 -->
<script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"></script>
<!-- 제이쿼리 1.x 버전 -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js.js"></script>
<!-- 제이쿼리 UI 버전 -->
<script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
</head>
<body>
</body>
</html>
구글 CDM(Content Delivery Network) 사용하는 방법 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 제이쿼리 3.x 버전 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 제이쿼리 2.x 버전 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- 제이쿼리 1.x 버전 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 제이쿼리 UI 버전 -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- head 안에 사용하는 방법 -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js.js"></script>
<script type="text/javascript">
//제이쿼리 사용 영역
</script>
</head>
<body>
<!-- body 안에 사용하는 방법 -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js.js"></script>
<script type="text/javascript">
//제이쿼리 사용 영역
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 제이쿼리 사용 준비 -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//실행 코드
});
</script>
<!-- jQuery 키워드를 $로 치환-->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//실행 코드
});
</script>
<!-- 단축해서 사용 -->
<script type="text/javascript">
$(fuction(){
//실행코드
});
</script>
<!-- 자바스크립트 사용 준비 -->
<script type="text/javascript">
window.onload = function(){
//실행 코드
};
</script>
</head>
<body>
</body>
</html>
제이쿼리를 사용하는 이유 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Jquery</title>
<style>
/* CSS : 첫번째 리스트 색을 변경 */
#list1 li {color: #F00;}
</style>
<script type="text/javascript">
//자바스크립트 : 두번째 리스트 색을 변경
window.onload = function(){
var list2 = document.getElementById("list2"); //#list2 찾아서 변수에 할당
var liList = list2.getElementsByTagName("li"); //list2에서 li 태그를 찾아 변수에 할당
for(var i = 0; i < liList.length; i++){ //li태그를 하나씩 접근해서
var li = liList[i]; //배열로 할당해서 변수에 저장
li.style.color = "#0f0";
}
};
</script>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
//제이쿼리 : 세번째 리스트 색을 변경
$(document).ready(function(){
$("#list3 li").css("color","#00f");
});
</script>
</head>
<body>
<h1>jquery</h1>
<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>
<ul id="list3" 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>
<!-- script -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
| 종류 |
예시 |
설명 |
| 태그 선택자 |
$("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와 반대로 요소에 텍스트가 존재할 때에 선택됩니다. |
| 종류 |
설명 |
:hidden |
보이지 않는 요소를 선택합니다. |
:visible |
보이는 요소를 선택합니다. |
컨텐츠를 보이지 않게 하는 방법
- display:none
- opacity:0;
- visibility:hidden
- width:0; height:0;
- form 요소 중에 type="hidden"
- 부모요소가 보이지 않거나 숨겨져 있을 때
visibility : hidden이나 opacity:0; 은 위치가 제거되지 않았기 때문에 : hidden 선택자에게 선택되지 않습니다.
| 종류 |
설명 |
:first-child |
첫 번째 자식 요소를 선택합니다. |
:first-of-type |
자식 중 첫 번째 유형의 자식요소를 선택합니다. |
:last-child |
마지막 번째 자식 요소를 선택합니다. |
:last-of-type |
자식 중 마지막 번째 유형의 자식요소를 선택합니다. |
:nth-child(index) |
index번째에 있는 자식 요소를 선택합니다. |
:nth-child(even) |
짝수번째에 있는 자식 요소를 선택합니다. |
:nth-child(odd) |
홀수번째에 있는 자식 요소를 선택합니다. |
:nth-child(2n) |
2배수 번째에 있는 자식 요소를 선택합니다. |
:nth-child(2n+1) |
2배수+1 번째에 있는 자식 요소를 선택합니다. |
:nth-last-child(index) |
index 번째에 있는 마지막 자식 요소를 선택합니다. |
:nth-last-child(index) |
index 번째에 있는 마지막 자식 요소를 선택합니다. |
:nth-last-of-type(index) |
index 번째에 있는 마지막 유형의 자식 요소를 선택합니다. |
:only-child |
자식 요소가 오직 하나인 요소를 선택합니다. |
:only-child-type |
자식 요소가 오직 하나 유형인 요소를 선택합니다. |
| 종류 |
설명 |
:input |
모든 입력 양식을 선택합니다. |
:file |
파일 업로드 양식을 선택합니다. |
:hidden |
숨겨진 입력 양식을 선택합니다. |
:image |
이미지 입력 양식을 선택합니다. |
:password |
암호 입력 양식을 선택합니다. |
:radio |
라디오 버튼 입력 양식을 선택합니다. |
:reset |
리셋 입력 양식을 선택합니다. |
:submit |
데이터 보내기 입력 양식을 선택합니다. |
:text |
텍스트 박스 양식을 선택합니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 1px;}
</style>
</head>
<body>
<h1>jquery</h1>
<div id="sample">
<ul id="list1" class="list">
<li class="one1"><a href="#list3">one1</a></li>
<li class="one2"><a href="https://www.naver.com">one2</a><a href="#"></a></li>
<li class="one3"><a href="https://www.daum.net">one3</a></li>
<li class="one4"><a href="http://jeongah2651.dothome.co.kr" target="_blank">one4</a></li>
<li class="one5"><a href="#">one5</a></li>
<li class="one6"><a href="#">one6</a></li>
<li class="one7"><a href="#">one7</a></li>
<li class="one8"><a href="#">one8</a></li>
<li class="one9"><a href="#">one9</a></li>
<li class="one10"><a href="#">one10</a>
<ul>
<li>one10-1</li>
<li>one10-2</li>
<li>one10-3</li>
<li>one10-4</li>
<li>one10-5</li>
</ul>
</li>
</ul>
<ul id="list2" class="list">
<li class="one1"><a href="#list3">one1</a></li>
<li class="one2"><a href="https://www.naver.com">one2</a></li>
<li class="one3"><a href="https://www.daum.net">one3</a></li>
<li class="one4"><a href="http://jeongah2651.dothome.co.kr" target="_blank">one4</a></li>
<li class="one5"><a href="#">one5</a></li>
<li class="one6"><a href="#">one6</a></li>
<li class="one7"><a href="#">one7</a></li>
<li class="one8"><a href="#">one8</a></li>
<li class="one9"><a href="#">one9</a></li>
<li class="one10"><a href="#">one10</a>
<ul>
<li>one10-1</li>
<li>one10-2</li>
<li>one10-3</li>
<li>one10-4</li>
<li>one10-5</li>
</ul>
</li>
</ul>
<ul id="list3" class="list">
<li class="one1"><a href="#list3">one1</a></li>
<li class="one2"><a href="https://www.naver.com/">one2</a></li>
<li class="one3"><a href="https://www.daum.net/">one3</a></li>
<li class="one4"><a href="http://jeongah2651.dothome.co.kr/" target="_blank">one4</a></li>
<li class="one5"><a href="#">one5</a></li>
<li class="one6"><a href="#">one6</a></li>
<li class="one7"><a href="#"></a></li>
<li class="one8"><a href="#">one8</a></li>
<li class="one9"><a href="#">one9</a></li>
<li class="one10"><a href="#">one10</a>
<ul>
<li>one10-1</li>
<li style="width:0; height:0; overflow: hidden;">one10-2</li>
<li style="opacity:0">one10-3</li>
<li style="visibility:hidden">one10-4</li>
<li style="display: none">one10-5</li>
</ul>
</li>
</ul>
<ul>
<li class="one1"><a href="#list3">one1</a></li>
</ul>
</div>
<!-- script -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
// $("li").css("background-color","#bbdefb");
// $("li").css({"background-color":"#bbdefb", "border":"1px dashed #303f9f"});
//태그 선택자 :
// $("li").css({backgroundColor:"#bbdefb",border:"1px dashed #303f9f"});
// $(".one3").css({backgroundColor:"#bbdefb",border:"1px dashed #303f9f"});
// $("#list2").css({backgroundColor:"#bbdefb",border:"1px dashed #303f9f"});
// $("*").css({backgroundColor:"#bbdefb",border:"1px dashed #303f9f"});
// $(".one3,.one5").css({backgroundColor:"#bbdefb",border:"1px dashed #303f9f"});
//계층 선택자
// $(".list li").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $(".list > li ").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $(".one4 + li ").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $(".one4 ~ li ").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
//속성 선택자
// $("li a[href='#list3']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li a[href^='https']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li a[href$='com']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li a[href~='com']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li a[href*='jeongah2651']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li a[href|='jeongah2651']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li a[href!='https://www.naver.com']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li a[href][target]").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
//기본 필터 선택자
// $("li:eq(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li:gt(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li:lt(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $(":header").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li:first").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li:last").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li:odd").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li:even").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
//내용 필터 선택자
// $("li:contains('one5')").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li a:empty").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:parent").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:has(li)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
//보임 필터 선택자
// $("li:hidden").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:visible").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
//자식요소 필터 선택자
// $("li:first").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:first-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:last").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:last-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:nth-child(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:nth-child(even)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:nth-child(odd)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:nth-child(2n)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:nth-child(2n+1)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:nth-child(2n+4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $("li:only-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
</script>
</body>
</html>
탐색은 제이쿼리의 선택자를 기준으로 선택한 요소에서 원하는 요소를 다시 한번 선택하는 메서드입니다. 탐색은 트리구조와 필어 영역으로 나눌 수 있으며 역할과 성질은 선택자와 비슷합니다.
탐색(Traversing)
| 유형 |
메서드 |
설명 |
| 트리구조 탐색(Tree Traversal) |
.children() |
선택한 요소의 바로 아래 자식 요소만 선택합니다. |
| .closest() |
선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다. |
| .find()♥ |
선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다. |
| .next() |
선택한 요소를 다음 형제 요소를 선택합니다. |
| .nextAll() |
선택한 요소의 다음 모든 형제 요소를 선택합니다. |
| .nextUntil() |
선택한 요소의 다음 요소 중 조건에 맞을 때까지 찾아 선택합니다. |
| .parent() |
선택한 요소의 부모 요소를 선택합니다. |
| .parents() |
선택한 요소의 모든 부모 요소를 선택합니다. |
| .parentsUntill() |
선택한 요소의 모든 부모 요소 중 조건에 맞을 때까지 찾아 선택합니다. |
| .prev() |
선택한 요소의 이전 요소를 선택합니다. |
| .prevAll() |
선택한 요소의 모든 이전 요소를 선택합니다. |
| .prevUntil() |
선택한 요소의 모든 이전 요소를 중 조건에 맞을 때까지 찾아 선택합니다. |
| .siblings() |
선택한 요소의 형제 요소를 모두 선택합니다. |
| 필터링(Filtering) |
.eq(index) |
선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다. |
| .filter() |
선택한 요소에서 선택하거나 함수를 사용할 수 있습니다. |
| .first() |
선택한 요소에서 첫번째 자식을 선택합니다. |
| .has() |
선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다. |
| .is() |
선택한 요소 객체의 특징을 판별합니다. |
| .last() |
선택한 요소에서 마지막 번째 자식을 선택합니다. |
| .map() |
선택한 요소의 배열 집합을 새롭게 변경합니다. |
| .not() |
선택한 요소에서 조건에 맞지 않는 것을 선택합니다. |
| .slice() |
선택한 요소에서 조건의 범위로 재 선택합니다. |
| 기타(Miscellaneous) |
.add() |
선택한 요소에 새로운 요소를 추가합니다. |
| .addBack() |
선택한 요소의 상위 요소도 같이 선택합니다. |
| .contents() |
선택한 요소와 일치하는 콘텐츠 요소를 선택합니다. |
| .each()♥ |
선택한 요소들을 각각 순차적으로 실행합니다. |
| .end() |
선택한 요소의 필터링이 일어나기 이전의 요소를 선택합니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 3px;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color:black;}
.on {background-color: #bbdefb; border: 1px dashed #303f9f;}
.onRed { color:#c7254e; white-space:nowrap; background-color: #f9f2f4; border-bottom: 1px dashed #a51a3d;
border-radius: 4px;}
</style>
</head>
<body>
<h1>탐색 (Traversing)</h1>
<div class="choice">
<a href="#" class="off1">reset</a>
<a href="#" class="btn1">.children()</a>
<a href="#" class="btn2">.find()</a>
<a href="#" class="btn3">.next()</a>
<a href="#" class="btn4">.nextAll()</a>
<a href="#" class="btn5">.nextUntil()</a>
<a href="#" class="btn6">.prev()</a>
<a href="#" class="btn7">.prevAll()</a>
<a href="#" class="btn8">.prevUntil()</a>
<a href="#" class="btn9">.parent()</a>
<a href="#" class="btn10">.parents()</a>
<a href="#" class="btn11">.parentUntil()</a>
<a href="#" class="btn12">.siblings()</a>
<a href="#" class="btn13">.closest()</a>
<a href="#" class="btn14">"탐색" 단어 선택하기</a>
<a href="#" class="btn15">"선택자" 단어 선택하기</a>
</div>
<div class="list">
<ul>
<li class="select">트리구조 탐색 (Tree traversal)
<ul>
<li class="list1">.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.
<ul>
<li class="parent">여기는 두 번째 자식입니다.</li>
<li>여기는 두 번째 자식입니다.</li>
<li>여기는 두 번째 자식입니다.</li>
</ul>
</li>
<li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
<li>.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
<li class="until">.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
</ul>
</li>
<li class="select">필터링(Filtering)
<ul>
<li class="until2">.eq(index) : 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
<ul>
<li>여기는 두 번째 자식입니다.</li>
<li>여기는 두 번째 자식입니다.</li>
<li>여기는 두 번째 자식입니다.</li>
</ul>
</li>
<li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
<li class="list2">.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
</li>
</ul>
</div>
<p class="text">탐색은 제이쿼리의 선택자를 기준으로 선택한 요소에서 원하는 요소를 다시 한번 선택하는 메서드입니다.
탐색은 트리구조와 필어 영역으로 나눌 수 있으며 역할과 성질은 선택자와 비슷합니다.</p>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
$(".off1").click(function(){
$("*").removeClass("on");
$("*").removeClass("onRed");
});
$(".btn1").click(function(){
$(".list li").children().addClass("on");
});
$(".btn2").click(function(){
$(".list li").find("li").addClass("on");
});
$(".btn3").click(function(){
$(".list1").next().addClass("on");
});
$(".btn4").click(function(){
$(".list1").nextAll().addClass("on");
});
$(".btn5").click(function(){
$(".list1").nextUntil(".until").addClass("on");
});
$(".btn6").click(function(){
$(".list2").prev().addClass("on");
});
$(".btn7").click(function(){
$(".list2").prevAll().addClass("on");
});
$(".btn8").click(function(){
$(".list2").prevUntil(".until2").addClass("on");
});
$(".btn9").click(function(){
$(".parent").parent().addClass("on");
});
$(".btn10").click(function(){
$(".parent").parents().addClass("on");
});
$(".btn11").click(function(){
$(".parent").parentsUntil(".select").addClass("on");
});
$(".btn12").click(function(){
$(".parent").siblings().addClass("on");
});
$(".btn13").click(function(){
$(".list1").closest("li").addClass("on");
});
//텍스트를 span 요소로 감싼뒤 마우스 오버 효과를 줍니다.
var text = $(".until").text().split(" ").join("</span> <span>");
text = "<span>" + text + "</span>";
$(".until").html(text).find("span").hover(function(){
$(this).addClass("onRed");
}, function(){
$(this).removeClass("onRed");
});
//"탐색" 단어를 선택하여 효과 주기
var text2 = $(".text").text().split(" ").join("</span> <span>");
text2 = "<span>" + text2 + "</span>";
$(".btn14").click(function(){
$(".text").html(text2).find(":contains('탐색')").addClass("onRed")
});
//"선택자" 단어를 선택하여 효과 주기
$(".btn15").click(function(){
$(".text").html(text2).find(":contains('선택자')").addClass("onRed");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 3px;}
a {border: 2px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color:black; }
a.off1 { background: lightpink; font-size: 25px; color: #fff; font-weight: 600; border: 5px solid pink; }
.on {background-color: #bbdefb; border: 1px dashed #303f9f; }
.onRed { color:#c7254e; white-space:nowrap; background-color: #f9f2f4; border-bottom: 1px dashed #a51a3d;
border-radius: 4px;}
.select:before {content: 'select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space:nowrap; background-color: #e7f6fd; -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; border: 1px dashed #3d90b7;}
</style>
</head>
<body>
<h1>탐색 (Traversing)</h1>
<div class="choice">
<a href="#" class="off1">RESET</a>
<a href="#" class="btn1">.eq(2)</a>
<a href="#" class="btn2">.eq(-1)</a>
<a href="#" class="btn3">.filter(":even")</a>
<a href="#" class="btn4">.filter(".select")</a>
<a href="#" class="btn5">.first()</a>
<a href="#" class="btn6">.last()</a>
<a href="#" class="btn7">.has("ul")</a>
<a href="#" class="btn8">.has(".select")</a>
<a href="#" class="btn9">.is("li")</a>
<a href="#" class="btn10">.not(".select")</a>
<a href="#" class="btn11">.slice(2)</a>
<a href="#" class="btn12">.slice(2,4)</a>
<a href="#" class="btn13">.slice(-2)</a>
<a href="#" class="btn14">.slice(-2,-1)</a>
<a href="#" class="btn15">.last()</a>
<a href="#" class="btn16">.last()</a>
</div>
<div class="list">
<ul>
<li class="liList">트리구조 탐색 (Tree traversal)
<ul>
<li class="list1">.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.
</li>
<li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
<li class="select">.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
<li>.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
<li>.is() : 선택한 요소 객체의 특징을 판별합니다.</li>
<li>.last() : 선택한 요소에서 마지막 번째 자식을 선택합니다.</li>
</ul>
</li>
<li class="liList">필터링(Filtering)
<ul>
<li class="until2">.eq(index) : 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
<ul>
<li>여기는 두 번째 자식입니다.</li>
<li>여기는 두 번째 자식입니다.</li>
<li>여기는 두 번째 자식입니다.</li>
</ul>
</li>
<li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
<li class="list2">.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
</li>
</ul>
</div>
<p class="text">탐색은 제이쿼리의 선택자를 기준으로 선택한 요소에서 원하는 요소를 다시 한번 선택하는 메서드입니다.
탐색은 트리구조와 필어 영역으로 나눌 수 있으며 역할과 성질은 선택자와 비슷합니다.</p>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
//선택자를 이용해서 .children() 줄에 CSS 효과를 넣어주세요! (7가지 이상)
// $(".liList li:first").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $(".liList li:first-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $(".list1").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f", display:"block"});
// $(".list1:nth-child(1)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li[class='list1']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li[class^='list1']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li[class$='list1']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li[class*='list1']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $("li:eq(1)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $(".liList li:eq(0)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $(".liList li:contains(children())").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $(".liList li:first-of-type").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $(".liList li:nth-child(1)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
//선택자를 이용해서 .find() 줄에 CSS 효과를 넣어주세요! (10가지 이상)
// $(".liList li:nth-child(3)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $(".liList li:eq(2)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
// $(".liList li:contains('.find()')").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f",display:"block"});
$(".choice .off1").click(function(){
$("*").removeClass("on");
});
$(".choice .btn1").click(function(){
$(".liList li").eq(2).addClass("on");
});
$(".choice .btn2").click(function(){
$(".liList li").eq(-1).addClass("on");
});
$(".choice .btn3").click(function(){
$(".liList li").filter(":even").addClass("on");
});
$(".choice .btn4").click(function(){
$(".liList li").filter(".select").addClass("on");
});
$(".choice .btn5").click(function(){
$(".liList li").first().addClass("on");
});
$(".choice .btn6").click(function(){
$(".liList li").last().addClass("on");
});
$(".choice .btn7").click(function(){
$(".liList li").has("ul").addClass("on");
});
$(".choice .btn8").click(function(){ ////has : 앞에 클래스가 들어간 상위 박스를 앞에 써넣어야한다.
$(".list li").has(".select").addClass("on");
});
$(".choice .btn9").click(function(){
if($(".list li").is("li")){
$(".list li.select").addClass("on");
}
});
$(".choice .btn10").click(function(){
$(".list li").not(".select").addClass("on");
});
$(".choice .btn11").click(function(){
$(".list li").slice(2).addClass("on");
});
$(".choice .btn12").click(function(){
$(".list li").slice(2,4).addClass("on");
});
$(".choice .btn13").click(function(){
$(".list li").slice(-2).addClass("on");
});
$(".choice .btn14").click(function(){
$(".list li").slice(-2,-1).addClass("on");
});
</script>
</body>
</html>
<!DOCTYPE html>l;
<html lang="ko">l;
<head>l;
<meta charset="UTF-8">l;
<title>l;jQuery</title>l;
<style>l;
li {margin: 8px;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>l;
</head>l;
<body>l;
<h1>l;탐색(Traversing)</h1>l;
<div class="choice">l;
<a href="#" class="btn1">l;리스트을 클릭하면 strong 태그가 두개 있으면 파란색, 하나 있으면 빨간색으로 표현됩니다.</a>l;
<a href="#" class="btn2">l;클릭하면 li의 부모가 ul인지 확인합니다. </a>l;
<a href="#" class="btn3">l;클릭하면 li의 부모가 div인지 확인합니다. </a>l;
</div>l;
<div class="list">l;
<ul>l;
<li>l;.children() : 선택한 <strong>l;요소</strong>l;의 바로 아래 자식 <strong>l;요소</strong>l;만 선택합니다.</li>l;
<li>l;.closest() : 선택한 <strong>l;요소</strong>l;를 포함하면서 가장 가까운 상위 <strong>l;요소</strong>l;를 선택합니다.</li>l;
<li>l;.find() : 선택한 <strong>l;요소</strong>l;의 자식 요소 중 조건에 맞는 <strong>l;요소</strong>l;를 선택합니다.</li>l;
<li>l;.next() : 선택한 <strong>l;요소</strong>l;를 다음 형제 <strong>l;요소</strong>l;를 선택합니다.</li>l;
<li>l;.is() : 선택한 <strong>l;요소</strong>l; 객체의 특징을 판별합니다.</li>l;
<li>l;.last() : 선택한 <strong>l;요소</strong>l;에서 마지막 번째 자식을 선택합니다</li>l;
<li>l;.filter() : 선택한 <strong>l;요소</strong>l;에서 선택하거나 함수를 사용할 수 있습니다.</li>l;
<li>l;.first() : 선택한 <strong>l;요소</strong>l;에서 첫 번째 자식을 선택합니다.</li>l;
<li>l;.has() : 선택한 <strong>l;요소</strong>l;의 자식 요소에서 주어진 선택자를 찾습니다.</li>l;
</ul>l;
<p class="text">l;</p>l;
</div>l;
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js">l;</script>l;
<script>l;
$(".list li").click(function(){
var li = $(this);
var two = li.is(function(){
return $("strong",this).length === 2;
});
if(two){
li.addClass("onBlue");
} else {
li.addClass("onRed");
}
});
$(".choice .btn2").click(function(){
var is = $(".list li").parent().is("ul");
$(".text").text("li의 부모가 맞으면 'true' 아니면 'false'를 반환합니다. = " + is);
});
$(".choice .btn3").click(function(){
var is = $(".list li").parent().is("div");
$(".text").text("li의 부모가 맞으면 'true' 아니면 'false'를 반환합니다. = " + is);
});
</script>l;
</body>l;
</html>l;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 8px;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>
</head>
<body>
<h1>탐색(Traversing)</h1>
<div class="choice">
<a href="#" class="btn1">.addClass("onBlue")</a>
<a href="#" class="btn2">.each() </a>
<a href="#" class="btn3">setTimeout</a>
</div>
<div class="list">
<ul>
<li>.children() : 선택한 <strong>요소</strong>의 바로 아래 자식 <strong>요소</strong>만 선택합니다.</li>
<li>.closest() : 선택한 <strong>요소</strong>를 포함하면서 가장 가까운 상위 <strong>요소</strong>를 선택합니다.</li>
<li>.find() : 선택한 <strong>요소</strong>의 자식 요소 중 조건에 맞는 <strong>요소</strong>를 선택합니다.</li>
<li>.next() : 선택한 <strong>요소</strong>를 다음 형제 <strong>요소</strong>를 선택합니다.</li>
<li>.is() : 선택한 <strong>요소</strong> 객체의 특징을 판별합니다.</li>
<li>.last() : 선택한 <strong>요소</strong>에서 마지막 번째 자식을 선택합니다</li>
<li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
$(".choice .btn1").click(function(){
$(".list li").addClass("onBlue");
});
$(".choice .btn2").click(function(){
$(".list li").each(function(){
$(this).addClass("onBlue")
});
});
$(".choice .btn3").click(function(){
$(".list li").each(function(index){
setTimeout(function(){
$(".list li").eq(index).addClass("onRed");
},100*(index+1));
});
});
</script>
</body>
</html>
속성(Attributes)
| 유형 |
메서드 |
설명 |
| Attributes |
.attr() ♥ |
선택한 요소의 HTML 속성 값을 설정하거나 반환합니다. |
| .prop() |
선택한 요소의 javascript 속성 값을 설정하거나 반환합니다. |
| .removeAttr() |
선선택한 요소의 HTML 속성 값을 제거합니다. |
| .removeprop() |
선택한 요소의 javascript 속성 값을 제거합니다. |
| .val() |
선택한 폼 요소의 속성 값을 설정하거나 반환합니다. |
| CSS |
.addClass() ♥ |
선택한 요소의 클래스를 추가합니다. |
| .css() ♥ |
선택한 요소의 CSS 속성 값을 설정하거나 변경합니다. |
| .hasClass() ♥ |
선택한 요소의 클래스가 있는지를 찾습니다. |
| .removeClass() |
선택한 요소의 클래스를 삭제합니다. |
| .toggleClass() ♥ |
선택한 요소에 클래스의 추가/제거를 연속하여 사용할 수 있습니다. |
| Dimensions |
.height() |
선택한 요소의 높이(패딩/마진/보더 불포함)를 설정하거나 반환합니다. |
| .innerHeight() |
선택한 요소의 높이(패딩포함, 마진/보더 불포함)를 설정하거나 반환합니다. |
| .innerWidth() |
선택한 요소의 가로(패딩포함, 마진/보더 불포함)를 설정하거나 반환합니다. |
| .outerHeight() |
선택한 요소의 높이(패딩/보더포함, 마진 불포함)를 설정하거나 반환합니다. |
| .outerWidth() |
선택한 요소의 가로(패딩/보더포함, 마진 불포함)를 설정하거나 반환합니다. |
| .width() |
선택한 요소의 가로(패딩/마진/보더 불포함)를 설정하거나 반환합니다. |
| offset |
.offset() ♥ |
선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다. |
| .offsetParent() |
선택한 요소의 부모 위치 좌표 값(문서 기준)을 설정하거나 반환합니다. |
| .position() |
선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다. |
| .scrollLeft() ♥ |
선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다. |
| .scrollTop() ♥ |
선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* { padding:0;}
li {margin: 8px;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>
</head>
<body>
<h1>.attr()</h1>
<div class="choice">
<a href="#" class="btn1">src 값을 가져옵니다.</a>
<a href="#" class="btn2">alt 값을 가져옵니다.</a>
<a href="#" class="btn3">width 값을 가져옵니다.</a><br>
<a href="#" class="btn4">이미지 크기를 400을 width 값을 변경합니다.</a>
<a href="#" class="btn5">이미지 크기를 500을 width 값을 변경합니다.</a>
<a href="#" class="btn6">이미지 크기를 600을 width 값을 변경합니다.</a><br>
<a href="#" class="btn7">이미지룰(img02) 변경합니다.</a>
<a href="#" class="btn8">이미지룰(img03) 변경합니다.</a>
<a href="#" class="btn9">이미지룰(img04) 변경합니다.</a><br>
<a href="#" class="btn10">이미지룰(img02)와 크기를(400) 변경합니다.</a>
<a href="#" class="btn11">이미지룰(img03)와 크기를(500) 변경합니다.</a>
<a href="#" class="btn12">이미지룰(img04)와 크기를(600) 변경합니다.</a><br>
</div>
<br>
<div class="list">
<img src="assets/img/img01.png" alt="이미지1" width="300">
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
$(".choice .btn1").click(function(){
var text = $(".list img").attr("src");
$(".list .text").text(text);
});
$(".choice .btn2").click(function(){
var text = $(".list img").attr("alt");
$(".list .text").text(text);
});
$(".choice .btn3").click(function(){
var text = $(".list img").attr("width");
$(".list .text").text(text);
});
$(".choice .btn4").click(function(){
var text = $(".list img").attr("width",400);
$(".list .text").text(text);
});
$(".choice .btn5").click(function(){
var text = $(".list img").attr("width",500);
$(".list .text").text(text);
});
$(".choice .btn6").click(function(){
var text = $(".list img").attr("width",600);
$(".list .text").text(text);
});
$(".choice .btn7").click(function(){
$(".list img").attr("src","assets/img/img02.png");
});
$(".choice .btn8").click(function(){
$(".list img").attr("src","assets/img/img03.png");
});
$(".choice .btn9").click(function(){
$(".list img").attr("src","assets/img/img04.png");
});
$(".choice .btn10").click(function(){
$(".list img").attr({"src":"assets/img/img02.png","width":"400"});
$(".list .text").text("이미지 주소값 : "+$(".list img").attr("src")+" /
"+"이미지 위드 값 : "+ $(".list img").attr("width"));
});
$(".choice .btn11").click(function(){
$(".list img").attr({"src":"assets/img/img03.png","width":"500"});
$(".list .text").text("이미지 주소값 : "+$(".list img").attr("src")+" /
"+"이미지 위드 값 : "+ $(".list img").attr("width"));
});
$(".choice .btn12").click(function(){
$(".list img").attr({"src":"assets/img/img04.png","width":"600"});
$(".list .text").text("이미지 주소값 : "+$(".list img").attr("src")+" /
"+"이미지 위드 값 : "+ $(".list img").attr("width"));
});
</script>
</body>
</html>
<!DOCTYPE html>l;
<html lang="ko">l;
<head>l;
<meta charset="UTF-8">l;
<title>l;jQuery</title>l;
<style>l;
* { padding:0;}
li {margin: 8px;display:inline; list-style:none;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>l;
</head>l;
<body>l;
<h1>l;.attr()</h1>l;
<div class="choice">l;
<a href="#" class="btn1">l;클릭하면 이미지를 순차적으로 크게 해줍니다.</a>l;
</div>l;
<br>l;
<div class="list">l;
<ul>l;
<li>l;<img src="assets/img/img01.png" alt="이미지1" width="200">l;</li>l;
<li>l;<img src="assets/img/img02.png" alt="이미지2" width="200">l;</li>l;
<li>l;<img src="assets/img/img03.png" alt="이미지3" width="200">l;</li>l;
<li>l;<img src="assets/img/img04.png" alt="이미지4" width="200">l;</li>l;
<li>l;<img src="assets/img/img05.png" alt="이미지5" width="200">l;</li>l;
</ul>l;
<p class="text">l;</p>l;
</div>l;
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js">l;</script>l;
<script>l;
$(".choice .btn1").click(function(){
$(".list img").attr("width",function(i){
return(i+1)*50;
});
});
</script>l;
</body>l;
</html>l;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* {margin: 0; padding: 0; text-align:center; margin-top: 10px;}
li {list-style:none;}
a {text-decoration:none; color: #666;}
#tab_menu {width: 350px; margin: 50px auto; }
.tab_btn {margin-bottom: 1px; }
.tab_btn ul { overflow: hidden;}
.tab_btn li { float:left; width: 20%; text-align:center;}
.tab_btn li a{ padding: 11px 10px 10px 10px; display:block; background-color: #1e88e5;
margin-right: 1px; color:#fff;}
</style>
</head>
<body>
<h1>.attr()</h1>
<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" alt="이미지1" width="350">
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
//글씨를 클릭하면 Tab --> menu로 변경해주세요!
// $("#tab_menu").click(function(){
// $(".tab_btn a").text("Menu");
// });
// $(".tab_btn ul li").click(function(){
// $(".tab_btn ul li a").text("Menu");
// });
//글씨를 클릭하면 클릭한 글씨만 Tab --> menu로 변경해주세요!
// $(".tab_btn a ").click(function(){
// var text = $(".tab_btn a").attr("text");
// $(this).text("Menu");
// });
// $(".tab_btn a ").click(function(){
// $(this).text("Menu");
// });
//글씨를 클릭하면 클릭한 글씨를 tab3 --> menu3로 변경
// $(".tab_btn ul li").click(function(){
// var target = $(this)
// var index = target.index()+1;
// target.find("a").text("Menu"+index);
// });
//해당 버튼을 클릭하면 해당 이미지 나오게 하기
// $(".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"})
// // });
//위 를 한번에 쓰기
$(".tab_btn ul li").click(function(){
var target = $(this);
var index = target.index()+1;
target.find("a").text("Menu"+index);
$(".tab_cont img").attr({"src":"assets/img/img0"+index+".png","alt":"이미지"+index});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* {margin: 0; padding: 0; text-align:center; margin-top: 10px;}
li {list-style:none;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #666; margin: 4px;}
</style>
</head>
<body>
<h1>.prop()</h1>
<div class="choice">
<a href="#" class="btn1">.attr</a>
<a href="#" class="btn2">.prop</a>
<a href="#" class="btn3">.is</a>
</div>
<div class="list">
<input id="check" type="checkbox" checked="checked">
<label for="check">체크</label>
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
$(".choice .btn1").click(function(){
$(".list input").change(function(){
var input = $(this);
$(".list .text").html(".attr(\"checked\"):"+input.attr("checked"))
}).change();
});
$(".choice .btn2").click(function(){
$(".list input").change(function(){
var input = $(this);
$(".list .text").html(".prop(\"checked\"):"+input.prop("checked"))
}).change();
});
$(".choice .btn3").click(function(){
$(".list input").change(function(){
var input = $(this);
$(".list .text").html(".is(\"checked\"):"+input.is("checked"))
}).change();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* {margin: 0; padding: 0;}
li {list-style: none;}
a {color: #666; text-decoration:none; border: 1px solid #5f6368; padding: 7px 20px 5px 20px;
display: inline-block;border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
</style>
</head>
<body>
<h1>.val()</h1>
<div class="choice">
<a href="#" class="btn1">클릭하면 input 박스에 글씨를 넣어줍니다.</a>
<a href="#" class="btn2">클릭하면 input 박스에 글씨를 안나오게 해주세요!</a>
</div>
<div class="list">
input : <input type="text" value="입력해주세요!" class="input">
</div>
<div class="list2">
select :
<select name="select" id="select" class="select">
<option value="https://www.naver.com/">네이버</option>
<option value="https://www.daum.net/">다음</option>
<option value="https://www.nate.com/">네이트</option>
<option value="https://www.google.com/">구글</option>
</select>
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
$(".choice .btn1").click(function(){
$(".list .input").val($(this).text());
});
$(".choice .btn2").click(function(){
$(".list .input").val("");
});
$(".list .input").click(function(){
$(".list .input").val("");
})
$("#select").change(function(){
var url =$(this).val();
if(url){
location.href=url;
}
})
</script>
</body>
</html>
CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* {margin: 0; padding: 0;}
li {list-style: none;}
a {color: #666; text-decoration:none; border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display:
inline-block;border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed0 {padding: 4px 6px 2px 6px; font-size: 90%; color: #a51a3d;
white-space: nowrap; background-color:#ff9a9e; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed1 {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#fad0c4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed2 {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#ffecd2; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed3 {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#fcb69f; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed4 {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#feada6; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed5 {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#ff758c; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed6 {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#ff0844; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed7 {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#ffb199; border-radius: 4px; border: 1px dashed #a51a3d; }
.onRed8 {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#ffdde1; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>
</head>
<body>
<h1>.addClass()</h1>
<div class="choice">
<a href="#" class="btn1">클릭하면 addClass를 추가합니다.</a>
<a href="#" class="btn2">클릭하면 클래스를 순차적으로 추가합니다.</a>
<a href="#" class="btn3">클릭하면 select 클래스를 찾은 후 효과주기</a>
</div>
<div class="list">
<ul>
<li>.children() : 선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
<li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
<li>.find() : 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
<li>.next() : 선택한 요소를 다음 형제 요소를 선택합니다.</li>
<li class="select">.is() : 선택한 요소 객체의 특징을 판별합니다.</li>
<li>.last() : 선택한 요소에서 마지막 번째 자식을 선택합니다</li>
<li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
//버튼1을 클릭하면 addClass("onRed")를 추가해주세요!
$(".choice .btn1").click(function(){
$(".list ul li").addClass("onRed");
});
$(".choice .btn2").click(function(){
$(".list li").addClass(function(index){
return"onRed"+index
});
});
$(".choice .btn3").click(function(){
$(".list li").addClass(function(index, currentClass){
var addClass;
if(currentClass === "select"){
addClass ="onRed"
}
return addClass;
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: #666;}
#tab-menu {width: 350px; margin: 50px auto;}
#tab-btn {margin-bottom: 1px;}
#tab-btn ul {overflow: hidden;}
#tab-btn li {float: left; width: 20%; text-align: center;}
#tab-btn li a {padding: 14px 10px 10px 10px; display: block; background-color: #1e88e5;
margin-right: 1px; color: #fff;}
#tab-cont {width: 350px; height: 300px;}
#tab-cont.img1 {background:url(assets/img/img01.png) no-repeat; background-size: 350px;}
#tab-cont.img2 {background:url(assets/img/img02.png) no-repeat; background-size: 350px;}
#tab-cont.img3 {background:url(assets/img/img03.png) no-repeat; background-size: 350px;}
#tab-cont.img4 {background:url(assets/img/img04.png) no-repeat; background-size: 350px;}
#tab-cont.img5 {background:url(assets/img/img05.png) no-repeat; background-size: 350px;}
</style>
</head>
<body>
<div id="tab-menu">
<div id="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 id="tab-cont" class="img1">
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
//글씨를 클릭하면 tab --> menu로 변경해주세요!!
// $("#tab-btn ul li").click(function(){
// $("#tab-btn ul li a").text("Menu");
// });
//글씨를 클릭하면 클릭한 글씨만 tab --> menu로 변경해주세요!!
// $("#tab-btn ul li a").click(function(){
// $(this).text("Menu");
// });
//글씨를 클릭하면 tab1 --> menu1로 변경해주세요!!
// $("#tab-btn ul li").click(function(){
// $("#tab-btn ul li").each(function(index){
// $("#tab-btn ul li").eq(index).find("a").text("Menu"+(index+1))
// });
// });
//글씨를 클릭하면 클릭한 글씨만 tab1 --> menu1로 변경해주세요!!
// $("#tab-btn ul li").click(function(){
// var target = $(this);
// var index = target.index()+1;
// target.find("a").text("Menu"+index);
// });
//해당 버튼을 클릭하면 해당 이미지 나오게 하기
$("#tab-btn ul li:eq(0)").click(function(){
$("#tab-cont").removeClass().addClass("img1");
});
$("#tab-btn ul li:eq(1)").click(function(){
$("#tab-cont").removeClass().addClass("img2");
});
$("#tab-btn ul li:eq(2)").click(function(){
$("#tab-cont").removeClass().addClass("img3");
});
$("#tab-btn ul li:eq(3)").click(function(){
$("#tab-cont").removeClass().addClass("img4");
});
$("#tab-btn ul li:eq(4)").click(function(){
$("#tab-cont").removeClass().addClass("img5");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 8px;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>
</head>
<body>
<div class="choice">
<a href="#" class="btn1">클릭하면 글씨의 컬러 값을 알려줍니다.</a>
<a href="#" class="btn2">클릭하면 글씨의 여러가지 속성을 알려줍니다.</a>
<a href="#" class="btn3">클릭하면 글씨의 색을 빨간색으로 변경해주세요.</a>
<a href="#" class="btn4">클릭하면 글씨의 색은 파란색으로 크기는 30px로 변경해주세요.</a>
<a href="#" class="btn5">글씨를 클릭할때마다 크게 해주세요.</a>
<a href="#" class="btn6">글씨를 클릭할때마다 작게 해주세요.</a>
</div>
<div class="list">
<ul>
<li>.children() : 선택한<strong>요소</strong>의 바로 아래 자식<strong>요소</strong>만 선택합니다.</li>
<li>.closest() : 선택한<strong>요소</strong>를 포함하면서 가장 가까운 상위<strong>요소</strong>를 선택합니다.</li>
<li>.find() : 선택한<strong>요소</strong>의 자식 요소 중 조건에 맞는<strong>요소</strong>를 선택합니다.</li>
<li>.next() : 선택한<strong>요소</strong>를 다음 형제<strong>요소</strong>를 선택합니다.</li>
<li>.is() : 선택한<strong>요소</strong> 객체의 특징을 판별합니다.</li>
<li>.last() : 선택한<strong>요소</strong>에서 마지막 번째 자식을 선택합니다</li>
<li>.filter() : 선택한<strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한<strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한<strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
$(".choice .btn1").click(function(){
var value = $(".list li").css("color");
$(".list .text").text("이 폰트의 색은 : "+ value);
});
;
$(".choice .btn2").click(function(){
var html = ["이 글씨의 속성은 :"];
var val = $(".list li").css(["color","font-size","display","text-align","list-style-type"]);
$.each(val, function(prop, val){
html.push(prop + ":" + val);
});
$(".list .text").html( html.join("") );
});
$(".choice .btn3").click(function(){
$(".list li").css("color","red");
});
$(".choice .btn4").click(function(){
$(".list li").css({"color":"blue","font-size":"30px"});
});
$(".choice .btn5").click(function(){
$(".list li").css({fontSize:function(index, value){
return parseFloat(value) * 1.2;
}});
});
$(".choice .btn6").click(function(){
$(".list li").css({fontSize:function(index, value){
return parseFloat(value) * 0.8;
}});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 8px;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>
</head>
<body>
<div class="choice">
<a href="#" class="btn1">클릭하면 select 클래스를 찾은 후 효과를 줍니다.</a>
</div>
<div class="list">
<ul>
<li>.children() : 선택한 <strong>요소</strong>의 바로 아래 자식 <strong>요소</strong>만 선택합니다.</li>
<li>.closest() : 선택한 <strong>요소</strong>를 포함하면서 가장 가까운 상위 <strong>요소</strong>를 선택합니다.</li>
<li>.find() : 선택한 <strong>요소</strong>의 자식 요소 중 조건에 맞는 <strong>요소</strong>를 선택합니다.</li>
<li>.next() : 선택한 <strong>요소</strong>를 다음 형제 <strong>요소</strong>를 선택합니다.</li>
<li class="select">.is() : 선택한 <strong>요소</strong> 객체의 특징을 판별합니다.</li>
<li>.last() : 선택한 <strong>요소</strong>에서 마지막 번째 자식을 선택합니다</li>
<li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
$(".choice .btn1").click(function(){
if($(".list li").hasClass("select")){
$(".select").addClass("onBlue");
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 8px;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>
</head>
<body>
<div class="choice">
<a href="#" class="btn1">클릭하면 toggleClass(addClass,removeClass를 합친것) 클래스를 찾은 후 효과를 줍니다.</a>
<a href="#" class="btn2">클릭하면 세번째 줄만 클래스를 찾은 후 효과를 줍니다.</a>
</div>
<div class="list">
<ul>
<li>.children() : 선택한 <strong>요소</strong>의 바로 아래 자식 <strong>요소</strong>만 선택합니다.</li>
<li>.closest() : 선택한 <strong>요소</strong>를 포함하면서 가장 가까운 상위 <strong>요소</strong>를 선택합니다.</li>
<li>.find() : 선택한 <strong>요소</strong>의 자식 요소 중 조건에 맞는 <strong>요소</strong>를 선택합니다.</li>
<li>.next() : 선택한 <strong>요소</strong>를 다음 형제 <strong>요소</strong>를 선택합니다.</li>
<li class="select">.is() : 선택한 <strong>요소</strong> 객체의 특징을 판별합니다.</li>
<li>.last() : 선택한 <strong>요소</strong>에서 마지막 번째 자식을 선택합니다</li>
<li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
$(".choice .btn1").click(function(){
$(".list li").toggleClass("onBlue");
});
// $(".choice .btn2").click(function(){
// $(".list li:nth-child(3)").toggleClass("onRed");
// });
$(".choice .btn2").click(function(){
$(".list li").eq(2).toggleClass("onRed");
});
</script>
</body>
</html>
Dimensions 기본
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 8px; list-style:none;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onRed { margin: 5px; padding: 5px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
</style>
</head>
<body style="height:4000px">
<div class="choice">
<a href="#" class="btn1">클릭하면 리스트의 높이(.height()) 값을 구합니다</a>
<a href="#" class="btn2">클릭하면 리스트의 높이(.css("height")) 값을 구합니다</a>
<a href="#" class="btn3">클릭하면 문서의 높이 값을 구합니다.</a>
<a href="#" class="btn4">클릭하면 브라우저의 높이 값을 구합니다.</a><br>
<a href="#" class="btn5">클릭하면 리스트의 가로(.width()) 값을 구합니다</a>
<a href="#" class="btn6">클릭하면 리스트의 가로(.css("width")) 값을 구합니다</a>
<a href="#" class="btn7">클릭하면 문서의 가로 값을 구합니다.</a>
<a href="#" class="btn8">클릭하면 브라우저의 가로 값을 구합니다.</a><br>
</div>
<div class="list">
<ul class="onRed">
<li>.children() : 선택한 <strong>요소</strong>의 바로 아래 자식 <strong>요소</strong>만 선택합니다.</li>
<li>.closest() : 선택한 <strong>요소</strong>를 포함하면서 가장 가까운 상위 <strong>요소</strong>를 선택합니다.</li>
<li>.find() : 선택한 <strong>요소</strong>의 자식 요소 중 조건에 맞는 <strong>요소</strong>를 선택합니다.</li>
<li>.next() : 선택한 <strong>요소</strong>를 다음 형제 <strong>요소</strong>를 선택합니다.</li>
<li>.is() : 선택한 <strong>요소</strong> 객체의 특징을 판별합니다.</li>
<li>.last() : 선택한 <strong>요소</strong>에서 마지막 번째 자식을 선택합니다</li>
<li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
<p class="prop onBlue"></p>
<p class="text"></p>
<div class="choice2">
<a href="#" class="btn1">.height()</a>
<a href="#" class="btn2">.innerHeight()</a>
<a href="#" class="btn3">.outerHeight()</a>
</div>
<div class="choice3">
<a href="#" class="btn1">.width()</a>
<a href="#" class="btn2">.innerWidth()</a>
<a href="#" class="btn3">.outerWidth()</a>
</div>
<div class="choice4">
<a href="#" class="btn1">.height("200")</a>
<a href="#" class="btn2">.height("400")</a>
<a href="#" class="btn3">.width("400")</a>
<a href="#" class="btn4">.width("800")</a>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script>
function showHeight(element,height){
$(".text").text( element + "의 값은" + height + "px.");
}
function showWidth(element,width){
$(".text").text( element + "의 값은" + width + "px.");
}
$(".choice .btn1").click(function(){
// var height = $(".list").height();
// $(".text").text(height);
showHeight("높이(.height())",$(".list").height());
});
$(".choice .btn2").click(function(){
// var height = $(".list").css("height");
// $(".text").text(height);
showHeight("높이(.css('height'))",$(".list").css("height"));
});
$(".choice .btn3").click(function(){
showHeight("문서", $(document).height());
});
$(".choice .btn4").click(function(){
showHeight("브라우저", $(window).height());
});
/// 가로값
$(".choice .btn5").click(function(){
// var height = $(".list").height();
// $(".text").text(height);
showWidth("가로(.width())",$(".list").width());
});
$(".choice .btn6").click(function(){
// var height = $(".list").css("height");
// $(".text").text(height);
showWidth("가로(.css('width'))",$(".list").css("width"));
});
$(".choice .btn7").click(function(){
showWidth("문서", $(document).width());
});
$(".choice .btn8").click(function(){
showWidth("브라우저", $(window).width());
});
var html = ["이 리스트의 속성은 : "];
var value = $(".list ul").css(["margin","padding","border-width"]);
$.each(value,function(prop,value){
html.push(prop+ ":" + value);
});
$(".list .prop").html(html.join("<br>"));
$(".choice2 .btn1").click(function(){
showHeight("리스트의 .height()", $(".list ul").height());
});
$(".choice2 .btn2").click(function(){
showHeight("리스트의 .innerHeight()", $(".list ul").innerHeight());
});
$(".choice2 .btn3").click(function(){
showHeight("리스트의 .outerHeight()", $(".list ul").outerHeight());
});
$(".choice3 .btn1").click(function(){
showHeight("리스트의 .width()", $(".list ul").width());
});
$(".choice3 .btn2").click(function(){
showHeight("리스트의 .innerWidth()", $(".list ul").innerWidth());
});
$(".choice3 .btn3").click(function(){
showHeight("리스트의 .outerWidth()", $(".list ul").outerWidth());
});
$(".choice4 .btn1").click(function(){
$(".list ul").height("200");
});
$(".choice4 .btn2").click(function(){
$(".list ul").height("400");
});
$(".choice4 .btn3").click(function(){
$(".list ul").width("400");
});
$(".choice4 .btn4").click(function(){
$(".list ul").width("800");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
.circle-wrap { width: 1000px; height: 300px; position:relative; padding: 50px; margin: 150px 50px;}
.circle { width: 100px; height: 100px; color:#c7254e; background-color: #f9f2f4; -webkit-border-radius: 50%;
-moz-border-radius: 50%; border-radius: 50%; border: 1px dashed #a51a3d; text-align: center; line-height: 100px; font-size: 30px;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
.choice {position: fixed; left: 0; top: 0; z-index: 1000;}
</style>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<!-- //아래는 jquery ui drag 효과 주기위해 넣습니다. -->
<script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
<script>
$(function(){
$("#draggable").draggable({
drag: function(){
$(".ol").text($(".circle").offset().left + "px." ); //circle을 움직일때마다 위치값을 나타내준다.
$(".ot").text($(".circle").offset().top + "px." ); // offset값은 배경을 기준으로 위치값을 나타내준다.
$(".pl").text($(".circle").position().left + "px." ); //position값은 파란색상자를 기준으로 위치값을 나타내준다.
$(".pt").text($(".circle").position().top + "px." );
}
});
// var cir = $(".circle").offset().left;
// $(".ol").text(cir);
// //circle의 보더 색을 알아내서, ol클래스 span에 출력해주세요!
// var color = $(".circle").css("border-color");
// $(".ol").text(color);
// //circle의 배경 색을 알아내서, ot 클래스 span에 출력해주세요!
// var background = $(".circle").css("background-color");
// // alert(background) 확인
// $(".ot").text(background);
$(window).scroll(function(){
$(".sl").text( $(window).scrollLeft());
$(".st").text( $(window).scrollTop());
});
});
</script>
</head>
<body style="width: 3000px; height: 10000px;">
<div class="choice">
<span>offset().left = </span> <span class="ol">0</span><br>
<span>offset().top = </span><span class="ot">0</span><br>
<span>position().left = </span><span class="pl">0</span><br>
<span>position().top = </span><span class="pt">0</span><br>
<span>scrollLeft () = </span><span class="sl">0</span><br>
<span>scrollTop () = </span><span class="st">0</span><br>
</div>
<div class="circle-wrap onBlue">
<div id="draggable" class="circle">
♡
</div>
</div>
</body>
</html>
| 유형 |
메서드 |
설명 |
| Copting |
.clone() |
선택한 요소의 복사본을 만듭니다. |
| Dom Insertion, Around |
.wrap() |
선택한 요소에 새로운 태그를 추가합니다. |
| .wrapAll() |
선택한 모든 요소에 새로운 태그를 추가합니다. |
| .wrapInner() |
선택한 요소에 각각 새로운 태그를 추가합니다. |
| Dom Insertion, Inside |
.append()♥ |
선택한 요소 마지막 위치에 새로운 태그를 추가합니다. |
| .appendTo() |
선택한 타겟 마지막 위치에 새로운 태그를 추가합니다. |
| .html()♥ |
선택한 요소 내부의 HTML을 읽거나 변경합니다. |
| .prepend() |
선택한 요소 처음 위치에 새로운 태그를 추가합니다. |
| .prependTo() |
선택한 타겟 처음 위치에 새로운 태그를 추가합니다. |
| .text()♥ |
선택한 요소 내부의 텍스트를 읽거나 변경합니다. |
| Dom Insertion, Outside |
.after() |
선택한 요소 다음 위치에 새로운 태그를 추가합니다. |
| .before() |
선택한 요소 이전 위치에 새로운 태그를 추가합니다. |
| .insertAfter() |
선택한 타겟 요소 다음에 새로운 요소를 추가합니다. |
| .insertBefore() |
선택한 타겟 요소 이전에 새로운 요소를 추가합니다. |
| Dom Insertion, Removal |
.detach() |
선택한 요소(데이터 및 이벤트 불포함)를 제거합니다. |
| .empty() |
선택한 요소의 하위 요소를 제거합니다. |
| .remove()♥ |
선택한 요소(데이터 및 이벤트 포함)를 제거합니다. |
| .unwrap() |
선택한 요소의 부모 요소를 제거합니다. |
| Dom Insertion, Replacement |
.replaceAll() |
선택한 요소를 새로운 요소로 바꿉니다. |
| .replaceWidth() |
선택한 요소를 새로운 요소로 바꿉니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
.onRed { margin: 5px; padding: 5px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
</style>
</head>
<body>
<h1>변경</h1>
<div class="list">
<p>.clone() : 선택한 요소의 복사본을 만듭니다.</p>
<p>.wrap() : 선택한 요소에 새로운 태그를 추가합니다.</p>
<p>.wrapAll() : 선택한 모든 요소에 새로운 태그를 추가합니다.</p>
<p>.wrapInner() : 선택한 요소에 각각 새로운 태그를 추가합니다.</p>
<p>.append() : 선택한 요소 마지막 위치에 새로운 태그를 추가합니다.</p>
<p>.prepend() : 선택한 요소 처음 위치에 새로운 태그를 추가합니다.</p>
</div>
<div class="choice">
<a href="#" class="btn1">클릭하면 p태그에 div로 감쌉니다.</a>
<a href="#" class="btn2">클릭하면 컨텐츠 요소를 div태그에 넣어줍니다.</a>
<a href="#" class="btn3">클릭하면 p태그 요소를 한번에 div태그에 넣어줍니다.</a>
<a href="#" class="btn4">클릭하면 p태그 요소안에 div태그에 넣어줍니다.</a>
<a href="#" class="btn5">클릭하면 마지막 요소에 컨텐츠를 추가합니다.</a>
<a href="#" class="btn6">클릭하면 처음 요소에 컨텐츠를 추가합니다.</a>
<a href="#" class="btn7">제목 요소를 마지막 요소에 추가합니다.</a>
<a href="#" class="btn8">제목 요소를 처음 요소에 추가합니다.</a>
<a href="#" class="btn9">클릭하면 타겟에 마지막 요소에 추가합니다.</a>
<a href="#" class="btn10">클릭하면 타겟에 처음 요소에 추가합니다.</a>
<a href="#" class="btn11">클릭하면 첫 번째 줄의 요소를 가져와서 출력합니다.strong(.html();)</a>
<a href="#" class="btn12">클릭하면 첫 번째 줄의 요소를 가져와서 출력합니다.(.text();)</a>
<a href="#" class="btn13">클릭하면 .html() 메서드로 요소를 출력합니다.</a>
<a href="#" class="btn14">클릭하면 .text() 메서드로 요소를 출력합니다.</a>
<a href="#" class="btn15">클릭하면 .after() 메서드로 요소를 출력합니다.</a>
<a href="#" class="btn16">클릭하면 .before() 메서드로 요소를 출력합니다.</a>
<a href="#" class="btn17">클릭하면 마지막 요소를 지웁니다.</a>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
<script>
$(function(){
$(".choice .btn1").click(function(){
$(".list p").wrap("<div class='onBlue'></div>")
});
$(".choice .btn2").click(function(){
$(".list p").wrap(function(){
return "<div class='onBlue'>" + $(this).text() + "</div>"
});
});
$(".choice .btn3").click(function(){
$(".list p").wrapAll("<div class='onBlue'></div>")
});
$(".choice .btn4").click(function(){
$(".list p").wrapInner("<div class='onBlue'></div>")
});
$(".choice .btn5").click(function(){
$(".list").append("<p class='onRed'>.html() : 선택한 요소 내부의 HTML을 읽거나 변경합니다.</p>")
});
$(".choice .btn6").click(function(){
$(".list").prepend("<p class='onRed'>.html() : 선택한 요소 내부의 HTML을 읽거나 변경합니다.</p>")
});
$(".choice .btn7").click(function(){
$(".list").append( $("h1") );
});
$(".choice .btn8").click(function(){
$(".list").prepend( $("h1") );
});
$(".choice .btn8").click(function(){
$(".list").clone( $("h1") );
});
$(".choice .btn9").click(function(){
$("<p class='onRed'>.after() : 선택한 요소 다음 위치에 새로운 태그를 추가합니다.</p>").appendTo(".list")
});
$(".choice .btn10").click(function(){
$("<p class='onRed'>.before() : 선택한 요소 이전 위치에 새로운 태그를 추가합니다.</p>").prependTo(".list")
});
$(".choice .btn11").click(function(){
var htmlString = $(".list p").eq(0).html();
alert(htmlString);
});
$(".choice .btn12").click(function(){
var textString = $(".list p").eq(0).text();
alert(textString);
});
$(".choice .btn13").click(function(){
$(".list p:last-child").html(".detach() : 선택한 요소(<strong class='onBlue'>데이터</strong> 및 이벤트 불포함)를 제거합니다.");
});
$(".choice .btn14").click(function(){
$(".list p:last-child").text(".detach() : 선택한 요소(<strong class='onBlue'>데이터</strong> 및 이벤트 불포함)를 제거합니다.");
});
$(".choice .btn15").click(function(){
$(".list p:first-child").after("<p class='onBlue'>.remove() : 선택한 요소(데이터 및 이벤트 포함)를 제거합니다.</p>");
});
$(".choice .btn16").click(function(){
$(".list p:first-child").before("<p class='onBlue'>.remove() : 선택한 요소(데이터 및 이벤트 포함)를 제거합니다.</p>");
});
$(".choice .btn17").click(function(){
$(".list p:last").remove();
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* {margin: 0; padding: 0;}
li {list-style:none; display:inline;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
.onRed { margin: 5px; padding: 5px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
</style>
</head>
<body>
<h1>이미지 랜덤으로 나오기</h1>
<!-- <div class="choice">
</div> -->
<div class="list">
<ul>
<li><img src="assets/img/img01.png" alt=""></li>
<li><img src="assets/img/img02.png" alt=""></li>
<li><img src="assets/img/img03.png" alt=""></li>
</ul>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
<script>
$(function(){
//모든 이미지의 크기를 100px로 설정해주세요!
$(".list img").attr("width","100px"); //attr->css로 써줘도 됩니다.
//li의 display를 inline으로 변경해주세요~
$(".list li").css("display","inline");
//h1 다음에 버튼이 생기도록 해주세요~
$("h1").after("<div class='choice'></div>");
//버튼이 나오도록 해주세요~
$(".choice").append("<a href='#' class='btn1'>클릭하면 뒤쪽에 이미지가 추가됩니다.</a>");
$(".choice").append("<a href='#' class='btn2'>클릭하면 앞쪽에 이미지가 추가됩니다.</a>");
$(".choice").append("<a href='#' class='btn3'>클릭하면 뒤쪽에 이미지가 삭제합니다.</a>");
$(".choice").append("<a href='#' class='btn4'>클릭하면 앞쪽에 이미지가 삭제합니다.</a>");
$(".choice").append("<a href='#' class='btn5'>클릭하면 뒤쪽에 이미지를 랜덤으로 추가합니다.</a>");
$(".choice .btn1").click(function(){
$(".list ul").append("<li><img src='assets/img/img04.png' alt='' width='100px'></li>");
});
$(".choice .btn2").click(function(){
$(".list ul").prepend("<li><img src='assets/img/img05.png' alt='' width='100px'></li>");
});
$(".choice .btn3").click(function(){
$(".list li:last").remove();
});
$(".choice .btn4").click(function(){
$(".list li:first-child").remove();
});
//이미지가 랜덤으로 나오는 함수
/*Math.floor() : 소수점 이하를 버림한다.
Math.ceil() : 소수점 이하를 올림한다.
Math.round() : 소수점 이하를 반올림한*/
function random(){
var imgNumber = Math.ceil(Math.random()*5);
var imgPath = "<li><img src='assets/img/img0"+ imgNumber + ".png' alt='' width='100px'></li>";
return imgPath;
};
$(".choice .btn5").click(function(){
$(".list ul").append(random)
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* {margin: 0; padding: 0;}
li {list-style:none; display:inline;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
.onRed { margin: 5px; padding: 5px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
</style>
</head>
<body>
<h1>2초에 한번씩 이미지 이동하기</h1>
<!-- <div class="choice"><a href="#" class="btn1">클릭하면 이미지를 2초에 한번씩 이동합니다.</a></div> -->
<div class="list">
<img src="assets/img/img01.png" alt="">
<img src="assets/img/img02.png" alt="">
<img src="assets/img/img03.png" alt="">
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
<script>
$(function(){
//모든 이미지의 크기를 150px로 설정해주세요!
$(".list img").attr("width","150px");
$("h1").after("<div class='choice'></div>");
$(".choice").append("<a href='#' class='btn1'>클릭하면 이미지를 2초에 한번씩 이동합니다.</a>");
$(".choice").append("<a href='#' class='btn2'>클릭하면 이미지를 2초에 한번씩 삭제해주세요.</a>");
$(".choice").append("<a href='#' class='btn3'>클릭하면 이미지를 2초에 한번씩 추가해주세요.</a>");
$(".choice").append("<a href='#' class='btn4'>클릭하면 이미지를 멈춥니다.</a>");
var timer; //전역변수로 만들기 위해 적어줍니다.
$(".choice .btn1").click(function(){ //setInterval : 일정한간격 반대는 clearInterval
timer = setInterval(function(){
$(".list img").last().prependTo(".list");
},1000);
});
$(".choice .btn2").click(function(){
timer = setInterval(function(){ //여기 time앞에 var을 붙이게되면 지역변수가 되어서 이안에 함수를 적어야합니다.
$(".list img").last().remove();
},1000);
});
$(".choice .btn3").click(function(){
timer = setInterval(function(){
$(".list").last().append("<img src='assets/img/img04.png' alt='' width='150px'>");
},1000);
});
$(".choice .btn4").click(function(){
clearInterval(timer);
});
});
</script>
</body>
</html>
| 유형 |
메서드 |
설명 |
| Basic |
.hide() |
선택한 요소를 숨깁니다. |
| .show() |
선택한 요소를 보여줍니다. |
| .toggle()♥ |
선택한 요소를 숨김/보여줍니다. |
| Fading |
.fadeIn() |
선택한 요소를 천천히 보여줍니다. |
| .fadeOut() |
선택한 요소를 천천히 숨겨줍니다. |
| .fadeTo() |
선택한 요소를 투명도를 조절합니다. |
| .fadeToggle() |
선택한 요소를 천천히 숨김/보여줍니다. |
| Sliding |
.slideDown() |
선택한 요소를 슬라이딩으로 보여줍니다. |
| .slideToggle() |
선택한 요소를 슬라이딩으로 숨김/보여줍니다. |
| .slideUp() |
선택한 요소를 슬라이딩으로 숨겨줍니다. |
| Custom |
.animate()♥ |
선택한 요소에 애니메이션을 적용합니다. |
| .clearQueue() |
선택한 요소에 첫 번째 큐만 실행하고 대기 중인 큐는 모두 삭제합니다. |
| .delay() |
선택한 요소의 애니메이션 효과를 지연합니다. |
| .dequeue() |
선택한 요소 스택에 쌓인 큐를 모두 제거합니다. |
| .finish() |
선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. |
| .queue() |
선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. |
| .stop() |
선택한 요소의 실행중인 애니메이션을 정지합니다. |
<!DOCTYPE html>l;
<html lang="ko">l;
<head>l;
<meta charset="UTF-8">l;
<title>l;jQuery</title>l;
<style>l;
* {margin: 0; padding: 10px;}
li {list-style:none; display:inline;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block;
border-radius: 20px; text-decoration: none; color: #000; margin: 4px;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
.onRed { margin: 5px; padding: 5px; font-size: 90%; color: #c7254e;
white-space: nowrap; background-color:#f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; }
</style>l;
</head>l;
<body>l;
<div class="choice">l;
<a href="#" class="btn1">l;.hide()</a>l;
<a href="#" class="btn2">l;.show()</a>l;
<a href="#" class="btn3">l;.toggle()</a>l;
<a href="#" class="btn4">l;.fadeOut()</a>l;
<a href="#" class="btn5">l;.fadeIn()</a>l;
<a href="#" class="btn6">l;.fadeToggle()</a>l;
<a href="#" class="btn7">l;.fadeTo(1000, 0.2)</a>l;
<a href="#" class="btn8">l;.fadeTo(1000, 0.4)</a>l;
<a href="#" class="btn9">l;.fadeTo(1000, 0.6)</a>l;
<a href="#" class="btn10">l;.slideUp(100)</a>l;
<a href="#" class="btn11">l;.slideDown("fast")</a>l;
<a href="#" class="btn12">l;.slideToggle("slow")</a>l;
</div>l;<br>l;
<div class="list">l;
<img src="assets/img/img01.png" alt="">l;
<img src="assets/img/img02.png" alt="">l;
<img src="assets/img/img03.png" alt="">l;
</div>l;
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js">l;</script>l;
<script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js">l;</script>l;
<script>l;
$(function(){
//이미지 크기를 200으로 설정해주세요!
$(".list img").attr("width","200");
//h1태그를 만들고 글씨를 "Effect"라고 설정해주세요!
$(".choice").before(" <br>l;<h1>l;Effect</h1>l;<br>l;");
});
$(".choice .btn1").click(function(){
$(".list").hide();
});
$(".choice .btn2").click(function(){
$(".list").show();
});
$(".choice .btn3").click(function(){
$(".list").toggle();
});
$(".choice .btn4").click(function(){
$(".list").fadeOut();
});
$(".choice .btn5").click(function(){ //숫자를 기입하면 초도 적용됩니다.
$(".list").fadeIn();
});
$(".choice .btn6").click(function(){
$(".list").fadeToggle();
});
$(".choice .btn7").click(function(){
$(".list").fadeTo(1000, 0.2);
});
$(".choice .btn8").click(function(){
$(".list").fadeTo(1000, 0.4);
});
$(".choice .btn9").click(function(){
$(".list").fadeTo(1000, 0.6);
});
$(".choice .btn10").click(function(){
$(".list").slideUp(100);
});
$(".choice .btn11").click(function(){
$(".list").slideDown("fast");
});
$(".choice .btn12").click(function(){
$(".list").slideToggle("slow");
});
</script>l;
</body>l;
</html>l;