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

  1. 2013.06.07 jQuery 기타 References
  2. 2013.06.04 jQuery HTML / CSS 함수 Reference
  3. 2013.05.31 jQuery Effect 함수들
  4. 2013.05.15 jQuery Effects - Animation

 

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

댓글을 달아 주세요

 

 

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

댓글을 달아 주세요

jQuery Animation은 애니메이션 효과를 만들 수 있습니다.

기본적인 문법은 $(selector).animate({params},speed,callback); 사용합니다.

 

animate() 간단한 속성

animate()로 CSS속성을 정의할 수 있습니다.

"slow", "fast", milliseconds 로 시간을 정의할 수 있습니다.

간단한 사용 방법은 아래 구문을 확인해주세요. <div> 의 내용을 왼쪽으로 250px 이동하는 내용입니다.

$("button").click(function(){
$("div").animate({left:'250px'});
});

관련예제

<!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(){
$("div").animate({left:'250px'});
});
});

</script>
</head>

<body>
<button>애니메이션 효과</button>
<p>CSS를 정의하여 좌측으로 250px 만큼 div 값을 이동합니다!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>


 

 


// 이미지에서 확인되듯이 "애니메이션 효과" 버튼을 클릭하면 사각형이 좌측으로 250px 이동된 모습을 확인할 수 있습니다.

 

animate() 의 여러가지 속성

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

// 좌측으로 250px 이동하고, opacity 0.5는 이미지를 0.5 만큼 투명도하게 하는것을 말합니다.. 즉 "50% 이미지를 투명하게 해라"는 뜻입니다. 값이 0에 가까울수록 투명도는 커지게 됩니다. 그리고 height, width는 높이와 넓이를 150px 만큼 주겠다는 의미 입니다. 현재 크기가 100이니까 150만큼 커지게 됩니다.

관련예제

<!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(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});

</script>
</head>

<body>
<button>애니메이션 효과</button>
<p>좌측으로 250px 이동하고 투명도를 0.5를 주며, 높이와 넓이를 150px에 하라!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

 

 

 

// 위 이미지처럼 CSS의 여러가지 속성값을 가지고 컨트롤할 수 있습니다.

 

animate() 의 상대값

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

// 좌측으로 250px 이동하고, 높이와 넓이를 100px 만큼 더하라는 의미 입니다. 즉 버튼을 계속 클릭 할수록 이미지는 점점더 커지게 됩니다. 왜냐하면 100px씩 계속 값이 증가되니까요.

기본코딩은 위의 예제를 보면 되고 상대값 설정부분만 바꾸어서 작성해보시기 바랍니다.

관련이미지


 

 

 



// 이미지처럼 사각형의 크기가 좌측으로 250px 이동했고 점점 100px씩 증가되는 모습을 볼 수 있습니다.

 

animate() 의 기타 속성


아래 구문 처럼 값을 "show", "hide", "toggle" 처럼 줄수도 있습니다.

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

// 마찬가지 기본 코딩은 같으며 height:'toggle' 을 입력하여 바꿔보시기 바랍니다.

관련 이미지

 

 

 

// 이미지를 보는것처럼 사각형 영역이 나타났다 사라졌다 하게 합니다. toggle의 정의는 이전 내용에서 여러번 정의된바 있으니 생략하겠습니다. 혹시나 toggle에 대해 모르시는 분들은 이전 내용을 봐주시면 됩니다 ^^

animate() 의 고급기능

$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

// 일단 var 변수값을 선언하는 명령어입니다. 즉 var div=$("div"); div에 $("div")을 대입시키라는 의미입니다. 그렇게 한 이유는 코딩을 줄여주는 역할도 할 수 있고, 하나의 선언으로 여러개를 한꺼번에 처리하니 손쉽게 코딩을 할 수도 있겠죠.

어쨋든 위의 의미는 무엇인고 하니 일단 height 300px 와 opacity 0.4가 나오는데 위에서도 말했듯이 height(높이)를 300px을 주고 0.4만큼 투명도를 주라는 의미입니다. 아래 코딩도 마찬가지로 해석하면 됩니다. 이렇게 되면 div 내용이 4번을 움직이게 됩니다.

관련 이미지


 

 

 

 

// "애니메이션 효과" 버튼을 클릭하면 위 그림처럼 효과를 볼 수 있습니다. 이미지로만 보면 딱딱 끊어지는 느낌이 있지만 직접 코딩하여 구현을 해보면 자연스럽게 바뀌는 현상을 볼 수 있습니다.

또 다른 예제

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

// 좌측으로 100px 이동하고 fontSize 즉 글자 크기를 3em을 주는 의미 입니다. 그리고 옆에 slow 옵션이 추가 되어 있는데 말 그대로 느리게 하라는 의미입니다. "fast"값을 주어 빠르게 할수도 있겠죠.

관련 이미지

 

 

 



// animate()를 이용하여 여러가지 애니효과를 줄수 있습니다. 위 예제 말고도 응용하여 여러가지 재미있는 애니메이션 효과를 만들어보시기 바랍니다 ^^

다음장에서는 jQuery stop(), callback(), chaining() 관련 함수에 대해서 알아보겠습니다.

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

jQuery stop(),Callback,Chaining  (0) 2013.05.16
jQuery Effects - Animation  (0) 2013.05.15
jQuery Effects - Sliding  (0) 2013.05.14
jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo()  (0) 2013.05.13
jQuery hide(), show(), toggle()  (0) 2013.05.13
Posted by 진격의 파파

댓글을 달아 주세요