[DOM] jQuery 객체

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

 jQuery 객체란? 

jQuery 함수의 리턴값으로, jQuery 함수를 이용해서 선택한 element들에 대해서 처리할 작업을 property로 가지고 있는 객체다.

li.css('text-decoration','underline');

위와 같이, 인자가 두개일 경우는 text-decoration에 underline값을 넣겠다는 의미이다.

li.css('text-decoration');

하지만, 인자가 하나인 경우는 text-decoration의 정보를 가져오겠다는 의미이다.

---

 암시적 반복 

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

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

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

 

---

 chainig(체이닝) 

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

아래는 체이닝에 대한 예제이다.

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

---

 조회 결과 

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 객체라는 것이다.

 

하지만, DOM객체를 직접적으로 이용해서 css를 사용할 수 없기 때문에, jQuery 함수로 감싸서 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 객체가 선택한 element를 하나씩 순회한다.

이 때 첫번째 인자로 전달된 함수가 호출되는데 첫번째 인자로 element의 인덱스, 두번째 인자로 element의 객체(DOM)가 전달된다. 참고 

 

map은 다음 인자로 함수를 입력해야한다.

 

---

 jQuery 객체 API 

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

.css와 .attr은 jQuery 객체가 가지고 있는 메소드 중의 하나인데, jQuery는 그 외에도 많은 API를 제공하고 있다. 이에 대한 내용은 jQuery API를 참고하자. ( https://api.jquery.com )