2022-03-11 객체조작

내일이면 주말이라 쉰다!!
이번주는 중간에 하루 쉬어서 좀 빨리 지나간 것 같다.
쉬긴쉬는데 마냥 쉬지는 않고 다른 공부들도 좀 한다. 근데 솔직히 하기 귀찮다.
맛있는거나 해먹고 빵이나 구워서 유튜브보고싶다.ㅜㅜ
오늘도 시작해보자.

객체조작

어제도 객체조작을 했는데 오늘도 객체조작을한다. 어제 다 못했다...!

엘리멘드 속성 값을 조작하는 attr()과 prop()을 알아보자.

attr() / removeAttr()

엘리먼트의 속성 값을 확인, 수정, 삭제하는 메소드
attr() sample

const btn1 = $("#btn1");
    btn1.click(function(){
        const label = $("#test3>label");
        label.each(function(index,item){
            const id = $(item).prev().attr("id");
            $(item).attr("for",id);
        });
    });

위의 코드는 forEach문을 사용해 라벨에다가 "for"라는 엘리멘트를 넣어주고 attr을 사용해 변수id로 받아준 id값을 "for"에 값으로 넣어줫다.
removeAttr() sample

	$("#btn2").click(function(){
        const label = $("#test3>label");
        label.removeAttr("for");
        /*
        label.each(function(index,item){
            $(item).removeAttr("for");
        });
        */
    });

아까처럼 forEach문을 사용해서 "for"엘리멘트를 지워줬는데 그 부분은 현재 주석처리해놨다.
왜냐하면 forEach문 안쓰고 선택한 속성이 같다면 그냥 removeAttr을 사용해주면되기때문이다.

prop() / removeProp()

attr()과 유사한 기능으로 true/false값을 조절해야하는 속성에 사용된다.
checked / selected / disabled 등과 같은 속성에 사용한다.
porp() sample

    $("#btn3").click(function(){
        const input = $("#test3>input");
        input.prop("checked",true);
    });

test3의 input엘리먼트에다가 checked속성을 true값으로 넣어준다.

css()

선택된 요소의 css속성값을 가져오거나 설정하는 메소드다.

const divs = $("#test4>div");
//css메소드에 매개변수로 css속성명만 작성하면 해당 속성의 값을 가져옴
        console.log(divs.eq(0).css("background-color"));
        console.log(divs.eq(1).css("background-color"));        
 //css메소드에 매개변수를 2개 부여하면 첫번째 매개변수 css속성명, 두번째 매개변수 첫번쨰 매개변수로 받은 속성에 적용할 속성 값
        divs.eq(0).css("background-color","green");
 //한번에 여러개의 속성을 입력할 수 있다.
        divs.eq(1).css("background-color","yellow").css("float","none").css("clear","left");
 //객체처럼 넣을수도 있다.
         divs.eq(1).css({
            "background-color":"yellow",
            "float":"none",
            "clear":"left"
        });

html() / text() / val()

html() : 선택된 요소의 컨텐츠영역(innerHTML)을 가져오거나 수정
text() : 선택된 요소의 컨텐츠영역(innerText)를 가져오거나 수정
-> 내부내용중 태그는 가져올 수 없음
val() : 선택된 요소의 value를 가져오거나 수정

append() / prepend() / after() / before()

생성한 문서객체를 특정위치에 삽입하는 메소드

append

       const div = $("#test6");
       //객체1.append(객체2) : 객체1의 마지막 자식으로 객체2를 추가
       const p = $("<p>test-0</p>");
       div.append(p);
       //동일한 기능의 메소드 appendTo
       //순서가 반대임 (div.append(p) / p.appendTo(div))
       p.appendTo(div);        

prepend

        //객체1.prepend(객체2) : 객체1의 첫째 자식으로 객체2 추가
        div.prepend(p);
        //동일한 기능의 메소드 prependTo
        //p.prependTo(div) / 얘도 쓰는 순서가 반대일 뿐 기능은 동일

after

        const div = $("#test6");
        const p = $("<p>test-000</p>");
        //객체1.after(객체2) : 객체1의 바로 다음요소로 객체2 추가 / 자식 X
        div.after(p);
        //동일한 기능의 메소드 insertAfter();
        //p.insertAfter(div);

