jQuery 문법 정리 및 실습

jQuery는 자바스크립트 라이브러리입니다.
jQuery는 JavaScript 프로그래밍을 크게 단순화합니다.

1. jQuery Selectors

Query 선택기는 이름, ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 "찾기"(또는 선택)하는 데 사용됩니다.
jQuery의 모든 선택자는 달러 기호와 괄호 $()로 시작합니다.

요소 선택기

jQuery 요소 선택기는 요소 이름을 기반으로 요소를 선택합니다.
다음 <p>과 같이 페이지의 모든 요소를 선택할 수 있습니다 .

$("p")

#id 선택기

jQuery 선택기는 HTML 태그의 id 속성을 사용하여 특정 요소를 찾습니다.

$("#test")

.class 선택기

jQuery .class선택기는 특정 클래스의 요소를 찾습니다.

$(".test")

2. jQuery Events

웹 페이지가 응답할 수 있는 모든 다양한 방문자의 작업을 이벤트라고 합니다.

다음은 몇 가지 일반적인 DOM 이벤트입니다.

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

일반적으로 사용되는 jQuery 이벤트 메서드

$(document).ready()

이 $(document).ready()메서드를 사용하면 문서가 완전히 로드되었을 때 함수를 실행할 수 있습니다.

click()

사용자가 HTML 요소를 클릭하면 함수가 실행됩니다.

Example

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

dblclick()

사용자가 HTML 요소를 두 번 클릭하면 함수가 실행됩니다.

mouseenter()

이 함수는 마우스 포인터가 HTML 요소에 들어갈 때 실행됩니다.

Example

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

mouseleave()

이 함수는 마우스 포인터가 HTML 요소를 떠날 때 실행됩니다.

mousedown()

HTML 요소 위에 마우스가 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 누르면 함수가 실행됩니다.

mouseup()

HTML 요소 위에 마우스가 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 놓으면 함수가 실행됩니다.

hover()

이 hover()메서드는 두 가지 기능을 사용하며 mouseenter()및 mouseleave() 메서드 의 조합입니다 .

첫 번째 함수는 마우스가 HTML 요소에 들어갈 때 실행되고 두 번째 함수는 마우스가 HTML 요소를 떠날 때 실행됩니다.

Example

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

focus()

이 함수는 양식 필드에 포커스가 있을 때 실행됩니다.

Example

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

blur()

이 함수는 양식 필드가 포커스를 잃을 때 실행됩니다.

on() Method

이 on()메서드는 선택한 요소에 대해 하나 이상의 이벤트 핸들러를 연결합니다.

Example
<p> 요소에 여러 이벤트 핸들러를 연결합니다.

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

3. jQuery Effects

jQuery 숨기기() 및 표시()

jQuery를 사용하면 hide()및 show()메서드를 사용하여 HTML 요소를 숨기거나 표시할 수 있습니다 .

Example

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

jQuery 토글()

toggle()메서드 를 사용하여 요소를 숨기거나 표시하는 사이를 전환할 수도 있습니다 .
표시된 요소는 숨겨지고 숨겨진 요소는 표시됩니다.

Example

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

jQuery Fade

jQuery를 사용하면 요소를 페이드 인 및 페이드 아웃할 수 있습니다.
jQuery에는 다음과 같은 페이드 메서드가 있습니다.

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

Example

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

jQuery Slide

jQuery를 사용하면 요소에 슬라이딩 효과를 만들 수 있습니다.
jQuery에는 다음과 같은 슬라이드 메서드가 있습니다.

slideDown()- 요소를 아래로 슬라이드하는 데 사용됩니다.
slideUp()- 요소를 위로 슬라이드하는 데 사용됩니다.
slideToggle()-slideDown()및 slideUp() 메소드 사이를 토글 합니다.

Example

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

4. jQuery HTML

jQuery Get

jQuery에는 HTML 요소와 속성을 변경하고 조작하는 강력한 방법이 포함되어 있습니다.

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

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

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

Example

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

속성 가져오기 - attr()

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

Example

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

jQuery Add

새 HTML 콘텐츠 추가

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

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

jQuery Remove

요소/콘텐츠 제거

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

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

5. jQuery AJAX

jQuery load() 메서드

jQuery load()메서드는 간단하지만 강력한 AJAX 메서드입니다.
이 load()메서드는 서버에서 데이터를 로드하고 반환된 데이터를 선택한 요소에 넣습니다.

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

• 필수 URL 매개변수는 로드하려는 URL을 지정합니다.
• 선택적 data 매개변수는 요청과 함께 보낼 쿼리 문자열 키/값 쌍 세트를 지정합니다.
• 선택적 callback 매개변수는 load()메소드가 완료된 후 실행할 함수의 이름입니다 .

jQuery Get/Post

HTTP 요청: GET 대 POST

클라이언트와 서버 간의 요청-응답에 일반적으로 사용되는 두 가지 방법은 GET 및 POST입니다.

GET - 지정된 리소스에서 데이터를 요청합니다.
POST - 처리할 데이터를 지정된 리소스에 제출합니다.

GET은 기본적으로 서버에서 일부 데이터를 가져오기(검색)하는 데 사용됩니다.

POST를 사용하여 서버에서 일부 데이터를 가져올 수도 있습니다. 그러나 POST 메서드는 데이터를 캐시하지 않으며 요청과 함께 데이터를 보내는 데 자주 사용됩니다.

jQuery $.get() 메서드

이 $.get()메서드는 HTTP GET 요청으로 서버에서 데이터를 요청합니다.

$.get(URL,callback);

Query $.post() 메서드

이 $.post()메서드는 HTTP POST 요청을 사용하여 서버에서 데이터를 요청합니다.

$.post(URL,data,callback);