'jQuery 예제'에 해당되는 글 20건

  1. 2013.07.01 jQuery shuffle 효과(이미지가 한장씩 뒤로 넘어가는 효과) (2)
  2. 2013.06.07 jQuery 기타 References
  3. 2013.06.05 jQuery AJAX 함수 Reference
  4. 2013.05.30 jQuery Event Reference
  5. 2013.05.29 jQuery selector
  6. 2013.05.28 jQuery Examples
  7. 2013.05.28 jQuery noConflict()
  8. 2013.05.27 jQuery AJAX get(), post()
  9. 2013.05.27 jQuery AJAX load() (2)
  10. 2013.05.25 jQuery AJAX 소개

shuffle-effect.zip

 

jQuery 관련 포스팅은 기본적인 포스팅이기에 관련된 예제를 통하여 직접 응용하기 바라는 의미에서 이제 관련 예제를 올리려고 합니다.

이번 jQuery 포스팅 예제는 이미지가 한장씩 자동으로 뒤로 넘어가는 효과를 만드는 예제 입니다.

 

<!-- Welcome to the scripts database of HSCRIPTS      -->

<!-- This tool is developed and a copyright             -->

<!-- product of HSCRIPTS.           -->

<!-- For more information visit http://www.hscripts.com -->

 

<html>
  <head>
    <title></title>
     <script type="text/javascript" src="plugins/jquery.js"></script>
     <script type="text/javascript" src="plugins/cycle-plugin.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 
 $("#shuffle").cycle({fx:'shuffle',
   
    delay:  -88000
});
}); 
</script>
    <style type="text/css">

 #shuffle{
 width: 300px;
   height: 300px;
  /*a width should be defined for transition to work*/
 border: 0px solid orange;
 padding: 5px;
 }

    </style>
  </head>
  <body>
       <div id="shuffle" style="float-left;">
      <img src="images/image1.jpeg" width="300" height="300">

      <img src="images/image2.jpeg" width="300" height="300">
      <img src="images/image3.jpeg" width="300" height="300">
      <img src="images/image4.jpeg" width="300" height="300">
      <img src="images/image5.jpeg" width="300" height="300">
      <img src="images/image6.jpeg" width="300" height="300">

    </div>

  </body>
 </html>


<!-- Welcome to the scripts database of HSCRIPTS      -->

<!-- This tool is developed and a copyright             -->

<!-- product of HSCRIPTS.           -->

<!-- For more information visit http://www.hscripts.com -->


// 이용방법은 간단합니다. 위와 같이 jquery.js 와 cycle_plugin.js 파일을 불러들인후 jQuery 선언뒤에  <div id="shuffle"...></div> 처럼  이미지를 적으면 끝입니다. 그렇게 되면 아래와 같이 이미지가 한장씩 뒤로 자동으로 넘어가는 효과가 나타납니다.

 

 

그림 상으론 제대로 표현이 안될듯 합니다. 첨부화일 올려놓았으니 참조 바랍니다. 나름대로 응용을 해보면 실무에도 적용이될 내용을 찾을수 있지 않을까 기대해봅니다.

 

http://www.hscripts.com/scripts/jquery/ 에서 더 많은 내용을 볼 수 있습니다.

 

Posted by 진격의 파파

댓글을 달아 주세요

  1. JAY 2013.07.17 17:53  댓글주소  수정/삭제  댓글쓰기

    우와.. 여기 진짜 대단하네요..
    회사에서 여차저차해서 홈페이지 관리를 맡고 있는데요..
    흥미가 생겨서 독학으로 프로그래밍을 공부하고 있는 처자예요
    여기 블로그! 즐찾해놓고 공부좀해도되죠?하하

  2. 진격의 파파 2013.07.18 11:02 신고  댓글주소  수정/삭제  댓글쓰기

    ^^ 미흡하지만 많은 도움이 되길 바라겠습니다. ㅎㅎ;;

 

data()

jQuery data() 는 선택된 요소에 사용자가 원하는 객체를 저장하고 불러오는 기능을 합니다.
jQuery에 data 메소드가 있는 가장 큰 이유는 메모리 누수를 피하기 위해서 입니다.


each()
일치하는 각 요소에 대한 함수를 실행합니다. 즉, 특정한 집합을 반복문 형태로 사용할 수 있습니다.
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});

위의 구문은 "<li>"에 있는 text를 알림창에 표시하는 내용인데 예를 들어서

<li>Park's의 블로그!!!</li>

<li>누군가에게 도움이 되는!!!</li>

<li>양질의 포스팅을 위해서!!!</li>

<li>에 있는 모든 내용을 알림창에 띄우게 됩니다. <li> 가 3개가 있으니 3번 반복하여 알림창을 띄우게 됩니다.


get()
선택자로 부터 지정된 DOM 요소를 가져올 수 있습니다.

기본사용문법

$(selector).get(index)

index()
일치하는 요소 중에서 특정 요소를 검색할 수 있습니다.

이 함수는 jQuery 1.4 버전부터 추가된 방법입니다.

다음 예제를 보면 index()는 선택된 요소가 현재 요소에서 몇번째인지 알려줍니다.

<ul>
<li>사자</li>
<li>호랑이</li>
<li>기린</li>
<li>늑대</li>
<li></li>
<li>여우</li>
</ul>

jQuery('li').click(function(){
alert( jQuery(this).index() );
});

// jQuery 구문을 보면 "li" 를 클릭했을때 알림창을 띄우라는 내용인데 특이한것은 index()가 들어가 있는데 첫번째 사자를 클륵하면 "0" 이라는 알림창이 뜨는것을 확인할 수 있습니다.


$.noConflict()
jQuery 는 "$" 을 단축표기로 기본적으로 사용합니다. 그러나 많은 양의 코딩을 하다보면 다른 라이브러리와 충돌을 할 수도 있는데 그것을 방지하기 위해 noConflict()를 사용합니다.
jQuery.noConflict();
// $가 아닌 jQuery를 사용
jQuery(document).ready(function(){
jQuery("div").hide();
});

미리 noConflict로 jQuery를 선언한 후 "$"가 아닌 jQuery를 사용하게 합니다.
$.param()
URL 쿼리 스트링 또는 Ajax 요청에 사용할 수 있도록 배열이나 객체를 직렬화 합니다.

$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"


$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
// 처럼 직렬화하여 배열을 사용할 수 있습니다.

removeData()
removeData()는 데이터를 제거 합니다. jQuery.removeData() 함수는 jQuery.data() 함수를 이용해 만들어졌던 이전 데이터를 제거하는 기능을 합니다.


size()
jQuery 1.8에서는 사용되지 않습니다. jQuery를 선택하여 일치하는 DOM 요소의 개수를 반환합니다.

alert('Size : ' + $('li').size() ); // <li> 의 개수를 리턴합니다.



toArray()
이름이 말해주는 것처럼 .toArray() 메서드는 jQuery 객체 안에 있는 DOM 객체들을 자바스크립트 배열로 만들어줍니다. 그래서 만들어진 배열의 항목 하나 하나는 DOM 객체입니다.

jQuery 요소 배열을 얻어내기 위해서 대표적으로 두가지 방법이 있습니다.
get() method 와 toArray() method 이다.
둘의 차이점은 get() method 는 숫자를 인자로 사용할 수 있으며, toArray() method 는 숫자를 인자로 사용할 수 없다는 것이다.
첫번째 예제

<ul>
< li>1</li>
< li>2</li>
< li>3</li>
< /ul>

