12/18 수업 (33일차) _ 요소 추가 / 요소 복사 / 요소 대체

** 요소 추가 **

 

- .append() 메서드

선택한 요소(ex.id,)의 '마지막'에 새로운 요소나 컨텐츠를 추가.

 

- .prepend() 메서드

선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가.

 

- .appendTo() 메서드

선택한 요소를 '해당 요소의 마지막'에 삽입.

동작은 .append()메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대

 

- .prependTo()메서드

선택한 요소를 '해당요소의 처음'에 삽입.

동작은 .pretend()메소드와 같지만, 소스 소스(source)와 타겟(target)의 위치가 서로 반대

 

 

* 기존 요소 외부에 추가

 

- .before() 메서드

선택한 요소의 '바로앞에' 새로운 요소나 콘텐츠를 추가.

 

- .after() 메서드

선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가.

 

- .insertBefore() 메서드

메소드는 선택한 요소를 '해당 요소의 앞에' 삽입.

동작은 before()메소드와 같지만, 소스(source)와 타켓(target)의 위치가 서로 반대.

 

- .insertAfter() 메서드

선택한 요소를 '해당 요소의 뒤'에 삽입

동작은 after()메소드와 같지만, 소스(source)와 타켓(target)의 위치가 서로 반대.

 

 

* 기존 요소를 포함하는 새로운 요소를 추가

 

- . wrap() 메서드 

선택한 요소를 포함하는 새로운 요소를 추가.

 

- .wrapAll()메서드

선택한 모든 요소를 포함하는 새로운 요소를 추가

 

- .wrapInner()메서드

 

 

******************************************************************************************************************************************

 

** 요소 복사 **

- .clone() 메서드

선택한 요소를 복사하여 새로운 요소를 생성.

.clone()메소드는 기존의 HTML요소를 복사하여 새로운 HTML요소를 생성한다.

반드시 .append()메소드나 .appendTo()메소드와 같은 다른 메소드를 이용하여 요소를 추가해야한다. 

 

 

** 요소 대체 **

- .replaceAll() 메서드

선택한 요소를 지정된 요소로 대체.

인수로 선택자나 제이뭐리 객체, HTML DOM요소, 배열 등을 전달받을 수 있다.

 

- .replaceWith() 메서드

선택한 요소를 지정된 요소로 대체.

 

 

** 요소 삭제 **

- .remove() 메서드

선택한 요소를 DOM트리에서 삭제.

삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트도 모두 함께 삭제된다.

 

- .detach() 메서드

선택한 요소를 DOM트리에서 삭제.

삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지된다.

 

- .empty() 메서드

선택한 요소의 자식 요소를 모두 삭제.

.remove()나 .detach() 메소드와 달리 선택된 요소 그 자체는 삭제되지 않음.

 

- .unwrap() 메서드

선택한 요소의 부모 요소를 삭제.

 

 

** 요소 탐색 **

* 트리탐색(tree traversing) :

특정 요소로부터 다른 요소들과의 관계를 통해 선택하기 원하는 요소까지 DOM트리를 검새해 나아가는 과정을 의미한다.

- 조상(ancestor)요소 탐색 : 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색

- 형제(sibling) 요소탐색

- 자손 요소 탐색

 

- 조상 요소 탐색  .parent() 

선택한 요소의 부모 요소를 선택.

선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있다.

.css메소드는 선택한 요소에 인수로 전달받은 스타일을 설정한다.

 

- 조상 요소 탐색  .closest()

자신을 포함한 조상 요소 중 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소 선택.

요소의 집합을 구하는 방식은 .parents()메소드와 비슷하지만,

해당 요소의 조상 요소뿐만 아니라 해당 요소 자신 까지도 검사하는 점이 다르다.

 

- 형제 요소 탐색 .siblings()

선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택.

 

- 형제 요소 탐색 .next()

선택한 요소의 바로 다음에 위치한 형제 요소를 선택.

 

- 형제 요소 탐색 .nextAll()

선택한 요소의 다음에 위치한 형제 요소를 모두 선택.

선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 형제 요소만을 선택할 수 도 있다.

 

- 형제 요소 탐색 .prev()  /  .prevAll()  /  prevUntill()

