안녕하세요!! 

이번에 포스팅할 jQuery Mobile 내용은 아이콘 입니다.

jQuery Mobile 은 아주 쉽게 아이콘을 생성할 수 있습니다.  오늘 그 부분에 대해서 알아보겠습니다.

 

우선 아래 간단한 소스를 보면서 설명드리겠습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="content">
  <a href="#" data-role="button" data-icon="arrow-l">Left Arrow Button</a>
  </div>
</div>

</body>
</html> 

// 위 구문에서 중요하게 보아야 할 곳은 붉은색으로 표시된 부분입니다. data-icon="arrow-l" 입니다. 여기서 l 은 left 의 줄임말이라고 보면 되겠습니다. 위 구문을 실행하면 아래와 같은 화면이 나오게 됩니다.

 

// 위 그림을 보면 좌측에 아이콘이 생긴것을 확인할 수 있습니다. 

 

이렇게 아이콘을 만들고 싶은 경우 data-icon 을 이용하여 사용하고 싶은 아이콘을 적어주기만 하면 됩니다.

아래 내용은 기타 아이콘들에 대한 내용입니다. 이미지와 함께 설명하겠습니다.

 

 

사용하고 싶은 아이콘을 선택하여 적어주면 됩니다.

기본적인것만 숙지하시고 나머지는 굳이 다 외울 필요는 없을듯 하고 이런게 있구나 정도로 생각하세요~

사용방법은 위 소스에 나와 있으니 한번 테스트 해보시기 바랍니다.

 

그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되세요~

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

jQuery Mobile 아이콘  (0) 2013.11.07
jQuery Events hover(), focus(), blur()  (0) 2013.05.10
jQuery events mouseenter(), mouseleave(), mousedown(), mouseup()  (0) 2013.05.10
jQuery Events ( click(). dbclick() )  (0) 2013.05.10
jQuery Selectors  (0) 2013.05.08
jQuery 기초  (0) 2013.05.08
Posted by 진격의 파파

댓글을 달아 주세요

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 신고  댓글주소  수정/삭제  댓글쓰기

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

 

예전에는 보통 복잡한 자바스크립트 소스를 사용하여 메뉴 구성을 만들어 사용했었습니다. 하지만 jQuery 가 나온 이후 간편하게 jQuery의 라이브러리를 사용하여 더 화려한 효과를 낼 수 있습니다.

 

아래 소스와 이미지를 살펴 보시기 바랍니다.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="
http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="
http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="
http://jqueryui.com/resources/demos/style.css" />
<script> 
$(function() {
 $( "#menu" ).menu();
}); 
</script>
<style> 
 .ui-menu { width: 150px; } 
</style>
</head>
<body>
<ul id="menu"> 
 <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> 
 <li><a href="#">Ada</a></li> 
 <li><a href="#">Adamsville</a></li> 
 <li><a href="#">Addyston</a></li> 
 <li><a href="#">Delphi</a>
  <ul>
   <li class="ui-state-disabled"><a href="#">Ada</a></li>
   <li><a href="#">Saarland</a></li>
   <li><a href="#">Salzburg</a></li>
  </ul>
 </li>
 <li><a href="#">Saarland</a></li>
 <li><a href="#">Salzburg</a>
  <ul>
   <li><a href="#">Delphi</a>
    <ul>
     <li><a href="#">Ada</a></li>
     <li><a href="#">Saarland</a></li>
     <li><a href="#">Salzburg</a></li>
    </ul>
   </li>
   <li><a href="#">Delphi</a>
    <ul>
     <li><a href="#">Ada</a></li>
     <li><a href="#">Saarland</a></li>
     <li><a href="#">Salzburg</a></li>
    </ul>
   </li>
   <li><a href="#">Perch</a></li>
  </ul>
 </li>
 <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>
</body>
</html>

 

 

// 깔끔한 3단 메뉴구성을 할 수 있는 소스 입니다. CSS를 조금 다룰줄 안다면 텍스트, 이미지 구성등 더 응용을 할 수 있지 않을까 생각합니다.

 

출처 : http://jqueryui.com/ 

Posted by 진격의 파파

댓글을 달아 주세요

 

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 진격의 파파

댓글을 달아 주세요

 

 

addClass()
선택한 요소에 하나 이상의 클래스 이름을 추가합니다.

after()
선택된 요소 뒤에 내용 삽입 합니다.

append()
선택된 요소의 끝에 내용 삽입 합니다.

appendTo()
선택된 요소의 끝에 HTML 요소를 삽입 합니다.

attr()
선택된 요소의 집합에서 요소의 해당하는 속성값을 반환합니다.

before()
선택된 요소 전에 콘텐츠 삽입합니다.

clone()
선택한 요소를 복사합니다.

