JQuery 문법

JQuery Selectors

• 요소 선택기
  ${"p")
• #id 선택기
  $("#test")
• .class 선택기
  $(".test")

---

JQuery Events

• $(document).ready()
  • 문서가 완전히 로드 되었을 때
    $(document).ready()
• click()
  • HTML 요소 클릭
    

    $("p").click(function(){
      $(this).hide();
    });
    

• dblclick()
  • HTML 요소를 더블 클릭
    
• mouseenter()
  • 마우스 포인터가 HTML 요소에 들어갈 때
    

    $("#p1").mouseenter(function(){
      alert("You entered p1!");
    });
    

• mouseleave()
  • 마우스 포인터가 HTML요소를 떠날 때
• mousedown()
  • HTML 요소 위에 마우스가 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스, 버튼을 누를 때
• mouseup()
  • HTML 요소 위에 마우스가 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스, 버튼을 놓을 때
• hover()
  • 마우스가 HTML 요소에 들어갈 때 혹은 떠날 때
    

    $("#p1").hover(function(){
      alert("You entered p1!");
    }, //mouseenter
    function(){
      alert("Bye! You now leave p1!");
    }); //mouseleave
    

• focus()
  • 양식 필드에 포커스가 있을 때

    $("input").focus(function(){
      $(this).css("background-color", "#cccccc");
    });
    

• blur()
  • 양식 필드가 포커스를 잃을 때
• on()
  • 선택한 요소에 대해 하나 이상의 이벤트 핸들러 연결

    $("p").on({
      mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },
      mouseleave: function(){
      $(this).css("background-color", "lightblue");
    },
      click: function(){
        $(this).css("background-color", "yellow");
      }
    });
    

---

JQuery Effects

• hide() & show()
  • HTML 요소를 숨기거나 표시

    $("#hide").click(function(){
      $("p").hide();
    });
      $("#show").click(function(){
      $("p").show();
    });
    

• toggle()
  • HTML 요소를 숨기거나 표시 전환

    $("button").click(function(){
      $("p").toggle();
    });
    

• fade
  • fadeIn()
    • 숨겨진 요소 페이드인
  • fadeOut()
    • 보이는 요소 페이드 아웃
  • fadeToggle()
    • fadeIn, fadeOut 토글
  • fadeTo()
    • 불투명도로 페이드 허용

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

• slide
  • slideDown()
    • 요소를 아래로 슬라이드
  • slideUp()
    • 요소를 위로 슬라이드
  • slideToggle()
    • slideDown, slideUp 토글

$("#flip").click(function(){
   $("#panel").slideDown();
});

---

JQuery HTML

JQuery Get

• 콘텐츠 가져오기
  • text()
    • 선택한 요소의 텍스트 내용을 설정하거나 반환
  • html()
    • 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환
  • val()
    • 양식 필드의 값을 설정하거나 반환

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

• 속성 가져오기
  • attr()

    $("button").click(function(){
      alert($("#w3s").attr("href"));
    });
    

JQuery Add

• 새 HTML 콘텐츠 추가
  • append()
    • 선택한 요소의 끝에 내용 삽입
  • prepend()
    • 선택한 요소의 시작 부분에 내용 삽입
  • after()
    • 선택한 요소 뒤에 내용 삽입
  • before()
    • 선택한 요소 앞에 내용 삽입

JQuery Remove

• 요소 콘테츠 제거
  • remove()
    • 선택한 요소 제거
  • empty()
    • 선택한 요소에서 자식 요소 제거

---

JQuery AJAX

• load()
  • 서버에서 데이터를 로드하고 반환된 데이터를 선택한 요소에 넣음

    $(selector).load(URL,data,callback);
    

• $.get()
  • HTTP GET 요청으로 서버에서 데이터 요청

    $.get(URL, callback);
    

• $.post()
  • HTTP POST 요청을 사용하여 서버에서 데이터 요청

    $.post(URL, callback);