김용태 JQuery

제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 제이쿼리는 HTML에 포함되어 있는 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리입니다.

제이쿼리 다운로드

제이쿼리를 사용하기 위해서는 제이쿼리 라이브러리 파일을 다운 받아야합니다.

제이쿼리 다운로드VIEW

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
</head>
<body>
    <script src="../jquery.min_1.12.4.js"></script>
</body>
</html>

제이쿼리 준비

JQuery(document).ready(function(){
//실행코드
});

JQuery를 $로 치환하여 사용할수 있습니다.

$(document).ready(function(){
//실행코드
});

간단한 형태로도 단축해서 사용할 수 있습니다.

$(function(){
//실행코드
});

자바스크립트 사용방법

window.onload = functon(){
//실행코드
};

선택자

선택자는 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>JQuery</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="">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"});  //형제 선택자 (그 다음 자식  선택한자식 x)
        // $(".one4 ~ li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //형제들 선택자 (그 다음 자식들 선택한자식 x)


        //속성 선택자
        // $("li a[href='#list2']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});
        // $("li a[href^='https']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //~로 시작하는 태그 선택
        // $("li a[href$='com']").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //~로 끝나는 태그 선택
        // $("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"});  //선택단어 빼고 선택
        // $("li a[href][target]").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //속성 중에  href , target 이 있는 모든 태그 선택 

        //기본(:) 선택자
        // $("li:eq(1)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //선택된 태그들의 번호를 통해 선택합니다. (0부터 시작)
        // $("li:gt(4)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //형제들 선택자 (그 다음 자식들 선택한자식 x) (0부터 시작)
        // $(".one4 ~ li").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //참고용 (위에 gt 선택자)
        // $("li:lt(4)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //선택한것 보다 작거나 같은거 선택
        // $(":header").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //(h1~h6)선택
        // $("li:first").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //첫번째 자식 선택 (다른 첫번째 꺼 까지 같이 x)
        // $("li:last").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //마지막 자식 선택 (다른 마지막 꺼 까지 선택 x)
        // $("li:odd").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); //홀수 자식 선택  (h1 까지 포함)
        // $("li:even").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); // 짝수 자식 선택 (h1 까지 포함)

        //내용 필터 선택자
        // $("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 안에 li 가 있으면 선택

        //보임 필터 선택자 
        // $("li:hidden").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //보이지 않는 요소를 선택합니다.
        // $("li:visible").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //보이는 요소를 선택합니다.


        //자식요소 필터 선택자
        // $("li:first").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"}); //참고용
        // $("li:first-child").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //첫번째 자식 선택 (다른 첫번째 꺼 까지 같이 O)
        // $("li:last").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //참고용
        // $("li:last-child").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //마지막 요소 선택 (다른 마지막 꺼 까지 선택 O)
        // $("li:nth-child(3)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  // 3번째 자식 선택
        // $("li:nth-child(even)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //짝수 자식 선택 (h1 까지 포함 안함)
        // $("li:nth-child(odd)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //홀수 자식 선택  (h1 까지 포함 안함) 
        // $("li:nth-child(3n+1)").css({"background-color":"#bbdefb","border":"1px dashed #303f9f"});  //3개째마다 선택 (+1은 시작을 1로 하기위해 ) 
    </script> 
</body>
</html>

탐색은 제이쿼리 선택자를 기준으로 선택한 요소에서 원하는 요소를 다시 한번 선택하는 메서드입니다. 탐색은 트리구조와 필터 영역으로 나눌 수 있으며 역할과 성질은 선택자와 비슷합니다.

