-
What is JQuery?
jQuery는 웹 개발을 위한 HTML 문서 순회 및 조작, 이벤트 처리 및 애니메이션을 단순화하는 널리 사용되는 JavaScript 라이브러리입니다. 웹 프로젝트에 쉽게 통합할 수 있는 미리 작성된 함수 세트를 제공하여 더 짧고 깨끗하며 읽기 쉬운 코드를 작성하는 방법을 제공합니다. jQuery는 HTML, CSS, Ajax와 같은 다양한 웹 기술과 함께 사용할 수 있습니다. 단순성과 사용 편의성으로 인해 전 세계 웹 개발자들에게 인기 있는 선택이 되었습니다.
기본적 작성방법
다음은 jQuery 작성의 기본 예입니다.
버튼 요소가 있는 HTML 문서가 있고 버튼을 클릭하면 배경색이 변경되는 이벤트 리스너를 버튼에 추가하고 싶다고 가정해 보겠습니다.
먼저 HTML 문서에 jQuery 라이브러리를 포함해야 합니다. HTML 문서의 헤드 섹션에 다음 코드를 추가하여 이를 수행할 수 있습니다.
참고링크> https://releases.jquery.com/
<head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head>
그러면 jQuery CDN에서 jQuery 라이브러리가 로드됩니다.
다음으로 HTML 문서의 헤드 또는 본문 섹션에 있는 스크립트 태그에 jQuery 코드를 작성할 수 있습니다.
<body> <button id="myButton">Click me</button> <script> $(document).ready(function() { $("#myButton").click(function() { $(this).css("background-color", "red"); }); }); </script> </body>
이 예에서는 $ 기호를 jQuery 개체의 속기로 사용합니다.
$(document).ready() 메서드를 사용하여 문서 로드가 완료된 후에만 코드가 실행되도록 합니다.
그런 다음 $("#myButton") 선택자를 사용하여 버튼 요소를 선택하고 .click() 메서드를 사용하여 클릭 이벤트 리스너를 추가합니다.
클릭 이벤트 리스너 내에서 $(this) 키워드를 사용하여 클릭된 버튼을 참조하고 .css() 메서드를 사용하여 배경색을 빨간색으로 변경합니다. 버튼을 클릭하면 배경색이 빨간색으로 바뀝니다.
크롬 개발자 도구 이용 간단히 jQeury 변경확인
class , data 전달값을 가지고 위의 jQuery문이 완성되었다.
'IT 웹개발' 카테고리의 다른 글
[패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 5주차 (0) 2023.01.20 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 4주차 (0) 2023.01.20 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 3주차 (0) 2023.01.11 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 2주차 (0) 2023.01.07 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 1주차 (0) 2022.12.31