세라공원

[jQuery] jQuery 활용한 태그 조작 본문

javaScript

[jQuery] jQuery 활용한 태그 조작

세라박 2022. 12. 8. 23:16 
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
        <link rel="stylesheet" href="./bt2.css">
        <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
        <script>
            function clickPost(postid) {
                alert(postid + "게시글을 클릭했습니다.");
            }

            $(document).ready(function () {
                /*
                $("#post-3").click(function () {
                   // $(this).addClass("fastcampus");
                    clickPost(3);
                   // $(this).remov/eClass("fastcampus");
                });

                $("#post-2").click(function () {
                    clickPost(3);
                });

                $("#post-1").click(function () {
                    clickPost(3);
                });
                */

                // 해당 클래스를 가지고 있는 모든 것을 가리킴.
                $(".fastcampus").click(function() {
                    let id = $(this).attr("id");
                    clickPost(id);
                });

            });


        </script>
    </head>
    
    <body>
        <div class="my-table">
            <table class="table table-striped table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">제목</th>
                        <th scope="col">작성자</th>
                        <th scope="col">일시</th>
                    </tr>
                </thead>
                <tbody>
                    <!--<tr id="post-3">-->
                    <tr id="3" class="fastcampus">
                        <th scope="row">3</th>
                        <td>세번째 글입니다.</td> 
                        <td>serapark</td>
                        <td>2022-10-28</td>
                    </tr>
                    <!--<tr id="post-2">-->
                    <tr id="2" class="fastcampus">
                        <th scope="row">2</th>
                        <td>2번째 글입니다.</td>
                        <td>serapark</td>
                        <td>2022-10-27</td>
                    </tr>
                    <!--<tr id="post-1">-->
                    <tr id="1" class="fastcampus">
                        <th scope="row">3</th>
                        <td>첫번째 글입니다.</td>
                        <td>serapark</td>
                        <td>2022-10-26</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

 

모든 코드는 위에서부터 해석.


 $(document).ready(function () { 
                $("#post-3").click(function () {
                    clickPost(3);
                });
            });

지정하는 속성값을 가진 태그보다 스크립트가 먼저 작성되는 경우 꼭 $(document).ready 안에서 처리를 해야한다.

$(document).ready : 무조건 쓰는 약속이라고 생각하는 것이 좋다.

this : 함수안에서 this 사용하면 '나 자신'

class : 어떤 이벤트를 원하면 class를 넣었다가 뺐다가 자유자재로 만들 수 있다. 스타일 적용, 이벤트 적용 등등.

attr : 태그가 가진 속성값을 가지고 올 때 사용하는 함수. 태그가 가진 어떤 속성값도 가지고 올 수 있다.

저작자표시 비영리 변경금지 (새창열림)

'javaScript' 카테고리의 다른 글

[jQuery] jQuery 시작하기  (0) 2022.12.07
[javaScript] callback Function(콜백 함수)  (0) 2022.06.03
[javaScript] 모듈 패턴(Module Pattern)  (0) 2022.06.03
'javaScript' Related Articles more
Comments