메뉴 건너뛰기

XE Guidebook

JQuery 개요
2016.07.29 11:31

01-02 jQuery 기능

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

● jQuery 기능

jQuery 기능은 크게 다음과 같이 나누어 볼 수 있다.
 
 
▶ jQuery Core(핵심)
 
jQuery 라이브러리에서 가장 핵심이 되는 함수는 jQuery() 함수로
jQuery의 시작은 무조건 jQuery() 함수를 거쳐야 한다.
 
이 함수를 통해 리턴되는 결과는 모두 jQuery 객체로서
jQuery의 수 많은 기능들을 사용할 수 있게 된다.
 
jQuery() 함수는 ()안에 들어가는 형식에 따라 전혀 다른 기능을 하게 된다.
 
 
▶ Selector(선택자)
 
jQuery는 HTML에서 특정 노드를 선택하기 위해 Selector를 사용하는데,
CSS의 Selector 사용법과 거의 같다.
 
  jQuery("h1").css("color","red")  // h1 노드의 글자색상을 빨간색으로 변경한다
  jQuery("#main").hide()  // id가 main인 노드를 보이지 않게 한다.
  jQuery("ul li").show()  // ul에 포함되어 있는 li 노드들을 보이게 한다.
 
 
▶ Attribute/CSS (속성)
 
Selector를 사용하여 선택한 노드의 속성값을 가져오거나 텍스트를 변경할 수 있으며,
CSS 함수를 사용하여 속성 변경을 함으로써 원하는 작업을 할 수 있다.
 
  jQuery("img").attr("src");  // <img> 태그의 속성 src 값을 가져온다.
  jQuery(".main").css("border","1px #000 solid") 
    // 클래스 이름이 main인 노드의 테두리를 1픽셀의 검은색 직선으로 그린다.
 
 
▶ Manipulation(조작)
 
각종 명령어를 사용하여 DOM을 다양하게 제어, 갱신 조작을 할 수 있다.
특정 노드의 앞뒤에 임의의 노드를 생성해 붙이거나 제거할 수 있으며,
특정 노드를 교체할 수 있다.
 
  jQuery("p").pretend("<em>안녕하세요<em>");  // <p> 태그의 내용 맨 앞부분에 추가한다.
 
 
▶ Traversing(탐색)
 
DOM에 접근하여 원하는 노드를 찾는 방법을 제공한다.
이 기능을 잘 사용하면 DOM에 id나 class를 최소한으로 사용할 수 있다.
선택한 기준으로 형제, 자식, 부모 등으로 접근하는 다양한 방법이 있다.
 
  jQuery("li").parent().css("background-color", "black"); 
// parent() 메서드는 현재 지정된 li의 부모 노드를 의미하므로
  li 노드들의 부모 노드를 선택하여 배경색을 검은색으로 설정한다.
 
 
▶ Events
 
jQuery에는 기본적으로 마우스 관련 이벤트가 제공되며,
이외에도 문서 로딩, 키보드, 폼, 스크롤과 관련된 많은 이벤트가 제공된다.
 
 
▶ Effects
 
fadeIn, fadeOut, slideDown, slideUp, animate 함수 등에서
다양한 easing 효과(가, 감속 효과)를 사용하여 정적인 웹페이지를 역동적인 웹페이지로 만들어 준다.
 
 
▶ UI (User Interface)
 
jQuery는 UI에 대한 다양한 형태의 기능을 제공한다.
 
jQuery UI는 다음과 같은 작용 등을 수행시켜 주는 기능들을 모아 놓은 라이브러리이다.
위젯 형태의 Accordion, Datepicker, Dialog, Slider, Progressbar, Tabs와 애니메이션 확장 기능,
상호작용이 가능한 요소-Drag, Drop, Resizable- 등
 
 
▶ jQuery PlugIn 
 
jQuery PlugIn이란
jQuery로 작성된 프로그램을 사용하기 쉽고, 재사용할 수 있게 한 것으로, 
사용자가 필요한 메서드만 호출하여 작동하도록 만드는 방식의 프로그램이다.
 
 
▶ Ajax (Asynchronous javaScript and XML)
 
Ajax란 서버와 비동기식으로 데이터를 교환하는 javaScript 프로그래밍 방식을 말한다.
 
일반적으로 웹페이지에서 새로운 내용이 갱신되려면 서버에 접속하여 페이지 전체를 다시 다운로드해야 하지만
Ajax를 사용하면 어느 한 부분만 서버에 접속하여 내용을 갱신할 수 있다.
따라서 Ajax 기술은 전체 페이지를 갱신하지 않고 필요한 내용만 변경하기 때문에 트래픽 용량이 적어져서, 
주로 실시간 뉴스 전달이나 주식시세 정보 등에서 많이 사용되고 있다.
 
 


List of Articles
번호 분류 제목 글쓴이
63 JQuery 개요 01-01 jQuery란? file happiziger
» JQuery 개요 01-02 jQuery 기능 happiziger
61 JQuery 개요 01-03 jQuery 라이브러리의 설치와 사용 file happiziger
60 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