메뉴 건너뛰기

XE Guidebook

JQuery Core
2016.08.14 02:40

02-01 jQuery Core

조회 수 8 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

▣ jQuery Core

 

● jQuery()

 
jQuery 라이브러리를 사용함에 있어 jQuery의 핵심은 jQuery() 함수이다.
 
jQuery의 시작은 무조건 jQuery() 함수를 거쳐야 하며,
이 함수를 통해 리턴되는 결과는 모두 jQuery 개체(Qbject)로 반환되며,
이 개체를 통하여 jQuery의 수 많은 기능들을 사용할 수 있게 된다. 
 
 

● $()와 $(this)

 
▶ $()의 의미  
 
  jQuery 스크립트 코드에서 "$" 문자는 jQuery의 약자로 표시한 jQuery의 단축 표현이다,
 
  즉 jQuery() = $()
 
 
▶ $(this)의 의미
 
  주로 이벤트 메서드나 콜백함수 내에서 많이 보여지는 "$(this)"는
  이벤트가 일어날 때, 이벤트를 감지하는 자기 자신 노드를 의미한다. 
 

( 예제 )

 
다음 예제를 통하여 $() 함수의 의미와 $(this)의 의미를 정확히 알아두시기 바랍니다.
 
 
1  $(function() {
2    $("div#box-wrapper").click(function() {
3      $(this).find(">p").text("Hi~ jQuery!").css("color","#fff");
4    });
5  });
 
#1 "$()"는 "jQuery()"의 단축 표현으로 "$()" 함수 안에 있는 "function()"은
    HTML 문서가 다 로딩된 후에 실행될 함수, 곧 자기 자신을 호출하는 콜백함수이다.
    ☞ 문서준비이벤트 참조
#2 "$()" 함수로 HTML 문서 안에서 "id가 box-wrapper인 div" 태그에 "click() 메서드"를 할당하고
#3 "div#box-wrapper" 노드에 클릭 이벤트가 발생하면,
    클릭한 해당 "div#box-wrapper" 요소의
    "자식 요소인 p" 노드를 "find() 메서드로 찾아,
    "text()" 메서드로 기존에 있는 텍스트를 "Hi~ jQuery!"라는 텍스트로 바꾸고,
    "css()" 메서드로 글자 색상을 "#fff" 색으로 변경하게 된다.
 

2-01-01 jQuery Core.gif

 

( 소스 )
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Hi jQuery! - jQuery Core </title>
    <style>
      body {
        padding:0px 20px;
      }
      h2 {
        color:#00f;
      }
      h2 span {
        margin-left:10px;
        color:#f60;
      }
      #container {
        position:relative;
        padding:20px;
        background-color:#eee;
        border:1px solid #bbb;
        border-radius:20px;
        text-align:center;
      }
      #box-wrapper {
        position:relative;
        width:150px;
        height:150px;
        margin:0 auto;
        background: #09f;
      }
      p {
        position:relative;
        margin:0;
        padding:0;
        line-height:150px;
        color:#333;
        font-size:20px;
        font-weight:bold;
      }
      #btn-wrapper {
        position:absolute;
        left:0;
        right:0;
        bottom:15px;
        text-align:center;
      }
    </style>
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
    <script>
      $(function() {
        $("div#box-wrapper").click(function() {
          $(this).find(">p").text("Hi~ jQuery!").css("color","#fff");
        });
      });
    </script>
  </head>
  <body>
    <div id="title">
      <h2> jQuery Core <span> jQuery(), $() </span> </h2>
    </div>
    <div id="container">
      <div id="box-wrapper">
        <p> Click me! </p>
      </div>
      <!--
      <div id="btn-wrapper">
        <button id ="btn-q" title=""> Animation Queue </button>
      </div>
      -->
    </div>
  </body>
</html>
 


List of Articles
번호 분류 제목 글쓴이
63 JQuery 개요 01-01 jQuery란? file happiziger
62 JQuery 개요 01-02 jQuery 기능 happiziger
61 JQuery 개요 01-03 jQuery 라이브러리의 설치와 사용 file happiziger
60 JQuery 개요 01-04 jQuery 맛보기 예제 file happiziger
» JQuery Core 02-01 jQuery Core file happiziger
58 JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
57 JQuery Core 02-03 jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용 happiziger
56 JQuery Core 02-04 jQuery의 단축 표현인 “$” 변경하기 file happiziger
55 Selector 03-01 jQuery Selector 의의와 종류 happiziger
54 Selector 03-02 기본 셀렉터(Basic Selector) file happiziger
53 Selector 03-03 계층 선택자 (Hierarchy selector) file happiziger
52 Selector 03-04 속성 선택자 (Attribute Selector) file happiziger
51 Selector 03-05 기본 필터 선택자 (Basic Filter) file happiziger
50 Selector 03-06 내용 필터 선택자 (Content Filter) file happiziger
49 Selector 03-07 보임 필터 선택자 (Visibility Filter) file happiziger
48 Selector 03-08 자식 요소 필터 선택자 (Child Filter) file happiziger
47 Selector 03-09 폼 선택자 happiziger
46 Traversing 04-01 Traversing(탐색)의 개념 happiziger
45 Traversing 04-02 트리 구조 탐색 (Tree Traversal) file happiziger
44 Traversing 04-03 필터링 (Filtering) file happiziger
Board Pagination Prev 1 2 3 4 Next
/ 4