JQUERY

배경

• 2006년 생성
• 가장 넓게 쓰이는 자바스크립트 라이브러리
• 천구백육십만개의 웹사이트에서 사용됨 (still increasing)
• It has a foundation and 13 board members

사용 이유

• 가벼움 : 32KB
• Lets you implement things that were unfeasible
• Simplifies implementing things that were annoying
• All the cool kids are doing it

설치 방법

• Jquery.com에서 파일 다운로드, 웹 디렉토리에 추가, include혹은 Google, jQuery(최종) 제공 버전 링크 사용

<script type="text/javascript" src="/js/jquery-1.8.3.min.js?ver=130108"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Selectors

• 해당 페이지의 HTML elements 를 선택할수 있게 해준다.
• 선택된 엘리먼트들을 다를수 있는 jQuery functions을 제공한다.
  • Change HTML
  • Change CSS
  • Animate
  • 이벤트에 대한 처리등의 기능 추가
• 다양한 방법으로 엘리먼트 선택 가능

기본 Selectors

 

• Element Selector
  • $("div")
• ID Selector
  • $("#someId")
  • $("div#someId")
• Class Selector
  • $(".someClass")
• Descendant Selector
  • $(".someClass a")
• Multiple Selector
  • $("p, div, li")
• Not Selector
  • $("div"):not(".someClass")

 

Advanced Selectors

• Image Selector
  • $("div"):image
• Even/Odd Selectors
  • $("#someId"):even
• Attribute Equals Selector
  • $('input[name=something]')
• Attribute Contains Selector
  • $('input[name*="pass"]')

 

Dom Manipulation

Effects

Events

AJAX

• Asynchronos Javascript And XML
• Page 리로딩 없는 HTTP request를 할수 있음.
• GET/POST 메소드 사용 가능