[jQuery] jQuery 기본 사용법, 선택자, 메소드

 

목차

 

jQuery 란?

jQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. jQuery를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리, 시각적 효과, Ajax 애플리케이션을 쉽게 구현할 수 있습니다.

 

jQuery 특징

• 오픈소스로서 무료로 사용 가능합니다.
• 웹 브라우저 종류와 상관없이 개발 가능한 크로스 브라우징(Cross Browsing)이 가능합니다.
• CSS 선택자 기반의 DOM 처리가 가능하여 기존 JavaScript와 비교할 때 매우 쉽고 동적인 화면 처리가 가능합니다.
• 한꺼번에 여러 다른 동작을 처리하는 함수를 연결하여 사용하는 메소드체인 기능을 효과적으로 사용할 수 있습니다.
• Ajax 애플리케이션 개발이 쉽습니다.
• 다양한 jQuery 플러그인을 사용할 수 있습니다.

 

 

jQuery 로드하기

jQuery 파일을 다운로드 받아 로드하기

공식 홈페이지(https://jquery.com/)에서 jQuery 파일을 다운받은 후, 프로젝트에 파일을 붙여넣고 head 태그 사이에서 파일의 경로를 지정하여 불러오는 방법입니다.

<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

 

CDN을 이용하여 로드하기

CDN이란 Content Delivery NetWork의 약자로서, 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때 자동으로 가장 가까운 서버에서 다운받도록 하는 기술입니다. CDN을 이용하면 jQuery 파일을 따로 저장하지 않아도 jQuery를 사용할 수 있습니다.

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

 

 

jQuery 기본 문법

기본 문법

$(selector).action();

달러($) 기호는 jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자입니다. 위의 문법은 jQuery(selector).action();과 동일하나, 일반적으로 $ 기호를 주로 사용합니다. 이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object)라고 합니다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. 

 

DOM이 모두 로드되기를 기다리기

DOM이 완전히 로드되기 전에 스크립트 코드가 실행되면 스크립트가 DOM에 접근할 수 없습니다. 이 때문에 자바스크립트에서는 다음과 같이 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정하였습니다.

window.onload = function() {
    자바스크립트 코드;
};

 

마찬가지로 jQuery에서는 Document 객체의 ready() 메소드를 이용하여 문서가 모두 로드된 뒤 코드가 실행되도록 설정합니다.

$(document).ready(function() {
    제이쿼리 코드;
});

$(function() {
    제이쿼리 코드;
});

 

가장 기본이 되는 사용 방법은 다음과 같습니다.

<script type="text/javascript">
$(document).ready(function () {
	//jQuery
	console.log($("p")); //jquery객체 S.fn.init [p, prevObject: S.fn.init(1)]
	$("p").css("color", "red");
	//javascript 코드와 동일
	console.log(document.querySelector("p")); //html태그 <p>Hello</p>
	document.querySelector("p").style = "color: red";
	
	//선택된 요소가 여러개인 경우 jquery객체의 배열로 반환되지만, 배열의 각 방에 들어있는 것은 html태그
	console.log($("li")); //jquery객체의 배열 S.fn.init(3) [li, li, li, prevObject: S.fn.init(1)]
	console.log($("li")[0]); //html태그 <li>jQuery</li>
	//$("li")[0].css("color", "blue"); //TypeError: $(...)[0].css is not a function
	$("li")[0].style = "color: blue";
});
</script>

<p>Hello</p>
<ul>
	<li>jQuery</li>
	<li>JavaScript</li>
	<li>library</li>
</ul>

 

 

선택자 (selector)

jQuery에서는 CSS 선택자뿐만 아니라 jQuery 선택자도 사용할 수 있습니다.

 

기본 선택자

선택자	표현식	설명
All Selector	$("*")	HTML DOM의 모든 요소 선택
Element Selector	$("tag")	지정된 tag와 일치하는 모든 요소 선택
ID Selector	$("#id")	지정된 id와 일치하는 요소 선택
Class Selector	$(".class")	지정된 class와 일치하는 모든 요소 선택
Multiple Selector	$("tag1, tag2")	지정된 tag1, tag2와 일치하는 모든 요소 선택

 

계층(hierarchy) 선택자

