jQuery - 기본 문법 정리

해당 포스팅에서는 jQuery 기본 문법에 대해 정리해 보고자 한다.

Selectors

요소 선택기

$("p")

#id 선택기

$(#id")

.class 선택기

$(".class")

Events

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
mouseenter	keyup	focus	scroll
mouseleave		blur	upload

• $(document).ready() : 문서가 완전히 로드되었을 때 함수가 실행된다.
• click() : 사용자가 HTML 요소를 클릭했을 때 함수가 실행된다.

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

• dblclick() : 사용자가 HTML 요소를 더블클릭했을 때 함수가 실행된다.
• mouseenter() : HTML 요소 안에 마우스 포인터가 들어갔을 때 함수가 실행된다.

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

• mouseleave() : HTML 요소 안에서 마우스 포인터가 벗어났을 때 함수가 실행된다.
• mouseup() : HTML 요소 위에 마우스가 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 놓았을 때 함수가 실행된다.
• hover() : HTML 요소 위에 마우스 포인터가 있을 때 함수가 실행된다.

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

• focus() : 양식 필드에 포커스가 있을 때 함수가 실행된다.
• blur() : 양식 필드가 포커스를 잃었을 때 함수가 실행된다.
• on() Method : 선택한 요소에 대해 하나 이상의 이벤트 핸들러를 연결한다.

$("p").on({
  hover: function() {
      $(this).css("background-color", "red");
  },
  click: function() {
      $(this).css("background-color", "black");
  }
});

Effects

jQuery 숨기기() 및 표시()

• hide(): 선택한 요소를 나타내는 메서드이다.
• show(): 선택한 요소를 숨기는 메서드이다.

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

jQuery 토글()

• toggle() : 선택한 요소를 나타내거나 숨기는 메서드이다.

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

jQuery Fade

• fadeIn(): 숨겨진 요소를 페이드 인하는 데 사용된다.
• fadeOut(): 숨겨진 요소를 페이드 아웃하는 데 사용된다.
• fadeToggle(): fadeIn() 및 fadeOut() 메소드 사이를 토글 한다.
• fadeTo(): 주어진 불투명도(0과 1사이의 값)로 페이드를 허용한다.

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

jQuery Slide

• slideDown(): 요소를 아래로 슬라이드하는 데 사용된다.
• slideUp(): 요소를 위로 슬라이드하는 데 사용된다.
• slideToggle(): slideDown()및 slideUp() 메소드 사이를 토글 한다.

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

HTML

jQuery Get - 콘텐츠 가져오기 - text(), html() 및 val()

DOM 조작을 위한 간단하지만 유용한 세 가지 jQuery 메서드는 다음과 같습니다.

• text() - 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
• html() - 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환합니다.
• val() - 양식 필드의 값을 설정하거나 반환합니다.

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

속성 가져오기 - attr()

jQuery attr()메서드는 속성 값을 가져오는 데 사용됩니다.

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

jQuery Add - 새 HTML 콘텐츠 추가

새 콘텐츠를 추가하는 데 사용되는 4가지 jQuery 메서드를 살펴보겠습니다.

• append() - 선택한 요소의 끝에 내용을 삽입합니다.
• prepend() - 선택한 요소의 시작 부분에 내용을 삽입합니다.
• after() - 선택한 요소 뒤에 내용 삽입
• before() - 선택한 요소 앞에 내용 삽입

jQuery Remove - 요소/콘텐츠 제거

요소와 콘텐츠를 제거하기 위해 주로 두 가지 jQuery 메서드가 있습니다.

• remove() - 선택한 요소(및 해당 하위 요소)를 제거합니다.
• empty() - 선택한 요소에서 자식 요소를 제거합니다.

---

참조
https://velog.io/@sanna422/jQuery-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC-%EB%B0%8F-%EC%8B%A4%EC%8A%B5