웹앱 과정 - 제이쿼리 (1)
20 Apr 2020 | jQuery selector제이쿼리 개요
제이쿼리(jQuery)
- 가장 인기 있는 자바 스크립트 라이브러리
-
- 크로스 브라우징 지원 (cross browsing)
- 브라우저마자 자바스크립트의 해석이 상이하고, 어떤 브라우저는 오류를 내뱉기도 하는 문제가 있었다. 제이쿼리는 모든 웹 브라우저에서 항상 동일하게 동작하도록 지원한다.
- 생산성 향상 지원
- Write Less, Do More
- 더 적은 코드 양으로 더 많은 기능을 수행
제이쿼리에 관한 사이트 - w3schools - jQuery API - learning jQuery - jQAPI
자바스크립트
자바스크립트 코드는 <script> 태그 안에 명세하여 <head> 또는 <body> 태그 안에 포함시킨다.
<script src="sample.js"> 를 통해 별도의 자바스크립트 파일을 import할 수도 있다.
<body>의 최하단에 위치하는 것이 좋다. (참고 : script 태그는 어디에 위치해야 할까요?)
자바스크립트 함수는 다른 함수에 의해 호출되거나 이벤트 발생시 호출되어 실행된다.
- 예 : 이벤트 핸들러
onload(),onclick()이벤트 핸들러 (event handler) : 키보드나 마우스 등의 동작에 의해 이벤트가 발생할 경우 이를 감지하여 자바스크립트 코드와 연결 - 자바스크립트 코드를 직접 명세하기보다는 특정 함수를 호출할 목적으로 사용
제이쿼리 연동
- HTML5 문서 안에서 제이쿼리 라이브러리 파일을 포함하도록 선언
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
- 제이쿼리의 동작은 자바스크립트처럼 HTML5 태그와 결합하지 않는다. -> tag 안에 스크립트 코드를 포함시키지 않고 HTML5 태그와 스크립트 코드를 분리할 수 있다.
- DOM이라는 공통된 표준 모델을 따르면 스크립트 엔진이나 언어가 다르더라도 얼마든지 동일하게 HTML5나 XML 문서에 접근할 수 있다. DOM은 플랫폼과 언어에 중립적이며 동적으로 문서의 내용, 구조, 스타일을 접근하고 변경하는 중요한 수단
DOM 트리 구조
- 엘리먼트 노드 태그와 내용으로 구성되는 엘리먼트를 표현하는 노드 하위에 또다른 엘리먼트 노드를 포함할 수 있다.
- 속성 노드 엘리먼트의 시작 태그 안에 포함되는 속성 이름과 속성 값을 쌍으로 갖는 노드
- 텍스트 노드 엘리먼트가 갖는 실제 내용을 의미하는 노드 DOM 트리에서 최하위 단말 노드가 해당
제이쿼리 함수
jQuery() 함수는 제이쿼리의 핵심
- 모든 시작은
jQuery()함수를 통해 이루어진다. - 괄호 앞의
jQuery문자열은 제이쿼리를 사용한다는 일종의 선언. 자바스크립트 문장과 제이쿼리 문장을 구별하는 역할
입력 인자 유형
- 큰따움표 또는 작은따옴표 모두 가능
// 1) 선택자 입력 인자
jQuery('body p');
// 2) HTML 입력 인자
jQuery('<h1>HTML 동적 추가</h1>')
// 3) 함수 입력 인자
jQuery(function(){alert("DOM 트리가 생성됨")});
- 선택자 입력 인자 : DOM 트리에서 원하는 노드를 선별하기 위해 사용
- HTML 입력 인자
- 내부적으로는 자바스크립트의
createElement()함수를 호출 - 주로 DOM 트리에 새로운 노드를 추가하기 위해 사용됨
- 내부적으로는 자바스크립트의
- 함수 입력 인자
- jQuery() 함수는 명세된 순서대로 호출되어 실행됨
- jQuery() 함수의 실행 대상인 노드가 DOM 트리에 생성되기도 전에 먼저 실행되는 것을 피하기 위해 jQuery() 함수 안에 입력 인자로 함수를 포함시키면 HTML5 문서를 모두 읽어들여 DOM 트리가 생성된 후 함수가 호출되어 실행되도록 할 수 있음
- 콜백 함수(callback function) : 함수를 실행한 이후 스스로 호출되는 함수
문서 시작 이벤트 핸들러
jQuery(document).ready(function(){ ... });
document 선택자: HTML5 문서 전체를 선택
ready() 메소드: HTML5 문서가 웹 브라우저에 표시될 준비가 완료되면 실행되는 이벤트 핸들러
jQuery 함수의 사용
주석은 /*로 시작하고 */로 끝을 지정
한 줄 단위의 주석은 //로 시작하며 웹 브라우저에 의해 해석되지 않고 무시됨
ready(): 준비되었을 때click(): 클릭되었을 때remove(): 특정 엘리먼트를 DOM 트리에서 삭제text(): DOM 트리에 텍스트 노드를 추가
jQuery 코드는 HTML5 문서 내용 자체는 변화시키지 않고 DOM 트리만 변경
문서 시작 이벤트 핸들러
제이쿼리 코드를 <head> 안에 명세할 경우, <body> 태그 안의 HTML5 엘리먼트 태그들이 DOM 트리를 구성하기 전에 제이쿼리 코드가 먼저 실행되는 문제점이 있다.
이를 해결하기 위해 문서 시작 핸들러 jQuery(document).ready() 안에 제이쿼리 시랭문들을 ;로 구분하여 나열하면 DOM 트리 구성이 완료된 후까지 실행이 지연되었다가 자동으로 호출되어 순차적으로 실행된다.
제이쿼리를 포함한 문서를 처음 시작하는 방법은 2가지가 있다.
jQuery(document).ready(function() { ... });- 문서가 100% 로드되기 전 페이지 DOM만 로드가 완료된 이후 수행
.ready()메소드가 여러 개 있더라도 순서대로 실행- 비교적 첫 페이지 로드 시간이 빠름
jQuery(window).load(function() { ... });- 문서가 100% 로드된 후 페이지 DOM + 리소스 전체(문서에 포함된 이미지 등의 모든 객체)가 모두 로드 완료된 이후 한 번만 수행
.load()메소드가 여러 개 있으면 마지막만 실행- 기존 자바스크립트
window.onload = function() { ... }를 대체 - 비교적 첫 페이지 로드 시간이 느림
DOM 트리를 변경함으로써 웹 페이지의 표현 내용도 동적으로 변화시킬 수 있다.
jQuery() 함수의 단축형
jQuery()를 보통 $()로 줄여 표시한다. 의미는 같다.
식별이 어렵고 불편하기 때문
제이쿼리 변수, 함수를 자바스크립트의 변수, 함수 등과 구별하기 위한 목적
var 변수명; // 일반 변수
var $변수명; // 제이쿼리 변수
$를 붙이지 않은 일반 변수는 보통의 자바스크립트 변수로 처리
$()
- 제이쿼리 함수, 제이쿼리 래퍼(wrapper)
- 보통 제이쿼리 함수는 $(선택자) 형태로 제이쿼리 선택자를 입력 인자로 받아들여 선택자 조건을 만족하는 엘리먼트 노드들을 DOM 트리에서 찾아 객체 형식으로 반환 -> 제이쿼리 객체
- 이때 일치하는 DOM 노드들이 여러 개이면 배열 형태의 제이쿼리 객체 집합을 반환
- 반환하는 DOM 엘리먼트들을 제이쿼리 객체 개념으로 감싸고 미리 준비된 메소드를 사용할 수 있도록 함 -> 제이쿼리 래퍼
제이쿼리 선택자
기본 선택자
*: 모든 엘리먼트 선택태그명: 특정 엘리먼트를 모두 선택#아이디: 고유한 아이디 속성값을 가진 엘리먼트를 선택.클래스: 특정 클래스 속성값을 가진 엘리먼트들을 선택
// 기본 선택자
$('*').css('border-style', 'hidden');
$('p').css('border', 'dashed thick red');
$('.class1').css('border', 'solid thick green');
$('#p3').css({'background-color':'purple', 'color':'white'});
계층 선택자
선택자 > 자식선택자: 특정 엘리먼트 바로 밑에 위치한 하위 엘리먼트(자식 엘리먼트)를 선택선택자 자손선택자: 특정 엘리먼트 안에 포함된 모든 하위 엘리먼트(자손 엘리먼트)를 선택선택자 + 형제선택자: 특정 엘리먼트에 바로 다음에 나오는 특정한 형제 엘리먼트 하나를 선택선택자 ~ 형제선택자: 특정 엘리먼트 다음에 나오는 특정한 모든 형제 엘리먼트들을 선택
// 계층 선택자
$('#p1 + p').css('border-style', 'hidden');
$('#p2 ~ p').css('border', 'dashed thick red');
$('div > div').css('border', 'solid thick green');
$('div span').css({'background-color':'purple', 'color':'white'});
속성 선택자
선택자[속성명]: 해당 속성을 포함하는 엘리먼트들을 선택선택자[속성명="조건값"]: 해당 속성값이 조건값과 일치하는 엘리먼트들을 선택선택자[속성명*="조건값"]: 해당 속성값이 조건값을 포함하는 엘리먼트들을 선택선택자[속성명^="조건값"]: 해당 속성값이 조건값으로 시작하는 엘리먼트들을 선택선택자[속성명$="조건값"]: 해당 속성값이 조건값으로 끝나는 엘리먼트들을 선택
// 속성 선택자
$('p[class]').css('border-style', 'hidden');
$('*[id*="2"]').css('border', 'dashed thick red');
$('*[class^="cla"]').css('border', 'solid thick green');
$('p[id$="2"]').css({'background-color':'purple', 'color':'white'});
위치필터 기본 선택자
- filter : 선택자에 의해 선택된 엘리먼트들 중 필터 조건에 맞는 엘리먼트들로 선택 대상을 한번 더 제한
- 선택자 뒤에 콜론(
:)을 붙여 명세 - 반환된 엘리먼트들은 자바스크립트의 배열 첨자를 적용하므로 첨자가 ‘0’부터 부여됨
:first==:eq(0)==:lt(1) 선택자:first: 선택된 엘리먼트들 중 첫 번째 엘리먼트를 선택선택자:last: 선택된 엘리먼트들 중 마지막 엘리먼트를 선택선택자:odd: 선택된 엘리먼트들 중 홀수 첨자 엘리먼트들을 선택선택자:even: 선택된 엘리먼트들 중 짝수 첨자 엘리먼트들을 선택선택자:eq(n): 선택된 엘리먼트들 중 n번째 엘리먼트를 선택선택자:lt(n): 선택된 엘리먼트들 중 n번째의 앞 엘리먼트들을 선택선택자:gt(n): 선택된 엘리먼트들 중 n번째의 뒤 엘리먼트들을 선택선택자:not(condition): 선택된 엘리먼트들 중 필터링 조건을 만족하지 않는 엘리먼트들을 선택
// 위치필터 기본 선택자
$('div:first').css('border-style', 'hidden');
$('p:even').css('border', 'dashed thick red');
$('span:eq(1)').css('border', 'solid thick green');
$('p:lt(1)').css({'background-color':'purple', 'color':'white'});
위치필터 계층 선택자
선택자:first-child: 선택된 엘리먼트들 중 부모의 첫 번째 자식 엘리먼트들을 선택선택자:last-child: 선택된 엘리먼트들 중 부모의 마지막 자식 엘리먼트들을 선택선택자:nth-child(odd): 선택된 엘리먼트들 중 부모의 홀수 번째 자식 엘리먼트들을 선택선택자:nth-child(even): 선택된 엘리먼트들 중 부모의 짝수 번째 자식 엘리먼트들을 선택선택자:nth-child(n): 선택된 엘리먼트들 중 부모의 n번째 자식 엘리먼트를 선택선택자:nth-child(Xn+Y): 선택된 엘리먼트들 중 부모의 Xn+Y번째에 있는 자식 엘리먼트들만을 선택(n은 0부터 시작)선택자:only-child: 선택된 엘리먼트들 중 (형제 엘리먼트가 없는) 유일한 자식 엘리먼트들만을 선택
// 위치필터 계층 선택자
$('div:first-child').css('border-style', 'hidden');
$('p:nth-child(odd)').css('border', 'dashed thick red');
$('p:nth-child(3n+1)').css('border', 'solid thick green');
$('*:only-child').css({'background-color':'purple', 'color':'white'});
폼 필터 선택자
선택자:input: 모든 폼 입력 양식의 엘리먼트를 선택<input>,<select>,<button>,<textarea>선택자:button: 모든 버튼 유형의 엘리먼트를 선택<button>, type 속성값이submit,reset,button인<input>태그들선택자:text: 텍스트 엘리먼트들만 선택 type 속성값이text인<input>태그선택자:checkbox: 체크박스 선택 버튼 엘리먼트만 선택 type 속성값이checkbox인<input>태그선택자:radio: 라디오 선택 버튼 엘리먼트만 선택 type 속성값이radio인<input>태그선택자:file: 파일 엘리먼트를 선택 type 속성값이file인<input>태그선택자:image: 폼 이미지 엘리먼트를 선택 type 속성값이image인<input>태그선택자:password: 패스워드 엘리먼트를 선택 type 속성값이password인<input>태그선택자:submit: 전송 버튼 엘리먼트를 선택 type 속성값이submit인<input>태그선택자:reset: 초기화 버튼 엘리먼트를 선택 type 속성값이reset인<input>태그
상태 필터 선택자
- 현재 웹 브라우저 실행 홤녀에서의 특정 상황 조건을 만족하는지 여부에 따라 엘리먼트를 한번 더 거르는 필터 선택자
- 폼 엘리먼트의 현재 상태를 검사하는데 유용
선택자:selected: 지정된 엘리먼트들 중 현재 선택된 엘리먼트만 선택선택자:checked: 지정된 엘리먼트들 중 현재 설정된 엘리먼트(체크박스, 라디오버튼)만 선택선택자:enabled: 지정된 엘리먼트들 중 현재 활성화된 엘리먼트만 선택선택자:disabled: 지정된 엘리먼트들 중 현재 비활성화된 엘리먼트만 선택선택자:visible: 지정된 엘리먼트들 중 현재 보여지는 엘리먼트만 선택선택자:hidden: 지정된 엘리먼트들 중 현재 숨겨진 엘리먼트만 선택선택자:focus: 지정된 엘리먼트들 중 현재 포커싱된 엘리먼트만 선택선택자:animated: 지정된 엘리먼트들 중 현재 애니메이션이 동작 중인 엘리먼트만 선택
내용 필터 선택자
- 엘리먼트의 내용 조건 필터를 통해 한번 더 거르는 선택자
- 특정 엘리먼트가 내용이 있는지 혹은 내용 중 특정 문자열이 포함되는지를 확인 가능
선택자:has(자손엘리먼트): 선택된 엘리먼트들 중 하위에 특정 자손 엘리먼트르 하나 이상 포함하고 있는 엘리먼트만 선택선택자:contains(문자열): 선택된 엘리먼트들 중 내용으로 특정 문자열을 포함하고 있는 엘리먼트만 선택선택자:empty: 선택된 엘리먼트들 중 내용이 없는 엘리먼트만 선택선택자:parent: 선택된 엘리먼트들 중 내용(공백 포함)이 있는 엘리먼트(다른 엘리먼트의 부모에 해당하는 엘리먼트)만 선택
// 내용 필터 선택자
$('*:contains(2)').css('border-style', 'hidden');
$('div:has(span)').css('border', 'dashed thick red');
$('*:empty').css('border', 'solid thick green');
$('#div0 *:parent').css({'background-color':'purple', 'color':'white'});