jQuery 객체에 대해 알아봅시다.

이번 포스팅은 제이쿼리 객체에 대해 알아보도록 하겠습니다.

 

jQuery객체란? 

 

jQuery함수의 리턴값으로 jQuery함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체이다.

 

암시적 반복에 대해 살펴보자면 jQuery객체의 가장 중요한 특성은 암시적인 반복을 수행한다는 것이다. DOM과 다르게 jQuery객체의 메서드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다. 암시적 반복은 값을 설정할 때만 동작합니다. 값을 가져올 때는 선택된 엘리먼트 중 첫 번째에 대한 값만을 반환한다. 이에 대한 내용은 아래의 예제를 통해 살펴보겠습니다.

 

더불어 체이닝이라는 방법도 간단히 설명하자면 체이닝(Chaning)이란 선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법입니다.

 

<ul>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    console.log($('li').length);
    console.log($('li')[0]);
    var li = $('li');
    for(var i=0; i<li.length; i++){
        console.log(li[i]);
    }
</script>

jQuery객체에는 조회된 엘리먼트가 담겨 있다. jQuery객체는 일종의 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에 배열처럼 사용해서 엘리먼트를 가져올 수 있다.

 

한 가지 주의할 것은 li [i]의 값은 해당 엘리먼트에 대한 jQuery객체가 아니라 DOM 객체라는 것이다. 따라서 jQuery의 기능을 이용해서 이 객체를 제어하려면 jQuery함수를 이용해야 합니당.

 

for(var i=0; i<li.length; i++){
    $(li[i]).css('color', 'red');
}

이런 식으로 말이죠

 

그리고 map()에 대해서도 설명드리겠습니다.

우선 예제를 한번 보도록 하죠

 

<ul>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    var li = $('li');
    li.map(function(index, elem){
        console.log(index, elem);
        $(elem).css('color', 'red');
    })
</script>

 

map은 jQuery 객체의 엘리먼트를 하나씩 순회한다. 이때 첫 번째 인자로 전달된 함수가 호출되는데 첫번째 인자로 엘리먼트의 인덱스, 두 번째 인자로 엘리먼트 객체(DOM)가 전달됩니다.

 

참조하는 링크를 하나 달아드릴게요

 

https://api.jquery.com/map/

.map() | jQuery API Documentation

여기까지가 오늘 제가 공부한 내용입니다. 다음에는 element 객체에 대해서 공부하고 포스팅하도록 하겠습니다.