.next()  / . next All(),  /   next Untill() 각각 정반대로 독삭하여 요소들을 선택해준다.

 

- 자손 요소 탐색 .children()

선택한 요소의 자식(child) 요소를 모두 선택.

선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수 도 있다.

 

- 자손 요소 탐색 .find()

선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손요소를 모두 선택.

별표 ("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있다.

 

- 기타 탐색 메서드 .add()

선택한 요소의 집합에 전달 받은 요소를 추가

 

- 기타 탐색 메서드 .each()

선택한 요소 집합의 요소마다 전달받은 콜백 함수를 실행함.

 

 

 

** 필터링 메서드 **

- .first() 메서드 / .last()메서드

first()메서드는 선택한 요소 중에서 첫번째 요소를 선택, .last()메서드는 마지막 요소를 선택

 

- .eq() 메서드

선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택

선택한 요소 집합의 맨 처음 요소를 인덱스 0으로 놓고, 앞에서 부터 검색한다.

 

- .filter() 메서드

선택한 요소 중에서 전달 받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택

:odd 선택자는 인덱스가 홀수인 요소를 모두 선택하는 선택자.

:odd 나 :even 선택자를 사용할 때는 언제나 인덱스가 0부터 시작한다는사실을 염두에 두고 사용해야함.

사용예) .filter(:odd)  /  .filter(:even)

 

- .not() 메서드

선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)일 요소를 제외한 나머지 요소를 모두 선택.

filter()메서드와는 정반대로 동작하여 요소를 선택한다.

.not() 메서드에 인수로 전달된 식별자는 '인덱스가 2보다 작은'이라는 의미를 가지는 식별자,

인덱스가 2인 요소와 2보다 큰 요소를 모두 선택해준다

 

- .has() 메서드

선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손요소로 가지고 있는 요소를 모두 선택.

선택한 <li>요소 중 자손 요소 <span>요소를 가지고 있는 요소만의 스타일을 변경하는 예제.

 

- .is() 메서드

선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참을 반환

예제에서 우선 선택한 <span>요소의 모든 요소를 다시 선택한다.

선택된 모든 조상 요소 중에 <ul>요쇼가 존재하는지 여부를 .is() 메소드를 통해 검사한다.

 

- .map() 메서드

선택한 요소 집합의 각 요소마다 지정된 콜백 함수를 실행하고, 그 반환값으로 구성된 제이쿼리 객체를 반환.

예제에서 선택한 <li>요소 집합의 각 요소마다 해당 요소의 id값을 반환하는 콜백함수를 실행한다.

콜백함수의 실행으로 반환되는 값들은 .get()메소드를 통해 하나의 배열로 반환되며, 다신 .join()메소드를 통해 하나의 문자열로 변환되어 반환된다.

 

- .slice() 메서드

선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택

선택한 <li>요소 중에서 인덱스가 1과 같거나 그 이상인 요소만의 스타일을 변경하는 예제

 

 

** 프로퍼티 설정 **

- .css() 메서드

선택한 요소의 CSS스타일을 간단하게 설정

- .attr() 메서드

선택한 요소 집합의 첫번째 요소의 지정된 속성(attribute) 값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정

- .prop() 메서드

선택한 요소 집합의 첫번째 요소의 지정된 프로퍼티(property) 값을 반환하거나, 선택한 요소의 지정된 프로퍼티을 전달받은 값으로 설정

 

- 속성과 프로퍼티의 차이점?

 

** 클래스 설정 **

- 클래스 설정에 관한 메서드

메 서 드	설   명
.addClass()	선택한 요소에 인수로 전달받은 클래스를 추가함.
.removeClass()	선택한 요소에서 인수로 전달받은 클래스를 제거함.
.toggleClass()	선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가함. 전달받은 클래스가 추가되어 있으면 제거함.
.hasClass()	인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지 확인함

 

 

** 이벤트 **

사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작을 수행.

 

** 이벤트 핸들러 **

이벤트핸들러가 연결된 특정요소에서 지정된 타입의 이벤트가 발생하면, 웹브라우저는 연결된 이벤트 핸들러를 실행한다.

 

** 이벤트 연결 ( event binding ) **

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러 함수를작성.

작성된 이벤트 핸들러를 특정 요소에 연경하는 것을 이벤트의 연결 이라고함.

 

 

 

 

