본문 바로가기
Javascript/jQuery

jQuery 기초

juneMoon 2012. 9. 20. 14:42

jquery 소개


jQuery는 다음 제시하는 것의 전반적인 지식을 가지고 있어야 익힐 수 있다.

  • HTML
  • CSS
  • JavaScript


jQuery는 자바 스크립트를 쉽게 사용할 목적으로 개발됬다. 좀 더 적은 코드로, 좀 더 많은 일을 하기위한 라이브러리이다. 자바 스크립트에서 복잡한 일들을 많이 단순화했다. jQuery는 다음과 같은 기능이 포함되어 있다.

  • HTML/DOM 조작
  • CSS 조작
  • HTML 이벤트
  • 효과 및 애니메이션
  • 유틸리티


jQuery 설치


jQuery는 다운로드하거나 구글CDN이나 마이크로소프트CDN에서 가져다 사용할 수 있다.


  1. 다운로드는 아래 사이트에서 할 수 있다.

http://jquery.com/download/


  2. 구글 CDN 활용

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

</head>

  가장 최신 버젼을 사용하고 싶으면 1.8.0 대신에 1을 쓰면 된다. 그럼  1로 시작하는 버젼중에 가장 최신 버젼을 사용할 수 있다.


  3. 마이크로 소프트 CDN 활용

<head>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

</head>



구글 또는 마이크로 소프트의 CDN을 사용하면 사용자가 요청한 파일은 가장 빠른 로딩 시간을 제공하기 위해 가장 가까운 서버를 연결시켜줍니다. 별도로 스크립트를 관리하지 않아도 되므로 편할 수 있으나 상업적인 용도로는 보안 측면에서 검토가 필요할 듯하다.




jQuery 구문


jQuery는 요소를 선택하고 작업을 수행하는 구조로 되어있다. 선택은 CSS로 하고 수행은 함수가 되겠다.

$(선택자).수행()


선택자 예 (원본:  http://www.w3schools.com/jquery/jquery_selectors.asp )

SyntaxDescriptionExample
$("*")모든 요소를 선택Try it
$(this)

현재 선택된 html요소

Try it
$("p.intro")

intro 클래스의 모든 요소를 선택

Try it
$("p:first")

첫번째 <p>를 선택

Try it
$("ul li:first")

첫번째 <ul>의 첫번째 <li>를 선택

Try it
$("ul li:first-child")모든 <ul>의 첫번째 <li>를 선택Try it
$("[href]")href 속성이 있는 모든 요소를 선택Try it
$("a[target='_blank']")

모든 <a>의 target속성이 _blank인 요소 선택

Try it
$("a[target!='_blank']")

모든 <a>의 target속성이 _blank이 아닌 요소 선택

Try it
$(":button")

모든 <button>와 <input>의 type이 button인 요소 선택

Try it
$("tr:even")

모든 짝수 <tr>

Try it
$("tr:odd")

모든 홀수 <tr>

Try it


좀더 자세한 내용은 아래 페이지를 참조하자.

http://www.w3schools.com/jquery/jquery_ref_selectors.asp


문서 준비 이벤트는 jQuery가 문서를 로딩되기 전에 실행되는 것을 방지해준다.

$(document).ready(function(){


   // jQuery methods go here...


});


다음과 같이 짧게 사용하는 방법도 있다.

$(function(){


   // jQuery methods go here...


});



다음은 문서가 로딩되기 전에 실행하면 실패할 수 있는 예이다.

  • 아직 생성되지 않은 요소를 숨기려는 시도
  • 아직로드되지 않은 이미지의 크기를 얻으려는 시도



jQuery 이벤트


jQuery의 이벤트 처리 방법은 jQuery의 핵심 기능이다. event handler는 html에서 무슨일이 일어날 때 호출되는 메서드이다. 


예)

<!DOCTYPE html>

<html>

<head>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide();

  });

});

</script>

</head>


<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

<button>를 마우스로 클릭하게 되면 클릭한 모든 <p>는 숨겨져 안보이게 된다.


이벤트 사용법

$("button").click(function() {   ...some code...} );



jQuery의 이름 충돌


