Chap 4. jQuery 객체 조작

김승현·2021년 11월 19일

$.each() 함수

배열을 관리하는 for in 문과 비슷한 메소드로 객체나 배열의 요소를 검사하는 메소드

👨‍🎓 작성 방법

$.each(배열(객체) 이름, function(index, item){});
배열을 0번 인텍스부터 자동으로 불러와 순번은 index에 넣고 , 객체의 값은 item에 넣어 동작하는 메소드

jQuery 메소드 사용하기 위해서는 -> $(item)

EX) each

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

<head>
    <meta charset="UTF-8">
    <title>$.each</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    </head>

    <body>
        <style>
            .no {
                font-weight: bolder;
                cursor: pointer;
            }

            .no:hover {
                background-color: yellow;
            }
        </style>


        <table border="1px">
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>나이</th>
                <th>주소</th>
            </tr>
            <tr>
                <td class="no">1</td>
                <td>홍길동</td>
                <td>20살</td>
                <td>경기도</td>
            </tr>
            <tr>
                <td class="no">2</td>
                <td>김말똥</td>
                <td>30살</td>
                <td>서울시</td>
            </tr>
            <tr>
                <td class="no">3</td>
                <td>고길똥</td>
                <td>40살</td>
                <td>부산시</td>
            </tr>
            <tr>
                <td class="no">4</td>
                <td>홍김고</td>
                <td>50살</td>
                <td>대구시</td>
            </tr>
            <tr>
                <td class="no">5</td>
                <td>유비</td>
                <td>99살</td>
                <td>중국무덤</td>
            </tr>
        </table>
        <button id="btn">정보 출력</button>

        <script>
            $(function() {

                $('#btn').click(function() {
                    // 정보 출력 버튼을 클릭했을때 
                    // 회원에 대한 모든 정보가 console.log에 출력
                    
                    var $selector = $('tr').not($('tr').first());

                    // $.each 함수를 사용
                    var $selector = $('tr').not($('tr').first());

                    $.each($selector, function(index, item) {
                        var $td = $(item).children();

                        var tds = new Array();
                        $.each($td, function(index, item) {
                            tds.push($(item).html());
                        });
                        console.log(tds.join('/'));

                    });


                    // for문 사용
                    /*for (var i = 0; i < $selector.length; i++) {

                        var $td = ($($selector[i]).children());

                        var tds = new Array();

                        for (var j = 0; j < $td.length; j++) {
                            tds.push($td[j].innerHTML);
                        }
                        console.log(tds.join('/'));
                    }*/

                    // filter 사용
                    /*$selector.filter(function() {
                        var $td = $(this).children();

                        var tds = new Array();
                        $td.filter(function() {
                            tds.push($(this).html());
                        });
                        console.log(tds.join('/'));
                    });*/

                });
            });
        </script>

    </body>

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

addClass() 와 removeClass() 함수

addClass 함수 : 문서 객체에 class 속성을 추가하는 메소드
removeClass 함수 : 문서 객체의 class 속성을 제거하는 메소드

👨‍🎓 작성 방법

$('선택자').addClass('class명');
$('선택자').removeClass('class명');
removeClass안에 클래스명 작성 안하면 모든 Class 삭제

EX) addClass, removeClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>

<body>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .bgColor {
            background-color: red;
        }

        .brColor {
            border: 5px solid blue;
        }
    </style>

    <div class="div1">

    </div>

    <button id="bgBtn1">배경색 클래스 적용</button> <button id="bgBtn2">배경색 클래스 취소</button> <br>
    <button id="brBtn1">보더 클래스 적용</button> <button id="brBtn2">보더 클래스 취소</button> <br>


    <script>
        $(function() {
            var $div1 = $('.div1');
            $("#bgBtn1").click(function() {
                $div1.addClass("bgColor");
            });
            $("#bgBtn2").click(function() {
                $div1.removeClass("bgColor");
            });
            $("#brBtn1").click(function() {
                $div1.addClass("brColor");
            });
            $("#brBtn2").click(function() {
                $div1.removeClass("brColor");
            });
        });
    </script>

</body></html>

attr()과 removeAttr('인자')

attr()
- html 태그에 부여되어 특정 속성의 값을 알아내거나 추가할 수 있는 메소드
- 인자값이 1개면 값을 가져오는 메소드
- 인자값이 2개면 해당 속성값을 추가/변경하는 메소드
removeAttr('인자')
- 속성을 제거하는 메소드