before

        const div=$("#test6");
        const p = $("<p>test-0000</p>");
        //객체1.before(객체2) : 객체1의 바로 이전요소로 객체2 추가
        div.before(p);
        //동일한 기능 메소드 insertBefore();
        //p.insertBefore(div);

remove() / empty()

remove() : 특정 문서 객체를 제거
empty() : 특정 문서 객체를 비움 -> 후손을 모두 제거

clone()

복사하는 메소드인데 이를통해 객체 이동 및 복사가 가능하다.

이동

    $("#btn15").click(function(){
        const test8 = $("#test8");
        const h2 = $("#test7>h2");
        test8.append(h2);
    });

복사

    $("#btn16").click(function(){
        const test8 = $("#test8");
        const h2 = $("#test7>h2").clone();
        test8.append(h2);
    });

필자가 헷갈린거...

테이블에 있는 정보를 빼내서 결과창에
요소1/요소2/요소3
요소a/요소b/요소c
의 방법으로 정리하는 코드를 작성하는데

const tbl1Tr = $("#tbl1 tr");

이부분이 헷갈릴 부분이 아닌데도 헷갈리더라...
tr의 길이가 자꾸 비어있다고 나와서 고생 좀 한 것 같다.
어쩄든 정리해보면

$("#btn1").click(function(){
	//테이블의 한 줄 선택
	const tr = $("#tbl1 tr");
    //테이블의 크기만큼 반목하는 for문
    tr.each(function(index,item){
    //이 tr의 첫번째 요소는 이름 / 나이 / 주소 라고 알려주는 부분이기때문에 이 부분만 제외하고 넣어주는 if문
    if(index !=0){
            const td = $(item).children();
            const html = td.eq(0).text()+"/"+td.eq(1).text()+"/"+td.eq(2).text()+"<br>";
            result.append(html);
    }
    //children()을 사용해 자식객체로 받아온 객체들을 하나하나 써서 결과를 넣어줄 곳에 append

이 과정중에 td를 어떻게 선택해야하는지 잘 모르겠어서 해맸다..
tr로 나눠서 3개씩 선택하고싶다면 일단 tr을 선택하고서 children()으로 또 선택해주자.

헷갈린거 2

$("#exam3>fieldset").last().children("div").css("background-color","transparent");

css에 속성 넣어줄때 뒤에 빈칸으로 두는건 속성을 삭제하는게 아니라 그냥 비워주는거더라.

이벤트

이벤트를 연결하는 방법
1. inline이벤트 : 자바스크립트와 동일 "onclick=func1();"
2. 고전이벤트모델 : $("선택자").이벤트명(function(){})
3. $("선택자").on("이벤트명",function(){});

전체에 이벤트 걸기

    $(document).on("click",".d1",function(){
        console.log($(this).text());
    });

전체 document에 d1클래스를 가지고있는 요소에다가 text()를 출력해주는 이벤트를 걸었다.

숫자 늘리는 코드

    $(".levelup>button").not("#allLevelup").on("click",function(){
        const span = $(this).next().next();
        //const result = parseInt(levle)+1;
        //span.text(result);
        const levle = Number(span.text())+1;
        span.text(levle);
    });

레벨업 클래스의 자식객체 중 버튼들을 선택하고, 그중에 allLevelup이라는 아이디를 가지고있는 친구만 제외하면서 선택했다.
선택한 요소의 형제요소 중 다다음 요소를 선택하고 변수로 만들었다.
필자는 처음에 저렇게 parseInt를 사용해서 들어있던 문자 "0"을 숫자형으로 변형시켜서 1을 더해줬다.
그리고 값을 넣어줬다.
그런데 이게 Number로 하니까 뭔가 더 깔끔해보이더라.

이게 버튼 눌러서 올리는 요소가 3개있는데 하나의 버튼만 클릭하면 전부 클릭한 효과를 내는 코드를 짜본다.

이벤트 강제실행

    $("#allLevelup").on("click",function(){
        const btn = $(".levelup>button").not("#allLevelup");
        //btn.trigger("click");
        btn.click();
    });

이게 그 코드인데 주석으로 해놓은 방식이나 btn.click(); 중 어느쪽을 사용해도 좋다.
아까 선택했던 $(".levelup>button").not("#allLevelup")을 다시 선택해서 처음 선택한 버튼을 클릭하면 지금 선택된 3개의 요소들도 다 클릭한 효과를 준다.
이게 이벤트 강제실행 메소드이다.

마우스 이벤트

클릭 / 더블클릭 / 마우스(업,다운) / 현재 마우스 위치
등의 이벤트가 있다.

click

    $("#click").on("click",function(){
        $(this).css("color","red");
    });

선택자를 클릭했을 때 효과가 난다.

dblclick

    $("#dblclick").on("dblclick",function(){
        $(this).css("color","blue");
    });

선택한 요소를 더블클릭 했을 때 효과가 난다.

mouseupdown

    //마우스 좌클릭을 땠을때 효과주기
    $("#mouseupdown").on("mouseup",function(){
        $(this).css("color","red");
    });
    //마우스 좌클릭을 눌렀을때 효과주기
    $("#mouseupdown").on("mousedown",function(){
        $(this).css("color","blue");
    });

마우스를 클릭했을때 / 클릭한걸 땠을때 각각의 효과를 줄 수 있다.

mousemove

    $(document).mousemove(function(event){
        const html = event.pageX+","+event.pageY;
        $("#mousemove").text(html);
    });

마우스가 움직였을 때 효과이다.

효과

페이지에 애니메이션 효과를 넣기위한 메소드이다.
사용방법 : $("선택자").메소드명([speed],[easing],[callback]);

speed : 실행속도(ms), easing : 변경되는 지점별 속도(linear : 일정하게 |
swing : 처음과 끝이 약간 느리게), callback : 메소드 실행 후 수행할 함수

단, easing을 사용하기위해서는 일반 jquery가 아닌 jquery-ui라이브러리를 추가로 사용해야함

show() / hide() / toggle()

show() : display속성을 hide()하기 전으로 되돌린다.
hide() : display 속성을 none으로 바꾼다.
toggle() : show()속성이면 hide()로 hide()속성이면 show()로 바꾼다.

사실 앞으로 알아볼 것 들 전부 다 이러한 형식이다.

    const div = $("#div");
    $("#btn1").on("click",function(){
        div.show(300);//display속성을 원래 요소의 속성으로
    });
    $("#btn2").on("click",function(){
        div.hide(300);//display속성을 none
    });
    $("#btn3").on("click",function(){
        div.toggle(300);//show(),hide() 반복
    });

메소드 뒤에 숫자를 주는 건 이 애니메이션이 재생되는 시간이다.
300이면 show() / hide() 되는데 0.3초에 걸쳐서 진행한다는 뜻이다.

slideDown() / slideUp() / slideToggle()

slideDown() : 가로축은 이미 넓이가 차있는 상태에서 스르륵 슬라이드로 내려오는 효과
slideUp() : 스르륵 올라가는 효과
slideToggle() : slideUp() / slideDown() 반복

    $("#btn4").on("click",function(){
        div.slideDown(300);
    });
    $("#btn5").on("click",function(){
        div.slideUp(300);
    });
    $("#btn6").on("click",function(){
        div.slideToggle(300);
    });

fadeIn() / fadeOut() / fadeToggle()

fadeIn() : 투명도를 점차 올림
fadeOut() : 투명도를 점차 내려서 사라짐
fadeToggle() : fadeIn() / fadeOut() 반복

    $("#btn7").on("click",function(){
        div.fadeIn(300);
    });
    $("#btn8").on("click",function(){
        div.fadeOut(300);
    });
    $("#btn9").on("click",function(){
        div.fadeToggle(300);
    });

animate()

animate() : 현재 css속성을 설정한 값으로 차츰 변경되는 효과를 주는 메소드
$("선택자").animate({적용할css속성},[시간],[easing],[callback]);
단, 모든속성이 적용되는것은 아니며, jquery-ui를 사용하면더 많은 속성을 animate적용가능 (ex.background-color)같은 경우는 그냥은 적용이 안됨

    $("#btn10").on("click",function(){
        div.animate(
            {
                width : "100px",
                height : "150px",
                opacity : "0.5",
                "background-color" : "red"
            },
            1000
        )
    });