제이쿼리 셀렉터 테스터

html DOM 개체 요소 선택 연습



jQuery Selectors
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

jQuery Selector Tester
https://www.w3schools.com/jquery/trysel.asp

jQuery Selectors
http://codylindley.com/jqueryselectors/



//=====================

//==================================

jQuery : Selectors

https://api.jquery.com/category/selectors/


//==========

- :contains

<div>Malcom John Sinclair</div>


$( "div:contains('John')" ).css( "text-decoration", "underline" );



//=========

- :parent

<table border="1">

  <tr><td>Value 1</td><td></td></tr>

  <tr><td>Value 2</td><td></td></tr>

</table>


$( "td:parent" ).fadeTo( 1500, 0.3 );



//==========

- :checked

$( "#log" ).html( $( "input:checked" ).val() + " is checked!" );




//===================

// 편리한 함수

find() : 하위 자식 개체를 선택

closest() : 상위 부모 개체중 가장 가까운 개체를 선택



//=================

//attr과 prop의 차이

참고 https://javascriptandjquerydev.blogspot.com/2012/07/attr-prop.html



    attr1 = $(this).attr("checked"); //checked, undefined , //html태그의 내용을 그대로, 변화는 반영안함!!
    prop1 = $(this).prop("checked"); // true, false    //자바스크립트 내용, 변화를 반영
    is1 = $(this).is(":checked");     // true, false
   



//===================================

//예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("input").click(function(){
        console.log("Click-START");
        $("td").find("input[type=checkbox]:checked").each(function(){
            obj = $(this);
            id = obj.closest("tr").find("td[name=no]").text();
            if( obj.prop("checked") == true){
                console.log("checked", id);
            }else{
                console.log("Unchecked", id);
            }
        });
    });

});

</script>

<style>
.choice{
zoom: 2;
color: red;
}
</style>

</head>
<body>
        <div class="panel panel-flat">
            <div class="table-responsive">
                  <table class="line1" >
                    <colgroup>
                        <col width="10%">  <col width="10%">    <col width="20%">    <col width="20%">
                    </colgroup>
                   
                    <thead class="line2">
                    <tr class="line2">
                        <th class="line1"><input type="checkbox" class="styled"></th>
                        <th class="line1">id</th><th class="line2">name1</th> <th class="line2">name2</th>                       
                    </tr>
                    </thead>

                    <tbody class="line2">
                    <tr class="line1" value="11">
                        <td class="line3">
                            <div class="checker"><span>
                            <input type="checkbox" class="checkbox1 styled" value="11" checked></div> </span>
                            </td>                           
                        <td class="no1 no2 line2" name="no">11</td>
                        <td class="line2">name1-11</td>
                        <td class="line2">name2-11</td>
                    </tr>
                    <tr class="line3" value="12">
                        <td class="line2">
                            <div class="checker"><span>
                            <input type="checkbox" class="checkbox1 styled" value="12"></div> </span>
                            </td>                           
                        <td class="no1 no2 line2" name="no">12</td>
                        <td  class="line2">name1-12</td>
                        <td  class="line2">name2-12</td>
                    </tr>
                    <tr class="line2" value="13">
                        <td class="line2">
                            <div class="checker"><span>
                            <input type="checkbox" class="checkbox1 styled" value="13"></div> </span>
                            </td>                           
                        <td class="no1 no2 text-center line2" name="no">13</td>
                        <td class="line2" >name1-13</td>
                        <td class="line2" >name2-13</td>
                    </tr>
                    </tbody>

                </table>
            </div>
        </div>

</body>
</html>





반응형
Posted by codens