css()
선택된 요소에 대해 하나 이상의 Style 속성값을 설정하거나 반환합니다.

detach()
선택한 요소를 지웁니다.

empty()
선택된 요소의 모든 자식 노드 및 콘텐츠를 제거합니다.

hasClass()
선택한 요소에 대해 특별한 class name이 있는지 검사합니다.

height()
선택한 요소의 높이 값을 설정합니다.

html()
선택한 요소의 내용을 설정하거나 반환합니다.

innerHeight()
요소의 높이를 반환합니다. (includes padding, but not border)

innerWidth()
요소의 넓이를 반환합니다. (includes padding, but not border)

insertAfter()
선택된 요소 뒤에 HTML 요소를 삽입합니다.

insertBefore()
선택된 요소 HTML 요소를 삽입합니다.

offset()
선택한 요소의 오프셋 좌표를 설정하거나 반환합니다. (relative to the document)

offsetParent()
첫번째 위치한 부모 요소를 반환합니다.

outerHeight()
요소의 높이를 반환합니다. (includes padding and border)

outerWidth()
요소의 넓이를 반환합니다. (includes padding and border)

position()
요소의 위치를 ​​(부모 요소를 기준으로) 반환 합니다.

prepend()
선택한 요소의 시작 부분에 내용을 추가합니다.

prependTo()
선택한 요소의 시작 부분에 HTML 내용을 추가합니다.

prop()
선택한 요소의 속성 또는 값을 설정하거나 반환합니다.

remove()
선택한 요소를 지웁니다. (including data and events)

removeAttr()
선택한 요소에 대하여 하나 이상의 속성을 제거합니다.

removeClass()
선택한 요소에 대하여 하나 이상의 class 를 제거합니다.

removeProp()

prop()의 설절된 값을 지웁니다.


replaceAll()
새로운 HTML 요소와 선택 요소를 대체 합니다.

replaceWith()
새로운 내용으로 선택된 요소를 대체 합니다.

scrollLeft()
선택한 요소의 가로 스크롤 위치를 설정하거나 반환합니다.

scrollTop()
선택한 요소의 수직 스크롤 위치를 설정하거나 반환합니다.

text()
선택한 요소의 text 내용을 설정하거나 반환합니다.

toggleClass()
선택한 하나 이상의 클래스를 추가/제거 합니다.

unwrap()
선택한 요소의 부모 요소를 제거합니다.

val()
선택한 요소의 속성값을 설정하거나 반환합니다. (for form elements)

width()
선택한 요소의 넓이값을 설정하거나 반환합니다.

wrap()
각각의 선택된 요소를 감싸줍니다.

wrapAll()
선택된 요소 모두를 감싸줍니다.

wrapInner()
각각의 선택된 요소의 내용을 감싸줍니다.

이미 이전 포스팅에서 일정부분은 어떻게 사용되는지 설명과 예시가 있습니다. 하지만 포스팅에 포함되지 않는 method 도 있습니다. 기본적으로 많이 사용되는 method 위주로 포스팅을 했기때문에 혹시라도 설명이 부족한 부분이 있다면 이해바랍니다. ^^

'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 진격의 파파

댓글을 달아 주세요

 


animate()
선택한 요소 사용자 지정 애니메이션을 실행

clearQueue()
선택한 요소에서 아직 실행되지 않는 모든 함수 기능을 제거

delay()
선택된 요소 대기중인 모든 기능에 대한 딜레이(지연)


dequeue()
선택한 요소에 대한 다음 대기 함수를 실행

fadeIn()
선택한 요소에 대하여 fadein

fadeOut()
선택한 요소에 대하여 fadeout

fadeTo()
선택한 요소에 대하여 투명도를 설정


fadeToggle()
선택한 요소에 대하여 fadeIn 과 fadeOut 함수를 둘다 실행

finish()
선택한 요소에 대하여 animation을 제거하고 중지함

hide()
선택한 요소에 대하여 숨김


queue()
선택한 요소에서 대기중인 기능을 보여줌

show()
선택한 요소를 보여줌


slideDown()
선택한 요소에 대하여 아래로 슬라이드함

slideUp()
선택한 요소에 대하여 위로 슬라이드함

slideToggle()
선택한 요소에 대하여 위/아래 슬라이드 함

stop()
선택한 요소에 대해 현재 실행중인 애니메이션을 중지

 

toggle()
선택한 요소에 대하여 hide/show 두 기능을 실행

 

일단 함수에 대하여 간략히 설명하였지만 jQuery 포스팅 jQuery effect에 대부분의 내용이 있습니다.

더 자세히 알고 싶은 분들은 jQuery Effects 를 참조하시기 바랍니다.

'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 진격의 파파

댓글을 달아 주세요

 

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 진격의 파파

댓글을 달아 주세요