[ JavaScript ] 자바스크립트 기본 문법 | jQuery 객체 | jQuery API | jQuery map

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

자바스크립트 기본 문법  ::  jQuery 객체란?

 

 

 

Query 함수의 리턴값으로,

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

 

 

jQuery 함수와 jQuery 객체의 차이는 분명하게 알아둘 필요가 있습니다.

 

jQuery 함수는 $() 를 의미하는 것이고,

 

 

jQuery 객체는 제이쿼리 함수의 리턴 값이 되는 것입니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  암시적 반복

 

 

jQuery 객체의 가장 중요한 특성은 암시적인 반복을 수행한다는 것입니다.

 

 

DOM과 다르게 jQuery 객체의 메소드를 실행하면,

선택된 엘리먼트 전체에 대해서 동시에 작업이 처리됩니다.

 

 

암시적 반복은 값을 설정할 때만 동작하는데,

값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환합니다.

 

 

 

 

자바스크립트 기본 문법  ::  체이닝

 

 

chainig이란 선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법입니다.

지난 포스팅에서 잠깐 언급 했었던 것 같은데, 예를 들어

 

 

$(li).css('color','red').css('text-decoration','underline')

 

 

위 코드와 같이, 연속적으로 작업을 처리할 수 있습니다.

 

여기서 작업은, color 를 red 로 바꾸는 작업과,

 

text-decoration 을 underline 으로 바꾸는 작업을 말합니다.

 

 

 

 

자바스크립트 기본 문법  ::  결과 조회

 

 

 

 

jQuery 객체에는 조회된 엘리먼트가 담겨 있습니다.

 

jQuery 객체는 일종의 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에

배열처럼 사용해서 엘리먼트를 가져올 수 있습니다.

 

 

아래의 코드를 살펴보도록 합시다.

 

 

 

<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>

 

 

 

 

 

한가지 주의할 것은 li[i]의 값은

해당 엘리먼트에 대한 jQuery 객체가 아니라 DOM 객체라는 것입니다.

 

따라서 jQuery의 기능을 이용해서 이 객체를 제어하려면 jQuery 함수를 이용해야만 합니다. 

 

 

 

 

 

 

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

 

 

 

위 코드는 li 태그를 가진 모든 DOM 객체의 color 를 red 로 바꾸는 코드입니다.

 

for 문을 사용했는데, 아래의 코드와 같은 방법으로도 조회된 결과를 열람할 수 있습니다.

 

 

 

 

<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)가 전달됩니다.

 

 

 

 

 

 

자바스크립트 기본 문법  ::  jQuery 객체 API

 

 

 

제어할 대상을 선택한 후에는 대상에 대한 연산을 해야합니다.

 

.css와 .attr은 jQuery 객체가 가지고 있는 메소드 중의 하나인데,

jQuery는 그 외에도 많은 API를 제공하고 있습니다.

 

 

더 자세한 내용은 아래 링크인 jQuery API를 참고하면 될 것 같습니다.

 

https://api.jquery.com

jQuery API Documentation

 

위 링크는 jQuery API 들의 설명이 나와있습니다.

 

설명은 영어지만, 바로 밑에 쉬운 예제들도 있으니 영어에 자신이 없으신 분돌 쉽게 이해할 수 있습니다.

 

 

배우는 단계에서 이것들을 살펴보는 것보다는, 필요할 때 찾아서 써보시는 것이

더 효율적인 것 같네요.

 

 

 

이번 포스팅은 여기서 마치도록 하겠습니다.