개발 무지렁이

[jQuery] .attr()과 .prop() 본문

Frontend/JavaScript

[jQuery] .attr()과 .prop()

Gaejirang-e 2023. 4. 22. 21:04
.attr(): HTML의 속성을 다룬다. (checked, undefined)
.prop(): Javascript의 프로퍼티를 다룬다. (true, false)

📕 set attr & get attr 📕

  $(function() {
      $("button").click(function() {
          $("img").attr("width", "500"); // set attr
          alert($("img").attr("src")); // get attr
      });
  });

[주민등록번호 차례로 입력하고, 뒷자리 첫번호에 따라 자동 check.js]

  $(function() {
      function numberCheck(obj) {
          let v = obj.val();
          if(isNaN(v)) { // is Not a Number
              console.log("숫자가 아닙니다.");
              // 문자열의 현재 숫자가 아닌 value를 빼고, 나머지 글자를 text에 넣는다
              let sliceV = v.substr(0, v.length-1);
              obj.val(sliceV);
      }

      $("#jumin1").on("keyup", function() {
          numberCheck($(this));
          // 주민등록번호 앞 6자리를 다 입력하면, 다음 탭으로 이동
          if($(this).val().length == 6) {    
              $("#jumin2").focus();
          }
      });

      $("#jumin2").on({
          keyup: function() {
              numberCheck($(this));
          },
          blur: function() { // 포커스를 잃었을 때 발생
              let ch = $(this).val().charAt(0);
              if(ch == "1" || ch == "3") {
                  $("#man").prop("checked", true);
              } else {
                  $("#woman").prop("checked", true);
              }
          }
      });
  });
Comments