3/23(화)FrontEnd/jQuery(3)

3/22(월) 기본선택자~content 영역 text()까지

요소 생성 및 제거

1) 요소 생성(jQuery 방식으로)

    <div id="area1"></div>

    <script>
        $(function(){
            // <p>~~~~</p>

            // 1. 문자열로 만드는 방법
            var el1 = "<p>Create Element By Text</p>"; 

            // 2. DOM메소드 만드는 방법(createElement, createTextNode)
            var el2 = document.createElement("p");
            var text = document.createTextNode("Create Element By DOM");
            el2.appendChild(text); // <p>Create Element By DOM</p> 둘 다 요소객체

            // 3. jQuery로 만드는 방법
            var el3 = $("<p></p>").text("Create Element By jQuery");

            console.log(el1); // 찐탱 문자열 출력
            console.log(el2); // 요소객체 형태로 보임
            console.log(el3); // jQuery방식으로 p요소에 text가 담긴형태로 보임

            $("#area1").append(el1, el2, el3); // area1에 el1, el2, el3 요소를 담겠다 => jQuery형식으로 추가하는 메소드 append();

        })
    </script>

2) 삽입관련 메소드 part1

: 새로이 생성된 요소를 추가시켜주는 메소드

$(A).append(B) : A요소 내에 뒷부분에 B를 추가(하위요소로 추가됨)

$(A).prepend(B) : A요소 내 앞부분에 B를 추가(하위요소로 추가)

$(A).after(B) : A요소와 같은 레벨로 뒷부분에 B를 추가(동위)

$(A).before(B) : A요소와 같은 레벨로 앞부분에 B를 추가(동위)

3) 삽입관련 메소드 part2

$(B).appendTo(A) : B를 A요소 내 뒷부분에 추가(하위)

$(B).prependTo(A) : B를 A요소 내 앞부분에 추가(하위)

$(B).insertAfter(A) : B를 A요소 뒤에 추가(동위)

$(B).insertBefore(A) : B를 A요소 앞에 추가(동위)

4) 요소객체 복제 메소드

:
[표현법]
var 변수 = $("선택자").clone(true | false) : 선택된 요소를 복사하는 메소드(true|false 생략 가능)

• true | false : 해당 선택된 요소에 걸려있는 이벤트까지도 복사할건지 지정(기본값 false)

<복제버튼 만들기>
        <button id="clone">복제</button>

        <div id="clone-test">
            <div id="item1" class="item">
                <span>안녕</span>
            </div>
        </div>

        <div id="clone-result">

        </div>

    <script>
        $(function(){
            // 복제할 요소에 hover이벤트 추가해놓기
            $("#item1 #item2").hover(function(){
                $(this).addClass("lime"); // 마우스가 버튼위에 올려있을 때 현재 이벤트가 발생한 요소(#item1 = this) 지정하고 addClass("lime"); 라임 클래스 추가하기
            },function(){
                $(this).removeClass("lime");
                // 마우스가 버튼 뺄때 lime Class 빼기
            })

            // 복제 버튼 클릭시 해당 요소 복사해서 또다른 div에 붙여넣기
            $("#clone").click(function(){
                //var copy = $("#item1").clone(/*false*/);
                var copy = $("#item1").clone(true);
                $("#clone-result").append(copy);
            })
        })
    </script>

5) 요소객체 제거 및 잘라내기 메소드

(1) $("선택자").empty()

: 선택된 요소의 모든 "자식요소"들 제거해주는 메소드

(2) var 변수 = $("선택자").remove()/detach()

: 선택된 요소 제거 후 제거된 요소를 반환(잘라내기)

• remove() : 잘라내기 시 잘라낸 요소의 이벤트 안가져옴
• detach() : 잘라내기 시 잘라낸 요소의 이벤트 가져옴