< script type="text/javascript">
$('ul').find('li').get(0); // <li>1</li> 을 선택합니다.
$('ul').find('li').toArray().reverse(); // <li>3</li><li>2</li><li>1</li> 순으로 바뀌게 됩니다. reverse() 함수는 역순으로 할 수 있게하는 함수입니다.
< /script>

두번째 예제

var arr = $('li).toArray();

alert('index : ' + arr[0].innerHTML);

// 모든 <li>를 배열에 담습니다.

※ 여기까지해서 jQuery 관련 설명을 마치겠습니다. 대부분의 예제는 http://www.jquery.com 있는 내용이 많으며, 인터넷을 검색하며 추가한 예제도 있습니다. 기본적인 jQuery에 대한 설명을 한것이니 조금더 디테일한 설명을 보고자 하시는 분들은 위의 사이트 jquery.com에 가면 많은 내용을 찾아볼 수 있습니다.

조금이나마 도움이 되고 양질의 포스팅을 하려고 노력했지만 쉽지 않네요 ^^;

어쨋든 미약하게라도 도움이 되길 바랍니다. 끝까지 읽어주셔서 감사합니다.

 

 

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

jQuery 기타 References  (0) 2013.06.07
jQuery AJAX 함수 Reference  (0) 2013.06.05
jQuery HTML / CSS 함수 Reference  (0) 2013.06.04
jQuery Effect 함수들  (0) 2013.05.31
jQuery selector  (0) 2013.05.29
jQuery Examples  (0) 2013.05.28
Posted by 진격의 파파

댓글을 달아 주세요

 

이번장에서는 jQuery AJAX Reference에 대해서 알아보겠습니다.

AJAX는 전체페이지를 로딩하지 않고 서버와 데이타 및 웹페이지의 업데이트 부분을 불러들일수 있는 예술적인 기능을 합니다.

AJAX 기능에 대해서 조금더 자세히 알고싶은 분들은 저의 블로그 jQuery AJAX 를 방문하시면 됩니다.

다음 내용은 모든 jQuery의 AJAX 방법을 나타냅니다.


$.ajax()
AJAX의 요청을 수행합니다.

$.ajaxPrefilter()
AJAX 요청을 보내기 전이나 $.ajax() 함수에 의해 호출되기 전에 AJAX 옵션들을 수정하거나 조작합니다.

말이 좀 어렵습니다. ^^; 저도 코딩하면서 거의 본적이 없는 함수이기에 ....

내용인즉슨 미리 정의 되어있는 AJAX의 요청을 취소 또는 수정할 수 있다 뭐 이런 의미입니다.

$.ajaxSetup()
Ajax 요청 시 옵션 값들을 정의합니다.

예를 들어서

$.ajaxSetup({
url: 'ping.php'
});

// 이런식으로 미리 url을 정의해 놓고

$.ajax({
// 여기에서 url 값으로 ping.php 을 다시 쓸 필요가 없습니다.
data: {'name': 'Dan'}
});

// url값을 따로 불러오지 않고 사용가능합니다.

$.get()
HTTP GET 방식 요청을 통해 서버로부터 데이터를 받습니다.

$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
가장 간단한 사용방법인데 success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 넘어옵니다. 또한 응답상태값도 문자열로 넘어옵니다.
$.get("test.php", { name: "Park;s", tel: "010-1234-5678" } );
// 처럼 test.php 페이지에 변수 name, tel값을 넘길수 있습니다.


$.getJSON()

HTTP GET 방식 요청을 통해 서버로부터 받은 JSON 데이터를 로드합니다.
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
서버로 보낼 Data는 URL 쿼리 스트링에 추가됩니다. 만일 data 파라미터가 object라면, 문자열과 url 인코딩을 통해 변환된 후 URL에 추가되어 전송됩니다.


$.getScript()
HTTP GET 방식 요청을 통해 서버로부터 받은 JavaScript 파일을 로드하고 실행합니다.

$.ajax({
url: url,
dataType: "script",
success: success
});

$.param()
URL 쿼리 스트링 또는 Ajax 요청에 사용할 수 있도록 배열이나 객체를 직렬화 합니다.

$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"


$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
// 처럼 직렬화하여 배열을 사용할 수 있습니다.

$.post()
HTTP POST 방식 요청을 통해 서버로부터 데이터를 받습니다.

$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
Success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 넘어옵니다. 또한 응답상태값도 문자열로 넘어옵니다.

ajaxComplete()
AJAX 요청이 완료되면 호출될 핸들러를 등록하는 이벤트 입니다.
$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("<li>Request Complete.</li>");
});
AJAX가 완료되면 실행을 하는데 AJAX가 성공/실패 관계없이 수행됩니다.


ajaxError()
Ajax 요청에 대해 에러가 발생되면 호출될 핸들러를 등록하는 이벤트 입니다.
$("#msg").ajaxError(function(event, request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
AJAX 요청이 실패할 경우 메시지를 보여줍니다.


ajaxSend()
AJAX 요청을 보내기 전에 실행시킬 함수를 정의하는 이벤트 입니다.

$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
AJAX 요청을 보내기 전에 메시지를 보여줍니다.


ajaxStart()

첫번째 AJAX 요청이 시작될 때 호출할 핸들러를 등록하는 이벤트 입니다.

$("#loading").ajaxStart(function(){
$(this).show();
});
AJAX 요청이 시작될 때 loading 메시지를 보여줍니다.


ajaxStop()
모든 AJAX 요청이 완료되면 호출할 핸들러를 등록하는 이벤트 입니다.

$("#loading").ajaxStop(function(){
$(this).hide();
});
모든 요청이 완료되면 loading 메시지를 안보이게 처리합니다.


ajaxSuccess()

Ajax 요청이 성공적으로 완료 때마다 실행될 함수를 작성하는 이벤트 입니다.

$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});

AJAX 요청이 성공하면 메시지를 보여줍니다.

load()
서버로부터 데이터를 받아서 일치하는 요소 안에 HTML을 추가합니다

$('#result').load('ajax/test.html');

성공했다는 요청이 오면(textStatus 에 "success" 나 "notmodified" 같은 데이터가 있으면), load() 함수는 반환된 데이터를 일치되는 요소에 HTML 형식으로 넣어 줍니다.

데이터를 object 형태로 보내는 경우 POST 메서드가 사용되고, 그렇지 않으면 GET이 사용됩니다.

AJAX를 하면서 가장 많이 사용되는 함수가 아닐까 합니다. 특정 요소를 선택하고 그 부분만 업데이트 하고자 할 경우 이 함수를 사용하는데 실시간 전송(우편번호선택, 아이디 유무 체크등)에 아주 유용하게 사용되는 함수입니다.

이 함수만 알아도 AJAX의 50% 이상을 알았다해도 과언이 아닐까 합니다. 꼭 알아두시기 바랍니다.


serialize()

데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩 합니다.

이 함수는 표준 URL인코딩 표기법으로 텍스트 문자열을 만듭니다. 폼 요소 집합(input, textarea, select 등)과 같은 개별 요소들이 이 함수를 사용합니다.


serializeArray()

폼 요소를 names와 values 배열로 인코딩합니다.
이 함수는 JSON 문자열 형태로 JavaScript 배열 객체를 만듭니다. 이 함수는 폼 요소 집합을 표현하는 jQuery 객체를 이용합니다