선택자	표현식	설명
Child Selector	$("parent > child")	부모요소 바로 아래 일치하는 모든 자식요소 선택
Descendant Selector	$("ancestor  descendant")	조상요소 아래 일치하는 모든 자손요소 선택
Next Adjacent Selector	$("prev + next")	prev요소 바로 다음에 오는 형제요소 선택
Next Siblings Selector	$("prev ~ siblings")	prev요소 이후 모든 형제요소 중 일치하는 형제요소들을 선택

 

속성 선택자

표현식	설명
$("요소[속성]")	특정 속성을 가지고 있는 요소 선택
$("요소[속성=값]")	속성 안의 값이 특정 값과 같은 요소 선택
$("요소[속성~=값]")	속성 안의 값이 특정 값을 단어로 포함하는 요소 선택
$("요소[속성^=값]")	속성 안의 값이 특정 값으로 시작하는 요소 선택
$("요소[속성$=값]")	속성 안의 값이 특정 값으로 끝나는 요소 선택
$("요소[속성*=값]")	속성 안의 값이 특정 값을 포함하는 요소 선택

 

Basic Filter 선택자

표현식	설명
:animated	애니메이션이 동작중인 모든 요소 반환
:eq(index)	index에 해당하는 요소 반환. 음수값을 지정하면 마지막 요소부터 count된다. (0부터 시작)
:even	짝수 요소 반환 (0부터 시작)
:odd	홀수 요소 반환 (0부터 시작)
:first	첫 번째 요소 반환. eq(0)과 동일하다.
:last	마지막 요소 반환
:gt(index)	index보다 큰 index에 해당하는 요소 반환. 음수값을 지정하면 마지막 요소부터 count된다. (0부터 시작)
:lt(index)	index보다 작은 index에 해당하는 요소 반환. 음수값을 지정하면 마지막 요소부터 count된다. (0부터 시작)
:header	모든 header 요소 반환 (h1, h2 등)
:not(selector)	selector와 일치하지 않는 모든 요소 반환
:focus	현재 focus 받은 요소 반환
:root	HTML 문서의 최상위 요소(root) 반환

 

Child Filter 선택자

표현식	설명
:first-child	자식 요소들 중 첫 번째에 해당하는 요소들 반환
:last-child	자식 요소들 중 마지막에 해당하는 요소들 반환
:nth-child(index)	일치하는 index에 해당하는 자식 요소를 반환 (1부터 시작)
:nth-child(even)	짝수 번째에 해당하는 자식 요소들 반환 (1부터 시작)
:nth-child(odd)	홀수 번째에 해당하는 자식 요소들 반환 (1부터 시작)
:nth-child(2n)	2의 배수 번째에 해당하는 자식 요소들 반환 (1부터 시작) ex. 3n, 2n+1 등
:only-child	자신이 부모 요소의 유일한 자식인 요소 반환

 

Form Filter 선택자

표현식	선택 요소
:button	<input type="button"> 또는 <button>
:checkbox	<input type="checkbox">
:checked	<input type="checkbox" checked="checked">
:enabled	<input type="text" enabled="enabled">
:disabled	<input type="text" disabled="disabled">
:file	<input type="file">
:image	<input type="image">
:password	<input type="password">
:radio	<input type="radio>
:selected	<select><option selected="selected"></option></select>
:submit	<input type=submit>
:text	<input type="text">
:hidden	<input type="hidden">
:input	모든 입력 요소 (input, select, textarea, button 등)

 

Content Filter 선택자

표현식	설명
:contains(text)	text와 일치하는 문자열이 존재하는 요소 반환. 대소문자를 구별한다.
:empty	자식요소가 존재하지 않고 텍스트값이 비어 있는 요소 반환
:has(selector)	지정된 selector가 자식 요소로 존재하는 모든 요소 반환
:parent	자식요소가 존재하거나, 텍스트값을 가지고 있는 요소를 반환

 

 

Traverse 필터 메소드

선택자에 의해서 1차로 찾은 요소들을 다시 2차 필터링하거나 새로운 요소를 추가하는 등의 작업을 할 때 Traverse 관련 메소드를 사용합니다.

 

Filtering

