[JQeury] Attributes method 속성 메소드

Framework & Library/JQeury

[JQeury] Attributes method 속성 메소드

gangintheremark 2023. 7. 14. 13:56

728x90

Jquery의 속성 메소드를 사용하여 태그 속성 값을 가져오거나 설정할 수 있다.

메소드	예시	설명
💡 .attr()	$("selector").attr("속성명")	지정된 속성명에 해당하는 속성값 반환 일치하는 요소가 다수면 처음 일치하는 요소
💡 .attr()	$("selector").attr("속성명", "속성값")	지정된 속성명에 속성값을 설정 일치하는 요소가 많으면 모두 설정
💡 .val()	$("selector").val()	선택된 요소의 값을 반환
💡 .val()	$("selector").val("값")	선택된 요소의 값을 설정
💡 .text()	$("selector").text()	선택된 요소의 text 값 반환 (자손포함)
💡 .text()	$("selector").text("값")	선택된 요소에 text값 설정
💡 .html()	$("selector").html()	선택된 요소의 html 태그 포함 text 값 반환 (자손포함)
💡 .html()	$("selector").html("값")	선택된 요소에 html 태그 포함하여 text 값 설정
💡 .addClass()	$("selector").addClass("클래스 속성")	선택된 요소에 클래스 속성 추가 한꺼번에 여러 개의 속성값 설정 가능
💡 .removeClass()	$("selector").removeClass("클래스 속성")	선택된 요소에 클래스 속성 제거 한꺼번에 여러 개의 속성값 제거 가능
💡 .toggleClass()	$("selector").toggleClass("클래스 속성")	선택된 요소에 해당하는 class 속성이 존재하면 제거, 존재하지 않으면 설정

🍀 addClass removeClass toggleClass 를 사용하기 위해서 클래스 속성을 생성한다.

  <style>
    .important {  
      font-size: xx-large;
      font-weight: bold;
    }

    .highlight {
      color: blue;
    }
  </style>

🍀 속성 method를 이용하여 클래스 속성 적용하기

<head>
  <script>
    $(document).ready(function () {
      $("#large").on("click", function(){
        $("p, h2").addClass("important highlight");
        // p태그와 h2태그에 important와 highlight 클래스 속성 적용 
      })
      $("#normal").on("click", function(){
         $("p").removeClass("important highlight");
        // p태그에 important와 highlight 클래스 속성 제거
      })
      $("#toggle").on("click", function(){
        $("p").toggleClass("important highlight");
        // p태그에 important와 highlight 클래스 속성 번갈아 가며 적용
      })
    });
  </script>
</head>
<body>
  <h2>Heading2</h2>
  <p>이것은 중요한 내용이다.</p>
  <button id="large">크게보기</button><br>
  <button id="normal">보통</button><br>
  <button id="toggle">toggle</button>
</body>

728x90