위의 Reference와 관련된 내용은 모두 http://api.jquery.com 에 있습니다. 기본적인 예제와 내용을 확인할 수 있을텐데요. 모두 영문으로 되어있습니다. 하나하나 꼼꼼하게 해석하고 제가 코딩했던것을 바탕으로 하고 싶었으나 영문에 강하지 못하네요.

어쨋든 Reference 관련 설명부분이니 더 꼼꼼하게 공부하시고 싶은 분들은 위 사이트를 방문하시면 되겠습니다.

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

jQuery 기타 References  (0) 2013.06.07
jQuery AJAX 함수 Reference  (0) 2013.06.05
jQuery HTML / CSS 함수 Reference  (0) 2013.06.04
jQuery Effect 함수들  (0) 2013.05.31
jQuery selector  (0) 2013.05.29
jQuery Examples  (0) 2013.05.28
Posted by 진격의 파파

댓글을 달아 주세요

 

Event method는 선택한 요소에 대하여 이벤트 핸들러에 함수를 트리거하거나 연결합니다.

Event 관련 jQuery 함수의 종류는 아래와 같습니다.

bind() : 요소(element)에 이벤트 처리기(handler)를 연결합니다.(바인딩이라고 하죠)

$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
// 위의 구문을 보면 bind()의 역할은 id값 foo인 요소에 대하여 click 이벤트에 연결하게 합니다. 유저가 이 foo 요소를 클릭하면 알림창이 나타나게 됩니다.


blur() : JavaScript 이벤트인 "blur"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.

<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').blur(function() {
alert('Handler for .blur() called.');
});// 위의 구문을 보면 첫번째 필드에 포커스를 위치시켰다가, 다른 곳을 클릭하거나 키보드의 탭키를 이용해서 포커스를 이동시켜 보시면 Handler for .blur() called. 이라는 알림창이 나오게 됩니다


change() : JavaScript 이벤트인 "change"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.

<form>
<input class="target" type="text" value="Field 1" />
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>

$('.target').change(function() {
alert('Handler for .change() called.');
});

// 위의 구문은 select의 값을 변경시키면 알림창이 뜹니다. text input에는 값을 바꾼 후 다른 곳을 클릭하면 알림창이 뜹니다. 만일 포커스의 이동없이 .change() 이벤트를 발생시키려면 아래 구문을 추가하시면 됩니다.

$('#other').click(function() {
$('.target').change();
});


click() : JavaScript 이벤트인 "click"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.

<div id="target">
Click here
</div>
<div id="other">
Trigger the handler
</div>

$('#target').click(function() {
alert('Handler for .click() called.');
});

// 위의 구문은 아이디 target 을 클릭하면 알림창이 나타납니다.


dblclick() : JavaScript 이벤트인 "click"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.

<div id="target">
Double-click here
</div>
<div id="other">
Trigger the handler
</div>

$('#target').dblclick(function() {
alert('Handler for .dblclick() called.');
});

// 위의 구문은 아이디 target 을 더블클릭하면 알림창이 나타납니다.


delegate() : 루트 요소의 특정 집합을 기반으로, 지금 또는 나중에, 선택과 일치하는 모든 요소에 대해 하나 이상의 이벤트 처리기를 묶어줍니다. jQuery 1.7 에서, .delegate().on() 함수가 대체하게 되었습니다

<p>Click me!</p>

$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
// 위의 구문은 p태그를 클릭하면 그 뒤에 "<p>Another paragraph!</p>" 문구가 추가 됩니다. "p", "click" 를 묶은것을 볼 수 있습니다.


die() : .live() 함수로 바인딩 된 모든 이벤트들을 제거합니다. jQuery 1.7에서는, .die() (그리고 보완적인 함수인, .live()) 에 대하여 다루지 않습니다. 대신, .on() 함수로 바인딩된 이벤트를 제거하기 위해 사용되는 .off() 의 사용법에 대해 기술하고 있습니다.


error() : 선택된 요소에 error 이벤트를 실행시키거나 임의의 함수를 묶어 줍니다.


event.pageX : 문서의 왼쪽 가장자리를 기준으로 마우스 위치의 X좌표 값

<div id="log">마우스를 올려보세요.</div>
$(document).bind('mousemove',function(e){
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
});

// 마우스를 아이디 log에 가져가면 마우스의 좌표값이 숫자로 나타나게 됩니다.


event.pageY : 문서의 왼쪽 가장자리를 기준으로 마우스 위치의 Y좌표 값. 예제 구문은 위 event.pageX 참조요~


event.target : 이벤트가 시작되는 DOM 요소입니다.

<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName);
});

// 위의 구문은 body 즉 body를 둘러싼 모든 요소에 대하여 클릭이 이루어졌을 경우 nodeName 즉 태그요소(p,strong,span등)에 대한 메시지를 출력하게 됩니다.


event.timeStamp : 이전 이벤트와 현재 이벤트가 발생한 시간의 차이를 밀리세컨드(milliseconds)를 기준으로 알려줍니다.


event.type : 어떤 이벤트가 호출되었는지 알려줍니다. 개인적으로 자바스크립트에서 종종 이용을 하는데 엔터키를 눌렀을때 포커스를 이동할때 많이 이용했던 이벤트네요.

event.which : 어떤 이벤트를 실행했는지에 대한 정보를 알려줍니다. 키보드의 숫자키는 48부터 57사이에 있는데 event.which == 48 은 키보드 "1"에 해당합니다. 예를 들어 숫자만 입력가능케 할때 종종 사용하죠


focus() : "focus" JavaScript 이벤트를 바인드 하거나 요소에 해당 이벤트를 발생시킵니다.

<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').focus(function() {
alert('Handler for .focus() called.');
});

// 위 구문은 아이디 target에 탭키 또는 마우스로 포커스되었을때 알림창을 실행하게 됩니다.


focusin()
focusout()

jQuery 1.4부터 추가된 함수입니다. 말그대로 포커스가 들어왔을때 그리고 나갔을때 실행을 하게됩니다.


hover() : 마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다. hover() 함수는 mouseentermouseleave 이벤트들을 한번에 바인딩합니다.


keydown() : 이벤트는 유저가 키보드를 누르는 순간 요소에 이벤트를 발생시킵니다. 이 이벤트는 포커스를 가질 수 있는 요소에만 발생시킬 수 있습니다. 포커스가 가능한 요소들은 브라우져별로 다양하게 구성됩니다. 그러나 대부분의 form 요소들은 포커스를 가질 수 있어 해당 이벤트를 발생시킬 수 있습니다

<form>
<input id="target" type="text" value="Hello there" />
</form>
<div id="other">
Trigger the handler
</div>

$('#target').keydown(function() {
alert('Handler for .keydown() called.');
});

//input 필드에 포커스를 위치 시키고 키보드를 누르면 알림창이 나타납니다.


keypress() : JavaScript 이벤트를 바인딩하거나 요소에 이벤트를 발생시킵니다. keypress 이벤트는 브라우져가 키보드 입력을 받았을 때 요소에 이벤트를 발생시킵니다. 이 이벤트는 keydown와 비슷합니다만 키가 반복적으로 눌려질 경우에는 조금 다릅니다. 만약 유저가 키를 누르고 그 상태를 유지하고 있다면 keydown 이벤트는 한번 발생하지만 keypress 이벤트는 문자가 찍힐 때마다 발생합니다. 게다가 보조키(Shift 같은)는 keydown는 이벤트가 발생하지만 keypress 이벤트는 발생하지 않습니다.


