웹브라우저 JavaScript

제어 대상을 찾기 (jQuery)

jQuery를 이용해서 객체를 조회하는 방법에 대해서 설명합니다.

jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다. jQuery는 객체를 조회할 때 CSS 선택자를 이용한다.

jQuery의 기본문법

jQuery의 기본 문법은 단순하고 강력하다. 

$()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다.

jQuery 사용 예제

 
 

아래는 DOM을 이용했을 때와 jQuery를 이용했을 때를 비교한 것이다. 아래 코드는 복잡하다. 실행결과만 확인하자.

<!DOCTYPE html>
<html>
<head>
    <style>
	#demo{width:200px;float: left; margin-top:120px;}
	#execute{float: left; margin:0; font-size:0.9em;}
	#execute{padding-left: 5px}
	#execute li{list-style: none}
	#execute pre{border:1px solid gray; padding:10px;}
	</style>
</head>
<body>
<ul id="demo">
	<li class="active">HTML</li>
	<li id="active">CSS</li>
	<li class="active">JavaScript</li>
</ul>
<ul id="execute">
	<li>
		<pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i&lt;lis.length; i++){
	lis[i].style.color='red';	
</pre>
		<pre>
$('li').css('color', 'red')		</pre>
		<input type="button" value="execute" onclick="$('li').css('color', 'red')" />
	</li>
	<li>
		<pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i &lt; lis.length; i++){
	lis[i].style.color='red';	
}</pre>
		<pre>
$('.active').css('color', 'red')</pre>
		<input type="button" value="execute" onclick="$('.active').css('color', 'red')" />
	</li>
	<li>
		<pre>
var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre>
		<pre>
$('$active').css('color', 'red').css('textDecoration', 'underline');
		</pre>
		<input type="button" value="execute" onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" />
	</li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>

 

댓글

댓글 본문
  1. 헤밍웨이
    220825 완료!
  2. 임앤강
    2022-02-08 감사합니다~
  3. mary5544
    22.01.18 수강
  4. pmxsg
    2021.12.20. 수강
  5. 드림보이
    2021.12.17. 제어 대상을 찾기 (jQuery) 파트 수강완료
  6. 경이
    211117 완료
    감사합니다
  7. labis98
    20210910 좋은 강의 감사합니다.
  8. 체이닝(Chaining) - 선택한 요소에 메서드를 연속적으로 사용할 수 있는데, 이를 마치 체인이 엮인 모양과 같다 하여 붙여진 이름 (출처: http://m.blog.naver.com......340)
  9. 박병진
    감사합니다. 2020.12.03 완료
  10. anne
    완료
  11. nurunzii
    완료
  12. 정승옥
    완료
  13. 한강
    Jquery 사용법 잘 배웠습니다~~^^!
    200629
  14. 쑤우
    완료. 감사합니다~
  15. Useok
  16. Gritter
    감사합니다.
  17. ㅎㅅㅁ
    200203 다시시작
  18. 굼벵이
    완료
  19. Hyun
    ZZYYTT님 바이러스파일 퍼트리지마세요.
    강의인줄알고 들어갔는데 바이러스파일이네요.
  20. 2019-10-14 10:18am 완료
  21. 류석현
    수강완료.
  22. 류석현
    css에도 jQuery를 쓰면 좋나요?
    효율성 차이는 못느끼겠는데요...
    대부분 프로그래밍 하실때 css코드들에게도 jQuery를 쓰나요?
  23. 미완성
    20190109
  24. JuicyFresh
    감사합니다.
  25. creativedesigner
    아이디값은 왜 달러인가 하고 의아했는데 영상보니 오타였네요 ㅎ
  26. SlowStarter
    감사합니다!
  27. 생선과고양이
    20140425 감사합니다
  28. 코딩잘하고싶어요 ㅎ
    18-03-04 수강완료
  29. An TaeHyeon
    18-01-25 수강완료
    강의록 공유합니다.
    https://goo.gl/JoDpfP
  30. 박인호
    12-27
    수강완료.
    chaining을 통해 중복을 제거하는 방식이 인상깊네요.
    jQuery는 DOM을 통하면 여러줄을 거쳐서 해야할 로직들을
    간단하게 할 수 있도록 도와주는 멋진 녀석이네요.
  31. 개발자가 되고싶은 고등학생
    제이쿼리, 넘나 편한 것
  32. 수복
    감사합니다.
  33. 신현정
    javascript랑 jQuery랑 헛갈렸었는데, egoing님 덕분에 조금 구분이 된거 같아요- 감사합니다.
  34. Sangmook Kim
    170728 완료
  35. lobster
    감사합니다. Typo가 있네요.
    23 line에 '}'가 빠졌네요. 45 line에 $('#active') -->: $를 #로 변경
  36. 박지수
    이고잉님 오늘도 찬사를 보내며, 그저 감사합니다.
  37. crable
    감사합니다.
  38. 고베베
    jQuery 스타뚜!!
  39. jgatsby
    $('cssSeletor').css('attribute', 'value');
  40. Byeong Heon Lee
    감사합니다~
    새해 복 많이 받으세요~
    저 투입될때 기부하고 갈께요~
    좋은 강의 너무 감사합니다~
    2017년 새해 복 많이 받으세요~^^
  41. 유유
    감사합니다!
  42. Wj Kim
    감사합니다. (_._)
  43. hyuna
    감사합니다
  44. tachyon
    감사합니다
  45. yihsang
    제어대상 접근은 크게 자바스크립트나 jQuert나 TagName, ClassName, Id
    세가지가 존재하는 것이군요.
    정말 감사드립니다.
  46. JustStudy
    2017.07.08 금
    고맙습니다 3.
  47. JustStudy
    2016.06.30
    고맙습니다 2,
  48. 김영민
    좋은강의 감사합니다~
  49. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  50. 이주환
    2016. 04. 27
    잘보고갑니다~!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기