JavaScript - JQuery

Feb 21, 2024

Contents

📌

JQuery는 자바스크립트 언어를 좀더 편리하게 사용할 수 있도록 도와주는 라이브러리다. 웹 페이지 요소 선택, 이벤트 처리, 애니메이션 효과등 작업을 더 편리하게 해준다.


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

라이브러리 추가 코드

문법


$(선택자).동작함수1().동작함수2()

📌

$: 제이쿼리에 접근 할 수 있도록 도와주는 요소

선택자: 선택자를 활용해 원하는 HTML선택 가능


// 태그 선택자
$('p').css('color', 'blue');  // 모든 <p> 태그의 텍스트 색상을 파란색으로 변경

// 클래스 선택자
$('.my-class').hide();  // 클래스가 'my-class'인 모든 요소를 숨김

// ID 선택자
$('#my-id').text('Hello!');  // ID가 'my-id'인 요소의 텍스트를 'Hello!'로 변경

// 속성 선택자
$('input[type="text"]').val('New Value');  // type이 'text'인 모든 input 요소의 값을 변경

제이쿼리 VS 자바 스크립트 비교

인수를 전달 받을 때

자바 스크립트


document.getElementById('id')

제이쿼리


$("#id)

함수비교

자바 스크립트


function hideDisplay(){
let el = document.querySelector("#innerBox1");
el.style.display = "none";

제이쿼리


function hideDisplay() {
  $("#innerBox1").hide();  // jQuery의 .hide() 메서드를 사용해 요소를 숨김
}

📌

이렇듯 제이쿼리가 JS보다 코드가 간편해진다.

이벤트 종류

클릭 이벤트


$("#clickButton").click(function() {
  alert("버튼이 클릭되었습니다!");
});

📌

click( ) 는 클릭 했을 때 이벤트가 발생하는 결과를 정하는 함수다,

더블 클릭 이벤트


$("#dblClickButton").dblclick(function() {
  alert("버튼이 더블 클릭되었습니다!");
});

📌

dbclick( )는 더블 클릭 했을 때 발생하는 이벤트를 정하는 함수다.

마우스 이벤트


$("#mouseArea").mouseenter(function() {
  $(this).css("background-color", "lightblue");
}).mouseleave(function() {
  $(this).css("background-color", "white");
});

📌

mouseenter( ): 마우스가 요소에 진입했을 때 이벤트를 정하는 함수다.

mouseleave( ): 마우스가 요소에서 나갈 때 이벤트를 정하는 함수다.


$("#mouseButton").mousedown(function() {
  $(this).text("마우스 버튼이 눌림");
}).mouseup(function() {
  $(this).text("마우스 버튼에서 손을 뗌");
});

📌

mousedown( ): 마우스 버튼을 누를 때 결과를 정하는 함수다.

mouseup( ): 마우스 버튼을 눌렀다가 뗄 때 결과를 정하는 함수다.


$("#hoverArea").hover(function() {
  $(this).css("background-color", "yellow");
}, function() {
  $(this).css("background-color", "white");
});

📌

hover()는 마우스를 올렸을 때 배경색을 바꾸고, 마우스를 치웠을 때 두번째 색으로 돌려주는 이벤트 함수다.

포커스 이벤트


$("input").focus(function() {
  $(this).css("background-color", "lightgreen");
}).blur(function() {
  $(this).css("background-color", "white");
});

📌

focus( ): 요소에 포커스가 들어올 때 발생하는 이벤트 함수다. blur( ):요소의 포커스가 사라질 때 발생하는 이벤트 함수다.

키보드 이벤트


$(document).keydown(function(event) {
  $("#keyResult").text("키가 눌렸습니다: " + event.key);
});
$(document).keyup(function(event) {
  $("#keyResult").text("키에서 손을 뗐습니다: " + event.key);
});

📌

keydown( )는 키보드를 눌렀을 때 발생하는 이벤트 함수다. keyup( )는 키보드를 뗐을 때 발생하는 이벤트 함수다

폼 이벤트


$("form").submit(function(event) {
  event.preventDefault();  // 폼 제출을 막음
  alert("폼이 제출되었습니다!");
});

📌

submit( ): 폼이 제출될 때 발생하는 이벤트다. 폼 데이터를 서버에 전송하기 전에 필요한 작업을 수행하거나, event.preventDefault()로 기본 제출 동작을 막을 수 있다.


$("select").change(function() {
  alert("선택한 값: " + $(this).val());
});

📌

change( ): 변경 된 값이 변경 됐을 때 발생하는 이벤트다.


$("input").select(function() {
  alert("텍스트가 선택되었습니다!");
});

📌

select( )는 요소를 선택했을 때 발생하는 이벤트다

문서/창 이벤트

load


$(window).on("load", function() {
  alert("페이지가 로드되었습니다!");
});

📌

load( ):페이지나 이미지 등의 요소가 완전히 로드 됐을 때 발생하는 이벤트다.


$(window).resize(function() {
  $("#resizeResult").text("창 크기가 조정되었습니다!");
});

📌

ressize( ):브라우저의 창의 크기가 변경 될 때 발생하는 이벤트다.


$(window).scroll(function() {
  $("#scrollResult").text("스크롤 위치: " + $(window).scrollTop());
});

📌

scroll( )는 스크롤 할 때 이벤트를 정하는 함수다.

// 태그 선택자 $('p').css('color', 'blue'); // 모든 <p> 태그의 텍스트 색상을 파란색으로 변경 // 클래스 선택자 $('.my-class').hide(); // 클래스가 'my-class'인 모든 요소를 숨김 // ID 선택자 $('#my-id').text('Hello!'); // ID가 'my-id'인 요소의 텍스트를 'Hello!'로 변경 // 속성 선택자 $('input[type="text"]').val('New Value'); // type이 'text'인 모든 input 요소의 값을 변경

$(document).keydown(function(event) { $("#keyResult").text("키가 눌렸습니다: " + event.key); }); $(document).keyup(function(event) { $("#keyResult").text("키에서 손을 뗐습니다: " + event.key); });