제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 제이쿼리는 HTML에 포함되어 있는 클라이언트 사이트 스크립트 언어를 단순화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 함수의 집합을 의미합니다.
제이쿼리 언어의 특징
- 제이쿼리는 CSS를 쉽게 적용할 수 있습니다.
- 제이쿼리는 크로스브라우징을 지원합니다.
- 제이쿼리는 플러그인이 풍부합니다.
- 제이쿼리는 코드를 적게, 효율적으로 작성 할 수 있습니다.0
- 제이쿼리는 좋은 확장성과 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" ></script>
<!-- 제이쿼리 UI 버전 -->
<script type="text/javascript" src="assets/js/jquery-ui.1.12.1min.js"></script>
</head>
<body>
</body>
</html>
구글 CDN(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 버전 -->
<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/jquery.min.js"></script>
<script type="text/javascript">
//제이쿼리 사용 영역//
</script>
</head>
<body>
<!-- body 안에 사용하는 경우 -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.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"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//실행 코드
});
</script>
<!-- jQuery 키워드를 $로 치환 -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//실행 코드
});
</script>
<!-- 단축해서 사용 -->
<script type="text/javascript">
$(document).ready(function(){
//실행 코드
});
</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 -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//제이쿼리 : 세번째 리스트 색을 변경
$(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>
</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 |
첫 번째 자식 요소를 선택합니다. |
:last-child |
마지막 번째 자식 요소를 선택합니다. |
:first-of-child |
자식 중 첫번째 유형의 자식요소를 선택합니다. |
:last-of-child |
자식 중 마지막 유형의 자식요소를 선택합니다. |
:nth-child(index) |
index번째에 있는 자식 요소를 선택합니다. |
:nth-child(even) |
짝수번째에 있는 자식 요소를 선택합니다. |
:nth-child(odd) |
홀수번째에 있는 자식 요소를 선택합니다. |
:nth-child(2n) |
2배수 번째에 있는 자식 요소를 선택합니다. |
:nth-child(2n+1) |
2배수+1 번째에 있는 자식 요소를 선택합니다. |
:nth-last-child(2n+1) |
index 번째에 있는 마지막 자식 요소를 선택합니다. |
:nth-last-of-type(index) |
index 번째에 있는 마지막 유형의 자식 요소를 선택합니다. |
:only-child |
자식 요소가 오직 하나인 요소를 선택합니다. |
:only-child-type |
자식 요소가 오직 하나 유형인 요소를 선택합니다. |
| 종류 |
설명 |
:input |
모든 입력 양식을 선택합니다. |
:file |
파일 업로드 양식을 선택합니다. |
:hidden |
숨겨진 입력 양식을 선택합니다. |
:image |
이미지 입력 양식을 선택합니다. |
:password |
암호 입력 양식을 선택합니다. |
:radio |
라디오 버튼 입력 양식을 선택합니다. |
:reset |
리셋 입력 양식을 선택합니다. |
:submit |
데이터 보내기 입력 양식을 선택합니다. |
:text |
텍스트 박스 양식을 선택합니다. |
제이쿼리 선택자 view
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 1px;}
</style>
</head>
<body>
<h1>jquery</h1>
<div>
<ul id="list1" class="list">
<li class="on1"><a href="#list3">one1</a></li>
<li class="on2"><a href="https://www.daum.net">one2</a></li>
<li class="on3"><a href="https://www.naver.com">one3</a></li>
<li class="on4"><a href="mm2800.dothome.co.kr" target="_blank">one4</a></li>
<li class="on5"><a href="#list3">one5</a></li>
<li class="on6"><a href="#list3">one6</a></li>
<li class="on7"><a href="#list3">one7</a></li>
<li class="on8"><a href="#list3">one8</a></li>
<li class="on9"><a href="#list3">one9</a></li>
<li class="on10"><a href="#list3"></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="on1"><a href="#list3">one1</a></li>
<li class="on2"><a href="https://www.daum.net">one2</a></li>
<li class="on3"><a href="https://www.naver.com">one3</a></li>
<li class="on4"><a href="mm2800.dothome.co.kr" target="_blank">one4</a></li>
<li class="on5"><a href="#list3">one5</a></li>
<li class="on6"><a href="#list3">one6</a></li>
<li class="on7"><a href="#list3"></a></li>
<li class="on8"><a href="#list3">one8</a></li>
<li class="on9"><a href="#list3">one9</a></li>
<li class="on10"><a href="#list3"></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="on1"><a href="#list3">one1</a></li>
<li class="on2"><a href="https://www.daum.net">one2</a></li>
<li class="on3"><a href="https://www.naver.com">one3</a></li>
<li class="on4"><a href="mm2800.dothome.co.kr" target="_blank">one4</a></li>
<li class="on5"><a href="#list3">one5</a></li>
<li class="on6"><a href="#list3">one6</a></li>
<li class="on7"><a href="#list3">one7</a></li>
<li class="on8"><a href="#list3"></a></li>
<li class="on9"><a href="#list3">one9</a></li>
<li class="on10"><a href="#list3"></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="#">ptga01</a></li>
</ul>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// $("li").css("background","#bbdefb");
// $("li").css({"background":"#bbdefb", "border":"1px dashed #303f9f"});
//기본 선택자 :
// $("li").css({background:"#bbdefb", border:"1px dashed #303f9f"});
// $(".one3").css({background:"#bbdefb", border:"1px dashed #303f9f"});
// $("#list2").css({background:"#bbdefb", border:"1px dashed #303f9f"});
// $("*").css({background:"#bbdefb", border:"1px dashed #303f9f"});
// $(".one3, .one5").css({background:"#bbdefb", border:"1px dashed #303f9f"});
//계층 선택자 :
// $(".list li").css({background:"#bbdefb", border:"1px dashed #303f9f"});
// $(".list > li").css({background:"#bbdefb", border:"1px dashed #303f9f"});
// $(".one4 + li").css({background:"#bbdefb", border:"1px dashed #303f9f"});
// $(".one4 ~ li").css({background:"#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"});
// $("li a[href$='com']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li a[href*='web']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li a[href!='https://www.naver.com']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li a[href][target]").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li a[href~='com']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li a[href|='web']").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
//기본 필터 선택자
// $("li:eq(4)")
// $("li:gt(4)")
// $("li:lt(4)")
// $(":header")
// $("li:first")
// $("li:last")
// $("li:odd")
// $("li:even").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
//내용 필터 선택자
// $("li:contains('one5')").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li a:empty").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"}); //내용 찾을때
// $("li:parent").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:has(li)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"}); //태그를 찾을때
//보임 필터 선택자
// $("li:hidden").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:visible").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
//자식요소 선택자
// $("li:first").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:first-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:last").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:last-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:nth-child(4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:nth-child(even)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:nth-child(odd)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:nth-child(2n+1)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
// $("li:nth-child(2n+4)").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
$("ul li:only-child").css({backgroundColor:"#bbdefb", border:"1px dashed #303f9f"});
</script>
</body>
</html>
탐색은 제이쿼리의 선택자를 기준으로 선택한 요소에서 원하는 요소를 다시 한번 선택하는 메서드입니다. 탐색은 트리구조와 필어 영역으로 나눌 수 있으며 역활과 성질은 선택자와 비슷합니다.
탐색(Traversing)
| 유형 |
메서드 |
설명 |
| 트리구조탐색(Tree traversal) |
.children() |
선택한 요소의 바로 아래 자식 요소만 선택합니다. |
| .closest() |
선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다. |
| .find() ♥ |
선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다. |
| .next() |
선택한 요소를 다음 형제 요소를 선택합니다. |
| .nextAll() |
선택한 요소의 다음 모든 형제 요소를 선택합니다. |
| .nextUntil() |
선택한 요소의 다음 요소 중 조건에 맞을 때 까지 찾아 선택합니다. |
| .parent() |
선택한 요소의 부모 요소를 선택합니다. |
| .parents() |
선택한 요소의 모든 부모 요소를 선택합니다. |
| .parentsUntil() |
선택한 요소의 모든 부모 요소 중 조건에 맞을 때까지 찾아 선택합니다. |
| .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: #000; margin: 4px;}
.on {background: #bbdefb; border: 1px dashed #303f9f;}
.onRed {color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
</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">.parentAll()</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>
<p class="text">탐색은 제이쿼리의 선택자를 기준으로 선택한 요소에서 원하는 요소를 다시 한번 선택하는 메서드입니다. 탐색은 트리구조와 필어 영역으로 나눌 수 있으며 역활과 성질은 선택자와 비슷합니다.</p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(".choice .off1").click(function(){
$("*").removeClass("on");
$("*").removeClass("onRed");
});
$(".choice .btn1").click(function(){
$(".list li").children().addClass("on");
});
$(".choice .btn2").click(function(){
$(".list li").find("li").addClass("on");
});
$(".choice .btn3").click(function(){
$(".list1").next().addClass("on");
});
$(".choice .btn4").click(function(){
$(".list1").nextAll().addClass("on");
});
$(".choice .btn5").click(function(){
$(".list1").nextUntil(".until").addClass("on");
});
$(".choice .btn6").click(function(){
$(".list2").prev().addClass("on");
});
$(".choice .btn7").click(function(){
$(".list2").prevAll().addClass("on");
});
$(".choice .btn8").click(function(){
$(".list2").prevUntil(".until2").addClass("on");
});
$(".choice .btn9").click(function(){
$(".parent").parent().addClass("on");
});
$(".choice .btn10").click(function(){
$(".parent").parents().addClass("on");
});
$(".choice .btn11").click(function(){
$(".parent").parentsUntil(".select").addClass("on");
});
$(".choice .btn12").click(function(){
$(".list1").siblings().addClass("on");
});
$(".choice .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>";
$(".choice .btn14").click(function(){
$(".text").html(text2).find(":contains('탐색')").addClass("onRed");
});
//"선택자" 단어를 선택하여 효과주기
$(".choice .btn15").click(function(){
$(".text").html(text2).find(":contains('선택자')").addClass("onRed");
});
// $(".list li").children().addClass("on");
// $(".list li").find("li").addClass("on");
</script>
</body>
</html>
<!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: #000; margin: 4px;}
.on {background: #bbdefb; border: 1px dashed #303f9f;}
.onRed {color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.select:before {content: 'select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; 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()</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>
</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>.nextAll() :선택한 요소의 다음 모든 형제 요소를 선택합니다.</li>
<li>.nextUntil() :선택한 요소의 다음 요소 중 조건에 맞을 때 까지 찾아 선택합니다.</li>
</ul>
</li>
<li class="liList">필터링(Filtering)
<ul>
<li>.eq(index) : 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
<ul>
<li>여기는 두 번째 자식입니다.</li>
<li>여기는 두 번째 자식입니다.</li>
<li>여기는 두 번째 자식입니다.</li>
</ul>
</li>
<li>.filter() : 선택한 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 요소에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//선택자를 이용해서 .children() 줄에 CSS 효과를 넣어주세요! (7가지 이상)
// $(".list1").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $("li[class='list1']").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $("li[class^='list1']").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $("li[class$='list1']").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $("li[class*='list1']").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:eq(0)").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:lt(1)").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:contains('children')").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:contains('children')").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:first-of-type").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:first").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:first-child").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:nth-child(1)").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
//선택자를 이용해서 .find() 줄에 CSS 효과를 넣어주세요! (10개이상)
// $(".select li:nth-child(3)").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:eq(2)").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
// $(".select li:contains('find')").css({background:"#bbdefb", border: "1px dashed #303f9f", display:"block"});
//btn1을 클릭했을때
$(".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(){
$(".list li").has(".select").addClass("on"); //리스트안에 셀렉트가 포함된 li 을 찿ㅈ아라
});
$(".choice .btn9").click(function(){
if($(".list li").is("li")){
$(".list li.select").addClass("on"); //list안에 li중 class가 select를 가진 li를 찾아라 찾아라
}
});
$(".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>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 8px; cursor:pointer;}
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: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; border-radius: 4px; border-bottom: 1px dashed #3d90b7;}
</style>
</head>
<body>
<h1>탐색(Traversing)</h1>
<div class="choice">
<a href="#" class="btn1">리스트을 클릭하면 strong 태그가 두개 있으면 파란색, 하나 있으면 빨간색으로 표현됩니다.</a>
<a href="#" class="btn2">클릭하면 li의 부모가 ul인지 확인합니다.</a>
<a href="#" class="btn3">클릭하면 li의 부모가 div인지 확인합니다.</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>.nextAll() :선택한 <strong>요소</strong>의 다음 모든 형제 <strong>요소</strong>를 선택합니다.</li>
<li>.nextUntil() :선택한 <strong>요소</strong>의 다음 <strong>요소</strong> 중 조건에 맞을 때 까지 찾아 선택합니다.</li>
<li>.eq(index) : 선택한 <strong>요소</strong>에 인덱스 번호에 해당하는 <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 type="text/javascript">
$(".list li").click(function(){
var li = $(this); //사용자가 몇번째 li를 클릭 했는지 this에게 받는다(타겟)
var two = li.is(function(){
return $("strong",this).length === 2;
});
if(two){
li.addClass("onBlue");
} else {
li.addClass("onRed");
}
});
//is태그
$(".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>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 8px; cursor:pointer;}
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: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; border-radius: 4px; border-bottom: 1px dashed #3d90b7;}
</style>
</head>
<body>
<h1>탐색(Traversing)</h1>
<div class="choice">
<a href="#" class="btn1">.addClass("onBlue")</a>
<a href="#" class="btn2">.each("onBlue")</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>.nextAll() :선택한 <strong>요소</strong>의 다음 모든 형제 <strong>요소</strong>를 선택합니다.</li>
<li>.nextUntil() :선택한 <strong>요소</strong>의 다음 <strong>요소</strong> 중 조건에 맞을 때 까지 찾아 선택합니다.</li>
<li>.eq(index) : 선택한 <strong>요소</strong>에 인덱스 번호에 해당하는 <strong>요소</strong>를 찾습니다.</li>
<li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(".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)); //0.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>
li {margin: 8px; cursor:pointer;}
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: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; border-radius: 4px; border-bottom: 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으로 변경합니다.</a>
<a href="#" class="btn5">이미지의 크기를 500으로 변경합니다.</a>
<a href="#" class="btn6">이미지의 크기를 600으로 변경합니다.</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>
</div>
<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 type="text/javascript">
$(".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(){
$(".list img").attr("width", "400");
});
$(".choice .btn5").click(function(){
$(".list img").attr("width", "500");
});
$(".choice .btn6").click(function(){
$(".list img").attr("width", "600");
});
//이미지 경로를 변경합니다.
$(".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"});
});
$(".choice .btn12").click(function(){
$(".list img").attr({src:"assets/img/img04.png", width:"600"});
});
</script>
</body>
</html>
Attributes
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
li {margin: 8px; display: inline-block; list-style: none; cursor:pointer;}
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: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; border-radius: 4px; border-bottom: 1px dashed #3d90b7;}
</style>
</head>
<body>
<h1>.attr()</h1>
<div class="choice">
<a href="#" class="btn1">클릭하면 이미지를 순차적으로 크게 해줍니다.</a>
</div>
<div class="list">
<ul>
<li><img src="assets/img/img01.png" alt="이미지1" width="200"></li>
<li><img src="assets/img/img02.png" alt="이미지1" width="200"></li>
<li><img src="assets/img/img03.png" alt="이미지1" width="200"></li>
<li><img src="assets/img/img04.png" alt="이미지1" width="200"></li>
<li><img src="assets/img/img05.png" alt="이미지1" width="200"></li>
</ul>
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(".choice .btn1").click(function(){
$(".list img").attr("width",function(i){ //.attr(+함수)
return (i+1)*50;
});
});
</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: #1e88e5; margin-right: 1px; color: #fff;}
</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" alt="이미지1" width="350">
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//글씨를 클릭하면 Tab --> menu로 변경해주세요!
// $(".tab_btn a").click(function(){
// $(".tab_btn a").text("menu");
// });
//글씨를 클릭하면 클릭한 글씨만 Tab --> menu로 변경해주세요! 1
// $(".tab_btn a").click(function(){
// $(this).text("menu");
// });
//글씨를 클릭하면 클릭한 글씨만 Tab --> menu로 변경해주세요! 2
// $(".tab_btn ul li").click(function(){
// $(this).find("a").text("menu");
// });
//글씨를 클릭하면 클릭한 글씨를 tab3 ---> menu3으로 변경해주세요!
// $(".tab_btn ul li").click(function(){
// var target = $(this)
// var index = target.index()+1;
// //alert(index);
// 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;}
body {width: 300px; margin: 50px auto;}
li {list-style: none;}
a {text-decoration: none; color: #666; border: 1px solid #5f6368; padding: 5px 20px 5px 20px; display: inline-block; border-radius: 20px; 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 type="text/javascript">
$(".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;}
body {width: 500px; margin: 50px auto;}
li {list-style: none;}
a {text-decoration: none; color: #666; border: 1px solid #5f6368; padding: 5px 20px 5px 20px; display: inline-block; border-radius: 20px; 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.co.kr/?hl=ko">구글</option>
</select>
<p class="text"></p>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(".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;}
body {width: 800px; margin: 50px auto;}
.choice {padding-bottom: 40px;}
li {list-style: none;}
a {text-decoration: none; color: #666; border: 1px solid #5f6368; padding: 5px 20px 5px 20px; display: inline-block; border-radius: 20px; margin: 4px; }
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; border-radius: 4px; border-bottom: 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">.nextAll() :선택한 요소의 다음 모든 형제 요소를 선택합니다.</li>
<li>.nextUntil() :선택한 요소의 다음 요소 중 조건에 맞을 때 까지 찾아 선택합니다.</li>
<li>.eq(index) : 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</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 type="text/javascript">
//버튼1을 클릭하면 addClass("onRed")를 추가 시켜주세요.
$(".choice .btn1").click(function(){
$(".list 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: #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 type="text/javascript">
//글씨를 클릭하면 tab ---> menu로 변경해주세요.
// $("#tab_btn li a").click(function(){
// $("#tab_btn li a").text("Menu");
// });
//글씨를 클릭하면 클릭한 글씨만 tab ---> menu로 변경해주세요.tab
// $("#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>
* {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: #666; border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; margin: 4px; }
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; border-radius: 4px; border-bottom: 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>.nextAll() :선택한 <strong>요소</strong>의 다음 모든 형제 <strong>요소</strong>를 선택합니다.</li>
<li>.nextUntil() :선택한 <strong>요소</strong>의 다음 <strong>요소</strong> 중 조건에 맞을 때 까지 찾아 선택합니다.</li>
<li>.eq(index) : 선택한 <strong>요소</strong>에 인덱스 번호에 해당하는 <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 type="text/javascript">
//1번째
$(".choice .btn1").click(function(){
var value = $(".list li").css("color");
$(".list .text").text("이 폰트의 색은 : " + value);
});
//2번째
$(".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("") );
});
//3번째
$(".choice .btn3").click(function(){
$(".list li").css("color","red");
});
//4번째
$(".choice .btn4").click(function(){
$(".list li").css({"color":"blue","font-size":"30px"});
});
//5번째
$(".choice .btn5").click(function(){
$(".list li").css({fontSize:function(index, value){
return parseFloat(value) * 1.2;
}});
});
//6번째
$(".choice .btn6").click(function(){
$(".list li").css({fontSize:function(index, value){
return parseFloat(value) / 1.2;
}});
});
</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; border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; margin: 4px; }
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; border-radius: 4px; border-bottom: 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">.nextAll() :선택한 <strong>요소</strong>의 다음 모든 형제 <strong>요소</strong>를 선택합니다.</li>
<li>.nextUntil() :선택한 <strong>요소</strong>의 다음 <strong>요소</strong> 중 조건에 맞을 때 까지 찾아 선택합니다.</li>
<li>.eq(index) : 선택한 <strong>요소</strong>에 인덱스 번호에 해당하는 <strong>요소</strong>를 찾습니다.</li>
<li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(".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>
* {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: #666; border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; margin: 4px; }
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 1px dashed #a51a3d;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background: #e7f6fd; border-radius: 4px; border-bottom: 1px dashed #3d90b7;}
</style>
</head>
<body>
<div class="choice">
<a href="#" class="btn1">클릭하면 toggleClass 효과를 줍니다.</a>
<a href="#" class="btn2">클릭하면 세번째 줄만 toggleClass 효과를 줍니다.</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>.nextAll() :선택한 <strong>요소</strong>의 다음 모든 형제 <strong>요소</strong>를 선택합니다.</li>
<li>.nextUntil() :선택한 <strong>요소</strong>의 다음 <strong>요소</strong> 중 조건에 맞을 때 까지 찾아 선택합니다.</li>
<li>.eq(index) : 선택한 <strong>요소</strong>에 인덱스 번호에 해당하는 <strong>요소</strong>를 찾습니다.</li>
<li>.filter() : 선택한 <strong>요소</strong>에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() : 선택한 <strong>요소</strong>에서 첫 번째 자식을 선택합니다.</li>
<li>.has() : 선택한 <strong>요소</strong>의 자식 요소에서 주어진 선택자를 찾습니다.</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(".choice .btn1").click(function(){
$(".list li").toggleClass("onBlue");
});
$(".choice .btn2").click(function(){
$(".list li").eq(2).toggleClass("onBlue");
});
</script>
</body>
</html>
Dimensions
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
body {height: 4000px;}
li {list-style: none;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;
border-radius: 20px; text-decoration: none; color: #666;}
.on {background-color: #bbdefb; border: 1px dashed #303f9f;}
.onRed {padding: 5px; margin: 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;}
.list li.on {display: none;}
</style>
</head>
<body>
<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>
<a href="#" class="btn5">클릭하면 리스트의 가로(.width())값을 구합니다.</a>
<a href="#" class="btn6">클릭하면 리스트의 가로(.css("width"))값을 구합니다.</a>
</div>
<div class="list">
<ul class="onRed">
<li>.children() : 선택한 <strong>요소</strong>의 바로 아래 자식 <strong>요소</strong>만 선택합니다.</li>
<li>.closest() : 선택한 <strong>요소</strong>를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
<li>.find() : 선택한 <strong>요소</strong>의 자식 <strong>요소</strong> 중 조건에 맞는 <strong>요소</strong>를 선택합니다.</li>
<li class="select">.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>의 자식 <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">.innterWidth()</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 + "입니다.")
}
$(".choice1 .btn1").click(function(){
// var height = $(".list").height();
// $(".text").text(height);
showHeight("높이(.height())",$(".list").height());
//단위 X
});
$(".choice1 .btn2").click(function(){
// var height = $(".list").css("height");
// $(".text").text(height);
showHeight("높이(.css('height'))",$(".list").css('height'));
//단위 O
});
$(".choice1 .btn3").click(function(){
showHeight("문서의 높이",$(document).height() );
});
$(".choice1 .btn4").click(function(){
showHeight("브라우저의 높이",$(window).width() );
});
$(".choice1 .btn5").click(function(){
// var width = $(".list").width();
// $(".text").text(width);
showHeight("너비(.width())",$(".list").width());
//단위 X
});
$(".choice1 .btn6").click(function(){
// var width = $(".list").css("width");
// $(".text").text(width);
showHeight("너비(.css('width'))",$(".list").css('width'));
//단위 O
});
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;}
.onBlue {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7;
white-space: nowrap; background-color:#e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
.circle {width: 100px; height: 100px; color: #c7254e; background: #f9f2f4; border-radius: 50%; border: 1px dashed #a51a3d; text-align: center; line-height: 100px;}
.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>
<script type="text/javascript" src="assets/js/jquery-ui-1.12.1.min.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable({
//circle을 보더 색을 알아내서, ol 클래스span에 출력해주세요!
// var = color $(".circle").css("border-color");
// $(".ol").text(color);
// //circle을 배경 색을 알아내서, ot 클래스 span에 출력해주세요!
// var = color $(".circle").css("background-color");
// $(".ot").text(color);
drag: function() {
$(".ol").text( $(".circle").offset().left + "px" );
$(".ot").text( $(".circle").offset().top + "px" );
$(".pl").text( $(".circle").position().left + "px" );
$(".pt").text( $(".circle").position().top + "px" );
}
});
// var cir = $(".circle").offset().left;
// $(".ol").text(cir);
$(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 class="circle" id="draggable">
circle
</div>
</div>
</body>
</html>
| 유형 |
메서드 |
설명 |
| Copying |
.clone() |
선택한 요소 복사본을 만듭니다. |
| Dom Insertion, Around |
.wrap() |
선택한 요소에 새로운 태그를 추가합니다. |
| .wrapAll() |
선택한 모든 요소에 새로운 태그를 추가합니다. |
| .wrapInner() |
선택한 요소에 각각 새로운 태그를 추가합니다. |
| Dom Insertion, Inside |
.append() ♥ |
선택한 요소 마지막 위치에 새로운 요소를 추가합니다. |
| .appendTo() |
선택한 타겟 마지막 위치에 새로운 요소를 추가합니다. |
| .html() ♥ |
선택한 요소 내부의 HTML을 읽거나 변경합니다. |
| .prepend() |
선택한 요소 처음 위치에 새로운 요소를 추가합니다. |
| .prependTo() |
선택한 타겟 처음 위치에 새로운 요소를 추가합니다. |
| .text() ♥ |
선택한 요소 내부의 텍스트를 읽거나 변경합니다. |
| Dom Insertion, outsdie |
.after() |
선택한 요소 다음 위치에 새로운 요소를 추가합니다. |
| .before() |
선택한 요소 이전 위치에 새로운 요소를 추가합니다. |
| .insertAfter() |
선택한 타겟 요소 다음에 새로운 요소를 추가합니다. |
| .insertBefore() |
선택한 타겟 요소 이전에 새로운 요소를 추가합니다. |
| Dom Insertion, Removal |
.detach() |
선택한 요소(데이터 및 이벤트 불포함)를 제거합니다.. |
| .empty() |
선택한 요소의 하위 요소를 제거합니다.. |
| .remove() ♥ |
선택한 요소(데이터 및 이벤트 포함)를 제거합니다.. |
| .unwrap() |
선택한 요소의 부모 요소를 제거합니다. |
| Dom Insertion, Replacement |
.replaceAll() |
선택한 요소를 새로운 요소로 바꿉니다. |
| .replaceWith() |
선택한 요소를 새로운 컨텐츠로 바꿉니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 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;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;
border-radius: 20px; text-decoration: none; color: #666;}
</style>
</head>
<body>
<h1>변경</h1>
<div class="list">
<p>.clone() : 선택한 요소 복사본을 만듭니다.</p>
<p>.wrap() : 선택한 요소에 새로운 태그를 추가합니다.</p>
<p>.wrapAll() : 선택한 모든 요소에 새로운 태그를 추가합니다.</p>
<p>.wrapInner() : 선택한 요소에 각각 새로운 태그를 추가합니다.</p>
<p>.append() : 선택한 요소 마지막 위치에 새로운 요소를 추가합니다.</p>
<p>.appendTo() : 선택한 타겟 마지막 위치에 새로운 요소를 추가합니다.</p>
</div>
<div class="chocie">
<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">클릭하면 첫 번째 줄의 요소를 가져와서 출력합니다.(.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>
</body>
<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(){
$(".chocie .btn1").click(function(){
$(".list p").wrap("<div class='onBlue'></div>")
});
$(".chocie .btn2").click(function(){
$(".list p").wrap(function(){
return "<div class='onBlue'>" + $(this).text() + "</div>";
});
});
$(".chocie .btn3").click(function(){
$(".list p").wrapAll("<div class='onBlue'></div>")
});
$(".chocie .btn4").click(function(){
$(".list p").wrapInner("<div class='onBlue'></div>")
});
$(".chocie .btn5").click(function(){
$(".list").append("<p class='onRed'>.html() : 선택한 요소 내부의 HTML을 읽거나 변경합니다.</p>")
});
$(".chocie .btn6").click(function(){
$(".list").prepend("<p class='onRed'>.text() : 선택한 요소 내부의 텍스트를 읽거나 변경합니다.</p>")
});
$(".chocie .btn7").click(function(){
$(".list").append( $("h1") );
});
$(".chocie .btn8").click(function(){
$(".list").prepend( $("h1") );
});
$(".chocie .btn9").click(function(){
$("<p class='onBlue'>.after() : 선택한 요소 다음 위치에 새로운 요소를 추가합니다.</p>").appendTo(".list");
});
$(".chocie .btn10").click(function(){
$("<p class='onBlue'>.before() : 선택한 요소 이전 위치에 새로운 요소를 추가합니다.</p>").prependTo(".list");
});
$(".chocie .btn11").click(function(){
var htmlString = $(".list p").eq(0).html();
alert(htmlString);
});
$(".chocie .btn12").click(function(){
var textString = $(".list p").eq(0).text();
alert(textString);
});
$(".chocie .btn13").click(function(){
$(".list p:last-child").html(".detach() : 선택한 요소(<strong class='onRed'>데이터</strong> 및 이벤트 불포함)를 제거합니다.");
});
$(".chocie .btn14").click(function(){
$(".list p:last-child").text(".detach() : 선택한 요소(<strong class='onRed'>데이터</strong> 및 이벤트 불포함)를 제거합니다.");
});
$(".chocie .btn15").click(function(){
$(".list p:first-child").after("<p class='onBlue'>.remove() : 선택한 요소(데이터 및 이벤트 포함)를 제거합니다.</p>");
});
$(".chocie .btn16").click(function(){
$(".list p:first-child").before("<p class='onBlue'>.remove() : 선택한 요소(데이터 및 이벤트 포함)를 제거합니다.</p>");
});
$(".chocie .btn17").click(function(){
$(".list p:last").remove();
});
});
</script>
</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;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 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;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color: #666;}
</style>
</head>
<body>
<h3>이미지 랜덤으로 나오기</h3>
<div class="list">
<ul>
<li><img src="assets/img/img01.png" alt="이미지1"></li>
<li><img src="assets/img/img02.png" alt="이미지2"></li>
<li><img src="assets/img/img03.png" alt="이미지3"></li>
</ul>
</div>
</body>
<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 li img").css("width","100px");
//li의 display를 inline으로 변경해주세요!
$("li").css("display","inline");
$("h3").after("<div class='choice'></div>");
$(".choice").prepend("<a href='#' class='btn1'>클릭하면 뒤쪽에 이미지가 추가됩니다.</a>");
$(".choice").prepend("<a href='#' class='btn2'>클릭하면 앞쪽에 이미지가 추가됩니다.</a>");
$(".choice").prepend("<a href='#' class='btn3'>클릭하면 앞쪽에 이미지가 삭제됩니다.</a>");
$(".choice").prepend("<a href='#' class='btn4'>클릭하면 뒤쪽에 이미지가 삭제됩니다.</a>");
$(".choice").prepend("<a href='#' class='btn5'>클릭하면 뒤쪽에 이미지가 랜덤 추가됩니다.</a>");
//이미지를 추가해주세요.
$(".choice .btn1").click(function(){
$(".list ul").append("<li><img src='assets/img/img04.png' alt='이미지4' width='100'></li>");
});
$(".choice .btn2").click(function(){
$(".list ul").prepend("<li><img src='assets/img/img05.png' alt='이미지5' width='100'></li>");
});
$(".choice .btn3").click(function(){
$(".list li:first").remove();
});
$(".choice .btn4").click(function(){
$(".list li:last").remove();
});
//이미지가 랜덤으로 나오는 함수
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>
</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;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 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;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color: #666;}
</style>
</head>
<body>
<h3>2초에 한번씩 이미지 이동하기</h3>
<div class="list">
<img src="assets/img/img01.png" alt="이미지1">
<img src="assets/img/img02.png" alt="이미지2">
<img src="assets/img/img03.png" alt="이미지3">
</div>
</body>
<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").css("width","150px");
$("h3").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>")
//2초에 한번씩 이미지 이동하기
$(".choice .btn1").click(function(){
setInterval(function(){
$(".list img").last().prependTo(".list");
},2000);
});
//2초에 한번씩 이미지 삭제하기
$(".choice .btn2").click(function(){
setInterval(function(){
$(".list img").last().remove();
},2000);
});
//2초에 한번씩 이미지 추가하기
$(".choice .btn3").click(function(){
timer = setInterval(function(){
$(".list").append("<img src='assets/img/img03.png' alt='' width='150px'>");
},2000);
});
//일시정지
$(".choice .btn4").click(function(){
clearInterval(timer);
});
});
</script>
</html>
| 유형 |
메서드 |
설명 |
| Basic |
.hide() |
선택한 요소를 숨깁니다. |
| .show() |
선택한 요소를 보여줍니다. |
| .toggle()♥ |
선택한 요소를 숨김/보여줍니다. |
| Fading |
.fadeIn() |
선택한 요소를 천천히 보여줍니다. |
| .fadeOut() |
선택한 요소를 천천히 숨김니다. |
| .fadeto() |
선택한 요소를 투명도를 조절합니다. |
| .fadeToggle() |
선택한 요소를 천천히 숨김/보여줍니다. |
| Sliding |
.slideDown() |
선택한 요소를 슬라이딩으로 보여줍니다. |
| .slideToggle() |
선택한 요소를 슬라이딩으로 숨김/보여줍니다.. |
| .slideUp() |
선택한 요소를 슬라이딩으로 숨김니다. |
| custom |
.animate()♥ |
선택한 요소에 애니메이션을 적용합니다. |
| .clearQueue() |
선택한 요소에 첫 번째 큐만 실행하고 대기 중인 큐는 모두 삭제합니다. |
| .delay() |
선택한 요소의 애니메이션 효과를 지연합니다. |
| .dequeue() |
선택한 요소 스택에 쌓인 큐를 모두 제거합니다. |
| .finish() |
선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. |
| .queue() |
선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. |
| .stop() |
선택한 요소의 실행중인 애니메이션을 정지합니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
* {margin: 0; padding: 0;}
li {list-style: none; display: inline;}
.onRed {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background: #f9f2f4; border-radius: 4px; border-bottom: 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;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none; color: #666;}
</style>
</head>
<body>
<div class="choice">
<a href="#" class="btn1">.hide()</a>
<a href="#" class="btn2">.show()</a>
<a href="#" class="btn3">.toggle()</a>
<a href="#" class="btn4">.fadeOut()</a>
<a href="#" class="btn5">.fadeIn()</a>
<a href="#" class="btn6">.fadeToggle()</a>
<a href="#" class="btn7">.fadeTo(0.2)</a>
<a href="#" class="btn8">.fadeTo(0.4)</a>
<a href="#" class="btn9">.fadeTo(0.6)</a>
<a href="#" class="btn10">.slideUp(100)</a>
<a href="#" class="btn11">.slideDown(100)</a>
<a href="#" class="btn12">.slideToggle(100)</a>
</div>
<div class="list">
<img src="assets/img/img01.png" alt="이미지1">
<img src="assets/img/img02.png" alt="이미지2">
<img src="assets/img/img03.png" alt="이미지3">
</div>
</body>
<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(){
//이미지 크기를 200으로 설정해주세요
$(".list img").css("width","200px");
//h1태그를 만들고 글씨를 "Effect"라고 설정해주세요
$("body").prepend("<h1>Effect</h1>");
//버튼만들기
$(".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>
</html>