티스토리 뷰

jQuery

[jQuery] .data()

.data()

선택한 요소의 데이터를 설정하거나 반환합니다.


.data()

선택한 요소의 데이터를 설정하거나 반환합니다.

문법(Syntax)

$("선택자").data();

정의(Definition)

  • .data() 메서드는 선택한 데이터 값을 가져옵니다.

샘플(Sample)

.data(index) : 선택한 요소에 데이터를 넣는 예제입니다.

Sample1

속성(Attributes)

  • 메서드는 선택한 요소의 을 선택합니다.
  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
  • 는 선택한 요소에서 조건에 맞는 요소를 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.
jquery
$(".choice1 .btn1").on("click", function(e){
    e.preventDefault();
    $( ".select1" ).data( "test1", { first: ".children()", last: "모든 자식" } );
    $( ".select1 span:first" ).text( $( ".select1" ).data( "test1" ).first );
    $( ".select1 span:last" ).text( $( ".select1" ).data( "test1" ).last );
});
$(".choice1 .btn2").on("click", function(e){
    e.preventDefault();
    $( ".select2" ).data( "test2", { first: ".find()", last: "다시" } );
    $( ".select2 span:first" ).text( $( ".select2" ).data( "test2" ).first );
    $( ".select2 span:last" ).text( $( ".select2" ).data( "test2" ).last );
});
html
<h3>속성(Attributes)</h3>
<div class="list1">
    <ul>
        <li class="select1"><span class="rLine"></span> 메서드는 선택한 요소의 <span class="rLine"></span>을 선택합니다.</li>
        <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
        <li class="select2"><span class="rLine"></span> 메서드는 선택한 요소에서 조건에 맞는 요소를 <span class="rLine"></span> 선택합니다.</li>
        <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        <li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>속성(Attributes)</h3>
    <div class="list1">
        <ul>
            <li class="select1"><span class="rLine"></span> 메서드는 선택한 요소의 <span class="rLine"></span>을 선택합니다.</li>
            <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
            <li class="select2"><span class="rLine"></span> 메서드는 선택한 요소에서 조건에 맞는 요소를 <span class="rLine"></span> 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 첫 번째 콘텐츠 요소를 채웁니다.</a>
        <a href="#" class="btn2">클릭하면 두 번째 콘텐츠 요소를 채웁니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $("span").text("");
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $( ".select1" ).data( "test1", { first: ".children()", last: "모든 자식" } );
            $( ".select1 span:first" ).text( $( ".select1" ).data( "test1" ).first );
            $( ".select1 span:last" ).text( $( ".select1" ).data( "test1" ).last );
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $( ".select2" ).data( "test2", { first: ".find()", last: "다시" } );
            $( ".select2 span:first" ).text( $( ".select2" ).data( "test2" ).first );
            $( ".select2 span:last" ).text( $( ".select2" ).data( "test2" ).last );
        });
    </script>

</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