<실습>
    <button id="empty">empty</button>
    <button id="remove">remove</button>
    <button id="detach">detach</button>


    <div id="remove-test" style="border:3px solid red; width:110px; height:110px;">

        <!-- 제거 및 잘라내기 할 요소 -->
        <div id="item2" class="item">
            <span>안녕</span>
        </div>

    </div>

    <br>

    <div id="remove-result" style="border:3px solid blue; width:110px; height:110px;">

    </div>

    <script>
        $(function(){
            $("#empty").click(function(){
                $("#remove-test").empty(); // remove-test의 자손요소를 제거함
            })

            $("#remove").click(function(){
                var el = $("#item2").remove(); // 이벤트 가지고오지 않음(hover x)
                $("#remove-result").append(el);
            })

            $("#detach").click(function(){
                var el = $("#item2").detach(); // 이벤트 가져옴(hover o)
                $("#remove-result").append(el);
            })
        })
    </script>

추가적인 메소드

1) each 메소드

: 배열의 모든 인덱스에 순차적으로 접근하고자 할 때, 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때 사용하는 for in문과 유사하게 수행되는 메소드

(1) $.each(객체|배열, function(매개변수1, 매개변수2){ 순차적으로 접근해서 실행할 내용; });

(2) 객체|배열.each(function(매개변수1, 매개변수2){ 순차적으로 접근해서 실행할 내용 });

• 만약 객체를 제시했다면,
  첫번째 매개변수에는 순차적으로 접근된 객체의 속성명(key값)이 담김
  두번째 매개변수에는 해당 속성값(value)이 담김

• 만약 배열을 제시했다면,
  첫번째 매개변수에는 순차적으로 접근된 배열의 인덱스가 담김
  두번째 매개변수에는 해당 인덱스의 값이 담김
  

<예시>
    <div id="area1"></div>

    <script>
        $(function(){
            
            // 배열
            var arr = [{name: "네이버", link:"http://www.naver.com"},
                       {name: "구글", link:"http://www.google.com"},
                       {name: "다음", link:"http://www.daum.net"}];
            
            var output = "";
            for(var i in arr){
                output += "<h2><a href='" + arr[i].link + "'>" + arr[i].name + "</a></h2>";
            }

            // 1)
            $.each(arr, function(index, item){
                output += "<h2><a href='" + item.link + "'>" + item.name + "</a></h2>";
            });

            // 2) 
            $(arr).each(function(index, item){
                output += "<h2><a href ='" + item.link + "'>" + item.name + "</a></h2>";
            });


            $("#area1").html(output);
        })
    </script>
    
    <br>
    
    <div id="wrap">
        <h1>item-0</h1>
        <h1>item-1</h1>
        <h1>item-2</h1>
        <h1>item-3</h1>
        <h1>item-4</h1>
    </div>

    <script>
        $(function(){
            // [h1,h1,h1,h1,h1]
            $("#wrap").children().each(function(index, el){ 
                
                // el : 순차적으로 접근된 h1 요소객체 담길것임
                // 순차적으로 접근할 때 마다의 h1요소에 클래스 추가

                // el.addClass("highlight_" + index); -> 제대로 안됨!
                // jQuery 방식으로 하니까 안 됨

                //el.className = "highlight_" + index; // -> 제대로 됨!
                // el : 순수 js방식으로 선택된 요소객체

                // js방식 => jQuery방식으로 바꾸기
                // $(el).addClass("highlight_" + index); -> 제대로 됨!

                // $(this) : 매번 순차적으로 접근되는 해당 요소
                $(this).addClass("highlight_" + index); // 제대로 됨!

                var div = document.getElementById("wrap"); // js방식
                div.style.backgroundColor = "pink"; // js방식
               // div.css("backgroundColor", "pink"); // jQuery 방식 안됨 
                // div가 js방식이기때문에 $를 붙여줘서 강제형변환 하듯이 바꿔주면 jquery 방식으로도 사용 가능함
                $(div).css("backgroundColor", "pink"); // 제대로 됨!
            

            });
        })
    </script>

2) is 메소드

: $("선택자").is("선택자")
선택된 요소가 내가 전달한 전달값과 일치하는지 판단해서 그에 해당하는 논리값 반환
=> true | false로 반환

<예시>
    <h3 class="test">test1</h3>
    <h3>test2</h3>
    <h3 class="test">test3</h3>
    <h3 class="test">test4</h3>
    <h3>test5</h3>
    <h3 class="test">test6</h3>

    <script>
        $(function(){

            $("h3").each(function(){
                if($(this).is(".test")){
                    $(this).css("backgroundColor", "orange");
                }
            })
        })
    </script>