keyup() : JavaScript 이벤트를 바인딩하거나 요소에 이벤트를 발생시킵니다.keyup 이벤트는 키보드의 키를 눌렀다 뗄 때 요소에 이벤트를 발생시킵니다. 이 이벤트는 포커스를 가질 수 있는 요소에만 발생시킬 수 있습니다. 포커스가 가능한 요소들은 브라우져별로 다양하게 구성됩니다. 그러나 대부분의 form 요소들은 포커스를 가질 수 있어 해당 이벤트를 발생시킬 수 있습니다.


live() : 현재 및 미래의, 현재의 선택과 일치하는 모든 요소에 대하여 이벤트 처리기를 연결합니다.

jQuery 1.7에서 live() 함수는 사용이 중지 되었습니다. 이벤트를 연결하는 것은 .on() 함수로 대체 되었습니다. 하위 버젼의 jQuery에서는 .live() 함수보다는 .delegate() 함수를 사용하기를 권고합니다.

이 함수는 페이지의 document 요소에 이벤트 핸들러 연결을 할 수 있습니다. 페이지에 동적 컨텐츠를 추가하는 쉬운 방법입니다. 더 많은 정보를 얻기를 원하시면 .on() 함수를 참고하시기 바랍니다.


load() : 이벤트 "load" 를 바인딩 합니다.load 이벤트는 모든 요소들이(포함한 하위 요소까지도) 완전히 읽혀(load)졌을 때 발생합니다. 이 이벤트는 a URL: images, scripts, frames, iframes, 그리고 window 객체와 같은 특정한 요소들에서 사용할 수 있습니다.


mousedown() : JavaScript 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.mousedown 이벤트는 마우스 포인터를 요소에 올려놓고 마우스 버튼을 누르면 발생합니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.


mouseenter() : 요소에 마우스가 진입했을 때의 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다. mouseenter 자바스크립트 이벤트는 Explorer전용 이벤트입니다. 이 이벤트의 일반적인 사용성 때문에 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성하였습니다. 이 이벤트는 요소에 마우스 포인터가 진입하면 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.


mouseleave() : 요소에서 마우스가 떠날때의 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다. mouseleave 자바스크립트 이벤트는 Explorer 전용 이벤트입니다. 이 이벤트의 일반적인 사용성 때문에 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성하였습니다. 이 이벤트는 요소에서 마우스 포인터가 떠날 때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.

mouseleave 이벤트는 mouseout 이벤트와 이벤트 버블링의 관점에서 조금 다릅니다. 만약 위 예에서 mouseout 를 사용했다면, 마우스 포인터가 Inner 요소 바깥으로 나가도 이벤트가 발생하게 됩니다만 일반적으로 좋은 방법이 아닙니다. 반면 mouseleave 이벤트는, 바인딩 된 요소에 마우스 포인터가 빠져나가야만 발생하고 자식 요소에는 이벤트가 발생하지 않습니다. 그래서 이 예제에서는 마우스가 Outer 요소에서 빠져나가야만 이벤트가 발생하고, Inner 요소에서는 발생하지 않는 것입니다.


mousemove() : JavaScript 이벤트를 바인딩하거나, 특정 요소에 이벤트를 발생시킵니다.

이 함수는 .bind('mousemove', handler).trigger('mousemove') 를 줄여 표현한 것입니다.

mousemove 이벤트는 요소 안에서 마우스 포인터가 움직일 때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.


mouseout() : JavaScript 이벤트를 바인딩하거나, 특정 요소에 이벤트를 발생시킵니다.

이 함수는 .bind('mouseout', handler).trigger('mouseout') 를 줄여 표현한 것입니다.

mouseout 이벤트는 요소에서 마우스 포인터가 떠날때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.


mouseover() : JavaScript 이벤트를 바인딩하거나, 특정 요소에 이벤트를 발생시킵니다.

이 함수는 .bind('mouseover', handler).trigger('mouseover') 를 줄여 표현한 것입니다.

mouseover 이벤트는 요소에 마우스 포인터가 올라올 때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.


mouseup() : JavaScript 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.

이 함수는 .bind('mouseup', handler).trigger('mouseup') 를 줄여 표현한 것입니다.

mouseup 이벤트는 마우스 포인터를 요소에 올려놓고 마우스 버튼을 눌렀다 뗄때 발생합니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.


off() : 이벤트 핸들러 해제하기.

off() 함수는 .on() 함수에 의해 바인딩 된 이벤트 핸들러를 제거합니다. 바인딩에 대한 내용은 .on() 함수를 살펴보시기 바랍니다. 특정 이벤트 처리기는 이벤트 이름, 네임 스페이스, 선택자, 또는 핸들러 함수 이름의 조합을 제공하여 요소에서 이벤트의 바인딩을 해제할 수 있습니다. 여러개의 필터 인자를 제공하면, 모든 인자들과 일치하는 것만 바인딩이 해제됩니다.

만약 "click"과 같은 간단한 이벤트 이름을 인자로 사용하면, 직접 추가하거나 나중에 바인딩 한 모든 이벤트들을 jQuery 집합 안에 있는 요소에서 제거시킬 수 있습니다. 플러그인으로 사용하여 코드를 작성하는 경우, 또는 단순히 대규모 코드 기반으로 작업을 할 때, 가장 좋은 방법은 코드가 실수로 다른 코드에 의해 연결된 이벤트 처리기를 제거하지 않도록 네임 스페이스를 사용하여 이벤트를 부착하고 제거하는 것입니다. 특정 네임 스페이스에 속한 모든 유형의 모든 이벤트는 ".myPlugin" 과 같은 네임스페이스를 이용하여 바인딩을 해제할 수 있습니다. 최소한 네임 스페이스 또는 이벤트 이름 중 하나가 제공 되어야 합니다.

특정 이벤트 핸들러를 제거하기 위해서는 selector 인자로 해야 합니다. 이 선택자(selector) 문자열은 .on() 함수에서 바인딩에 사용했던 인자와 동일해야 합니다. 핸들러에서 프로그래밍을 통해 바인딩 한 이벤트에 영향을 주지 않고 제거하기 위해 "**" 같은 특수한 값을 사용할 수 있습니다.


on() : 선택된 요소에 하나 이상의 이벤트들을 붙여줍니다. on() 함수는 jQuery 객체 안의 현재 선택된 요소 집합과 이벤트 핸들러를 묶어 줍니다. jQuery 1.7 에 와서, .on() 함수는 이벤트 핸들러 바인딩에 필요한 모든 기능을 제공합니다. 이전 버젼의 jQuery 이벤트 함수에 대한 도움말을 원하시면 bind(), delegate(), live() 함수에 대한 내용들을 참고하세요.

$("p").on("click", function(){
alert( $(this).text() );
});

//p 태그를 클릭하면 알림창이 나타납니다.

function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

//이벤트 핸들러에 데이터를 전달하고, foo 값을 알림창으로 보여줍니다.

$("form").on("submit", false)

//폼의 submit를 막고 false를 인자로 하여 이벤트가 버블링되는 것을 차단합니다.


one() : 요소에 이벤트 처리기를 연결합니다. 핸들러는 대부분 한번씩 실행됩니다.

이 함수의 첫번째 형태는 이벤트가 호출된 후 핸들러에서 이벤트가 해제되는 부분을 제외하면 .bind() 함수와 같습니다. 두번째 형태는 jQuery 1.7에 와서야 소개됩니다. .on() 함수와 동일한데, 호출된 후 핸들러에서 이벤트가 제거되는 부분이 다릅니다.