jQuery는 jQuery를 위한 단축키로 $기호를 사용합니다. 하지만 다른 자바스크립트 라이브러리도 같은 $기호를 사용하고 있습니다. 그래서 다른 자바스크립트 라이브러리와 같이 사용하기 위해선 사용자가 재정의를 해줘야합니다.


예)

<!DOCTYPE html>

<html>

<head>

<script src="jquery.js"></script>

<script>

var jq=jQuery.noConflict();

jq(document).ready(function(){

  jq("button").click(function(){

    jq("p").hide();

  });

});

</script>

</head>


<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

바로 이전 예제를 재정의하였다.



이벤트 메서드

MethodDescription
bind()Add one or more event handlers to matching elements
blur()Triggers, or binds a function to the blur event of selected elements
change()Triggers, or binds a function to the change event of selected elements
click()Triggers, or binds a function to the click event of selected elements
dblclick()Triggers, or binds a function to the dblclick event of selected elements
delegate()Add one or more event handlers to current, or future, specified child elements of the matching elements
die()Remove all event handlers added with the live() function
error()Triggers, or binds a function to the error event of selected elements
event.currentTargetThe current DOM element within the event bubbling phase
event.dataContains the optional data passed to jQuery.fn.bind when the current executing handler was bound
event.isDefaultPrevented()Returns whether event.preventDefault() was called for the event object
event.isImmediatePropagationStopped()Returns whether event.stopImmediatePropagation() was called for the event object
event.isPropagationStopped()Returns whether event.stopPropagation() was called for the event object
event.pageXThe mouse position relative to the left edge of the document
event.pageYThe mouse position relative to the top edge of the document
event.preventDefault()Prevents the default action of the event
event.relatedTargetThe other DOM element involved in the event, if any
event.resultThis attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined
event.stopImmediatePropagation()Prevents other event handlers from being called
event.stopPropagation()Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event
event.targetThe DOM element that initiated the event
event.timeStampThis attribute returns the number of milliseconds since January 1, 1970, when the event is triggered
event.typeDescribes the nature of the event
event.whichWhich key or button was pressed for a key or button event
focus()Triggers, or binds a function to the focus event of selected elements
focusin()Binds a function to the focusin event of selected elements
focusout()Binds a function to the focusout event of selected elements
hover()Binds one or two functions to the hover event of selected elements
keydown()Triggers, or binds a function to the keydown event of selected elements
keypress()Triggers, or binds a function to the keypress event of selected elements
keyup()Triggers, or binds a function to the keyup event of selected elements
live()Add one or more event handlers to current, or future, matching elements
load()Triggers, or binds a function to the load event of selected elements
mousedown()Triggers, or binds a function to the mouse down event of selected elements
mouseenter()Triggers, or binds a function to the mouse enter event of selected elements
mouseleave()Triggers, or binds a function to the mouse leave event of selected elements
mousemove()Triggers, or binds a function to the mouse move event of selected elements
mouseout()Triggers, or binds a function to the mouse out event of selected elements
mouseover()Triggers, or binds a function to the mouse over event of selected elements
mouseup()Triggers, or binds a function to the mouse up event of selected elements
one()Add one or more event handlers to matching elements. This handler can only be triggered once per element
ready()Binds a function to the ready event of a document
(when an HTML document is ready to use)
resize()Triggers, or binds a function to the resize event of selected elements
scroll()Triggers, or binds a function to the scroll event of selected elements
select()Triggers, or binds a function to the select event of selected elements
submit()Triggers, or binds a function to the submit event of selected elements
toggle()Binds two or more functions to the toggle between for the click event for selected elements
trigger()Triggers all events bound to the selected elements
triggerHandler()Triggers all functions bound to a specified event for the selected elements
unbind()Remove an added event handler from selected elements
undelegate()Remove an event handler to selected elements, now or in the future
unload()Triggers, or binds a function to the unload event of selected elements


저작자표시 비영리 동일조건

'Javascript > jQuery' 카테고리의 다른 글

단축키를 눌러 특정위치로 이동  (0) 2012.11.22
레이어를 화면 중앙에 띄우기  (0) 2012.11.08
offsetParent()  (0) 2012.10.04
이벤트 처리(펌)  (0) 2012.10.04
ajax 사용해보자.  (0) 2012.09.26

'Javascript/jQuery' Related Articles

티스토리툴바