티스토리 뷰

JQuery

[jQuery]jQuery란 무엇인가

dev23 2024. 8. 16. 15:59
반응형

jQuery

- jQuery는 화면의 동적 기능을 JS보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 JS 기반 라이브러리다.

- jQuery는여러 가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용하다.

 

주요 특징

  • CSS 선택자를 사용해 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현할 수 있다.
  • 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 주롤 나열되어 코드가 불필요하게
    반복되는 것을 피할 수 있다.
  • 풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있다.
  • 크로스 브라우징을 제공하므로 브라우저 종류에 상관 없이 동일하게 기능을 수행한다.

Jquery 사용 방법

 1. www.jquery.com 에서 라이브러리 다운로드

 2. 네트워크로 CDN 호스트를 설정해서 사용하는 방법

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

 

여러 가지 기능

- 제이쿼리는 HTML 객체(DOM)를 탐색하는 방법으로 CSS 선택자를 이용한다.

제이쿼리의여러 가지 선택자

선택자 종류 선택자 표현 방법 설명
All selector $("*") 모든 DOM을 선택한다.
ID selector $("#id")  해당되는 id를 가지는 DOM을 선택한다.
Element Selector $("elementName") 해당되는 이름을 가지는 DOM을 선택한다.
class selector $(".className") CSS 중 해당되는 클래스 이름을 가지는 DOM을 선택한다.
Multiple Selector $("selector1, selectro2,
selector3, ... , selectorN" )		 해당되는 선택자를 가지는 모든 DOM을 선택한다.

- 사용 예

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 선택자</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" >
	// 페이지 로드 시 id가 unique2인 태그를 검색한 후 html() 메서드를 이용해 태그의 값을 가져온다.
	$(document).ready(function() {
		alert($("#unique2").html()); 
	});
</script>
</head>

<body>
	<div class="class1">안녕하세요.</div>
	<div id="unique2">제이쿼리입니다.</div>
</body>
</html>

 

- 위 코드를 작성한 페이지에 접근하면 페이지 로드 시 알림 창이 나타나고 페이지에는 <body> 태그 안에 입력한 문자열이 나타날 것이다.

페이지 처음 접근 시
출력 결과

 

 

반응형
저작자표시

'JQuery' 카테고리의 다른 글

[jQuery]Ajax  (0) 2024.08.16
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함