$("#foo").one("click", function() {
alert("This will be displayed only once.");
});
// 이 코드가 실행되면, foo 인 요소를 클릭하면 알림창이 나타납니다. 그 다음 클릭에는 아무런 일도 일어나지 않습니다. 아래 코드와 동일한 작동을 하게 되는 것입니다. one의 의미가 1이자나요. 그래서 1번이라는 제한을 두기 위해 이 함수가 만들어지지 않았나 합니다.

ready() : DOM 전체가 로드되면 기능이 실행됩니다. 최근 자바스크립트 어플리케이션은 일반적으로 DOM이 완전히 로드된 후 코드를 수행합니다. 따라서 웹 브라우저가 DOM은 완전히 로드했으나 이미지나 SWF파일 같은 자원들을 아직 로드하지 못한 시점을 알아내기 위한 방법이 필요합니다. 그래서 window.onload를 이용한다면 자원을 포함한 전체문서 로드를 기다려야 하므로 기다리는 시간이 길어질 수 있습니다. 따라서 지금 필요한 건 DOM그 자체가 탐색과 조작을 위한 준비가 끝났다는 이벤트이고 그 역할을 해주는 것이 ready메서드 입니다.


resize() : JavaScript 이벤트를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 적용시킵니다. 이 함수의 첫번째 두번째 용법은 bind('resize', handler) 의 줄임 표현입니다. 세번째 용법은 trigger('resize') 의 줄임 표현입니다. resize 핸들러 안의 코드는 핸들러가 호출될 때마다 실행되지는 않습니다. 구현 방법에 따라, resize 이벤트는 사이즈가 변화하는 동안 연속적으로 발생할 수 있습니다. (전통적인 방식인 Internet Explorer 와 WebKit-based 브라우져인 Safari 와 Chrome 같은 브라우져등) 또는 단 한번만(Opera 등) 실행되는 경우도 있습니다.


