웹브라우저 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. 유유
    감사합니다!
  2. Wj Kim
    감사합니다. (_._)
  3. 감사합니다
  4. tachyon
    감사합니다
  5. yihsang
    제어대상 접근은 크게 자바스크립트나 jQuert나 TagName, ClassName, Id
    세가지가 존재하는 것이군요.
    정말 감사드립니다.
  6. JustStudy
    2017.07.08 금
    고맙습니다 3.
  7. JustStudy
    2016.06.30
    고맙습니다 2,
  8. 김영민
    좋은강의 감사합니다~
  9. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  10. 이주환
    2016. 04. 27
    잘보고갑니다~!
  11. 해앵인
    예제 소스에 '&lt;'라고 되어 있는 부분은 '<'의 특수기호라고 검색해보니까 나오네요~
  12. JustStudy
    고맙습니다
  13. arachi
    감사합니다^^
  14. AMAZING
  15. WayneKing
    하트 하트~~~
  16. 감사합니다~
  17. Jaeyoon Kim
    $('$active').css('color', 'red').css('textDecoration', 'underline');
    부분에서 textDecoration 대신 text-decoration을 넣어도 되네요.
    같은 건가요? 아니면 다른건가요?
  18. Part Hyun
    너무너무 잘들었습니다 이고잉님 ^^
  19. 아이린
    잘봤습니다. 강의내용을 이해하기 쉽게 꼼꼼하게 설명해주셔서 좋네요~~!!^-^b
  20. 방랑자
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 로변경 하시면 됩니다.
    대화보기
    • cccc
      getting less participants;;; this is always what it is in general haha
    • Soori
      Element 중에는 Tag, Class, Id 등이 있습니다. 이중 특정 태그 이름에서 객체를 얻고(get) 싶으면 getElementsByTagName, 클래스 이름을 통해 객체를 얻고 싶으면 getElementsByClassName, Id 값을 통해 객체를 얻고 싶으면 getElementsById를 쓰는 것 같습니다.
      대화보기
      • 별이
        이 예제 동작안되시는 분들은 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        제이쿼리 소스 경로가 변경되어서 그렇습니다.
        경로를 변경하시거나 직접 다운받으셔서 소스경로 지정해주시기 바랍니다.
        그럼 잘 적용됩니다.
      • egoing
        같다고 보시면 됩니다.
        대화보기
        • 팽맨이러닝
          Tag 와 Element 가 무슨 차이가 있는 구분이 안 가네요.
          Tag가 Element 인 건지... (-ㅂ-;)
        • nosugar
          매개변수가 인자! 알겠습니다.:) 혹시 여유가 되시면... 선생님께서 개념설명때 해주시는 단어들 영어로 대응되는 말들을 한번만 훑어주시면 심화공부 하는이들에게도 많은도움이 될것 같습니다.^_^ 근데, 미지막 예제는 확실히 오류가 없는건가요??
          대화보기
          • egoing
            음 보통 인자는 함수의 매개변수의 값을 그리 불러요. 이해 안되실 듯 ㅠㅠ
            대화보기
            • nosugarinmycoffee
              그리고 마지막 예제가 작동하지 않는것 같습니다. 선생님 강의 대로 그대로 붙여넣기만 해서 파일만들어서 실행시켜보았는데, Execute버튼을 눌렀을때 제이쿼리가 작동하지 않습니다.( 밑에 댓글을 보니까, 제대로 작동한다고 하는데...li 요소들이 붉은색으로 변하지 않습니다.) 무엇이 잘못되었는지 가르쳐 주셨음 좋겠습니다. ^ ^:
            • nosugarinmycoffee
              제가, 혼자 자바스크립트를 공부할때, 한글로는 이해가 안되어서 영어로 설명된 책과 함께 보았는데, 역시나 너무 헷갈려서 많이 애먹었던 기억이있습니다. 이고잉님께서 새로 올려주신 이 강의에서 비로소 제대로 객체..객체화.의 개념에 대해서 알게되었습니다. 감사드립니다. 그런데 용어에 대해서 다시한번 확인해보고 싶은게 있습니다.. 영어로 object라고 하는것이 '객체'이고, attribute가 '인자'라고 생각하면 되나요?
            • 코코딩
              제이쿼리 제이쿼리.. 모두가 다 제이쿼리를 말할때
              도데체 제이쿼리가 뭔가 했는데.
              이게 결국은 자바스크립트를 함수화시켜놓은 라이브러리였었군요.
              고맙습니다.
              정말 덕분에 많은것들을 알게되는 요즘입니다.
              매번 신세집니다.
            • somdari
              네..그렇군요.. 마지막 예제 잘 동작합니다.. ^^;
              대화보기
              • egoing
                정보를 읽는 작업은 리턴 값이 제이쿼리 객체가 아니기 때문에 체이닝을 사용하지 못 합니다. 회수 제한은 없고 너무 복잡하게 사용하면 유지보수가 어려워지는 단점이 생깁니다. 마지막 예제가 작동하지 않나요? 모바일이라세 테스트를 못하고 있네요.
                대화보기
                • somdari
                  DOM으로 제어하는 코드와 jQuery 로 제어하는 코드를 일목요연하게 함께 볼 수 있는 구성이 참 좋습니다.
                  마지막 jQuery 제어 예제에서 chaining 에 제한이 있는 것인지요? 계속 . 으로 연결해서 사용할 수는 없을것 같고 chaining 횟수에 대한 권고 사항 같은 것이 있는건가요?
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기