---

 

 

** 예제 1218 <.append()메서드 / prepend()메서드> **

---

 

 

** 예제 1218_2 <.appendTo()메서드 / prependTo()메서드> **

- 첫번째 추가 클릭시 : 선택한 요소 (id="first")'첫번째 순서입니다.' 를 마지막에 삽입 

 

** 예제 1218_2 <.befoer()메서드 / .after()메서드 / .insertBefore() 메서드 / .insertAfter() 메서드> **

---

 

 

** 예제 1218_3 < . wrap() 메서드  / . wrapAll() 메서드  / .wrapInner() 메서드> **

 

** 예제 1218_3 < . wrap() 메서드  / . wrapAll() 메서드  / .wrapInner() 메서드> **

 

** 예제 1218_3 < 요소 복사 .clone() 메서드 / 요소 대체 .replaceAll() / 요소 대체 .replaceWith() 메서드> **

 

** 예제 1218_3 < .remove() 메서드> **

---

 

 

** 예제 1218_4 < .detach() / .empty() / .unwrap() 메서드> **

---

 

 

** 예제 1218_5 < 부모 요소 탐색 .parent() / parents() 메서드 > **

---

 

 

** 예제 1218_6 < 부모 요소 탐색 .parents() 메서드 > **

---

 

 

** 예제 1218_7  < 형제 요소 탐색 .sibling() / next() 메서드> **

---

 

 

** 예제 1218_8  < .add() / .each() 메서드> **

 

** 예제 1218_8  < .first() / .last() 메서드> **

 

** 예제 1218_8  < filter() 메서드> **

---

 

 

** 예제 1218_9  < 마우스 이벤트 > **

---

** Source **

** 예제 1218 <.append()메서드 / pretend()메서드> **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        var val = 0;

        $(function(){
            $("#btn1").on("click", function(){
                $("#list").append("<li id='id" + val++ + "'>마지막에 새로 추가됩니다.</li>");
                //<li id='id0'>새로 추가됩니다.<li>
            });

            $("#btn2").on("click", function(){
                $("#list").prepend("<li>처음에 새로 추가됩니다.</li>");
            });
        });
    </script>
</head>
<body>
    <h2>.append() 메서드 : 마지막에 추가 됩니다.</h2>
    <ul id="list">
        <li>첫번째 순서</li>
        <li>두번째 순서</li>
        <li>세번째 순서</li>
    </ul>
    <button id="btn1">마지막에 추가</button>
    <button id="btn2">처음에 추가</button>
</body>
</html>

 

** 예제 1218_2 <.appendTo() / pretendTo() / before() / after() / insertBefore() /insertAfter() > **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //appendTo() / prependTo() 메서드
            $("#firstBtn").on("click", function(){
                $("#first").appendTo("#list");
            });

            $("#secondBtn").on("click", function(){
                $("#second").appendTo("#list");
            });

            $("#thirdBtn").on("click",function(){
                $("#third").appendTo("#list");
            });

            $("#btn1").on("click", function(){
                $("<b>새로 추가됩니다.</b>").prependTo(".item");
            });

            //------------------------------------------------------------------------------


            //before() / after() 메서드
            $("#btn2").on("click", function(){
                $("#firstRow").before("<tr><td>행 추가됩니다.</td><td></td></tr>");
            });
            $("#btn3").on("click", function(){
                $("#firstRow").after("<tr><td colspan='2'>행 추가됩니다.</td></tr>");
            });


            //.insertBefore() 메서드
            $("#btn4").on("click",function(){
                $("<td>새로운 앞 열 추가</td>").insertBefore("#secondColumn");
            });
            //.insertAfter() 메서드
            $("#btn5").on("click", function(){
                $("<td>새로운 뒷 열 추가</td>").insertAfter("#secondColumn2");
            });
        });
    </script>
