메뉴 건너뛰기

XE Guidebook

JQuery 개요
2016.07.29 14:17

01-04 jQuery 맛보기 예제

조회 수 16 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

▣ jQuery 맛보기 예제

 

● jQuery() 함수의 기본 사용 형식

  - "$"표시는 jQuery의 단축 표현이다.
  - "selector"는 “질의하거나 찾을” HTML 노드를 지칭하며 "따옴표"로 감싸야 한다.
  - "action()"은 선택된 노드에 대해 실행할 메서드 함수이다.
 
jQuery() 함수에 대한 구체적이고 본격적인 사용법은 다음 시간부터 하나하나 공부하기로 하고, 
아래 예시된 간단한 jQuery() 구문들의 의미를 살펴보면서
이번 시간에는 "맛보기 예제"를 통하여, 
jQuery로 과연 무엇을 하는지,
실제로 어떻게 사용하는지,
가장 기본적인 사용법과 사용 형식을 눈에 좀 익혀 두도록 하자.
 
  $(this).click()
  해당 HTML 노드를 클릭하면 실행되는 click() 이벤트 메서드 정의 
 
  $(“p").text()
  모든 <p> 요소에 텍스트를 입력시켜 주는 text() 메서드 정의 
 
  $(“.test").hide()
  class가 test인 모든 요소를 감추게 하는 hide() 메서드 정의
 
  ※ 따옴표 사용
 
   $() 함수 안에 들어가는 HTML 요소는 반드시 따옴표를 사용하여 감싸 주어야 한다.
   따옴표는 쌍따옴표( " " )나 홑따옴표( ' ' ) 중에서 취향대로 사용할 수 있지만,
   쌍따옴표로 시작했으면 쌍따옴표로 끝나야 하고,
   홑따옴표로 시작했으면 홑따옴표로 끝나야 한다.
 
   쌍따옴표 안에서 또 따옴표를 사용하려면 당연히 홑 따옴표만 들어가겠죠,,  ♪

 
● jQuery 맛보기 예제  

버튼을 클릭하면 박스 안에 "Hi jQuery!"라는 문자열을 출력하는 jQuery 사용 예제이다.
 

(그림1) 소스
 
1-04-1 hi jQuery.jpg

#34~39  HTML
 
  HTML 문서의 본문 영역으로
  <p>태그를 감싸고 있는 <div>태그와 버튼을 만드는 <button> 태그로 구성되어 있다.

  ☞ HTML에 대한 이해가 부족한 분들은 HTML 강좌에서 필요한 지식을 습득하세요..
 
  
#6~21  CSS 설정
 
  ☞ CSS에 대한 이해가 부족한 분들은 CSS 강좌에서 필요한 지식을 습득하세요..
 
 
#23 jQuery Library
 
  jQuery를 사용하려면 jQuery Library가 반드시 선언되어 있어야 한다.
 
  ☞ jQuery Librarydml 설치와 사용
 
 
#26 문서준비 이벤트(콜백함수)

  $( )에서 $표시는 jQuery의 단축표현이다, 
  <head> 부분에 jQuery 코드가 있을 경우에는 반드시 문서준비 이벤트가 필요하다.

  ☞ 문서준비이벤트 참조
 
    
#27 jQuery 클릭 이벤트 
 
  <button> 태그를 클릭하면 함수 안의 실행문이 실행되도록 하는 jQuery 이벤트 코드이다.
 
 
#28 클릭 함수의 실행문 
 
  버튼 클릭시 jQuery의 text()함수를 사용하여 <p>태그 안에 "Hi jQuery!"라고 입력한다.


(그림2)  출력 결과
 
1-04-2 hi jQuery 출력.gif

 


List of Articles
번호 분류 제목 글쓴이
63 JQuery 개요 01-01 jQuery란? file happiziger
62 JQuery 개요 01-02 jQuery 기능 happiziger
61 JQuery 개요 01-03 jQuery 라이브러리의 설치와 사용 file happiziger
» JQuery 개요 01-04 jQuery 맛보기 예제 file happiziger
59 JQuery Core 02-01 jQuery Core file happiziger
58 JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
57 JQuery Core 02-03 jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용 happiziger
56 JQuery Core 02-04 jQuery의 단축 표현인 “$” 변경하기 file happiziger
55 Selector 03-01 jQuery Selector 의의와 종류 happiziger
54 Selector 03-02 기본 셀렉터(Basic Selector) file happiziger
53 Selector 03-03 계층 선택자 (Hierarchy selector) file happiziger
52 Selector 03-04 속성 선택자 (Attribute Selector) file happiziger
51 Selector 03-05 기본 필터 선택자 (Basic Filter) file happiziger
50 Selector 03-06 내용 필터 선택자 (Content Filter) file happiziger
49 Selector 03-07 보임 필터 선택자 (Visibility Filter) file happiziger
48 Selector 03-08 자식 요소 필터 선택자 (Child Filter) file happiziger
47 Selector 03-09 폼 선택자 happiziger
46 Traversing 04-01 Traversing(탐색)의 개념 happiziger
45 Traversing 04-02 트리 구조 탐색 (Tree Traversal) file happiziger
44 Traversing 04-03 필터링 (Filtering) file happiziger
Board Pagination Prev 1 2 3 4 Next
/ 4