HTML, CSS 및 JavaScript는 인터넷의 세 가지 기본 언어입니다. 웹 사이트는 HTML로 구성되고 CSS로 스타일이 지정되며 JavaScript로 대화형 기능이 추가됩니다. 사용자 클릭, 호버링 또는 스크롤의 결과로 발생하는 대부분의 애니메이션 또는 작업은 JavaScript로 구성됩니다.
브라우저 간 호환, 즉 코드의 출력이 모든 최신 브라우저에서 의도한 대로 렌더링될 것임을 확신할 수 있습니다.
이 가이드는 jQuery에 대한 사전 지식이 없다고 가정합니다. 웹 프로젝트에서 jQuery 설치를 진행합니다. API, DOM, CDN과 같은 중요한 웹 개발 개념은 jQuery와 관련하여 정의됩니다. 이 지식 기반과 jQuery가 설치되면 공통 선택기, 이벤트 및 효과를 사용하는 방법을 배우게 됩니다.
전제 조건
이 가이드를 시작하기 전에 다음이 필요합니다.
HTML 및 CSS에 대한 기본 지식
프로그래밍의 기초에 대한 이해. JavaScript에 대한 고급 지식 없이도 jQuery 작성을 시작할 수 있지만 변수 및 데이터 유형의 개념에 익숙하면 상당한 도움이 됩니다.
jQuery 설정
jQuery는 HTML에서 연결할 JavaScript 파일입니다. 프로젝트에 jQuery를 포함하는 두 가지 방법이 있습니다. 로컬 복사본을 다운로드하거나 CDN(Content Delivery Network)을 통해 파일에 링크하는 것입니다.
참고: 콘텐츠 전송 네트워크(CDN)는 지리적 위치에 따라 사용자에게 웹 콘텐츠를 제공하는 여러 서버로 구성된 시스템입니다. CDN을 통해 호스팅된 jQuery 파일에 연결하면 자체 서버에서 호스팅하는 것보다 사용자에게 더 빠르고 효율적으로 도착할 가능성이 있습니다.
CDN은 예제에서 jQuery를 참조하는 데 사용됩니다. 최신 버전의 jQuery는 공식 웹사이트에서 jQuery 사본 받기에서 찾을 수 있습니다.
작은 웹 프로젝트를 생성하여 이 연습을 시작합니다. css/ 디렉토리의 style.css, js/ 디렉토리의 scripts.js, 그리고 프로젝트의 루트에 있는 기본 index.html.
이 짧은 예제는 jQuery가 어떻게 간결한 방식으로 일반 JavaScript와 동일한 최종 결과를 얻을 수 있는지 보여줍니다. 핵심적으로 jQuery는 DOM을 통해 브라우저의 HTML 요소와 연결하는 데 사용됩니다.
문서 개체 모델(DOM)은 JavaScript(및 jQuery)가 브라우저에서 HTML과 상호 작용하는 방법입니다. DOM이 무엇인지 정확히 보려면 웹 브라우저에서 현재 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사\를 선택합니다. 이렇게 하면 개발자 도구가 열립니다. 여기에 표시되는 HTML 코드는 DOM입니다.
각 HTML 요소는 DOM에서 노드로 간주됩니다. 이는 JavaScript가 만질 수 있는 객체입니다. 이러한 개체는 트리 구조로 배열되며 <html>는 루트에 더 가깝고 중첩된 각 요소는 트리를 따라 가지가 됩니다. JavaScript는 이러한 요소를 추가, 제거 및 변경할 수 있습니다.
사이트를 다시 마우스 오른쪽 버튼으로 클릭하고 "페이지 소스 보기\를 클릭하면 웹사이트의 원시 HTML 출력을 볼 수 있습니다. 처음에는 DOM을 HTML 소스와 혼동하기 쉽지만 둘은 다릅니다. 페이지 소스입니다. HTML 파일에 정확히 쓰여진 것입니다. 정적이며 변경되지 않으며 JavaScript의 영향을 받지 않습니다. DOM은 동적이며 변경될 수 있습니다.
전체 <html> 노드를 감싸는 DOM의 가장 바깥쪽 레이어는 document 객체입니다. jQuery로 페이지 조작을 시작하려면 먼저 문서가 "준비\되었는지 확인해야 합니다.
js/ 디렉토리에 scripts.js 파일을 만들고 다음 코드를 입력합니다.
$(document).ready(function() {
// all custom jQuery will go here
});
작성하는 모든 jQuery 코드는 위의 코드로 래핑됩니다. jQuery는 이 준비 상태를 감지하므로 이 함수에 포함된 코드는 DOM이 JavaScript 코드를 실행할 준비가 된 후에만 실행됩니다. 경우에 따라 요소가 렌더링될 때까지 JavaScript가 로드되지 않더라도 이 블록을 포함하는 것이 모범 사례로 간주됩니다.
이 기사의 서론에서 간단한 "Hello, World!\를 보았습니다. 이 스크립트를 시작하고 jQuery를 사용하여 브라우저에 텍스트를 인쇄하려면 먼저 ID demo가 적용된 빈 블록 수준 단락 요소를 만듭니다.
...
<body>
<p id="demo"></p>
...
jQuery는 달러 기호($)로 호출되고 표시됩니다. 주로 CSS 구문을 사용하여 jQuery로 DOM에 액세스하고 메서드로 작업을 적용합니다. 기본 jQuery 예제는 다음 형식을 따릅니다.
$("selector").method();
ID는 CSS에서 해시 기호(#)로 표시되므로 #demo 선택기로 데모 ID에 액세스합니다. html()은 요소 내에서 HTML을 변경하는 메서드입니다.
이제 사용자 지정 \Hello, World! jQuery ready() 래퍼 내부의 프로그램 기존 함수 내의 scripts.js 파일에 다음 줄을 추가합니다.
파일을 저장하면 브라우저에서 index.html 파일을 열 수 있습니다. 모든 것이 제대로 작동하면 Hello, World! 출력이 표시됩니다.
이전에 DOM에 대해 혼란스러웠다면 이제 DOM이 작동하는 것을 볼 수 있습니다. "Hello, World!\를 마우스 오른쪽 버튼으로 클릭합니다. 페이지에 텍스트를 입력하고 "요소 검사\를 선택합니다. 이제 DOM이
Hello, World!
를 표시합니다. "페이지 소스 보기\를 선택하면 작성한 원시 HTML인 만 표시됩니다.
선택기
선택자는 작업하려는 요소를 jQuery에 알리는 방법입니다. 대부분의 jQuery 선택기는 CSS에서 익숙한 것과 동일하며 몇 가지 jQuery 관련 추가 사항이 있습니다. 공식 문서 페이지에서 jQuery 선택기의 전체 목록을 볼 수 있습니다.
선택기에 액세스하려면 jQuery 기호 $와 괄호 ()를 차례로 사용하세요.
$("selector")
jQuery 스타일 가이드에서는 큰따옴표 문자열을 선호하지만 작은따옴표 문자열도 종종 사용됩니다.
다음은 가장 일반적으로 사용되는 일부 선택기에 대한 간략한 개요입니다.
$ (\*\) 와일드카드: 페이지의 모든 요소를 선택합니다.
$ (this) 현재: 함수 내에서 작동 중인 현재 요소를 선택합니다.
$ (\p\) 태그: <p> 태그의 모든 인스턴스를 선택합니다.
$ (\.example\) 클래스: example 클래스가 적용된 모든 요소를 선택합니다. 리>
$ (\#example\) Id: 고유한 example ID의 단일 인스턴스를 선택합니다.
$ (\[type=text]\) 속성: type 속성에 적용된 text가 있는 모든 요소를 선택합니다.
$ (\p:first-of-type\) 의사 요소: 첫 번째 <p>를 선택합니다.
일반적으로 클래스와 ID는 가장 많이 접하게 되는 항목입니다. 여러 요소를 선택하려는 경우에는 클래스, 하나만 선택하려는 경우에는 ID입니다.
jQuery 이벤트
\Hello, World! 예를 들어 페이지가 로드되고 문서가 준비되는 즉시 코드가 실행되므로 사용자 상호 작용이 필요하지 않습니다. 이 경우 jQuery를 사용하지 않고 텍스트를 HTML에 직접 작성할 수 있습니다. 그러나 버튼 클릭으로 페이지에 텍스트를 표시하려는 경우 jQuery.
index.html 파일로 돌아가서 <button> 요소를 추가합니다. 이 버튼을 사용하여 클릭 이벤트를 수신합니다.
scripts.js 파일을 저장하고 브라우저에서 index.html을 새로 고칩니다. 이제 버튼을 클릭하면 "Hello, World!\ 텍스트가 나타납니다.
이벤트는 사용자가 브라우저와 상호 작용하는 모든 시간입니다. 일반적으로 이것은 마우스나 키보드로 수행됩니다. 방금 만든 예제에서는 클릭 이벤트를 사용했습니다. 공식 jQuery 문서에서 jQuery 이벤트 메서드의 전체 목록을 볼 수 있습니다. 다음은 가장 일반적으로 사용되는 일부 이벤트 방법에 대한 간략한 개요입니다.
click() 클릭: 마우스 클릭 한 번으로 실행됩니다.
hover() Hover: 마우스가 요소 위에 있을 때 실행됩니다. mouseenter() 및 mouseleave()는 각각 마우스가 요소에 들어가거나 나가는 경우에만 적용됩니다.
submit() 제출: 양식이 제출될 때 실행됩니다.
scroll() 스크롤: 화면이 스크롤될 때 실행됩니다.
keydown() Keydown: 키보드의 키를 누를 때 실행됩니다.
사용자가 화면을 아래로 스크롤할 때 이미지가 움직이거나 사라지게 하려면 scroll() 메서드를 사용하세요. ESC 키를 사용하여 메뉴를 종료하려면 keydown() 메서드를 사용하십시오. 드롭다운 아코디언 메뉴를 만들려면 click() 메서드를 사용하십시오.
이벤트를 이해하는 것은 jQuery로 동적 웹 사이트 콘텐츠를 만드는 데 필수적입니다.
jQuery 효과
jQuery 효과는 애니메이션을 추가하고 페이지의 요소를 조작할 수 있도록 하여 이벤트와 함께 작동합니다.
팝업 오버레이를 열고 닫는 예제를 만들 것입니다. 하나는 오버레이를 열고 다른 하나는 오버레이를 닫는 데 사용하는 두 개의 ID를 사용할 수 있지만 대신 클래스를 사용하여 동일한 기능으로 오버레이를 열고 닫습니다.
index.html 파일의 본문에서 현재 <button> 및 <p> 태그를 삭제하고 HTML에 다음을 추가합니다. 문서: