[멀티캠퍼스] 풀스택 개발자 아카데미 (4)

목차 보기

1. jQuery
- 1.1. jQuery 시작하기
2. jQuery Selector(선택자)
3. jQuery Event 처리

시리즈·멀티캠퍼스 JAVA 풀스택 개발자 아카데미 6회차(30개의 글)

···
3.[멀티캠퍼스] 풀스택 개발자 아카데미 (3) - JavaScript(2)
4.[멀티캠퍼스] 풀스택 개발자 아카데미 (4) - jQuery현재
5.[멀티캠퍼스] 풀스택 개발자 아카데미 (5) - jQuery(2)
···

1. jQuery

jQuery는 2006년 존 레식(John Resig)이 디자인한 JavaScript 라이브러리로, 웹 개발을 훨씬 쉽고 효율적으로 만들어주는 강력한 도구다.

약 100KB의 가벼운 용량으로 동적으로 HTML이나 CSS를 효과적으로 제어할 수 있으며, 모든 웹 브라우저에서 일관되게 동작하는 뛰어난 크로스-브라우저 호환성을 자랑한다. 본 포스트에서는 jQuery의 기본 개념부터 이벤트 처리, DOM 조작, 그리고 시각적 효과 구현까지 자세히 다룬다.

1.1. jQuery 시작하기

1.1.1. jQuery 사용

jQuery를 사용하려면 크게 두 가지 방법이 있다.

jQuery File Download
- 웹 애플리케이션 서버에 jQuery 파일을 직접 다운로드하여 사용하는 방식
- jQuery를 검색하고, 공식 웹 페이지에서 파일을 다운로드 한 뒤, 프로젝트 폴더에 옮겨 사용
- 사용자가 웹 애플리케이션에 접근할 때마다 jQuery 파일이 다운로드되어 트래픽이 증가할 수 있다

CDN(Content Delivery Network)
- 구글, 마이크로소프트와 같은 기업이 제공하는 CDN을 통해 jQuery 파일을 링크하여 사용하는 방식
- jQuery CDN을 검색하고, 공식 웹 페이지에서 사용할 파일을 선택하고, CDN 사용을 위한 script 태그를 복사
- 사용자와 가장 가까운 캐시 서버에서 콘텐츠를 전달받으므로 트래픽 감소 효과를 가짐
- jQuery 파일 다운로드에 따른 부하가 없음
- 라이브러리 제공 서버나 인터넷에 문제가 발생할 경우 서비스를 제공받지 못할 수 있다

1.1.2. HTML 문서에 jQuery 연동

HTML 문서의 <head>에 jQuery 파일 경로를 지정하여 연동한다.

파일을 다운로드 한 경우

html

<!DOCTYPE html>
<html>
  <head>
    ...
    <script src="./jquery-3.7.1.min.js"></script>
    <script>
      // jQuery 문법
      $(document).ready(function () {
        alert("Hello, jQuery");
      });
    </script>
  </head>
</html>

CDN 방식의 경우

html

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- CDN 페이지에서 복사한 내용으로 붙여넣기 -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <script>
      // jQuery 문법
      $(document).ready(function () {
        alert("Hello, jQuery");
      });
    </script>
  </head>
</html>

위의 코드에서 $(document).ready(function(){...}); 구문은 Vanilla JavaScript에서 window.onload = function() {...}; 구문과 유사하지만, 약간의 차이점이 있다.

$(document).ready()는 외부 리소스(이미지, 음악 등)이 로드되었는지 여부과 무관하게 DOM 트리가 생성된 직후 실행되는 반면, window.onload 이벤트는 모든 콘텐츠의 로드가 끝나는 시점에서 호출된다.

즉, $(document).ready()는 window.onload()보다 먼저 실행된다.

html

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- CDN 페이지에서 복사한 내용으로 붙여넣기 -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <script>
      window.onload = () => {
        console.log("this is window.onload event");
      };

      $(document).ready(function () {
        console.log("this is jQuery $(document).ready()");
      });
    </script>
  </head>
</html>

2. jQuery Selector(선택자)

jQuery의 핵심은 선택자와 메소드의 조합이다. 선택자는 HTML 태그를 쉽게 선택하여 조작할 수 있도록 한다. 선택자는 $(선택자 쿼리)를 이용해 선택하며, 쿼리는 CSS와 형식이 동일하다.

2.1. 직접 선택자

선택자	선택자
전체 선택자	`$(' * ')`
태그 선택자	`$('태그명')`
ID 선택자	`$('#id')`
Class 선택자	`$('.class')`

2.1.1. 직접 선택자 실습

javascript

// selector.js
$(document).ready(function () {
  // 전체 선택자
  $("*").css("color", "red");

  // 태그 선택자 : h3 태그에 밑줄 그리기
  $("h3").css("textDecoration", "underline");

  // 태그 선택자 : h3, h4 태그에 배경색 pink 지정하기
  $("h3, h4").css("backgroundColor", "pink");

  // ID 선택자 : id가 idSelector인 태그의 글자 색상을 blue/#0000ff/#00f
  //id가 jQuery인 태그의 글자 색상을 green으로 설정
  $("#idSelector").css("color", "blue");
  $("#jQuery").css("color", "green");

  // 클래스 선택자 : class가 selector인 태그의 글자를 이탤릭체로,
  //class가 web인 태그의 글자를 굵게
  $(".selector").css("fontStyle", "italic");
  $(".web").css("fontWeight", "bold");
});

2.2. 인접 관계 선택자

인접 관계 선택자는 요소들 간의 부모-자식, 형제 관계를 기반으로 요소를 선택한다.

선택자	선택자	설명
부모 요소 선택자	`$('선택자').parent()`	부모 요소 (1개) 선택
조상 요소 선택자	`$('선택자').parents()`	상위 요소 모두 선택
조상 요소 선택자	`$('선택자').parents('특정-상위-요소')`	특정 상위 요소 선택
자식 요소 선택자	`$('선택자 > 특정-자식-요소')`	특정 자식 요소 선택
자식 요소 선택자	`$('선택자').children()`	자식 요소 모두 선택
자손 요소 선택자	`$('선택자 특정-자식-요소')`	특정 자손 요소의 선택
자손 요소 선택자	`$('선택자').find('특정-자속-요소')`	특정 자손 요소의 선택
형제 요소 선택자	`$('선택자').prev()`	바로 이전 요소 선택
	`$('선택자').prevAll()`	이전의 모든 요소 선택
	`$('선택자').prevUntil('선택자2')`	선택자 이전부터 선택자2 다음까지 모두 선택
	`$('선택자').next()`	선택한 다음 요소 선택
	`$('선택자').nextAll()`	다음의 요소 모두 선택
	`$('선택자').nextUntil('선택자2')`	선택자 다음부터 선택자2 이전까지 모두 선택

javascript

$(document).ready(function () {
  // <ol> 태그의 모든 자손 <li> 태그 글자색 red
  $("ol li").css("color", "red");

  // <ol> 태그의 자식 <li> 태그 글자색 blue
  $("ol > li").css("color", "blue");

  // 아이디가 children인 요소의 자식 <li> 태그 밑줄
  $("#children > li").css({ textDecoration: "underline" });

  // 클래스가 method 요소의 li 자손 요소의 글자색을 black
  // find() 메소드 사용
  $(".method").find("li").css("color", "black");

  // 클래스가 method인 요소의 모든 li의 글자색을 green, 폰트 두껍게
  // children() 메소드 사용
  $(".method").children("li").css({ color: "green", fontWeight: "bold" });

  // 모든 조상
  $("p").parents().css("backgroundColor", "yellow");

  // 조상 area
  $("p").parents("#area").css("backgroundColor", "white");

  // 조상 c1, c2
  $("p").parents("#c1, #c2").css("backgroundColor", "darkred");

  //p의 부모
  $("p").parent().css("backgroundColor", "green");

  // 바로 다음 요소 : next()
  $("#c1").next().css("backgroundColor", "pink");

  // 다음 모든 요소 : nextAll()
  $("#c2").nextAll().css("backgroundColor", "orange");

  // 이전 모든 요소
  $("#c4").prevAll().css("color", "blue");
  $("#c4").prevAll().css("fontWeight", "bold");

  // c1 다음 c4 이전 : c2, c3 rounded
  $("#c1").nextUntil("#c4").css("border-radius", "20px");

  // c3 이전 c1 다음 : c2
  $("#c3").prevUntil("#c1").css("border", "5px solid red");
});

2.3. 필터 선택자

선택자	설명
`요소:odd`	홀수 번째에 위치한 요소 선택
`요소:even`	짝수 번째에 위치한 요소 선택
`요소:first`	첫 번째 요소
`요소:last`	마지막 요소 선택
`요소:checked`	체크된 요소 선택 (radio, checkbox)
`요소:selected`	선택된 요소 선택 (select option)
`요소:disabled`	비활성 입력 양식 요소 선택
`요소:enabled`	활성화된 입력 양식 요소 선택
`요소:focus`	커서가 놓여진 입력 양식 요소 선택
`요소:eq(n)`	n번째 (equal) 요소 선택
`요소:not(선택자)`	선택자와 일치하지 않는 요소 선택
`요소:lt(n)`	n번째 미만 (less than) 요소 선택
`요소:gt(n)`	n번째 초과 (greater than) 요소 선택
`요소:has(선택자)`	선택자를 갖고 있는 요소 선택
`요소:nth-child(숫자n)`	n의 배수: nth-child(3n): 0, 3, 6, ... (번째)
`nth-child(숫자 x(n+1))`	n의 배수+1: nth-child(3n+1): 1, 4, 7, ... (번째)

javascript

$(document).ready(function () {
  // table1에서 찾기
  // 홀수행 선택 (1, 3, 5, ....) (행 인덱스 : 0부터 시작)
  $("#table1 tr:odd").css("backgroundColor", "gray");

  // 짝수행 선택  (행 인덱스 : 0부터 시작)
  $("#table1 tr:even").css("backgroundColor", "green");

  // 첫 번째 행 (0행)
  $("#table1 tr:first").css({ backgroundColor: "pink", fontSize: "20px" });

  // 특정 행 선택 : tr의 5행 (여섯번째 행)
  $("#table1 tr:eq(5)").css({ color: "red" });

  // tr의 5행보다 큰 행 전부 선택
  $("#table1 tr:gt(5)").css({ color: "blue" });

  // tr의 0행 제외하고 모두 선택
  $("#table2 tr:not(:eq(0))").css({ backgroundColor: "gold" });

  // nth : 서수(~번째)
  // nth-child(숫자n+1) : 3n+1 번째 : 3의 배수 + 1 번째 선택 : 1, 4, 7, 10
  $("#table2 tr:nth-child(3n+1)").css({ backgroundColor: "orange" });

  // 짝수 열 선택 : nth-child(숫자n) : 2n
  $("#table2 tr:nth-child(2n)").css({ color: "blue" });
});

2.4. 속성 선택자

HTML태그의 지정된 속성 값에 따라 요소를 선택

선택자	기능
`태그명[속성]`	안의 속성을 포함하는 모든 태그 선택
`태그명[속성="값"]`	속성 값이 주어진 값과 동일한 모든 태그 선택
`태그명[속성^="값"]`	속성 값이 주어진 값으로 시작하는 모든 태그 선택
`태그명[속성$="값"]`	속성 값이 주어진 값으로 끝나는 모든 태그 선택
`태그명[속성*="값"]`	속성 값이 주어진 값을 포함하는 모든 태그 선택

javascript

$(document).ready(function () {
  // 속성 type 선택
  $("input[type]").css({ backgroundColor: "pink" });

  // 속성 type 중 text인 것만 선택
  // 축약형 - :속성명
  $("input[type=text]").css({ color: "blue", width: "200px" });

  $(":text").css({ border: "dashed 1px red" });

  // 속성 type 중 submit, reset 버튼 선택
  // 축약형 사용
  $("input[type=submit], input[type=reset]").css({ backgroundColor: "gold" });

  $(":submit, :reset").css({ backgroundColor: "gold" });

  // type 중 password 선택
  // 축약형 사용. 메소드 체인 방식 사용
  $(":password")
    .css({ backgroundColor: "lightgreen" })
    .attr("placeholder", "비밀번호를 입력하세요");

  // option 태그 선택
  $("option").css({ color: "purple" });

  // option 태그의 value 속성이 '웹'으로 시작하는 요소 선택
  $("option[value^='웹']").css({ backgroundColor: "lightyellow" });

  // select 태그의 하위(자손) option 태그의 value 속성이 '사'로 끝나는 요소 선택
  $("select option[value$='사']").css({ backgroundColor: "lightblue" });
});

3. jQuery Event 처리

jQuery는 자바 스크립트의 다양한 이벤트를 씬 간단하고 쉽게 처리할 수 있도록 한다.

3.1. 이벤트 사용

기본 구조
1. 이벤트 대상
2. 이벤트 등록 메소드 (이벤트 유형)
3. 이벤트 핸들러 (이벤트 처리 함수)

Note

jQuery에서는 this를 많이 사용하기 때문에, 이벤트 핸들러를 화살표 함수보다는 funtion()을 사용하는 경향이 있다. 화살표 함수에서 this를 사용하면, scope가 바깥의 함수 기준이지만, funtion()키워드에서는 이벤트 핸들러가 기준이되기 때문이다.

예시: $('#btn').click(function() { ... });

3.2. 이벤트 등록 메소드 유형