prop()

radio, checkbox의 checked 옵션의 경우에는 prop 함수를 이용
jQuery 에서는 특정 속성을 뜻하는 값은 attr 사용을 하지만, 상태에 대한 (checked, disabled 등) 값은 prop 사용을 권장

EX) prop()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>

<body>
    취미 : <input type="checkbox" name="hobby" value="독서" />독서
    <input type="checkbox" name="hobby" value="운동" />운동
    <br>
    <button id="btn1">전체 선택</button> <button id="btn2">전체 해제</button> <br><br>

    성별 : <input type="radio" name="gender" value="남">남
    <input type="radio" name="gender" value="여">여
    <br>
    <button id="btn3">확인</button>

    <script>
        $(function() {
            $('#btn1').click(function() {
                var $boxs = $('input[name=hobby]');
                $boxs.prop('checked', true);
            });
            $("#btn2").click(function() {
                var $boxs = $('input[name=hobby]');
                $boxs.prop('checked', false);
            });

            $('#btn3').click(function() {
                var $radio = $('input[name=gender]');

                console.log('남자 : ' + $($radio[0]).prop('checked'));
                console.log('여자 : ' + $($radio[1]).prop('checked'));
            });
        });
    </script>
</body></html>

css()

객체의 css 속성을 변경할 수 있는 함수

🕵️‍♂️ 작성방법

$('선택자').css(name); //css의 속성명이 가지고 있는 값 추출
$('선택자').css(name,value); //css의 해당 속성을 value로 추가/변경

remove()

특정 문서 객체를 제거하는 함수

🕵️‍♂️ 작성방법

$('선택자').remove();

empty()

특정 문서의 후손을 모두 제거함 (본인 제외)

🕵️‍♂️ 작성방법

$('선택자').empty();

문서 객체에 문서 객체를 추가 및 이동 시키는 메소드

방법1	의미	방법2	의미
$(A).appendTo(B)	A는 B의 자손이 되고 자손 중 가장 마지막에 추가	$(A).append(B)	B는 A의 자손이 되고, 자손 중 가장 마지막에 추가
$(A).prependTo(B)	A는 B의 자손이 되고 자손 중 가장 앞에 추가	$(A).prepend(B)	B는 A의 자손이 되고, 자손 중 가장 앞부분에 추가
$(A).insertAfter(B)	A는 B의 형제가 되고 B 뒤에 추가	$(A).after(B)	B는 A의 형제가 되고, A의 뒤에 추가
$(A).insertBefore(B)	A는 B의 형제가 되고 B 앞에 추가	$(A).before(B)	B는 A의 형제가 되고, A의 앞에 추가

EX) appendTo, prependTo. insertAfter, insertBefore

EX) append, prepend,after, before

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>

<body>
    <script>
        $(function() {
            $('#btn1').click(function() {
                //$('<span>추가1</span>').appendTo('#p1');
                $('#p1').append('<span>추가1</span>');
            });
            $('#btn2').click(function() {
                //$('<span>추가2</span>').prependTo('#p2');
                $('#p2').prepend('<span>추가2</span>');
            });
            $('#btn3').click(function() {
                //$('<span>추가3</span>').insertAfter('#p3');
                $('#p3').after('<span>추가3</span>');
            });
            $('#btn4').click(function() {
                //$('<span>추가4</span>').insertBefore('#p4');
                $('#p4').before('<span>추가4</span>');
            });
        });
    </script>

    <p id="p1"> test1 </p>
    <p id="p2"> test2 </p>
    <p id="p3"> test3 </p>
    <p id="p4"> test4 </p>

    <button id="btn1">appendTo</button>
    <button id="btn2">prependTo</button>
    <button id="btn3">insertAfter</button>
    <button id="btn4">insertBefore</button>
</body></html>

clone( [ true | false ] )

인자값은 이벤트 핸들러까지 복사할지 여부 (default는 false)
true : 핸들러까지 복사

EX) clone

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

    <style>
        .div1 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <div class="div1"></div>
    <button id="btn">복사</button>

    <script>
        $('#btn').click(function() {
            var $selector = $('.div1').first();

            $selector.after($selector.clone(false));
            //$selector.after($selector.clone(true));

        });

        $('.div1').click(function() {
            alert('이벤트 작동');
        });
    </script>

</body></html>