</head>
<body>
    <h2>.appendTo() 메서드</h2>
    <ul id="list">
        <li id="first">첫번째 순서입니다.</li>
        <li id="second">두번째 순서입니다.</li>
        <li id="third">세번째 순서입니다.</li>
    </ul>
    <button id="firstBtn">첫번째 추가</button>
    <button id="thirdBtn">세번째 추가</button>
    <br /><br />

    <h2>.prependTo() 메서드</h2>
    <ul>
        <li class="item">첫번째 prependTo 입니다.</li>
        <li class="item">두번째 prependTo 입니다.</li>
        <li>세번째 prependTo 입니다.</li>        
    </ul>
    <button id="btn1">prtendTo 추가됩니다</button>
    <br /><br />



    <h2>.before() / after() 메서드</h2>
    <table>
        <tr id="firstRow">
            <td>첫번째 셀입니다.</td>
            <td>두번째 셀입니다.</td>
        </tr>
        <button id="btn2">위에 행 추가</button>
        <button id="btn3">아래에 행 추가</button>
    </table>
    <br /><br />


    <h2>.insertBefore() 메서드</h2>
    <table>
        <tr>
            <td>첫번째 열입니다.</td>
            <td id="secondColumn">두번째 열입니다.</td>
        </tr>
    </table>
    <button id="btn4">앞에 열 추가</button>
    <br /><br />

    <h2>.insertAfter() 메서드</h2>
    <table>
        <tr>
            <td>첫번째 열입니다.</td>
            <td id="secondColumn2">두번째 열입니다.</td>
        </tr>
    </table>
    <button id="btn5">뒤에 열 추가</button>

</body>
</html>

 

 

** 예제 1218_3 < . wrap() 메서드  / . wrapAll() 메서드  / .wrapInner() 메서드 /  .clone() 메서드 / .replaceAll() / .replaceWith() 메서드 / remove()메서드 > **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <style>
        div{margin:10px}
        .content{border:2px solid orange;}
        .wrapper{border:2px solid green;}
        .wrapper2{border:2px solid blue;}
        .wrapper3{border:2px solid red;}
    </style>

    <script>
        
        $(function(){
            // .wrap() .wrapAll() 메서드
            $("#btn1").on("click", function(){
                $(".content").wrap("<div class='wrapper'></div>");
            });
            $("#btn2").on("click", function(){
                $(".content").wrapAll("<div class='wrapper2'></div>");
            });

            // .wrapInner() 메서드
            $("#btn3").on("click", function(){
                $(".content").wrapInner("<div class='wrapper3'></div>");
            });

            // .clone() 메서드
            $("#btn4").on("click",function(){
                $("#first").clone().appendTo("#list");
            });

            // .replaceAll() / replaceWith() 메서드
            $("#btn5").on("click",function(){
                $("#first2").replaceAll(".item");
            });
            $("#btn6").on("click", function(){
                $(".item").replaceWith($("#first2"));
            });

            // .remove() 메서드
            $("#btn7").on("click", function(){
                $(".content2").remove(".first, .second");
            });
        });
    </script>

</head>
<body>
    <h2>.wrap() .wrapAll() wrapInner() 메서드</h2>
    <div class="content">첫번째 div입니다.</div>
    <div class="content">두번째 div입니다.</div>
    <button id="btn1">div 추가 - wrap()</button>&nbsp;
    <button id="btn2">div 추가 - wrapAll()</button>&nbsp;
    <button id="btn3">div 추가 - wrapInner()</button>
    <br /><br />


    <h2>.clone() 메서드</h2>
    <ul id="list">
        <li id="first">첫번째 입니다.</li>
        <li>두번째 입니다.</li>
        <li>세번째 입니다.</li>
    </ul>
    <button id="btn4">clone 복사</button>
    <br /><br />


    <h2>.replaceAll() / replaceWith() 메서드</h2>
    <ul>
        <li class="item" id="first2">첫번째 입니다.</li>
        <li class="item" id="second2">두번째 입니다.</li>
        <li class="item" id="third2">세번째 입니다.</li>
    </ul>
    <button id="btn5">replaceAll 적용</button>&nbsp;
    <button id="btn6">replaceWith 적용</button>
    <br /><br />

    <h2>.remove() 메서드</h2>
    <div>
        <div class="content2 first">첫번째 입니다.</div>
        <div class="content2 second">두번째 입니다.</div>
        <div class="content2 third">세번째 입니다.</div>
    </div>
    <button id="btn7">remove() 적용</button>
</body>
</html>

 

 

