[ JQuery ] 제이쿼리 함수 ( attr, val, data 등 )

 

 

JQuery 는 태그 등 엘리먼트에서 값이나 스타일, 또는 속성 등을 조작하기 위한

 

함수들을 정말 많은 방법으로 지원하는데 어떤 함수들이 있는지 살펴보도록 하자.

 

 

attr ( )

attr 은 엘리먼트의 속성 값을 가져오거나 변경할 수 있는 함수이다.

 

하나의 인자를 주면 해당 속성 값만을 조회하고 두 개를 주면 해당 속성 값을 변경한다.

<script>

    //"testName" 를 가져옴
    $("#testDiv").attr("name");
    
    //name 속성 "testName" 을 "attrName" 으로 변경
    $("#testDiv").attr("name", "attrName");
    
</script>
.
.
<div id="testDiv" name="testName">TestContent</div>

 

 

prop ( )

엘리먼트의 속성 값을 가져오거나 변경한다는 점에서 attr ( ) 와 유사하지만,

 

아무 속성 값이 아니라 true 와 false 값 만을 가지는 속성 값을 관리한다.

<script>

    //true 를 가져옴
    $("#testDiv").prop("hidden");
    
    //readonly 속성 "true" 를 "false" 로 변경
    $("#testDiv").prop("readonly", "false");
    
</script>
.
.
<div id="testDiv" hidden="true" readonly="true">TestContent</div>

 

 

 

 

addClass ( )

클래스가 없는 엘리먼트에 class 속성을 추가한다.

<script>

    //class 속성 "testClass" 를 추가한다.
    $("#testDiv").addClass("testClass");
    
</script>
.
.
<div id="testDiv">TestContent</div>

 

 

removeClass ( )

클래스가 있는 엘리먼트의 class 속성을 삭제한다.

<script>

    //class 속성 "testClass" 를 삭제한다.
    $("#testDiv").removeClass("testClass");
    
</script>
.
.
<div id="testDiv" class="testClass">TestContent</div>

 

 

val ( )

엘리먼트가 가지고 있는 value 속성 ( 값 ) 을 관리한다.

 

인자를 넣지 않으면 value 를 가져오고 인자를 넣어주면 value 를 인자 값으로 변경한다.

<script>

    //value 속성 "testValue1" 을 가져온다
    $("#testDiv").val();
    
    //value 속성 "testValue1" 을 "testValue2" 로 바꾼다
    $("#testDiv").val("testValue2");
    
</script>
.
.
<div id="testDiv" value="testValue1">TestContent</div>

 

 

toggleClass ( )

엘리먼트가 인자로 넣은 class 를 가지고 있다면 제거하고 가지고 있지 않다면 생성한다.

<script>

    //class "testClass" 가 없으니 추가한다.
    $("#testDiv").toggleClass("testClass");
    
    //위에서 class "testClass" 를 생성했기에 이를 삭제한다.
    $("#testDiv").toggleClass("testClass");
    
</script>
.
.
<div id="testDiv">TestContent</div>

 

 

height ( ) / width ( )

height ( ) 는 엘리먼트의 높이를, width ( ) 는 엘리먼트의 너비를 가져온다.

 

각각 인자를 넣어주면 높이와 너비를 인자 값으로 설정한다.

<script>

    //해당 엘리먼트의 높이를 가져옴
    $("#testDiv").height();
    
    //해당 엘리먼트의 높이를 500 으로 설정함
    $("#testDiv").height(500);
    
    //해당 엘리먼트의 너비를 가져옴
    $("#testDiv").width();
    
    //해당 엘리먼트의 너비를 500 으로 설정함
    $("#testDiv").width(500);
    
</script>
.
.
<div id="testDiv">TestContent</div>

 

 

css ( )

엘리먼트의 스타일 속성을 가져오거나 변경한다.

 

인자를 하나만 입력하면 해당 속성을 가져오고 두 개를 입력하면 속성을 변경한다.

<script>

    //엘리먼트의 color 속성 "red" 를 가져온다.
    $("#testH1").css("color");
    
    //엘리먼트의 color 속성 "red" 를 "blue" 로 변경한다.
    $("#testH1").css("color", "blue");
    
</script>
.
.
<h1 id="testH1" style="color: red">TestTitle</div>

 

 

text ( ) / html ( )

text ( ) 는 태그를 제외한 text 만을 가져오고 html ( ) 은 html tag 를 포함한 text 를 가져온다.

<script>

    //"TestContent" 를 가져온다
    $("#testDiv").text();
    
    //"<br>TestContent</br>" 을 가져온다
    $("#testDiv").html();
    
</script>
.
.
<div id="testDiv">
    <br>TestContent</br>
</div>

 

 

data ( )

엘리먼트에 data 를 저장하고 이를 불러올 수 있도록 해준다.

 

data-key 형태로 사용하며 key 로 불러오거나 조작하면 된다.

<script>

    //data-name 속성의 값 "테스트" 를 가져온다
    $("#testDiv").data("name");
    
    //data-userId 속성의 값 "AeCo" 를 가져온다.
    $("#testDiv").data("userId");
    
    //data-userId 속성의 값 "AeCo" 를 "애송이의 코딩이야기" 로 변경한다
    $("#testDiv").data("userId", "애송이의 코딩이야기");
    
</script>
.
.
<div id="testDiv" data-name="테스트" data-userId="AeCo">TestContent</div>

 

 

이 외에도 JQuery 는 position, get 등을 제공하며 유용하게 사용할 수 있는 함수가 많음을 알아두자.