단독 이벤트 등록 메소드: 한 동작에 대한 이벤트를 등록할 때 사용하며, 선택자에 직접 에벤트 메소드를 적용한다. 동적 연결은 지원되지 않는다.
그룹 이벤트 등록 메소드 (on()): 한 번에 여러 개의 이벤트를 등록할 수 있다. 동적으로 생성된 요소에도 이벤트가 적용된다.

예시: `$('선택자').on('이벤트유형', function() );

3.3. 동적 연결 이벤트

현재 HTMl 화면에 표시된 요소 뿐만 아니라 앞으로 생성될 요소에도 이멘트 연결이 가능

`$(document).on('Event', '이벤트발생 객체'. function() })

javascript

$(document).ready(function () {
  // createBtn 버튼 클릭했을 때
  $("#createBtn").on("click", function () {
    // $createBtn 뒤(after) 삽입
    $(this).after(
      "<p><input type='button' id='newBtn1' value='새 버튼1'></p>\n<p><input type='button' id='newBtn2' value='새 버튼2'></p>"
    );
  });

  // 버튼 이벤트 처리
  // (1) 동적 연결 방식 아님 - 이미 존재하는 버튼에만 이벤트 연결
  // 새로 추가된 버튼에는 이벤트가 연결되지 않음
  $("#newBtn1").on("click", function () {
    console.log("버튼1 클릭");
  });

  // (2) 동적 연결 방식 - 새로 추가된 버튼에도 이벤트 연결
  // document 전체에 이벤트를 연결하고, #newBtn2가 클릭되면 처리
  $(this).on("click", "#newBtn2", function () {
    console.log("버튼2 클릭");
  });
});

3.4. 이벤트 종류

키보드 이벤트
- keyup: 키보드가 떼어질 때 발생
- keydown: 키보드가 눌러질 때 발생
- keypress: 글자가 입력될 때 발생

Tip

이벤트 객체를 통해 e.keyCode 등으로 어떤 키가 눌렸는지 확인할 수 있다. 예를 들어, 엔터 키(keyCode 13)가 눌렸을 때 기본 동작을 중지하려면 if (e.keyCode == 13) return false;와 같이 사용할 수 있다.

입력 양식 이벤트
- submit: 버튼을 눌러 전송할 때 발생
- reset: reset(취소) 버튼을 눌렀을 때 발생
- change: 입력 양식의 내용을 변경할 때 발생 (특히 <select> 입력 시)
- focus: 입력 양식에 커서를 놓을 때 발생
- blur: 입력 양식이 커서를 잃을 때 발생
마우스 이벤트
- click: 마우스를 클릭했을 때 발생
- dbclick: 마우스를 더블 클릭했을 때 발생
- mousedown: 마우스 버튼을 누를 때 발생
- mouseup: 마우스 버튼을 뗄 때 발생
- mouseenter: 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생
- mouseleave: 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
- mousemove: 마우스를 움직일 때 발생
- mouseout: 마우스가 요소를 벗어날 때 발생
- mouseover: 마우스가 요소 안에 들어올 때 발생
- hover: 마우스를 over 했을 때, out 했을 때 발생
- contextmenu: 마우스 오른쪽 버튼을 클릭했을 때 발생

3.5. 이벤트 객체의 중단 메소드

preventDefault()
- 현재 이벤트의 기본 동작을 중지.
- 예를 들어, <a> 태그 클릭 시 href에 지정된 URL로 이동하는 기본 동작 방지
stopPropagation()
- 상위 element로 이벤트가 전파되는 것(이벤트 버블링; Event Bubbling)을 중지
- 자식 요소를 클릭했을 때 부모 요소의 클릭 이벤트가 발생하는 것을 방지
stopImmediatePropagation()
- 현재 이벤트의 다른 리스너를 중지하고 상위로 전파되는 것도 중지
return false
- jQuery에서는 preventDefault()와 stopPropagation() 기능을 동시에 수행
- JavaScript에서는 preventDefault()와 동일

[멀티캠퍼스] 풀스택 개발자 아카데미 (4) - jQuery

1. jQuery

1.1. jQuery 시작하기

1.1.1. jQuery 사용

1.1.2. HTML 문서에 jQuery 연동

2. jQuery Selector(선택자)

2.1. 직접 선택자

2.1.1. 직접 선택자 실습

2.2. 인접 관계 선택자

2.3. 필터 선택자

2.4. 속성 선택자

3. jQuery Event 처리

3.1. 이벤트 사용

3.2. 이벤트 등록 메소드 유형

3.3. 동적 연결 이벤트

3.4. 이벤트 종류

3.5. 이벤트 객체의 중단 메소드