JQuery 객체

JQuery 객체

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

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

 엘리먼트를 가져올 수 있다.

 - 암시적 반복

* DOM과는 다르게 JQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다.

 암시적 반복은 값을 설정할 때만 동작한다. 값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환한다.

 - 체이닝

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

 - 조회된 결과 열람

1. 엘리먼트 조회

<script src="http://code.jquery.com/jquery-latest.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>

2. JQuery를 이용해 DOM 객체 제어

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

* li[i]의 값은 JQuery 객체가 아니라 DOM 객체이기 때문에 JQuery로 제어하려면 JQuery 함수를 사용한다.

3. map() 사용

<ul>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
</ul>
<script src="http://code.jquery.com/jquery-latestjs"></script>
<script>
    var li = $('li');    //Jquery객체를 변수 li에 담음.
    li.map(function(index, elem){    //mpa에 함수를 인자로 전달
        console.log(index, elem);
        $(elem).css('color', 'red');
    })
</script>

* map 은 JQuery 객체의 멜리먼트를 하나씩 순회한다. 이 때 첫번째 인자로 전달된 함수가 호출되는데 

 첫번째 인자로 멜리먼트의 인덱스, 두번째 인자로 엘리먼트 객체(DOM)이 전달된다.

* index : 0부터 시작하는 색인, elem : <li>html</lt>