메소드	설명
.eq(index)	index와 일치하는 요소 반환. 음수값을 지정하면 마지막 요소부터 count된다. ":eq(index)" 와 동일하다. (0부터 시작)
.filter(expr)	지정된 expression과 일치하는 요소 반환
.filter(fn)	지정된 함수와 일치하는 요소 반환
.not(expr)	지정된 expression과 일치하지 않는 요소 반환
.not(fn)	지정된 함수와 일치하지 않는 요소 반환. .filter(fn)과 반대되는 기능이다.
.is(expr)	지정된 expression과 일치하는 요소가 하나라도 있으면 true를 반환하고, 없으면 false를 반환한다.
.is(fn)	지정된 함수와 일치하는 요소가 하나라도 있으면 true를 반환하고, 없으면 false를 반환한다.
.has(selector)	지정된 selector를 포함하는 요소 반환
.first()	첫 번째 요소 반환
.last()	마지막 요소 반환
.map(fn)	1차 선택자에 의해 검색된 요소들을 함수를 통해서 원하는 작업을 수행한 후 배열로 반환한다.
.slice(start [, end])	start 번째부터 end-1 번째까지의 요소를 반환한다. end를 생략하면 마지막까지 요소를 반환한다. (0부터 시작)

 

Miscellaneous Traversing

메소드	설명
.add(expr)	현재 검색요소에 expression과 일치하는 검색 요소를 추가한다. expression은 선택자 또는 html이 될 수 있다.
.addBack()	필터링에 의해서 검색된 결과 집합에 필터링을 지정하기 이전의 최초 대상이 되었던 요소를 포함시켜 반환한다.
.contents()	text를 포함한 모든 자식요소 반환
.end()	traverse 메소드를 사용하기 전의 상태로 복귀

 

Tree Traversal

메소드	설명
.children([selector])	선택된 요소에서 selector와 일치하는 자식 요소를 반환한다. selector 생략시 모든 자식 요소를 반환한다.
.closest([selector])	선택된 요소에서 selector와 일치하는 첫 번째 DOM tree에서 가장 가까운 조상 요소를 반환한다.
.find(selector)	선택된 요소에서 selector와 일치하는 하위(자식 및 자손) 요소를 반환한다.
.next([selector])	선택된 요소에서 selector와 일치하는 다음 형제 요소를 반환한다. selector 생략시 바로 다음 형제 요소를 반환한다.
.nextAll([selector])	선택된 요소에서 selector와 일치하는 모든 다음 형제 요소를 반환한다. selector 생략시 바로 다음 형제 요소 모두를 반환한다.
.nextUntil([selector])	.nextAll() 메소드와 유사하나 종료 시점을 지정할 수 있다. selector 생략시 .nextAll()과 동일하게 동작한다.
.offsetParent()	선택된 요소에서 가장 가까운 요소에 있는 position(relative 또는 absolute)을 가지고 있는 부모 요소를 반환한다.
.parent([selector])	선택된 요소에서 selector와 일치하는 부모 요소를 반환한다. 부모 요소가 여러 개인 경우 배열로 반환한다.
.parents([selector])	선택된 요소에서 selector와 일치하는 모든 조상 요소를 반환한다. selector 생략시 html 태그를 포함한 모든 조상 요소를 반환한다.
.parentsUntil([selector])	.parents() 메소드와 유사하나 종료 시점을 지정할 수 있다. selector 생략시 .parents()와 동일하게 동작한다.
.prev([selector])	선택된 요소에서 selector와 일치하는 바로 앞의 형제 요소를 반환한다. selector 생략시 바로 앞 형제 요소를 반환한다.
.prevAll([selector])	선택된 요소에서 selector와 일치하는 앞의 모든 형제 요소를 반환한다. selector 생략시 앞의 모든 형제 요소를 반환한다.
.prevUntil([selector])	.prevAll() 메소드와 유사하나 종료 시점을 지정할 수 있다. selector 생략시 .prevAll()와 동일하게 동작한다.
.siblings([selector])	선택된 요소에서 selector와 일치하는 모든 형제 요소를 반환한다. selector 생략시 모든 형제 요소를 반환한다.

 

 

속성 제어 메소드

jQuery 메소드를 사용하여 태그의 속성을 제어하는 방법입니다.

 

속성 설정