scroll() : JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다. 이 함수의 첫번째, 두번째 용법은 .bind('scroll', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('scroll') 를 줄여 표현한 것입니다.

scroll 이벤트는 스크롤이 움직일 때 발생합니다. 이것은 window 객체에서 제공됩니다. 또한 스크롤이 가능한 프레임이나 overflow CSS 속성이 있는 요소의 scroll (또는 auto 속성) 에서도 발생합니다.


select() : JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다. 함수의 첫번째, 두번째 용법은 .bind('select', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('select') 를 줄여 표현한 것입니다.

scroll 이벤트는 유저가 텍스트를 선택하면 발생합니다. 이것은 <input type="text"> 필드와 <textarea> 박스에서 발생합니다. 또한 스크롤이 가능한 프레임이나 overflow CSS 속성이 있는 요소의 scroll (또는 auto 속성) 에서도 발생합니다.


submit() : JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다. 이 함수의 첫번째, 두번째 용법은 .bind('submit', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('submit') 를 줄여 표현한 것입니다.

submit 이벤트는 유저가 폼 전송(form submit)을 시도할 때 발생합니다. 이 이벤트는 오로지 <form> 요소에만 바인딩할 수 있습니다. 폼(Form)은 <input type="submit">, <input type="image">, <button type="submit"> 들을 클릭하거나 폼의 어떤 요소에서 Enter 키를 눌러서 전송할 수 있습니다.


toggle() : 조건에 일치하는 요소에 클릭 때 실행될 하나 이상의 핸들러를 바인딩합니다. toggle() 함수는 click 이벤트에 핸들러를 바인딩하고, click 때마다 실행될 기능도 처리할 수 있게 해줍니다. 이 함수는 이전 jQuery 포스팅내용에서 워낙 많이 나온 함수라서, 자세히 알고 싶은분들은 아래 참조 사이트나 포스팅된 내용 참조하시면 되겠습니다~


trigger() : 특정 이벤트 유형에 대해 선택된 요소에 연결된 모든 핸들러와 동작(behavior)을 실행합니다. trigger() 함수는 이벤트가 발생할 때 실행될 함수나 .bind() 함수로 연결된 어떤 이벤트 핸들러를 강제로 실행시켜 줍니다. trigger() 함수를 사용해서 사용자가 일으킬 이벤트를 임의적으로 순서에 따라 발생시킬 수 있습니다.


triggerHandler() : 이벤트 요소에 연결된 모든 처리기(handler)를 실행합니다. triggerHandler() 함수는 trigger() 함수와 유사한 동작을 합니다. 단 아래의 예외 사항이 있습니다.

- triggerHandler() 함수는 이벤트의 기본 동작을 발생시키지는 않습니다. (form 전송과 같은).

- trigger() 함수는 jQuery 객체와 매치되는 모든 요소들에서 동작하는 반면, triggerHandler() 함수는 오직 일치하는 요소 증 첫번째 요소에서만 동작을 합니다.

- triggerHandler() 로 만들어진 이벤트는 DOM 구조를 따라 버블링 되지 않습니다. 만약 타겟이 되는 요소를 직접 핸들링하지 않으면, 그 요소에서는 아무런 일도 일어나지 않습니다.

- jQuery 객체를 반환하는 대신에, triggerHandler() 는 마지막 핸들러가 발생하여 생긴 반환값(value)가 있던 없던 값(value)을 반환합니다. 만일 핸들러가 실행되지 않았다면, undefined을 반환합니다.


unbind() : 이전에 연결된 이벤트 핸들러를 요소에서 제거합니다. bind() 함수로 바인딩한 이벤트 핸들러를 해제하기 위해서 unbind() 를 사용합니다. 간단한 경우에는, 인자없이 .unbind() 를 사용하여 요소의 모든 이벤트의 바인딩을 해제합니다. 단, jQuery 1.7 부터는, .on().off() 함수로 대체되었습니다.

undelegate() : 루트 요소의 특정 집합에 기반을 두고, 현재 선택과 일치하는 모든 요소에 대한 이벤트로부터 핸들러를 제거합니다. undelegate() 함수는 .delegate() 로 바인딩된 이벤트 핸들러들을 해제합니다. jQuery 1.7에 와서는 on()off() 함수로 대체되었습니다.


unload() : JavaScript 이벤트를 바인딩합니다. 이 함수는 bind('unload', handler)을 줄여놓은 것입니다.

unload 이벤트는 유저가 페이지를 벗어날 때 window 요소에서 발생합니다. 이것은 많은 상황을 의미하는데, 유저가 링크를 클릭해서 다른 쪽으로 이동했거나 새로운 URL을 치고 다른곳으로 빠져나갔다거나 하는 것을 의미하게 됩니다. 앞으로 뒤로 버튼도 발생합니다. 브라우져를 종료시켜도 발생합니다. 심지어 페이지 새로고침을 하면 unload 이벤트가 제일 처음 발생합니다.

unload 이벤트는 브라우져 버젼별 특성을 타기 때문에 다루는 데에 한계가 있습니다. 예를 들어, some versions of Firefox의 어떤 버전에서는 링크를 따라가면 발생하지만 윈도우를 닫으면 발생하지 않기도 합니다.

참조 URL : http://api.jquery.com/

위와 관련된 모든 내용(예제, 함수설명등)은 jquery 사이트에 있습니다.

"http://api.jquery.com/함수명/" 즉 http://api.jquery.com/bind/ , http://api.jquery.com/focusin/ 등 해당하는 이벤트의 단어를 http://api.jquery.com/ 뒤에 붙여주면 내용과 예제가 나옵니다.

그럼 오늘 하루도 즐프되세요~

'PHP > PHP Reference' 카테고리의 다른 글

PHP 5 Array 함수  (0) 2013.07.25
jQuery Event Reference  (0) 2013.05.30
Posted by 진격의 파파

댓글을 달아 주세요

 

Selector Example Selects
 * $("*") 모든요소 선택
 #id $("#lastname") 아이디 lastname 요소 선택
 .class $(".intro") 클래스 intro 요소 선택
 .class,.class $(".intro,.demo") 클래스 intro, demo 요소 선택
 element $("p") 태그 p 요소 선택
 el1,el2,el3 $("h1,div,p") 모든 <h1>, <div>, <p> 요소 선택
 :first $("p:first") 첫번째 <p> 요소 선택
 :last $("p:last") 마지막 <p> 요소 선택
 :even $("tr:even") 모든 <tr> 의 짝수 요소(0,2,4…) 선택
 :odd $("tr:odd") 모든 <tr> 의 홀수 요소(1,3,5…) 선택
 :first-child $("p:first-child") 모든 <p> 요소의 부모의 첫번째 자식요소 선택
 :first-of-type $("p:first-of-type") 모든 <p> 요소들 중에서 부모의 첫번째 <p> 요소 선택
 :last-child $("p:last-child") 모든 <p> 요소의 부모의 마지막 자식요소 선택
 :last-of-type $("p:last-of-type") 모든 <p> 요소들 중에서 부모의 마지막 <p> 요소 선택
 :nth-child(n) $("p:nth-child(2)") 모든 <p> 요소들 중에서 부모의 두번째 <p> 요소 선택
 :nth-last-child(n) $("p:nth-last-child(2)") 모든 <p> 요소들 중에서 부모의 뒤에서 두번째 <p> 요소 선택
 :nth-of-type(n) $("p:nth-of-type(2)") 모든 <p> 요소들 중에서 부모의 두번째 <p> 요소 선택
 :nth-last-of-type(n) $("p:nth-last-of-type(2)") 모든 <p> 요소들 중에서 부모의 끝에서 두번째 <p> 요소 선택
 :only-child $("p:only-child") 모든 <p> 요소들 중에서 <P> 요소가 유일한 자식이면 선택
(p요소가 하나라도 있으면 선택안함)
 :only-of-type $("p:only-of-type") 모든 <p> 요소들 중에서 <P> 요소가 유일한 타입이면 선택
(p아닌 요소가 포함되어도 p타입이 유일하면 선택))
 parent > child $("div > p") <div> 요소의 직계 자식 인 모든 <P> 요소 선택
 parent descendant $("div p") <div> 요소의 하위 모든 <P> 요소 선택
 element + next $("div + p") 각 <DIV> 요소 옆에 <p> 요소 선택
 element ~ siblings $("div ~ p") <div> 요소의 모든 형제 <P> 요소 선택
 :eq(index) $("ul li:eq(3)") 목록의 네 번째 요소 (인덱스 0에서 시작) 선택
 :gt(no) $("ul li:gt(3)") 3보다 큰 인덱스 목록 요소 선택
 :lt(no) $("ul li:lt(3)") 3보다 적은 인덱스 목록 요소 선택
 :not(selector) $("input:not(:empty)") 비어 있지 않은 모든 입력 요소 선택
 :header $(":header") 모든 헤더 요소 <H1>, <H2> … 선택
 :animated $(":animated") 모든 animated 요소 선택
 :focus $(":focus") 현재 포커스가있는 요소 선택
 :contains(text) $(":contains('Hello')") 텍스트 "Hello"가 포함 된 모든 요소 선택
 :has(selector) $("div:has(p)") <p> 요소가있는 모든 <DIV> 요소 선택
 :empty $(":empty") 모든 empty 요소
 :parent $(":parent") 다른 요소의 부모인 모든 요소 선택
 :hidden $("p:hidden") 모든 <P> 요소들을 숨김
 :visible $("table:visible") 모든 table 들을 보여줌
 :root $(":root") 문서의 루트 요소 선택
 :lang(language) $("p:lang(de)") "de"로 시작하는 language 속성값을 가진 모든 <P>요소 선택
 [attribute] $("[href]") href 속성을 가진 모든 요소 선택
 [attribute=value] $("[href='default.htm']") "default.htm"에 해당하는 href 속성 값을 가진 모든 요소
 [attribute!=value] $("[href!='default.htm']") "default.htm"에 해당하지 않는 href 속성 값을 가진 모든 요소
 [attribute$=value] $("[href$='.jpg']") "jpg"로 끝나는 href 속성값을 가진 모든 요소 선택
 [attribute|=value] $("[hreflang|='en']") href의 속성값 중에서 "en"으로 시작하는 모든 요소 선택
 [attribute^=value] $("[name^='hello']") name 속성값 중에서 "hello"로 시작하는 모든 요소 선택
 [attribute~=value] $("[name~='hello']") name 속성값 중에서 "hello"를 포함하는 모든 요소 선택
 [attribute*=value] $("[name*='hello']") name 속성값 중에서 "hello"라는 문자열이 포함된 모든 요소 선택
 :input $(":input") 모든 input 요소 선택
 :text $(":text") type이 text인 모든 input 요소 선택
 :password $(":password") type이 password인 모든 input 요소 선택
 :radio $(":radio") type이 radio인 모든 input 요소 선택
 :checkbox $(":checkbox") type이 checkbox인 모든 input 요소 선택
 :submit $(":submit") type이 submit인 모든 input 요소 선택
 :reset $(":reset") type이 reset인 모든 input 요소 선택
 :button $(":button") type이 button인 모든 input 요소 선택
 :image $(":image") type이 image인 모든 input 요소 선택
 :file $(":file") type이 file인 모든 input 요소 선택
 :enabled $(":enabled") input 요소들를 모두 활성화 함
 :disabled $(":disabled") input 요소들을 모두 비활성화 함
 :selected $(":selected") input 요소들을 모두 selected 함
 :checked $(":checked") input 요소들을 모두 checked 함
 

나름대로 정의를 한 내용이라서 혹시라도 정의가 잘못된 내용이 있으면 댓글 부탁드립니다. 바로바로 바꿔 놓겠습니다. 모쪼록 코딩하는데 조금이라도 도움이 되길 바랍니다.

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

jQuery 기타 References  (0) 2013.06.07
jQuery AJAX 함수 Reference  (0) 2013.06.05
jQuery HTML / CSS 함수 Reference  (0) 2013.06.04
jQuery Effect 함수들  (0) 2013.05.31
jQuery selector  (0) 2013.05.29
jQuery Examples  (0) 2013.05.28
Posted by 진격의 파파

댓글을 달아 주세요

 

jQuery Selectors

$("p").hide()
p태그를 숨깁니다.


$("#test").hide()
아이디 test를 숨깁니다

$(".test").hide()
클래스 test를 숨깁니다.

$(this).hide()
html 요소를 숨깁니다.

jQuery Events

jQuery click()
클릭했을때 발생하는 이벤트 입니다.

jQuery dblclick()
더블클릭했을때 발생하는 이벤트 입니다.

jQuery mouseenter()
마우스가 다가왔을때 발생하는 이벤트 입니다.

jQuery mouseleave()
마우스가 자리를 떠날때 발생하는 이벤트 입니다.

jQuery mousedown()
마우스 버튼클릭시 발생하는 이벤트 입니다.

jQuery mouseup()
마우스 버튼을 클릭하고 놓을때 발생하는 이벤트 입니다.

jQuery hover()
마우스가 오버되었을때 발생하는 이벤트 입니다.

jQuery focus() and blur()
focus() 는 폼의 양식에 포커스를 받았을때 실행되는 이벤트 입니다.

blur() 는 폼의 양식에 포커스를 잃었을때 실행되는 이벤트 입니다.

위 내용의 자세한 설명과 예제는 jQuery Tutorial 에서 확인 가능합니다.

--------------------------------------------------------------------------------

jQuery Hide/Show

jQuery hide()
문구를 숨기는 이벤트 입니다.

jQuery show()
문구를 보여주는 이벤트 입니다.

jQuery toggle()
문구를 숨기고 보여주는 기능을 동시에 수행하는 이벤트 입니다.

jQuery Fade

jQuery fadeIn()
어떤 문구 또는 html 요소에 대하여 천천히 나타나게 하는 이벤트 입니다.

jQuery fadeOut()
어떤 문구 또는 html 요소에 대하여 천천히 사라지게 하는 이벤트 입니다.

jQuery fadeToggle()
어떤 문구 또는 html 요소에 대하여 천천히 나타나게, 사라지게를 동시에 수행 하는 이벤트 입니다.

jQuery fadeTo()
어떤 문구 또는 html 요소에 대하여 투명도를 조절할 수 있게 하는 이벤트 입니다.

jQuery Slide

jQuery slideDown()
아래로 천천히 나타나게 하는 이벤트 입니다.

jQuery slideUp()
위로 천천히 나타나게 하는 이벤트 입니다.

jQuery slideToggle()
천천히 아래로, 위로 를 동시에 수행하는 이벤트 입니다.

jQuery Animate

jQuery animate()
animate() 는 CSS의 속성을 정의할 수 있으며, "slow", "fast", "milliseconds" 를 이용하여 시간을 정의할 수 있습니다.

위 내용의 자세한 설명과 예제는 jQuery Effects 에서 확인 가능합니다.


--------------------------------------------------------------------------------

jQuery HTML Get Content and Attributes

jQuery text() and html()
text() 는 텍스트의 내용을 설정하거나 반환하는 이벤트 입니다.

html() 는 html의 내용을 설정하거나 반환하는 이벤트 입니다.

jQuery val()
폼 필드의 값을 설정하거나 반환하는 이벤트 입니다.

jQuery attr()
속성값을 설정하거나 반환하는 이벤트 입니다.

jQuery HTML Add Elements/Content

jQuery append()
선택된 html 요소의 끝에 문구등을 나타나게 하는 이벤트 입니다.

jQuery prepend()
선택된 html 요소의 앞에 문구등을 나타나게 하는 이벤트 입니다.


jQuery after()
선택한 요소의 뒤에 html, javascript 를 추가하는 이벤트 입니다.

jQuery before()
선택한 요소의 앞에 html, javascript 를 추가하는 이벤트 입니다.

jQuery HTML Remove Elements/Content

jQuery remove()
선택한 요소를 모두 지우는 이벤트 입니다.

jQuery empty()
선택한 자식 요소를 지우는 이벤트 입니다.


jQuery Get and Set CSS Classes

jQuery addClass()
선택한 요소에 하나 이상의 클래스를 추가하는 이벤트 입니다.

jQuery removeClass()
선택한 요소에 하나 이상의 요소를 지우는 이벤트 입니다.

jQuery toggleClass()
선택한 요소에 하나 이상의 요소를 추가/삭제 를 동시에 수행하는 이벤트 입니다.

jQuery css() Method

jQuery css()
선택된 요소에 하나 또는 그 이상의 속성값을 줄 수 있는 이벤트 입니다.

jQuery Dimensions

jQuery width() and height()
width()와 height()는 넓이와 높이값을 반환하는 이벤트 입니다.


jQuery innerWidth() and innerHeight()
innerWidth()와 innerHeight()는 width(),height()와 같이 넓이와 높이를 반환하지만 padding값만을 포함하여 반환하는 이벤트 입니다.

jQuery outerWidth() and outerHeight()
outerWidth()와 outerHeight()는 width(),height()와 같이 넓이와 높이를 반환하지만 border, padding값을 포함하여 반환하는 이벤트 입니다.
위 내용의 자세한 설명과 예제는 jQuery HTML 에서 확인 가능합니다.

--------------------------------------------------------------------------------

jQuery AJAX load() Method

jQuery load()
다른 서버의 값을 불러들이는 역할을 하는 이벤트 입니다.

jQuery AJAX get() and post() Methods

jQuery get()
기본적으로 서버로부터 데이터를 가져오는 이벤트 입니다.

jQuery post()
서버로부터 일부 데이터를 가져오는 이벤트 입니다.

위 내용의 자세한 설명과 예제는 jQuery AJAX 에서 확인 가능합니다.

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

jQuery 기타 References  (0) 2013.06.07
jQuery AJAX 함수 Reference  (0) 2013.06.05
jQuery HTML / CSS 함수 Reference  (0) 2013.06.04
jQuery Effect 함수들  (0) 2013.05.31
jQuery selector  (0) 2013.05.29
jQuery Examples  (0) 2013.05.28
Posted by 진격의 파파

댓글을 달아 주세요

 

이번장에서는 noConflict() 함수 사용방법에 대해서 알아보겠습니다.

여러분들도 이미 알고있다시피 jQuery는 $ 기호를 축약으로 사용합니다.

noConflict()는 다른 방법으로 jQuery를 실행할 수 있습니다.

총 3가지 예제 구문을 보여줄텐데 모두 똑같은 실행을 합니다.

 

관련예제 1

$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});

