생활코딩

Coding Everybody

jQuery

토픽 생활코딩 > 클라이언트 > JavaScript > 웹브라우저 자바스크립트

라이브러리

자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.

jQuery

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jQuery의 효용은 후속 수업을 통해서 살펴보자.

jQuery의 사용

jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 한다. 아래는 jQuery를 로드하는 방법이다.

<!DOCTYPE html>
<html>
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
	jQuery( document ).ready(function( $ ) {
	  $('body').prepend('<h1>Hello world</h1>');
	});
	</script>
</body>
</html>

결과는 Body 태그 아래에 <h1>Hello world</h1> 코드가 만들어진다.

아래와 같이 jQuery( document ).ready(function( $ ) {}로 감싸는 것이 이상적이다.

jQuery( document ).ready(function( $ ) {
  $('body').prepend('<h1>Hello world</h1>');
});

하지만 필자는 코드의 양을 줄이기 위해서 그냥 예제 코드만 작성하겠다. 

$('body').prepend('<h1>Hello world</h1>');

참조

댓글

댓글 본문
  1. eunso
    완료
  2. 헤밍웨이
    220825 jQuery 동작 :)
  3. 임앤강
    2022-02-07 수강하였습니다.
  4. mary5544
    22.01.18 수강
  5. 드림보이
    2021.12.21. JQuery 파트 수강완료
  6. pmxsg
    2021.12.20 수강
  7. 경이
    211117 완료

    감사합니다
  8. labis98
    20210910 좋은 강의 감사합니다.
  9. 제이쿼리 스킵 나중에 공부할 것
  10. 박병진
    2020.12.03 완료
  11. 11/15
  12. anne
    완료
  13. nurunzii
    완료
  14. 정승옥
    완료
  15. 쑤우
    완료. 감사합니다~
  16. 10TB
    .
  17. Useok
  18. student
    그게 맞는 것 같습니다. 하지만 요즘은 $(function(){ })로 감싸는 게 일반적이더군요.
    대화보기
    • ㅎㅅㅁ
      200203 다시시작
    • 굼벵이
      완료
    • 2019-10-14 8:33am 완료
    • 정홍
      완료
    • 류석현
      수강완료~
    • 한창석
      아ㅡㅡㅡ아,,,옥스라 따랑해♥♥♥옥스라 따랑해♥♥♥옥스라 따랑해♥♥♥옥스라 따랑해♥♥♥
      대화보기
      • 미완성
        20190109
      • SlowStarter
        감사합니다!
      • 옥슬이
        본문 내용중에

        아래와 같이 jQuery( document ).ready(function( $ ) {}로 감싸는 것이 이상적이다. 에서

        아래와 같이 jQuery( document ).ready(function( $ ) {} )로 감싸는 것이 이상적이다. 라고 바꿔야하지 않을까요?
      • 아인
        덕분에 이해가 더 잘됩니다.
        대화보기
        • 생선과고양이
          20180425감사합니다
        • 코딩잘하고싶어요 ㅎ
          감사합니다.
          대화보기
          • An TaeHyeon
            18-01-24 수강완료!
            강의록 공유합니다 :)
            https://goo.gl/i9kUWg
          • 박인호
            12-27
            수강완료.
            앞으로 배울 jQuery란 녀석이 궁금해지는 수업이네요.
          • 수복
            감사합니다.
          • WorkaHolic
            반드시 입력해야죠 '-' 프로토콜(약속)이니
          • 아사다마오리족
            //code.jquery.com/jquery-3.2.1.min.js를
            http://code.jquery.com......로 변경하니까 됬는데
            http꼭입력해야하는건가요
          • 아사다마오리족
            jQuery( document ).ready(function( $ ) {
            $('body').prepend('<h1>Hello world</h1>');
            });
            를 했는데 왜 크롬부라우저에서는 인풋으로나올까요.. 저만그런거같은데
            <input type="button" id="hw" value="Hello world">
          • Sangmook Kim
            170728 완료
          • 넉살
            감사합니당 덕분에 로드되었네여 ㅎㅎ
            대화보기
            • crable
              감사합니다
            • 곰시티
              $(function() {
              $('body').prepend('<h1>Hello world1</h1>');
              });

              이렇게 해도 동일하네요..
            • matheios
              감사합니다.
            • handung_papa
              감사합니다! 이고잉님 존경합니다.!
            • 으힝힝
              키보드 뭐 사용하세요? 제발 알려주세요.
            • 나래
              감사합니다. 강의 잘보고 있습니다 !!
            • 유유
              감사합니다.
            • hyuna
              재미있습니다
            • tachyon
              감사합니다
            • yihsang
              jQuery의 문서보는 법을 계속 익혀 나가야 할 것 같습니다.
              감사합니다.
            • JustStudy
              2017.07.08 금
              고맙습니다 3.
            • JustStudy
              16.06.30
              고맙습니다 2.