웹브라우저 JavaScript

jQuery

라이브러리

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

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. 굼벵이
    완료
  2. 2019-10-14 8:33am 완료
  3. 정홍
    완료
  4. 류석현
    수강완료~
  5. 한창석
    아ㅡㅡㅡ아,,,옥스라 따랑해♥♥♥옥스라 따랑해♥♥♥옥스라 따랑해♥♥♥옥스라 따랑해♥♥♥
    대화보기
    • 미완성
      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.
          • 명지대학교 컴퓨터공학과
            달고뉴님 감사합니다 ^- ^
          • 달고뉴
            구글 CDN도 있네요~ 저는 이걸 썼어요.
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
          • 이주환
            2016. 04. 27
            잘보고갑니다~!
            jQuery는 정말 편리하지만 js를 소홀히 해서는 안됩니다.
            그래서 저는 다시 js를 복습하고 있습니다.
          • Halora
            감사합니다ㅎㅎㅎ
            대화보기
            • JustStudy
              고맙습니다
            • 호눅스
              jquery 홈페이지에서는

              $( document ).ready(function() {
              //...
              });

              이렇게 되어 있던데
              jQuery( document ).ready(function( $ ) {
              //...
              });

              과 같은 의미인가요?
            • 강병태
              강의 정말 잘듣고있습니다
              제가 원하던 강의가 이곳에 모두있어 정말 좋습니다

              html 입력하고 tap키를 누르면

              <!DOCTYPE html>
              이문장은 안뜨는게 정상인가요...?
            • WayneKing
              아... 감동
              맨 처음 이클립스 쓸때 Ctrl+ space 를 눌렀을 때가 생각나네요.
            • 고고
              가독성도 물론 좋아지겠지만(코드 양이 확줄어서),
              jQuery를 쓰는 가장 큰 이유는 자주쓰는 기능들을 쓸때마다 일일히 코딩하지 않고 jQuery를 통해서 쉽게 사용할 수 있다는 점입니다.

              위에서 code.jquery.com/jquery-1.11.0.min.js 안에 자주쓰이는 그 기능들이 코딩되어있죠.
              저희는 그걸 편하게 불러와서 쓰면 되는겁니다.
              대화보기
              • 코딩!
                jquery는 자바스크립트를 가독성 좋게 바꿔준거라고 이해하면 되려나요?
                아직은 뭔진 잘 모르겠지만 자바스크립트와 같은 기능을 가진 라이브러리라고 이해하면 될 것 같네요 ㅎㅎ
              • jerry
                좋은 강의 감사합니다.
              • 민은기
                $(document).ready(...)하는곳도 있던데
                $가 jQuery 객체를 나타내는 건가요?
              • 머머
                CDN안되길래 댓글남기려 했는데 안되는분들이 많네요.
                상대경로로 지정해주어 해결했는데 http:붙이면 되는군요.
              • sssssqew
                맨 마지막에 추가한 HTML 코드가 가장 상위에 추가되네요 ㅎㅎ
              • ㅎㅎ
                //code.jquery.com/jquery-1.11.0.min.js

                저두 요걸

                http://code.jquery.com.......js

                이걸로 바꾸니 되네요
              • 유형찬
                감사합니다.
              • 김성희
                빠른 대응에 감사감사 드립니다.
                <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> or
                <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
                이렇게 하니까 되네요.^^;
                왜 제 컴에선 //code.. 가 제대로 작동하지 않았을까요?
                대화보기
                • egoing
                  만약 안되면 코드를 아래와 같이 변경해주세요..

                  <script src="https//code.jquery.com/jquery-1.11.0.min.js"></script>
                  대화보기
                  • 김성희
                    console 에 다음과 같이 뜨는데 왜그럴까요?ㅠ
                    Failed to load resource: net::ERR_FILE_NOT_FOUND file://code.jquery.com/jquery-1.11.0.min.js
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기