Chap 4. jQueryオブジェクトの操作

76739 ワード

$.each()関数

for in文の管理

配列と同様の方法で、オブジェクトまたは配列内の要素

を検査する.
👨‍🎓 作成方法

$.each(배열(객체) 이름, function(index, item){});

配列をゼロ構造からインデックスに自動的にロードし、オブジェクトの値を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関数:文書オブジェクトのクラス属性を削除する方法

👨‍🎓 作成方法

$('선택자').addClass('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タグは、特定の属性の値を識別または追加するための方法

を提供する.

メソッド

(パラメータ値の場合)
2つのパラメータ値

がある場合、属性値を追加/変更する方法

removeAttr(「パラメータ」)

属性を削除する方法

prop()

radio、チェックボックスで選択したオプションは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 ] )

パラメータ値

がイベントハンドラ(デフォルトfalse)

にコピーされるかどうか

true:Handlerにコピー

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>

Reference

この問題について(Chap 4. jQueryオブジェクトの操作), 我々は、より多くの情報をここで見つけました https://velog.io/@woody_/Chap-4.-jQuery-객체-조작

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

フラッタにおけるレトロフィットとXMLの操作

【Pythonラーニング】miniconda複数のPythonバージョンをインストール