IMPORT

<!-- JQuery를 import 합니다 -->
    <script
      src="<https://code.jquery.com/jquery-3.5.1.min.js>"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>

태그의 정보 가져오기

• id값으로 가져오기

let input = $("#input-q1").val();
...
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>

input 값에는 input-q1 에 입력되어있는 값이 저장됨

• val()
  • 입력값, value 값을 가져올 때 사용
• text()
  • 태그 내의 값을 가져올때 사용

태그 비우기

function q3_remove() {
        // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
        $("names-q3").empty();
      }
...
<ul id="names-q3">
  <li>세종대왕</li>
  <li>임꺽정</li>
</ul>

html 태그 추가

let temp_html;
if (gu_mise < 70) temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
else
  temp_html = `<li class = "highlight">${gu_name} : ${gu_mise}</li>`;
$("#names-q1").append(temp_html);

• append
  • 선택된 태그 밑에 직접적으로 태그를 붙임

태그의 속성값

• 속성값 가져오기

<img id="myImage" src="image.jpg" alt="이미지 설명">
<button onclick="getAttr()">속성 가져오기</button>

<script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
<script>
    function getAttr() {
        alert($('#myImage').attr('src'));  // "image.jpg"
    }
</script>

• 속성값 설정하기

<img id="myImage" src="image.jpg" alt="이미지 설명">
<button onclick="setAttr()">속성 변경</button>

<script>
    function setAttr() {
        $('#myImage').attr('src', 'new-image.jpg');  // 이미지 변경
    }
</script>

• 여러 속성 설정

<img id="myImage" src="image.jpg" alt="이미지 설명">
<button onclick="setMultipleAttrs()">속성 여러 개 변경</button>

<script>
    function setMultipleAttrs() {
        $('#myImage').attr({
            src: 'new-image.jpg',
            alt: '새 이미지 설명'
        });
    }
</script>