웹브라우저 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. 헤밍웨이
    220825 1회차 완료!
  2. 임앤강
    2022-02-09 감사합니다 ~
  3. 드림보이
    2021.12.22. jQuery 객체 파트 수강완료
  4. pmxsg
    2021.12.21. 수강
  5. labis98
    20210910 좋은 강의 감사합니다.
  6. 제이쿼리 스킵
  7. anne
    완료
  8. 한강
    Jquery 객체 잘 배웠습니다~~^^!
    200630
  9. 김진욱
    완료
  10. 쑤우
    완료. 감사합니다~
  11. Useok
  12. ㅎㅅㅁ
    200204 restart
  13. 굼벵이
    완료
  14. 모든일이일사천리
    완료 : 19-11-13 9PM
  15. 2019-10-14 7:53pm 완료
  16. jess
    감사합니다.
  17. 미완성
    20190109
  18. JuicyFresh
    감사합니다.
  19. 김수
    아...너무어려ㅜㅜ젇 진심
  20. 순덕이
    20180722 Complete
  21. 옥슬이
    너무 어렵다
  22. 생선과고양이
    20180426 감사합니다
  23. console에서 var li = $('li'); 를 입력하면
    undefined
    여기서 다시
    li 를 입력하면
    n.fn.init(3) [li, li, li, prevObject: n.fn.init(1), context: document, selector: "li"]

    이렇게 뜨는데 어떻게 해야하나요??
  24. An TaeHyeon
    18-01-25 수강완료!
    강의록 공유합니다 :)
    https://goo.gl/Y4mqh3
  25. 박인호
    12-28
    수강완료.
  26. 개발자가 되고싶은 고등학생
    감사합니다.
  27. 수복
    감사합니다.
  28. Sangmook Kim
    170728 완료
  29. crable
    감사합니다
  30. BANIP
    jquery 함수는 $("li")와 같이 달러로 시작하는 형태의 jquery 고유의 표현 방식이다.
    jquery 객체 jquery 함수에서 선택한 것에 해당하는 엘리먼트들의 정보를 가져올 수 있으며 작업 할 수 있는 메서드 또는 프로퍼티들을 사용 할 수 있게 한다.
    jquery 함수 사용 과정에서 css나 vale, attr과 같은 요소를 접근하는 메서드를 사용할 때 파라미터가 한개일 시 인자를 속성으로 가지고 있는 속성값을 리턴해준다. 파라미터가 두개이면 첫번째 인자와 같은 이름의 속성의 속성값을 두번째 인자로 대입하게 된다.
    속성값을 설정할때에는 모든 요소를 설정 할 수 있으나 가져올때는 첫번째 요소밖에 가져올 수 없다. 또한 jquey 체이닝이란것이 존재하여 리턴값이 존재하지 않는 메서드를 대상으로 다른 메서드들을 연결하여 사용하는것이 가능하다.
    dom객체를 jquery함수의 인자값으로 전달해주는것으로 jquery객체로 전환이 가능하다. $( document.querySelectorAll("p") )로 셀렉터를 설정하면 $("p")와 같은 값을 얻을 수 있다.
    jquey객체는 유사 배열이기때문에 $("li").length로 엘리먼트의 총 갯수를 추출할 수 있고 $("li")[index]로 특정 위치의 요소를 가져올 수 있다. 하지만 이렇게 가져온 객체는 jquery객체가 아니기 때문에 eq(0)메서드를 사용한다.
    jquery는 자체적으로 지원하는 foreach 메서드인 each(), map()를 제공한다. 인자는 콜백함수로 받으며 콜백함수의 첫번째 인자는 해당 요소의 index, 두번째 인자는 해당 객체를 dom 오브젝트 형태로 반환한다. 함수 내에서 $(this)로 현재 객체에 접근하는것이 가능하다.
    jquery의 프로퍼티와 메서드들을 배우기위해 레퍼런스 역할을 하는 jquery api을 참조하도록 한다.
  31. ckocko
    감사합니다! 다음 영상들도 보면서 어서 감을 잡아야겠네요 늘 영상들 감사히 보고 있습니다 좋은 하루 되세요
    대화보기
    • egoing
      HTMLElement은 브라우저에 원래 있는 기능이고요. jquery는 이 기능을 이용해서 좀 더 쉽게 브라우저를 제어할 방법을 제공합니다. HTMLElement는 그래서 native 기능이라고 할 수 있죠.
      대화보기
      • ckocko
        HTMLElement, Collection은 제이쿼리와 별개의 존재였군요 ㅠㅠ 지금까지 쭉 강의 보다가 오늘 저부분을 듣고 잠시 멘붕이 왔습니다 두번째 영상이 헷갈리는데 $('').css('',''); 라는 제이쿼리 문법은 결국은 돔 객체를 제이쿼리 기능을 쓰고 간략화하려고 하다보니 저렇게 생긴거라고 이해하면 될까요?

        아니면 첫번째 영상에서 콘솔에서는 첫번째 등장하는 앨리먼트 값만을 반환해서 확인할 수 있었는데 나머지 등장하는 앨리먼트 값도 확인하기 위해 하는건가요? ㅠ 앨리먼트 정보로 조회결과를 열람하는 목적이 앞의 영상들과 뭐가 차이나는지 잘 감이 안옵니다
      • 폭스킴
        callback 함수!
      • 나래
        감사합니다.
      • 유유
        감사합니다.
      • phk707kr@gmail.com
        체이닝에 오타가 있습니다.
      • hyuna
        감사합니다.
      • tachyon
        감사합니다
      • 우욱진
        감사합니다~
      • yihsang
        고맙습니다.
        계속 잘 듣겠습니다.
      • 10년 경력단절되어 JQuery 이름만 들어봤던 사람인데,
        이렇게 훌륭한 강의를 들을수 있게 되어 너무 감사합니다.
      • JustStudy
        2017.07.08 금
        고맙습니다 3.
      • JustStudy
        2016.06.30
        고맙습니다 2.
      • Welin
        감사합니다:)
      • 온달장군
        강좌 잘보고 갑니다. 감사합니다.
      • 이주환
        2016. 04. 27
        잘보고갑니다~!
      • JustStudy
        고맙습니다
      • 태우
        정말 감사합니다.
        매번 볼때마다 감동입니다.
      • ㄱ ㅅ ㅈ
        감사합니다 쉼없이 지금까지 들어쓴ㄴ데도, 앞뒤 헷갈림 없이 이해가 되네요