3. jQuery 속성_Attributes

3. jQuery 속성_Attributes

 ■ jQuery API Attributes
 ο 개요
    DOM의 속성 제어

 ο Attr
   1) attr(attributeName)
      - 의미
        해당 속성 이름의 값을 return 한다. 매치되는 첫번째 것만 가져옴

• 사용예
         // a라는 id를 가진 요소의 title 속성을 b라는 id를 가진 요소에 작성된다.
         $(function(){
             var title = $("#a").attr("title");
             $("#b").text(title);
         });

   

   2) attr(attributeName, value)
      - 의미
        해당 요소의 속성(attributeName)의 값을 변경시킨다.

• 사용예
        // a라는 id를 가진 요소의 src경로를 img/test.gif로 변경한다.
         $(function(){
             $("#a").attr("src", "img/test.gif");
         });

   

  3) attr(attributeName, fn)
      - 의미
        해당 요소의 속성(attributeName)의 값을 function으로 변경 한다.

• 사용예
         // a라는 id를 가진 요소의 src경로를 img/ + 해당속성의 title + .gif 경로로 변경시킨다.
         $(function(){
             $("#a").attr("src", function(){
               return "img" + this.title + ".gif";
             });
         });

   

  4) attr(map)
      - 의미
         해당 요소에 여러 속성을 변경한다.

• 사용예
        // a라는 id를 가진 요소의 src경로를 img/test.gif로 title과 alt는 test로 변경한다.
         $(function(){
             $("#a").attr({
                 src : "img/test.gif",
                 title : "test",
                 alt : "test"
             });
         });

   

  5) removeAttr(attributeName)
      - 의미
        해당 요소의 속성(attributeName)을 제거한다.

• 사용예
        // a라는 id를 가진 요소의 disabled 속성을 제거한다.
         $(function(){
            $("#a").removeAttr("disabled");
         });

 ο Class
   1) addClass(className)
       addClass( function(index, currentClass) )
      - 의미
         매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가한다.
      - 매개변수
         className : (String)클래스명을 포함하는 문자열, 여러 클래스명을 추가할 때는 공백으로 구분한다.
       - 반환값 : 확장집합

• 사용 예

     // a 라는 id를 가진 요소에 boxTF라는 class를 추가한다.
    $("#a").addClass("boxTF");

         // b 라는 id를 가진 요소에 boxTA라는 class를 추가한다.
          $("#b").addClass(function() {
             return "boxTA";
          });

 

   2) removeClass( [ className ])
       removeClass( function(index, class))
      - 의미
         매개변수로 전달된 하나 이상되는 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거한다.
      - 매개변수
         className : (String)클래스명을 포함하는 문자열, 다수의 클래스명을 제거하는 경우 공백으로 구분한다.
      - 반환값 : 확장집합

• 사용 예
           // a 라는 id를 가진 요소에 boxTF라는 class를 제거한다.
           $("#a").removeClass("boxTF");

   

   3) toggleClass(className)
      - 의미
         매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다.
     - 매개변수
        className : (String)토글 대상 클래스명을 포함하는 문자열
     - 반환값 : 확장집합

• 사용 예
          // a 라는 id를 가진 요소에 boxTF라는 class를 홀수번째는 추가를 짝수번째는 제거한다.
          $("#a").toggleClass("boxTF");

   

   4) toggleClass(class, switch)
      - 의미
        지정 CSS 클래스를 switch가 true이면 추가하고 false(이)라면 삭제

• 사용 예
          // a 라는 id를 가진 요소에 $(this).attr("id") == "a" 값이 true일 경우 boxTF라는 class를 홀수번째는 추가를 짝수번째는 제거한다.
         $("#a").toggleClass("boxTF", $(this).attr("id") == "a");

   

  5) toggleClass(function(index, class), [switch]) 
      - 의미
        function에서 리턴한 문자열의 이름을 가진 class를 click 할 경우 홀수번째는 추가를 짝수번째는 제거한다.

• 사용 예
          // a 라는 id를 가진 요소에 boxTF라는 class를 홀수번째는 추가를 짝수번째는 제거한다.
          $("#a").toggleClass(function() {
             return "boxTF";
          });

 ο HTML
    1)  html()
      - 의미
        최초의 요소로부터 HTML(을)를 문자열로서 취득한다. 이것은XML(을)를 대상에는 동작하지 않지만, XHTML은 유효.

• 사용 예
          // 첫번째 p 태그안의 HTML을 리턴 받는다.
          var str = $("p:first").text(); -> 결과 : <b>자바</b> 프레임워크
         :
          <p><b>자바</b> 프레임워크</p>

   

    2) html(val)
      - 의미
        모든 요소에 인수로 건네준 HTML(을)를 세트 한다. 이것은XML(을)를 대상에는 동작하지 않지만, XHTML은 유효.

• 사용 예
         // a 라는 id를 가진 요소(div 태그등)에 html을 넣는다.
          $("#a").html("<span>자바 <b>프레임워크</b></span>");

   

 ο Text
    1) text()
      - 의미
        지정한 요소가 가지는 텍스트 노드를 결합해 돌려준다.

• 사용 예
          // 첫번째 p 태그안의 문자열을 리턴 받는다.(html은 제외된다.)
          var str = $("p:first").text(); -> 결과 : 자바 프레임워크
         :
          <p><b>자바</b> 프레임워크</p>

   

    2) text(val)
      - 의미
        지정한 요소에 텍스트 노드를 세트 한다.

• 사용 예
          // 첫번째 p 태그안의 문자열을 넣는다.(html을 넣는다 해도 텍스트화 된다..)
          $("p:first").text("<b>자바</b> 프레임워크");
         :
          <p></p>     -> p 태그안에 『<b>자바</b> 프레임워크』가 표시된다(자바 진하게표시되지 않고 <b> </b>태그가 보인다.)

   

  ο Value
     1) val()
        - 의미
          모든 요소가 가진 value속성의 값을 돌려준다.

• 사용 예
         // select 객체에서 선택된 value 속성의 값이 리턴
          var str = $("#single").val();
        :
          <select id="single">
              <option value="a">a</option>
              <option value="b">b</option>
          </select>

   

   2) val(val)
      - 의미
        모든 요소에 value속성에 값을 설정한다. select를 selects 하거나 radio 등의 값을 설정하는 일도 가능.

       // a라는 id를 가진 객체의 value 속성에 값을 설정 한다.(text 객체에 값을 설정)
        $("#a").val("자바");
      :
         <input type="text" id="a" />