메소드	설명
.attr(속성명)	지정된 속성(attribute)명에 해당되는 속성값을 반환한다. 일치하는 요소가 많으면 처음 일치하는 요소가 반환된다.
.attr(속성명, 속성값)	지정된 속성(attribute)명에 속성값을 설정한다. 일치하는 요소가 많으면 모두 설정된다.
.removeAttr(속성명)	지정된 속성(attribute)명과 일치하는 모든 속성을 제거한다.
.prop(속성명)	지정된 속성(property)명에 해당되는 속성값을 반환한다. 일치하는 요소가 많으면 처음 일치하는 요소가 반환된다.
.prop(속성명, 속성값)	지정된 속성(property)명에 속성값을 설정한다. 일치하는 요소가 많으면 모두 설정된다.
.removeProp(속성명)	지정된 속성(property)명과 일치하는 모든 속성을 제거한다.
.val()	선택된 요소의 value 값을 반환한다.
.val(값)	선택된 요소에 value 값을 설정한다.
.text()	선택된 요소의 자손을 포함한 text 값을 반환한다. 포함된 html 태그는 모두 제거된 후 반환된다.
.text(값)	선택된 요소에 text 값을 설정한다.
.html()	선택된 요소의 자손을 포함한 text 값을 반환한다. 포함된 html 태그는 모두 포함되어 반환된다.
.html(값)	선택된 요소에 text 값을 설정한다. html 태그 포함 가능.

 

클래스 설정

메소드	설명
.addClass(className)	선택된 요소에 className에 해당하는 class 속성을 설정(추가)한다. 한번에 여러 개의 속성값을 설정할 수 있고, 기존에 class 속성이 존재하면 마지막에 추가된다.
.removeClass(className)	선택된 요소에 className에 해당하는 class 속성을 제거한다. 한번에 여러 개의 속성값을 설정하여 제거할 수 있다.
.toggleClass(className)	선택된 요소에 className에 해당하는 class 속성이 존재하면 제거하고, 존재하지 않으면 설정한다.
.hasClass(className)	선택한 요소의 클래스 이름이 className과 일치하는지를 확인하여 boolean 값으로 반환한다.

 

 

Manipulation 메소드

Manipulation 관련 메소드로 DOM을 추가하거나 수정, 삭제, 복사하는 등의 처리를 하여 동적인 HTML 화면을 손쉽게 구현할 수 있습니다. 

 

메소드	설명
.append(content)	선택된 요소의 text 노드 위치에 content를 설정한다. 대상요소에 text 값이 존재하면 text 값 뒤에 추가된다.
.appendTo(target)	.append(content) 메소드와 기능이 동일하지만, content와 target의 위치가 서로 다르다. ex. target.append(content) = content.appendTo(target)
.prepend(content)	선택된 요소의 text 노드 위치에 content를 설정한다. 대상요소에 text 값이 존재하면 text 값 앞에 추가된다.
.prependTo(target)	.prepend(content) 메소드와 기능이 동일하지만, content와 target의 위치가 서로 다르다. ex. target.prepend(content) = content.prependTo(target)
.after(content)	선택된 요소의 뒤에 content를 추가한다.
.insertAfter(target)	.after(content) 메소드와 기능이 동일하지만, content와 target의 위치가 서로 다르다. ex. target.after(content) = content.insertAfter(target)
.before(content)	선택된 요소의 앞에 content를 추가한다.
.wrap(html)	선택된 요소를 지정된 html로 에워싼다.
.wrapAll(html)	선택된 요소를 각각 에워싸지 않고, 대상이 되는 요소를 한번에 에워싼다.
.wrapInner(html)	선택된 요소의 text 값을 포함하여 자식 요소를 에워싼다.
.unwrap()	선택된 요소를 에워싼 부모 요소를 제거한다.
.replaceWith(content)	선택된 요소를 제거하고 새로운 content로 변경한다.
.replaceAll(target)	.replaceWith(content) 메소드와 기능이 동일하지만, content와 target의 위치가 서로 다르다. ex. target.replaceWith(content) = content.replaceAll(target)
.empty()	선택된 요소의 text 값을 포함한 모든 자식(자손 포함) 요소를 제거한다.
.remove([selector])	선택된 모든 요소가 제거된다. 만약 selector를 지정하면 selector와 일치하는 요소가 제거된다.
.clone()	선택된 요소를 복제한다. 요소의 모든 하위 요소도 포함된다.
.clone(true)	기본값은 false이며, true로 설정할 경우 요소 복제시 이벤트 핸들러까지 복제된다.

 

 

 

참고

https://api.jquery.com/

http://www.tcpschool.com/jquery/intro