[jQuery] write less, do more: jQuery 기본

JavaScript 라이브러리, jQuery

---

🚀 cross-browser

- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities

  <!-- Downloading jQuery -->
  <script src="jquery-3.6.3.min.js"></script>

  <!-- CDN(Connect Delivery N) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

$: jQuery의 약자

---

onload

  $(document).ready(function() {
      // jQuery methods go here...
  });

  // 축약형
  $(function() {
      // jQuery methods go here...
  });

method chain 기법

---

.(쩜)을 찍어가면서 계속 method를 호출해주는 기법

  // method-chain 기법
  $("h3, h4")
      .css("border", "1px solid red")
      .css("color", "white")
      .css("background-color", "orange");

  // another way...
  $("h3, h4").css({
      border: "1px solid red",
      color: "white",
      background-color: "blue"
  });

jQuery vs javaScript

---

🌝 jQuery문법

$(this)
$(this).val()
$(this).text()
$(this).html()

🌚 JavaScript문법

this
this.value
this.innerText =
this.innerHtml =

체크박스(checkbox), 체크한✅ 요소 가져오기

---

📕 $(":checkbox:checked").each() 📕

  $(function() {
      $("[value=확인]").click(function() {
          let info = "취미: ";
          $(":checkbox:checked").each(function(index, ele) {
              //alert(index + ": " + ele.value);
              alert(index + ": " + $(this).val());
              info += $(this).val() + ", "
          });

          //성별체크
          info += "<br>성별: ";
          info += $(":radio:checked").val(); // radio는 하나만 고르는 거니까, .each를 안돌려도 된다

          $("div").html(info);
      });
  });