jQuery Basic

jQuery Get Started
1. Downloading jQuery
2. jQuery CDN
jQuery Syntax
jQuery Method
1. jQuery Method Chaining
2. Callback Functions

jQuery Get Started

Downloading jQuery

Production version
▸ minified, compressed
▸ 웹사이트용
Development version
▸ uncompressed and readable
▸ 테스트용

▸ <head> tag 안에 스크립트 파일이 위치해야 함

<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

!Note

스크립트 파일 뒤로, (순서중요) 내가 작성한 파일을 동일한 방식으로 걸면 됨

jQuery CDN

CDN : Content Delivery Network

→ 이미 많은 사이트에서 제이쿼리 파일을 사용하고 있기 때문에 두번 로드하지 않아도 되서 CDN을 이용하는게 효율적임

▸ <head> tag 안에 CDN코드가 위치해야 함

jQuery.com CDN

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

구글 CDN

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

MS CDN

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

CDNJS CDN

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

sDelivr CDN

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

jQuery Syntax

Syntax

제이쿼리는 html 태그를 고르고 어떤 동작을 하기위해 다듬어진 라이브러리

$(selector).action()

$ : define/access jQuery
(selector) : “query (or find)” HTML elements // CSS selector와 동일하게 사용함
action() : performed on the elements

$() function

$() 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해 주는 역할

$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있음

이러한 $() 함수를 통해 생성된 요소를 jQuery 객체(jQuery object)라고 함

jQuery는 이렇게 생성된 jQuery 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다

The Document Ready Event

for prevent any jQuery code from running before the document is finished loading

(선언하지 않으면 요소가 생성되기도 전에 숨기려고 하거나, 로드되지 않은 이미지의 크기를 조정하려고 할때 종종 문제가 생김)

$(document).ready(function(){
  // jQuery methods go here...
});

or

$(function(){
  // jQuery methods go here...
});

jQuery Method

method : a property containing a function definition

syntax

objectName.methodName()

jQuery Method Chaining

run multiple jQuery methods (on the same element) within a single statement

동일한 요소를 두번이상 찾지 않아도 되어서 편리하다

줄 바꿈 및 들여 쓰기가 상관이 없음

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

or

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

Callback Functions

자바스크립트는 종종 앞선 코드(이벤트)가 끝나지 않은 경우에 다음 코드를 실행해야 하는 경우 오류가 생김

그를 방지하기 위해 callback 함수를 만듦

callback 함수는 현재 effect가 끝난 후 실행됨

$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});

//사용하지 않는 경우
$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

Difference between callback and chaning

chaining is when you call a method on an object, the method does something, and then returns the orginal object. it literally is like a link in a chain
callbacks are like trees. you give the function another function, with the expectation that the original unaction will call your functions at some point

promises : the syntax of which looks like chaining, but is actually a pattern of managing callbacks