제이쿼리
제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어다. 제이쿼리는 HTML에 포함되어 있는 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리다.
제이쿼리 다운로드
제이쿼리를 사용하기 위해서는 제이쿼리 라이브러리 파일을 다운 받아야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery01</title>
<!-- 제이쿼리는 기본적으로 연동 시켜야 작동이 된다. -->
<script src="../jquery.min_1.12.4.js"></script>
</head>
<body>
</body>
</html>제이쿼리 준비
jQuery를 $로 치환하여 사용할 수 있다.
jQuery(document).ready(function(){
//실행코드
});
간단한 형태로도 단축해서 사용할 수 있다.
$(function(){
//실행코드
});
자바스크립트 사용방법
window.onload = function(){
//실행코드
};
선택자
선택자는 HTML요소를 선택하여 가져온다. 제이쿼리 선택자는 CSS 선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다.
기본 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| 태그 선택자 | $("p") | 기본 태그를 선택합니다. |
| 클래스 선택자 | $(".class") | 클래스 태그를 선택합니다. |
| 아이디 선택자 | $("#id") | 아이디 태그를 선택합니다. |
| 그룹 선택자 | $("p, .class, #id") | 여러가지 태그를 선택합니다. |
| 전체 선택자 | $("*") | 전체 태그를 선택합니다. |
계층 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| 하위 선택자(Descendant Selector) | $("div p") | div 태그의 모든 자식 중 p 태그를 모두 선택합니다. |
| 자식 선택자(Child Selector) | $("div > p") | div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택합니다. |
| 형제 선택자(Next Adjacent Selector) | $("div + p") | div 태그의 인접한 형제 p 태그 중 첫번째 태그만 선택합니다. |
| 형제들 선택자(Next Siblings Selector) | $("div ~ p") | div 태그의 인접한 형제 p 태그를 모두 선택합니다. |
속성 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| [name|="value"] | $("li a[href|='web']") | 속성 중에 'web'과 같은 속성 값을 선택합니다. |
| [name*="value"] | $("li a[href*='web']") | 속성 중에 'web'가 포함되어 있는 태그를 선택합니다. |
| [name~="value"] | $("li a[href~='web']") | 속성 중에 'web'으로 시작하는 태그를 선택합니다. |
| [name$="value"] | $("li a[href$='web']") | 속성 중에 'web'으로 끝나는 태그를 선택합니다. |
| [name="value"] | $("li a[href='web']") | 속성 중에 'web'와 일치하는 속성 값을 선택합니다. |
| [name!="value"] | $("li a[href!='web']") | 속성 중에 'web'와 일치하지 않는 태그를 선택합니다. |
| [name^="value"] | $("li a[href^='web']") | 속성 중에 'web'로 시작하는 태그를 선택합니다. |
| [name] | $("li a[href]") | 속성 중에 일치하는 속성을 선택합니다. |
| [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() | 선택된 요소 중에서 현재 선택한 요소의 반대 요소를 선택합니다. |
| :root() | 문서의 가장 기본 루트 요소를 선택합니다. |
| :lang() | 선택된 요소 중에서 언어 속성 요소를 선택합니다. |
내용 필터 선택자
| 종류 | 설명 |
|---|---|
| :contains() | 선택된 집합의 일치하는 문자열 요소를 선택합니다. |
| :empty | 선택된 집합 요소에 텍스트가 없을 때 선택됩니다. |
| :has() | 선택된 집합의 일치하는 요소를 선택합니다. |
| :parent | 선택된 집합 요소에 텍스트가 있들 때에 선택됩니다. |
보임 필터 선택자
| 종류 | 설명 |
|---|---|
| :hidden | 보이지 않는 요소를 선택합니다. |
| :visible | 보이는 요소를 선택합니다. |
자식요소 필터 선택자
| 종류 | 설명 |
|---|---|
| :first-child | 첫 번째 자식 요소를 선택합니다. |
| :first-of-type | 자식 중 첫 번째 유형의 자식 요소를 선택합니다. |
| :last-child | 마지막 번째 자식 요소를 선택합니다. |
| :last-of-type | 자식 중 마지막 번째 유형의 자식 요소를 선택합니다. |
| :nth-child() | index번째에 있는 자식 요소를 선택합니다. |
| :nth-last-child() | index번째에 있는 마지막 자식 요소를 선택합니다. |
| :nth-last-of-type() | index번째에 있는 마지막 유형의 자식 요소를 선택합니다. |
| :nth-of-type() | index번째에 있는 유형의 자식 요소를 선택합니다. |
| :only-child | 자식 요소가 오직 하나인 요소를 선택합니다. |
| :only-of-type() | 자식 요소 중 오직 하나 유형인 요소를 선택합니다. |
폼 요소 필터 선택자
| 종류 | 설명 |
|---|---|
| :button | 버튼 입력 양식을 선택합니다. |
| :checkbox | 체크박스 입력 양식을 선택합니다. |
| :checked | :checked된 입력 양식을 선택합니다. |
| :disabled | :disabled된 입력 양식을 선택합니다. |
| :enabled | :enabled된 입력 양식을 선택합니다. |
| :focus | 입력 양식에 포커스된 태그를 선택합니다. |
| :file | 파일 업로드 양식을 선택합니다. |
| :image | 이미지 입력 양식을 선택합니다. |
| :input | 모든 입력 양식을 선택합니다. |
| :password | 암호 입력 양식을 선택합니다. |
| :radio | 라디오 버튼 입력 양식을 선택합니다. |
| :reset | 리셋 입력 양식을 선택합니다. |
| :selected | :selected된 입력 양식을 선택합니다. |
| :submit | 데이터 보내기 입력 양식을 선택합니다. |
| :text | 텍스트 박스 양식을 선택합니다. |
선택자 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery02</title>
</head>
<body>
<h1>제이쿼리</h1>
<div id="sample">
<div id="list1" class="list">
<li class="one1"><a href="#list2">one1</a></li>
<li class="one2"><a href="https://www.naver.com">one2</a></li>
<li class="one3"><a href="https://www.daum.net" target="_blank">one3</a></li>
<li class="one4"><a href="#">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 style="width: 0; height: 0; overflow: hidden;">one10-1</li>
<li style="opacity: 0;">one10-2</li>
<li style=" visibility:hidden">one10-3</li>
<li style="display: none;">one10-4</li>
<li>one10-5</li>
</ul>
</li>
</div>
<div id="list2" class="list">
<li class="one1"><a href="#">one1</a></li>
<li class="one2"><a href="#">one2</a></li>
<li class="one3"><a href="#">one3</a></li>
<li class="one4"><a href="#">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></li>
</div>
</div>
<script src="../jquery.min_1.12.4.js"></script>
<script>
// $("li").css("background-color","#bbdefb");
$("li").css("margin","3px");
// -------------------기본 선택자
// $("li").css("border","1px dashed #303f9f");
// $(".one3").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("#list1").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("div,li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});< 그룹 영역을 선택하는 것
//$("*").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); <전체 영역을 선택하는것
//----------------------계층 선택자
//$(".list li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$(".list > li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < 자식 선택자
//$(".one4+li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < + 다음에 있는 자식
//$(".one4~li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < ~다음에 있는 모든 자식
//-------------------- 속성 선택자
//$("li a[href='#list2']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li a[href^='https']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < ^는 시작을 의미 https로 시작하는 것을 찾아라 뭐 이런 의미
//$("li a[href$='com']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < $는 com으로 끝나는 것을 찾아라 이런 것을 의미
//$("li a[href*='www']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li a[href!='https://www.naver.com']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < ! naver 만 빼고 선택하라
// $("li a[href][target]").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//-------------------- 기본 필터(:) 선택자 ( css 에 없는 기능)
//$("li:eq(1)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); <
//$("li:gt(4)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < 계층 선택자와 비슷하지만 자식이 선택되는가에 차이점이 있다.
//$("li:lt(4)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); <
//$(":header").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < header 에 해당되는 태그에 적용 된다.
//$("li:first").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < 첫번째 적용된다.
//$("li:last").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); < 마지막 적용 된다.
//$("li:odd").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li:even").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//--------------------내용 필터 선택자( css 에 없는 기능)
//$("li:contains('one5')").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li a").css({"display":"block","height":"20px"});
//$("li a:empty").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li a:parent").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li:has(li)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//-------------------- 보임 필터 선택자 (예제 따로 정리)
//$("li:hidden").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li:visble").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//---------------------- 자식 요소 필터 선택자
//$("li:first").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); <첫번째 li 한테만 적용이 된다.
//$("li:first-child").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
// $("li:last").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li:last-child").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li:nth-child(3)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li:nth-child(even)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li:nth-child(odd)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
//$("li:nth-child(3n+1)").css({"background-color":"#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() | 선택한 요소의 필터링이 일어나기 이전의 요소를 선택합니다. |
탐색 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery03</title>
<script src="../jquery.min_1.12.4.js"></script>
<style>
.choice a {
border: 1px solid #5f6368;
padding: 7px 20px;
border-radius: 10px;
margin: 5px;
display: inline-block;
text-decoration: none;
color: #000;
}
.choice a:hover {
text-decoration: underline;
}
.on {
background-color: #bbdefd;
border: 1px dashed #303f9f;
}
</style>
</head>
<body>
<div class="choice">
<a href="#" class="reset">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">.parent()</a>
<a href="#" class="btn6">.parents()</a>
<a href="#" class="btn7">.parentsUntil()</a>
<a href="#" class="btn8">.prev()</a>
<a href="#" class="btn9">.prevAll()</a>
</div>
<div class="choice">
<a href="#" class="sbtn1">.eq(2)</a>
<a href="#" class="sbtn2">.filter()</a>
<a href="#" class="sbtn3">.first()</a>
<a href="#" class="sbtn4">.last()</a>
<a href="#" class="sbtn5">.has()</a>
<a href="#" class="sbtn6">.not()</a>
<a href="#" class="sbtn7">.slice()</a>
</div>
<div class="list">
<ul>
<li class="list1"> 첫번째 리스트1 입니다. </li>
<li class="list2"> 첫번째 리스트2 입니다. </li>
<li class="list3"> 첫번째 리스트3 입니다.
<ul>
<li> 첫번째 리스트1-1 입니다.</li>
<li> 첫번째 리스트1-2 입니다.</li>
<li> 첫번째 리스트1-3 입니다.
<ul>
<li>첫번째 리스트1-3-1 입니다.</li>
<li class="select">첫번째 리스트1-3-2 입니다.</li>
<li>첫번째 리스트1-3-3 입니다.</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="slist">
<li class="list1">두번째 리스트1 입니다. </li>
<li class="list2">두번째 리스트2 입니다. </li>
<li class="list3">두번째 리스트3 입니다. </li>
<li class="list4">두번째 리스트4 입니다. </li>
<li class="list5">두번째 리스트5 입니다. </li>
<li class="list6">두번째 리스트6 입니다. </li>
</ul>
</div>
<script>
//reset을 클릭하면 모든 태그에 on 클래스를 제거
$(".reset").click(function () {
$("*").removeClass("on");
});
//btn1 (children)을 클릭하면 on 클래스를 추가
$(".btn1").click(function () {
$(".list li").children().addClass("on");
});
//btn2 (find)을 클릭하면 on 클래스를 추가
$(".btn2").click(function () {
$(".list li").find("li").addClass("on");
});
$(".btn3").click(function () {
$(".list li li:first").next().addClass("on");
});
$(".btn4").click(function () {
$(".list li li:first").nextAll().addClass("on");
});
$(".btn5").click(function () {
$(".list2").parent().addClass("on");
});
$(".btn6").click(function () {
$(".list2").parents().addClass("on");
});
$(".btn7").click(function () {
$(".list2").parentsUntil(".list").addClass("on");
});
$(".btn8").click(function () {
$(".list3").prev().addClass("on");
});
$(".btn9").click(function () {
$(".list3").prevAll().addClass("on");
});
// ---------------------------필터링
$(".sbtn1").click(function () {
$(".list li").eq(-1).addClass("on");
});
$(".sbtn2").click(function () {
// $(".list li").filter(":even").addClass("on"); // even 짝수를 의미
$(".list li").filter(".select").addClass("on");
});
$(".sbtn3").click(function () {
$(".list li").first().addClass("on");
//$(".list li:first").addClass("on");
});
$(".sbtn4").click(function () {
$(".list li").last().addClass("on");
//$(".list li:last").addClass("on");
});
$(".sbtn5").click(function () {
// $(".list li").has("ul").addClass("on");
$(".list li").has(".select").addClass("on");
});
$(".sbtn6").click(function () {
$(".list li").not(".select").addClass("on");
});
$(".sbtn7").click(function () {
// $(".slist li").slice(2).addClass("on");
// $(".slist li").slice(2,5).addClass("on"); // 마지막 숫자 전까지
// $(".slist li").slice(-2).addClass("on")
$(".slist li").slice(-4,-1).addClass("on")
});
</script>
</body>
</html>탐색2 - each() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery04</title>
<script src="../jquery.min_1.12.4.js"></script>
</head>
<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>
<body>
<div class="chocie">
<a href="#" class="btn1">.addClass()</a>
<a href="#" class="btn2">.each()</a>
<a href="#" class="btn3">.setTimeout()</a>
</div>
<div class="list">
<ul>
<li>.shlidren(): 선택한 요소의 바로 아래 사직 요소만 선택합니다.</li>
<li>.closest() : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
<li>.find() : 선택한 요소의 자식 욧 중 조건에 맞는 요소를 선택합니다.</li>
<li>.next() : 선택한 쇼오를 다음 형제요소를 선택합니다. </li>
<li>.nextAll() : 선택한 요소의 다음 모든 형제 요소를 선택합니다. </li>
</ul>
</div>
<script>
//버튼1을 클릭하면 리스트를 있는 글씨 색을 빨간색으로 변경해주세요~
$(".btn1").click(function(){
//$(".list li").css("color","red");
$(".list li").addClass("onRed");
});
//버튼2을 클릭하면 리스트를 있는 글씨 색을 검은색으로 변경해주세요~
$(".btn2").click(function(){
$(".list li").removeClass("onRed");
});
$(".btn2").click(function(){
$(".list li").each(function(){ // 시간 차 를 줄떄 사용하게 된다.
$(".list li").addClass("onBlue");
});
});
//버튼 3 을 클릭했을때
$(".btn3").click(function(){
$(".list li").each(function(index){
setTimeout(function(){
$(".list li").eq(index).addClass("onRed");
},1000 * (index +1));
});
});
</script>
</body>
</html>속성
| 유형 | 메서드 | 설명 |
|---|---|---|
| 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() ♥ | 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. |
attr() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery05</title>
<script src="../jquery.min_1.12.4.js"></script>
<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">이미지(100px)</a>
<a href="#" class="btn2">이미지 주소 불러오기</a>
<a href="#" class="btn3"> alt값 불러오기</a>
<a href="#" class="btn4"> 이미지주소값 변경</a>
</div>
<div class="list">
<p class="text"></p>
<img src="../../illustrator/img/sample01.jpg" alt="이미지">
</div>
<!-- 스크립트 -->
<script>
//버튼 1을 틀릭하면이미지 사이즈를 100px로 변경하세요~
$(".btn1").click(function(){
$(".list img").css("width","100px");
});
//버튼 2을 클릭했을 때
$(".btn2").click(function(){
let text = $(".list img").attr("src");
$(".list .text").text(text);
});
// 버튼 3을 클릭하면 이미지의 alt값을 가져와서 출력
$(".btn3").click(function(){
let text = $(".list img").attr("alt");
$(".list .text").text(text);
});
// 버튼 4을 클릭했을 때 이미지 주소값이 변경
$(".btn4").click(function(){
$(".list img").attr("src","../../illustrator/img/sample02.jpg")
});
</script>
</body>
</html>attr() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery06</title>
<script src="../jquery.min_1.12.4.js"></script>
<style>
* {margin: 0; padding: 0; text-align: center;}
li{list-style: none;}
a{text-decoration: none; color: #666;}
#tab-menu { width: 350px; margin: 50px auto; background: #fff;}
.tab-btn ul{ overflow: hidden;}
.tab-btn li{float: left; width: 20%;}
.tab-btn li a{padding: 10px; display: block; background: #1e88e5; 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/svg-lemon.svg" alt="svg1">
</div>
</div>
<!-- 스트립트 -->
<script>
// 글씨(선택자)를 클릭하면 글씨 색이 빨간색으로 변경되게
// $(".tab-btn a").click(function(){
// $(".tab-btn a").css("color","red")
// });
//글씨 선택자를 클릭하면 클릭한 글씨 색만 빨간색으로 변경
// $(".tab-btn a").click(function(){
// $(this).css("color","red");
// });
// // 글씨를 클릭하면 tab > menu 변경
// $(".tab-btn a").click(function(){
// $(".tab-btn a").text("meun");
// });
//글씨를 클릭하면 tab2 > menu2 변경 index 사용
$(".tab-btn ul li").click(function(){
let target = $(this);
let 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/svg-carrot.svg","alt":"당근"});
});
$(".tab-btn ul li:eq(1)").click(function(){
$(".tab-cont img").attr({"src":"../../assets/img/svg-apple.svg","alt":"사과"});
});
$(".tab-btn ul li:eq(2)").click(function(){
$(".tab-cont img").attr({"src":"../../assets/img/svg-hotdog.svg","alt":"핫도그"});
});
$(".tab-btn ul li:eq(3)").click(function(){
$(".tab-cont img").attr({"src":"../../assets/img/svg-ice-cupcake.svg","alt":"아이스컵케익"});
});
$(".tab-btn ul li:eq(4)").click(function(){
$(".tab-cont img").attr({"src":"../../assets/img/svg-grapes.svg","alt":"포도"});
});
</script>
</body>
</html>addClass() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery07</title>
<script src="../jquery.min_1.12.4.js"></script>
<style>
* {margin: 0; padding: 0; text-align: center;}
li{list-style: none;}
a{text-decoration: none; color: #666;}
#tab-menu { width: 350px; margin: 50px auto; background: #fff;}
.tab-btn ul{ overflow: hidden;}
.tab-btn li{float: left; width: 20%;}
.tab-btn li a{padding: 10px; display: block; background: #1e88e5; color: #fff;}
#tab-cont { width: 350px; height: 350px;}
#tab-cont.img1 { background: url(../../assets/img/svg-lemon.svg); background-size: 350px;}
#tab-cont.img2 { background: url(../../assets/img/svg-apple.svg); background-size: 350px;}
#tab-cont.img3 { background: url(../../assets/img/svg-hotdog.svg); background-size: 350px;}
#tab-cont.img4 { background: url(../../assets/img/svg-ice-cupcake.svg); background-size: 350px;}
#tab-cont.img5 { background: url(../../assets/img/svg-grapes.svg); background-size: 350px;}
</style>
</head>
<body>
<div id="tab-menu">
<div class="tab-btn">
<ul>
<li><a href="#">Tab1</a></li>
<li><a href="#">Tab2</a></li>
<li><a href="#">Tab3</a></li>
<li><a href="#">Tab4</a></li>
<li><a href="#">Tab5</a></li>
</ul>
</div>
<div id="tab-cont" class="img1">
</div>
</div>
<!-- 스트립트 -->
<script>
// 글씨를 클릭하면 클릭한 글씨만 파란색으로 변경
$(".tab-btn ul li a").click(function(){
$(this).css("color","blue");
});
$(".tab-btn li:eq(0)").click(function(){
$("#tab-cont").removeClass().addClass("img1")
});
$(".tab-btn li:eq(1)").click(function(){
$("#tab-cont").removeClass().addClass("img2")
});
$(".tab-btn li:eq(2)").click(function(){
$("#tab-cont").removeClass().addClass("img3")
});
$(".tab-btn li:eq(3)").click(function(){
$("#tab-cont").removeClass().addClass("img4")
});
$(".tab-btn li:eq(4)").click(function(){
$("#tab-cont").removeClass().addClass("img5")
});
</script>
</body>
</html>css() VIEW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="choice">
<a href="#" class="btn1">글씨색을 빨강으로 변경</a><br>
<a href="#" class="btn2">글씨의 컬러 값</a><br>
<a href="#" class="btn3">컬러값을 파란색으로 변경 / 폰트사이즈는 30 px 변경</a><br>
<a href="#" class="btn4">글씨 크기가 점점 크게 </a><br>
<a href="#" class="btn5">글씨 크기가 점점 작게 </a><br>
</div>
<div class="list">
<ul>
<li>addClass() ♥ 선택한 요소의 클래스를 추가합니다.</li>
<li>attr() ♥ 선택한 요소의 HTML 속성 값을 설정하거나 반환합니다.</li>
<li>offset() ♥ 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다</li>
<li>scrollTop() ♥ 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.</li>
<li>.toggleClass() ♥ 선택한 요소에 클래스의 추가/제거를 연속하여 사용할 수 있습니다.</li>
</ul>
<p class="text"></p>
</div>
<script src="../jquery.min_1.12.4.js"></script>
<script>
$(".btn1").click(function(){
$(".list ul li").css("color","red");
});
$(".btn2").click(function(){
let value = $(".list li").css("color")
$(".text").text(" 이 폰트 색은 "+value + "입니다.");
});
$(".btn3").click(function(){
$(".list li").css({"color":"blue","font-size":"30px"});
// $(".list li").css({"color":"blue",fontSize:"30px"}); // 제이쿼리 식
});
$(".btn4").click(function(){
$(".list li").css({fontSize: function(index,value){
return parseFloat(value) *1.2;
}});
});
$(".btn5").click(function(){
$(".list li").css({fontSize: function(index,value){
return parseFloat(value) *;
}});
});
</script>
</body>
</html>hasClass() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery09</title>
<script src="../jquery.min_1.12.4.js"></script>
</head>
<body>
<div class="choice">
<a href="#" class="btn1">select 클래스를 찾은 후 효과</a><br>
</div>
<div class="list">
<ul>
<li>addClass() ♥ 선택한 요소의 클래스를 추가합니다.</li>
<li>attr() ♥ 선택한 요소의 HTML 속성 값을 설정하거나 반환합니다.</li>
<li class="select">offset() ♥ 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다</li>
<li>scrollTop() ♥ 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.</li>
<li>.toggleClass() ♥ 선택한 요소에 클래스의 추가/제거를 연속하여 사용할 수 있습니다.</li>
</ul>
</div>
<script>
$(".btn1").click(function(){
if ( $(".list li").hasClass("select") ) {
$(".select").css({color:"red",fontSize:30});
}
});
</script>
</body>
</html>toggleClass() VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery10</title>
<script src="../jquery.min_1.12.4.js"></script>
</head>
<style>
li.on{color: red; font-size: 30px;}
</style>
<body>
<div class="choice">
<a href="#" class="btn1">select 클래스를 찾은 후 효과</a><br>
</div>
<div class="list">
<ul>
<li>addClass() ♥ 선택한 요소의 클래스를 추가합니다.</li>
<li>attr() ♥ 선택한 요소의 HTML 속성 값을 설정하거나 반환합니다.</li>
<li class="select">offset() ♥ 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다</li>
<li>scrollTop() ♥ 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.</li>
<li>.toggleClass() ♥ 선택한 요소에 클래스의 추가/제거를 연속하여 사용할 수 있습니다.</li>
</ul>
</div>
<script>
$(".btn1").click(function(){
$(".list li").toggleClass("on");
});
</script>
</body>
</html>Dimensions() VIEW