** 예제 1218_4 < .detach() / .empty() / .unwrap() 메서드> **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQeury</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>    
        $(function(){      
            //body가 생성되야 메서드가 실행되기 떄문에 ready메서드(또는 $(function(){  });)로 감싸줘야한다.
            var data;
            // detach() 메서드
            $("#btn1").on("click",function(){
                data = $(".content").detach();
            });

            $("#btn2").on("click", function(){
                $("#container").append(data);
            });

            // .empty() 메서드
            $("#btn3").on("click", function(){
                $("#con").empty();
            });

            // .unwrap() 메서드
            $("#btn4").on("click", function(){
                $("span").unwrap();
            });
        });
    </script>
</head>
<body>
    <h2>detach() 메서드</h2>
    <div id="container">
        <div>첫번째 순서입니다.</div>
        <div class="content">두번째 순서입니다.</div>
        <div class="content">세번째 순서입니다.</div>
    </div>
    <button id="btn1">삭제</button>
    <button id="btn2">복구</button>
    <br /><br />


    <h2>.empty() 메서드</h2>
    <div id="con" style="border:3px solid blue; padding:5px;">
        <div>첫번째 입니다.</div>
        <div>두번째 입니다.</div>
        <div>세번째 입니다.</div>
    </div>
    <button id="btn3">자식 삭제</button>
    <br /><br />


    <h2>.unwrap() 메서드</h2>
    <div id="con2" style="border:3px solid blue; padding:5px;">
        <div><span>첫번째</span>입니다.</div>
        <div><span>두번째</span>입니다.</div>
        <div><span>세번째</span>입니다.</div>
    </div>
    <button id="btn4">부모 삭제</button>
</body>
</html>

 

 

** 예제 1218_5 < .parent() / parents() 메서드> **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <style>
        .con * {
            display: block;
            border:1px solid gray;
            padding:5px;
            margin:15px;
        }
    </style>
    <script>
        $(function(){
            // 부모 요소
            $("#btn1").on("click", function(){
                $("p").parent().css({"border":"2px solid red"});
            });

            // 부모 전체요소
            $("#btn2").on("click", function(){
                $("p").parents("div").css({"border":"2px solid green"});
            });
        });
    </script>
</head>
<body>
    <h2>.parent() 메서드</h2>
    <div class="con">
        <div>div요소
            <ul>ul태그
                <li>li첫번째</li>
                <li>li두번째
                    <p>p태그<span>span태그</span></p>
                </li>
                <li>li세번째</li>
            </ul>
        </div>
    </div>
    <button id="btn1">부모요소</button>
    <button id="btn2">부모전체요소</button>
</body>
</html>

 

 

** 예제 1218_6 < .parents() 메서드> **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <style>
        .container * {
            display: block;
            border: 1px solid lightgray;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function(){
            $("#parents").on("click", function(){
                $("#orgin").parents("div").css({"border":"2px solid red"});
            });
            
            $("#closest").on("click", function(){
                $("#orgin").closest("div").css({"border":"2px solid green"});
            });
        });
    </script>
</head>
<body>
    <h1>.parents() 메서드</h1>
    <div class="container">
        <div>div요소
            <div>요소2
                <ul>ul요소
                    <li>li 요소</li>
                    <li>li 요소
                        <div id="orgin">div요소(기준)
                            <span>span요소</span>
                        </div>
                    </li>
                    <li>li 요소</li>
                </ul>
            </div>
        </div>
    </div>

    <button id="parents">parents() 메서드</button>&nbsp;
    <button id="closest">closest() 메서드</button>

</body>
</html>

 

 

 

** 예제 1218_7  < .sibling() / next() 메서드> **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <style>
        .con * {
            display: block;
            border: 1px solid gray;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function(){
            // sibling() 메서드
            $("#btn1").on("click", function(){
                $("h4").siblings().css({"border":"2px solid blue"});
            });

            // next() 메서드
            $("#btn2").on("click", function(){
                $("h4").next().css({"border":"2px solid red"});
            });
        });
    </script>
</head>
<body>
    <h2>.siblings() / next() 메서드</h2>
    <div class="con">
        <div>위치</div>
        <h2>h2요소</h2>
        <h3>h3요소</h3>
        <h4>h4요소</h4>
        <h5>h5요소</h5>
        <h6>h6요소</h6>
        <p>p 입니다.</p>
    </div>
    <button id="btn1">h4 형제요소 - sibling()</button>&nbsp;
    <button id="btn2">h4 next요소 - next()</button>
