Chap 4. jQuery 객체 조작

김승현·2021년 11월 19일
jquery국비수업
0

$.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>
profile
김승현
개발자로 매일 한 걸음
이전 포스트

Chap 3. jQuery 객체 탐색

다음 포스트

Chap 5. jQuery 이벤트

0개의 댓글