// $ 대신 jQuery를 사용하여 나타냄

 

관련예제 2

var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});

// 미리 jq를 선언한후 $ 대신 jq를 사용함

 

관련예제 3

$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});

// $를 변경하지 않고 사용하려면 function 에 미리 선언을 한후 사용가능합니다.

 

// 위 3개의 관련예제들은 모두 똑같은 실행을 합니다. 버튼을 클릭하면 p태그의 내용을 "jQuery is still working!" 로 바꿉니다. 여기서 중점적으로 살펴볼 곳은 위 처럼 noConflict() 함수를 이용하여 다른 방법으로 jQuery를 실행 시킬수도 있다는 것입니다.

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

jQuery noConflict()  (0) 2013.05.28
Posted by 진격의 파파

댓글을 달아 주세요

jQuery AJAX get() 요청 방식과 post()의 요청방식 둘다 사용 가능합니다.

jQuery get() 은 기본적으로 서버로부터 데이터를 가져오는데 사용됩니다.

jQuery post() 은 서버로부터 일부 데이터를 가져옵니다.

 

jQuery get()

$.get(URL,callback); 기본사용 문법

$("button").click(function(){
$.get("test.php",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

// test.php 의 내용을 읽어들입니다.

test.php 의 내용은

---------------------------------------

<?
echo "이 내용은 php 내용입니다.";
?>

---------------------------------------

 

 

jQuery get() 관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("test.php",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});

</script>
</head>
<body>

<button>get() 버튼</button>

</body>
</html>

 

 

// "get() 버튼"을 클릭하면 위 그림처럼 test.php의 내용을 가져옵니다. function(data, status) 의 값은 임의의 변수 입니다. 하지만 founction에 임의의 변수값을 선언하면 가져올때도 같은 변수값을 사용해야 합니다. 만약 값이 틀릴경우 스크립트 오류가 발생합니다.

 

jQuery post()

$.post(URL,data,callback); 기본사용 문법

$("button").click(function(){
$.post("test_post.php",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

// test_post.php 의 내용을 읽어들입니다.

test_post.php 의 내용은

---------------------------------------

<?
$fname = $_POST["name"];
$thank = $_POST["thank"];
echo "이 블로그는 " . $fname . " 입니다.";

echo "많은 방문에 " . $thank . ".";
?>

---------------------------------------

 

 

jQuery post() 관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("test_post.php",
{
name:"Park's의 블로그",
thank:"감사드립니다"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});

</script>
</head>
<body>

<button>post() 버튼</button>

</body>
</html>

 

// 위 그림을 보면 어떻게 데이터가 이동했는지 알 수 있습니다.

일단 소스에서 보시면 name 값에 "Park's의 블로그", thank 값에 "감사드립니다" 의 내용이 들어가 있습니다.

그냥 변수값에 담겨졌다고 생각하면 이해하기 쉬울듯 합니다. 아래 function 구문은 위의 get() 과 동일합니다.

그리고 test_post.php 에서 $_POST["name"], $_POST["thank"] 이렇게 넘어온값을 받아옵니다.

그래서 그 값을 대입한 결과 위 그림처럼 메시지가 나타나게 되는 것입니다.

이제 어느정도 이해가 가나요? get() 방식은 그냥 데이터를 가져오기만 하지만 post() 방식은 데이터를 주고받을 수 있습니다.

실무에서 굉장히 많이 쓰이는 부분입니다. 위 내용은 기본 내용입니다. 응용하다 보면 더 고급 프로그래밍을 제작할 수 있습니다.

 

 

여기까지 jQuery AJAX 였습니다. jQuery 관련 블로그 포스팅을 하면서 저도 다시 공부하는 느낌이네요 ㅎㅎ

이글을 보시는 분들께 많은 도움이 되길 바라며, 모든 프로그래머분들 화이팅 하시기 바랍니다.

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

jQuery AJAX get(), post()  (0) 2013.05.27
jQuery AJAX load()  (2) 2013.05.27
jQuery AJAX 소개  (0) 2013.05.25
Posted by 진격의 파파

댓글을 달아 주세요

이번장에서는 jQuery AJAX load() 함수에 대해서 알아보겠습니다.

실무에서 요긴하게 써먹는 부분이니 알아두면 도움이 많이 될듯합니다.

jQuery load() 함수는 간단하지만, 강력한 AJAX 방식입니다.

jQuery load() 함수는 전체 웹페이지를 새로고침하지 않고 웹페이지의 일부분만을 업데이트할 수 있습니다.

$(selector).load(URL,data,callback); // 기본 문법

- URL 은 불러들일 페이지의 주소값입니다.

- data 는 쿼리스트링 매개변수값 입니다.

- callback 은 load 함수가 완료된 후 실행되는 함수 입니다.

관련예제를 살펴보기전에 우선 text.txt 화일을 미리 생성해 둡니다.

test.txt 파일의 내용은

---------------------------------------

<h2>jQuery AJAX의 신기한 로딩</h2>
<p id="p1">제대로 로딩이 되었나요?</p>

---------------------------------------

입니다. 이렇게 텍스트 파일을 하나 만들어 놓은후 텍스트 파일의 내용을 불러들이겠습니다.

이전 페이지 jQuery AJAX 소개 부분에서 사용되었던 내용과 동일합니다.

관련예제는 아이디 p1의 내용만을 불러들이는 내용입니다.

관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test.txt #p1");
});
});

</script>
</head>
<body>

<div id="div1"><h2>jQuery AJAX 의 내용을 가져와라.</h2></div>
<button>가져오라</button>

</body>
</html>

 


// 위 그림을 보시면 test.txt 파일에서 아이디 p1 에 해당되는 내용만 가져온것을 알 수 있습니다.

이처럼 load() 함수는 서버상에 있는 데이터를 불러들일수 있습니다. DB의 값을 불러 오는데 유용하게 사용되며, DB의 값과 비교를 하여 참 거짓을 반환할 수 있기 때문에 다른 페이지로의 이동작업 없이 한페이지에서 해결할 수 있다는 장점이 있습니다. 제가 설명한 것은 간단한 작업이지만 그래도 기본적인 내용입니다. 기본적인 내용만 알고있어도 50%는 학습하였다 할수 있습니다. ^^

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

jQuery AJAX get(), post()  (0) 2013.05.27
jQuery AJAX load()  (2) 2013.05.27
jQuery AJAX 소개  (0) 2013.05.25
Posted by 진격의 파파

댓글을 달아 주세요

  1. 2016.01.08 09:45  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2016.01.08 09:45  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

이번 장에서는 jQuery AJAX의 기능에 관한 소개를 하겠습니다.

 

AJAX는 웹페이지의 일부를 업데이트 할수 있고 서버와 데이터간의 교환을할 수 있는 예술적인 기술입니다. 

 

AJAX는  Asynchronous JavaScript and XML 의 줄임말입니다. 다시 말해서 AJAX는 전체페이지 로딩없이 백그라운드에서 데이터를 로딩할 수 있습니다. 설명이 조금 어려운듯 하여 예를 들어서 추가 설명하겠습니다.

 

☞ 예를들어 A.php 와 B.php가 있다고 가정했을때 A.php에서 B.php에 데이터를 읽어들이고 싶을경우 보통 팝업창을 띄워서 javascript 부모, 자식 기능을 이용하여 그 내용을 읽습니다. 하지만 AJAX는 그러한 작업없이 바로 하나의 페이지에서 두 개 이상의 다른 페이지에 있는 데이터를 읽어드릴 수 있습니다. 주소 팝업을 띄울경우, 아이디 중복검사를 할경우 등 엄청난 다양한 분야에 접목을 시킬 수 있습니다. 한 페이지에서 모두 처리되니 그 속도 또한 매우 빠르겠죠. 이렇듯 AJAX는 실시간에 활용된 기술에 적용시 매우 유용한 스킬입니다.

 

기본 예제를 살펴보며 신기한 AJAX 기능을 알아보겠습니다.

 

AJAX 관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("test.txt");
  });
});