</body>
</html>

 

 

** 예제 1218_8  < .add() / .each() / .first() / .last() / .eq() / .filter() 메서드> **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <style>
        .con * {
            /* display: block;
            border: 1px solid gray; */
            padding: 5px;
            margin: 15px;
        }
        .boldFont {
                color:blue;
                font-weight: bold;
        }
    </style>
    <script>
        $(function(){
            // .add() 메서드
            $("#btn1").on("click",function(){
                $("li").add("p").css({"border":"2px solid red"});
            });
            // .each() 메서드 (없을때는 추가, 있을때는 제거)
            $("#btn2").on("click", function(){
                $("li").each(function(){
                    $(this).toggleClass("boldFont");
                });
            });

            // .first() 메서드
            $("#btn3").on("click", function(){
                $("li").first().css({"border":"2px solid brown"});
            });
            // .last() 메서드
            $("#btn4").on("click",function(){
                $("li").last().css({"border":"2px solid orange"});
            });

            // .eq(1) 메서드
            $("#btn5").on("click", function(){
                $("li").eq(1).css({"border":"2px solid red"});
            });
            // .eq(-1) 메서드
            $("#btn6").on("click", function(){
                $("li").eq(-1).css({"border":"2px solid yellow"});
            });

            // .filter(:odd) / .filter(:even) 메서드
            $("#btn7").on("click", function(){
                $("li").filter(":odd").css({"border":"2px solid blue"});
            });
            $("#btn8").on("click", function(){
                $("li").filter(":even").css({"border":"2px solid pink"});
            });
        });
    </script>
</head>
<body>
    <h2>.add() / .each() / .first() / .last() / .eq() 메서드</h2>
    <ul class="con">ul태그
        <li>li 첫번째</li>
        <li>li 두번째</li>
        <li>li 세번째</li>
        <li>li 네번째</li>
        <li>li 다섯번째</li>
    </ul>
    <p>추가 단락입니다.</p>
    <button id="btn1">li에 p추가 - add()</button>
    <button id="btn2">클래스 추가/제거 - each()</button>
    <button id="btn3">.first() 적용</button>
    <button id="btn4">.last() 적용</button>
    <br />
    <button id="btn5">.eq(1) 적용</button>
    <button id="btn6">.eq(-1) 적용</button>
    <button id="btn7">.filter(:odd)적용</button>
    <button id="btn8">.filter(:even)적용</button>

    <br />
</body>
</html>

 

 

** 예제 1218_9  < 마우스 이벤트 > **

<!DOCTYPE html>
<html">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 마우스 이벤트 (mouseenter / click / mouseleave )
            $("#btn1").on({
                mouseenter:function(){
                    $("#text").append("마우스가 버튼 위로 왔습니다.<br />");
                },
                click:function(){
                    $("#text").append("마우스가 버트을 클릭했습니다.<br />");
                },
                mouseleave:function(){
                    $("#text").append("마우스가 버튼 위를 벗어났습니다.<br />");
                }
            });

            // clickText() /dblClickText() 메서드
            $("#btn2").click(function(){
                $("#clickText").css("color", "red");
                $("#dblClickText").css("color", "black");
            });
            $("#btn2").dblclick(function(){
                $("#clickText").css("color", "black");
                $("#dblClickText").css("color", "red");
            });

            // focusin() / focusout() 메서드 - 클릭시 색 변한다.
            $("#focus").on("focusin", function(event){
                $(this).css("backgroundColor", "yellow");
            });
            $("#focus").on("focusout", function(event){
                $(this).css("backgroundColor", "white");
            });
        });
    </script>
</head>
<body>
    <h2>마우스 이벤트</h2>
    <button id="btn1">마우스 버튼 위로 포커스를 이동해보세요.</button>
    <p id="text"></p>
    <br /><br />
    <button id="btn2">dbChlick</button>
    <p>버튼을 <span id="clickText">클릭</span>하거나
        <span id="dblClickText">더블클릭</span>해보세요.
    </p>
    <br />

    <h2>.focusin() / focusout() 메서드</h2>
    <input type="text" id="focus">
</body>
</html>