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( )는 스크롤 할 때 이벤트를 정하는 함수다.
Share article
