jQuery 기타 References

 

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에 가면 많은 내용을 찾아볼 수 있습니다.

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

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