웹사이트 검색

jQuery 소개


소개

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.

project/
├── css/
|   └── style.css
├── js/
|   └── scripts.js
└── index.html

시작하려면 HTML 뼈대를 만들고 index.html로 저장합니다.

<!doctype html>
<html lang="en">

<head>
  <title>jQuery Demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

닫기 태그 바로 앞의 jQuery CDN에 대한 링크와 사용자 정의 JavaScript 파일인 scripts.js가 뒤따릅니다.

<!doctype html>
<html lang="en">

<head>
  <title>jQuery Demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

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

</html>

JavaScript 파일(scripts.js)은 문서의 jQuery 라이브러리 아래에 포함되어야 합니다. 그렇지 않으면 작동하지 않습니다.

참고: jQuery의 로컬 복사본을 다운로드한 경우 js/ 폴더에 저장하고 js/jquery.min.js에 링크합니다.

이제 jQuery 라이브러리가 사이트에 로드되고 있으며 jQuery API에 대한 전체 액세스 권한이 있습니다.

참고: 응용 프로그래밍 인터페이스(API)는 소프트웨어 프로그램이 서로 상호 작용할 수 있게 해주는 인터페이스입니다. 이 경우 jQuery용 API에는 jQuery에 액세스하는 데 필요한 모든 정보와 문서가 포함되어 있습니다.

jQuery 사용

간단한 "Hello, World!\ JavaScript와 jQuery 모두에서 프로그램을 작성하면 둘 다 작성되는 방식의 차이를 볼 수 있습니다.

document.getElementById("demo").innerHTML = "Hello, World!";
$("#demo").html("Hello, World!");

이 짧은 예제는 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 파일에 다음 줄을 추가합니다.

$(document).ready(function() {
    $("#demo").html("Hello, World!");
});

파일을 저장하면 브라우저에서 index.html 파일을 열 수 있습니다. 모든 것이 제대로 작동하면 Hello, World! 출력이 표시됩니다.

이전에 DOM에 대해 혼란스러웠다면 이제 DOM이 작동하는 것을 볼 수 있습니다. "Hello, World!\를 마우스 오른쪽 버튼으로 클릭합니다. 페이지에 텍스트를 입력하고 "요소 검사\를 선택합니다. 이제 DOM이

Hello, World!

를 표시합니다. "페이지 소스 보기\를 선택하면 작성한 원시 HTML인

만 표시됩니다.

선택기

선택자는 작업하려는 요소를 jQuery에 알리는 방법입니다. 대부분의 jQuery 선택기는 CSS에서 익숙한 것과 동일하며 몇 가지 jQuery 관련 추가 사항이 있습니다. 공식 문서 페이지에서 jQuery 선택기의 전체 목록을 볼 수 있습니다.

선택기에 액세스하려면 jQuery 기호 $와 괄호 ()를 차례로 사용하세요.

$("selector")

jQuery 스타일 가이드에서는 큰따옴표 문자열을 선호하지만 작은따옴표 문자열도 종종 사용됩니다.

다음은 가장 일반적으로 사용되는 일부 선택기에 대한 간략한 개요입니다.

  • &#36 (\*\) 와일드카드: 페이지의 모든 요소를 선택합니다.
  • &#36 (this) 현재: 함수 내에서 작동 중인 현재 요소를 선택합니다.
  • &#36 (\p\) 태그: <p> 태그의 모든 인스턴스를 선택합니다.
  • &#36 (\.example\) 클래스: example 클래스가 적용된 모든 요소를 선택합니다.
  • &#36 (\#example\) Id: 고유한 example ID의 단일 인스턴스를 선택합니다.
  • &#36 (\[type=text]\) 속성: type 속성에 적용된 text가 있는 모든 요소를 선택합니다.
  • &#36 (\p:first-of-type\) 의사 요소: 첫 번째 <p>를 선택합니다.

일반적으로 클래스와 ID는 가장 많이 접하게 되는 항목입니다. 여러 요소를 선택하려는 경우에는 클래스, 하나만 선택하려는 경우에는 ID입니다.

jQuery 이벤트

\Hello, World! 예를 들어 페이지가 로드되고 문서가 준비되는 즉시 코드가 실행되므로 사용자 상호 작용이 필요하지 않습니다. 이 경우 jQuery를 사용하지 않고 텍스트를 HTML에 직접 작성할 수 있습니다. 그러나 버튼 클릭으로 페이지에 텍스트를 표시하려는 경우 jQuery.

index.html 파일로 돌아가서 <button> 요소를 추가합니다. 이 버튼을 사용하여 클릭 이벤트를 수신합니다.

...
<body>

<button id="trigger">Click me</button>
<p id="demo"></p>

click() 메서드를 사용하여 "Hello, World!\가 포함된 함수를 호출합니다. 암호:

$(document).ready(function() {
    $("#trigger").click();
});

<button> 요소에는 &#36 (\#trigger\)로 선택하는 trigger라는 ID가 있습니다. click()을 추가하면 클릭 이벤트를 수신하도록 지시하지만 아직 완료되지 않았습니다. 이제 click() 메서드 내에서 코드가 포함된 함수를 호출합니다.

function() {
    $("#demo").html("Hello, World!");
}

최종 코드는 다음과 같습니다.

$(document).ready(function() {
    $("#trigger").click(function() {
    $("#demo").html("Hello, World!");
    });
});

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에 다음을 추가합니다. 문서:

...
<body>
<button class="trigger">Open</button>

<section class="overlay">
  <button class="trigger">Close</button>
</section>
...

style.css 파일에서 최소한의 CSS를 사용하여 display: none으로 overlay를 숨기고 화면 중앙에 배치합니다. :

.overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  background: gray;
}

scripts.js 파일로 돌아가서 toggle() 메서드를 사용하여 < 사이에서 CSS display 속성을 토글합니다.none 및 block, 클릭 시 오버레이 숨기기 및 표시:

$(document).ready(function() {
    $(".trigger").click(function() {
        $(".overlay").toggle();
    });
});

index.html을 새로 고칩니다. 이제 버튼을 클릭하여 모달의 가시성을 전환할 수 있습니다. toggle()fadeToggle() 또는 slideToggle()로 변경하여 몇 가지 다른 기본 제공 jQuery 효과를 볼 수 있습니다.

다음은 가장 일반적으로 사용되는 몇 가지 효과 방법에 대한 간략한 개요입니다.

  • toggle() Toggle: 요소의 가시성을 전환합니다. show()hide()는 관련 단방향 효과입니다.
  • fadeToggle() 페이드 토글: 가시성을 전환하고 요소의 불투명도에 애니메이션을 적용합니다. fadeIn()fadeOut()은 관련 단방향 효과입니다.
  • slideToggle() 슬라이드 토글: 슬라이딩 효과로 요소의 가시성을 토글합니다. slideDown()slideUp()은 관련 단방향 효과입니다.
  • animate() 애니메이트: 요소의 CSS 속성에 사용자 지정 애니메이션 효과를 수행합니다.

jQuery 이벤트를 사용하여 버튼 클릭과 같은 사용자 상호 작용을 수신하고 jQuery 효과를 사용하여 해당 작업이 발생하면 요소를 추가로 조작할 수 있습니다.

결론

이 가이드에서는 jQuery로 요소를 선택하고 조작하는 방법과 이벤트와 효과가 함께 작동하여 사용자를 위한 대화형 웹 경험을 만드는 방법을 배웠습니다.

여기에서 jQuery의 기능을 더 깊이 이해하고 자신의 코드를 작성해야 합니다.