유형	메서드	설명
트리구조 탐색(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>JQuery</title>
    <style>
        .choice a {
            border-radius: 5px;
            margin: 5px;
            display: inline-block;
            border: 1px solid #5f6368; 
            padding: 7px 20px;
            text-decoration: none;
            color: #000;
        }
        .choice a:hover{text-decoration: underline; }
        .on{background-color: #bbdefb; 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(-1)</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>첫번 째 리스트3-1 입니다.</li>
                    <li>첫번 째 리스트3-2 입니다.</li>
                    <li>첫번 째 리스트3-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="list1">두번 째 리스트4 입니다.</li>
            <li class="list2">두번 째 리스트5 입니다.</li>
            <li class="list3">두번 째 리스트6 입니다.</li>
        </ul>
        
    </div>
    
    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        //reset을 클릭하면 모든 태그에 on 클래스를 제거 
        $(".reset").click(function(){
            $("*").removeClass("on");
        });
        //children() 버튼을 클릭하면 on 클래스를 추가 
        $(".btn1").click(function(){
            $(".list li").children().addClass("on");   //그 밑에 자식ul 선택
        });
        //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: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>

eachVIEW

 <!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
    <style>
        li {
            margin: 8px;
        }

        a {
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            color: #000;
            margin: 4px;
        }

        .onRed {
            padding: 4px 6px 2px 6px;
            font-size: 90%;
            color: #c7254e;
            white-space: nowrap;
            background-color: #f9f2f4;
            border-radius: 4px;
            border: 1px dashed #a51a3d;
        }

        .onBlue {
            padding: 4px 6px 2px 6px;
            font-size: 90%;
            color: #3d90b7;
            white-space: nowrap;
            background-color: #e7f6fd;
            border-radius: 4px;
            border: 1px dashed #3d90b7;
        }
    </style>
</head>

<body>
    <div class="choice">
        <a href="#" class="btn1">addClass()</a>
        <a href="#" class="btn2">each()</a>
        <a href="#" class="btn3">setTimeout</a>
    </div>

    <div class="list">
        <ul>
            <li>.children() 선택한 요소의 바로 아래 자식 요소만 선택합니다.</li>
            <li>.closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.</li>
            <li>.find()♥ 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.</li>
            <li>.next() 선택한 요소를 다음 형제 요소를 선택합니다.</li>
            <li>.nextAll() 선택한 요소의 다음 모든 형제 요소를 선택합니다.</li>
        </ul>
    </div>


    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        //버튼1(선택자)을 클릭(이벤트)하면 리스트에 있는 글씨 색을 빨간색(매서드)으로 변경해주세요~
        $(".btn1").click(function(){
            $(".list li").addClass("onRed");
        });

        $(".btn2").click(function(){
            $(".list li").each(function(){
                $(".list li").addClass("onBlue");
            });
        });

        $(".btn3").click(function(){
            $(".list li").each(function(index){
                setTimeout(function(){
                    $(".list li").eq(index).addClass("onRed");
                },1000*(index+2));
            });
        });

    </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>JQuery</title>
    <style>
        li {
            margin: 8px;
        }

        a {
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            color: #000;
            margin: 4px;
        }

        .onRed {
            padding: 4px 6px 2px 6px;
            font-size: 90%;
            color: #c7254e;
            white-space: nowrap;
            background-color: #f9f2f4;
            border-radius: 4px;
            border: 1px dashed #a51a3d;
        }

        .onBlue {
            padding: 4px 6px 2px 6px;
            font-size: 90%;
            color: #3d90b7;
            white-space: nowrap;
            background-color: #e7f6fd;
            border-radius: 4px;
            border: 1px dashed #3d90b7;
        }
    </style>
</head>
<body>
    <div class="choice">
        <a href="#" class="btn1">이미지크기 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 src="../jquery.min_1.12.4.js"></script>
    <script>
        //버튼1을 클릭하면 이미지 사이즈를 100px로 변경해주세요~
        $(".btn1").click(function(){
            $(".list img").css("width","100px");
        });

        $(".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);
        });

        $(".btn4").click(function(){
            $(".list img").attr("src","../../illustrator/img/sample03.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>JQuery</title>

    <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: #ccc;}
        .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-carrot.svg" alt="svg1">
        </div>
    </div>s
    <script src="../jquery.min_1.12.4.js"></script>
    <script>
        //글씨(선태자)를 클릭(이벤트)하면 글씨 색을 빨간색으로 변경하세요!!
        // $(".tab-btn ul li a").click(function(){         //ul li 생략가능
        //     $(".tab-btn ul li a").css("color","red");
        // });

        //글씨(선태자)를 클릭(이벤트)하면 클릭한 글씨 색을 빨간색으로 변경하세요!!
        // $(".tab-btn ul li a").click(function(){
        //     $(this).css("color","red");
        // });

        //글씨를 클릭하면 tab -> meun로 변경하세요
        // $(".tab-btn ul li a").click(function(){
        //     $(".tab-btn ul li a").text("meun");
        // });

        //글씨를 클릭하면 tab3 -> menu2, tab2 -> menu2로 변경해주세요~
        $(".tab-btn ul li").click(function(){
            let target = $(this);
            let indox = target.index()+1;
            target.find("a").text("Menu"+indox);
        });

        $(".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-cookie.svg","alt":"쿠키"});
        });
        $(".tab-btn ul li:eq(2)").click(function(){
            $(".tab-cont img").attr({"src":"../../assets/img/svg-lemon.svg","alt":"레몬"});
        });
        $(".tab-btn ul li:eq(3)").click(function(){
            $(".tab-cont img").attr({"src":"../../assets/img/svg-hotdog.svg","alt":"핫도그"});
        });
        $(".tab-btn ul li:eq(4)").click(function(){
            $(".tab-cont img").attr({"src":"../../assets/img/svg-pizza.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>JQuery</title>

    <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: #ccc;}
        .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-carrot.svg); background-size: 350px;}
        #tab-cont.img2{background: url(../../assets/img/svg-cookie.svg); background-size: 350px;}
        #tab-cont.img3{background: url(../../assets/img/svg-lemon.svg); background-size: 350px;}
        #tab-cont.img4{background: url(../../assets/img/svg-hotdog.svg); background-size: 350px;}
        #tab-cont.img5{background: url(../../assets/img/svg-pizza.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 src="../jquery.min_1.12.4.js"></script>
    <script>
        //글씨를 클릭하면 클릭한 글씨만 파란색으로 변경하세요
        $(".tab-btn ul li a").click(function(){
            $(this).css("color","blue");
        });
        $(".tab-btn li:eq(0)").click(function(){
            $("#tab-cont").removeClass().addClass("img1");      //addClass만 쓰면 이름이 중복되어 다시 사용 x removeClass가 들어가서 클래스 이름 지우고 다시 표기
        });
        $(".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="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
</head>
<body>
    
    <div class="choice">
        <a href="#" class="btn1">클릭하면 글씨의 색을 빨간색으로 변경해주세요~</a> <br>
        <a href="#" class="btn2">클릭하면 글씨의 컬러 값을 알려주세요~</a> <br>
        <a href="#" class="btn3">클릭하면 글씨의 컬러 값을 파란색으로 폰트 사이즈 30px로 변경해주세요</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"});  //css 스타일
            $(".list li").css({"color":"blue", fontSize:"30px"});   //jq 스타일
        });

        $(".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) * 0.8;
            }})
        });
    </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>JQuery</title>
</head>
<body>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 select 클래스를 찾은 후 효과를 주세요!</a>
    </div>

    <div class="list">
        <ul>
            <li>.addClass() : 선택한 요소의 클래스를 추가합니다.</li>
            <li>.attr() : 선택한 요소의 HTML 속성 값을 설정하거나 반환합니다.</li>
            <li class="select">.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(){
            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>JQuery</title>
    <style>
        li.on{color: red;font-size: 30px;}
    </style>
</head>
<body>
    <div class="choice">
        <a href="#" class="btn1">클릭하면 select 클래스를 찾은 후 효과를 주세요!</a>
    </div>

    <div class="list">
        <ul>
            <li>.addClass() : 선택한 요소의 클래스를 추가합니다.</li>
            <li>.attr() : 선택한 요소의 HTML 속성 값을 설정하거나 반환합니다.</li>
            <li class="select">.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 li").toggleClass("on");
        });
    </script>
</body>
</html>

JQuery Reference v1.0 </doc>

제이쿼리

제이쿼리 다운로드

제이쿼리 다운로드VIEW

제이쿼리 준비

선택자

기본 선택자

기본 선택자

계층 선택자

속성 선택자

기본 필터 선택자

내용 필터 선택자

보임 필터 선택자

자식요소 필터 선택자

폼 요소 필터 선택자

선택자VIEW

탐색(Traversing

탐색VIEW

eachVIEW

속성

attr()VIEW

attr()VIEW

addClass()VIEW

css()VIEW

hasClass()VIEW

toggleClass()VIEW

Dimensions()VIEW