웹브라우저 JavaScript

jQuery 객체

jQuery 객체란?

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

암시적 반복

jQuery 객체의 가장 중요한 특성은 암시적인 반복을 수행한다는 것이다. DOM과 다르게 jQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다.

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

체이닝

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

조회 결과

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');
}

아래와 같은 방법으로 조회된 결과를 열람할수도 있다. 

<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

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다.
  2. phk707kr@gmail.com
    체이닝에 오타가 있습니다.
  3. 감사합니다.
  4. tachyon
    감사합니다
  5. 우욱진
    감사합니다~
  6. yihsang
    고맙습니다.
    계속 잘 듣겠습니다.
  7. 10년 경력단절되어 JQuery 이름만 들어봤던 사람인데,
    이렇게 훌륭한 강의를 들을수 있게 되어 너무 감사합니다.
  8. JustStudy
    2017.07.08 금
    고맙습니다 3.
  9. JustStudy
    2016.06.30
    고맙습니다 2.
  10. 감사합니다:)
  11. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  12. 이주환
    2016. 04. 27
    잘보고갑니다~!
  13. JustStudy
    고맙습니다
  14. 태우
    정말 감사합니다.
    매번 볼때마다 감동입니다.
  15. ㄱ ㅅ ㅈ
    감사합니다 쉼없이 지금까지 들어쓴ㄴ데도, 앞뒤 헷갈림 없이 이해가 되네요
  16. 홀리피셔맨
    44살에 웹을 처음 접하는 개발자입니다.
    강의 정말 고맙게 잘 듣고 있습니다.
  17. 스눕
    재능기부 하시는건가요?? 이리 훌륭한 강의를 무료로.. ㅠㅠ
    완전 '심봤다!' 입니다. 감사감사
  18. 코딩!
    감사합니다
  19. jerry
    좋은 강의 감사합니다.
  20. 메로
    잘보았습니다 ^^
  21. 아이린
    너무너무 잘 보았습니다.^-^b 최고 최고!!!
  22. 아쿠아
    잘보았어요^^
  23. 규빈이아빠
    명강의 입니다^^
  24. 비졀리
    감사합니다. 잘보고 있습니다.
  25. Daniel
    강의 짱이네요 -0-b 존경해요 ^^
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기