</script>
</head>
<body>

<div id="div1"><h2>jQuery AJAX 의 내용을 가져와라.</h2></div>
<button>가져오라</button>

</body>
</html>

 

text.txt 의 내용은

-------------------------------------

<h2>jQuery AJAX의 신기한 로딩</h2>
<p id="p1">제대로 로딩이 되었나요?</p>

--------------------------------------
입니다. 


 

 


// "가져오라" 의 버튼을 클릭하면 위 그림처럼 내용이 바뀌는 것을 볼수 있는데 이것은 jQuery의 remove() , append() 등 어떤 특정기능을 이용하여 바꾼것이 아닙니다. 이것은 test.txt 의 파일 내용을 불러들인 것입니다. 파일을 읽어들일 경우 load() 함수를 사용하여 불러들입니다. AJAX의 기술을 활용하면 웹페이지의 로딩을 줄일뿐만 아니라 실시간 데이터 전송이 가능하여 익혀두면 매우 유용하게 사용하게 될것입니다.

 

다음장에서는 load() 함수에 대해서 좀더 구체적으로 알아보겠습니다.

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

jQuery AJAX get(), post()  (0) 2013.05.27
jQuery AJAX load()  (2) 2013.05.27
jQuery AJAX 소개  (0) 2013.05.25
Posted by 진격의 파파

댓글을 달아 주세요