메뉴 건너뛰기

XE Guidebook

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

● jQuery의 단축 표현인 “$” 변경하기

 
jQuery는 단축표시로 "$"를 사용하는데,
jQuery의 noConflict() 메소드를 사용하면,
"$" 표시 대신에 자신이 사용하고 싶은 어떤 다른 이름으로 대체하여 사용할 수 있다.
( 가령 _jQ, _$, _Q, X, ㆍㆍㆍ 등등 )   
 
javascript 라이브러리 중에서 "Prototype"이라는 라이브러리도 "$"표시를 사용하고 있는데,
만약 Prototype과 혼용해서 사용하는 경우에는 충돌이 일어나므로
noConflict() 메서드를 이용하여 jQuery의 “$”를 무력화 시키거나 다른 약어로 변경함으로써
“$”문자가 다른 라이브러리와 충돌이 나지 않도록 할 수 있다.
 
 ※ jQuery의 noConflict 메서드의 내부를 보면 “$”를 _$ 또는 _jQuery로 변경 사용하는 것을 볼 수 있다.
 
    noConflict: function( deep ) {
      window.$ = _$;
      if ( deep ) {
        window.jQuery = _jQuery;
      }
      return jQuery;
    }
 

“$”를 “_Q”로 변경해서 사용하려면,  
아래와 같이 변수 "_Q"를 지정하고, noConflict() 메서드를 실행해 주면 된다.
 
    var _Q = jQuery.noConflict();
 
 

( 예제 ) 

  
  앞 시간에 배운 ( 예제 소스 )에서
  "$" => "_Q"로 변경하여 jQuery를 실행해도 잘 작동하는 것을 볼 수 있다.

    <script>
      var _Q = jQuery.noConflict();
      _Q(function() {
        _Q("div#box-wrapper").click(function() {
          _Q(this).find(">p").text("Hi~ jQuery!").css("color","#fff");
        });
      });
    </script>

2-04-01 jQuery의 단축 표시 변경하기.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;
      }
      h3 {
        color:#09f;
      }
      #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;
      }
      #description {
        margin:20px 0 10px;
        font-size:20px;
        font-weight:bold;
      }
      .subject {
        color:#f60;
      }
      .sub-text {
        margin-top:10px;
        color:#090;
      }
    </style>
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
    <script>
      var _Q = jQuery.noConflict();
      _Q(function() {
        _Q("div#box-wrapper").click(function() {
          _Q(this).find(">p").text("Hi~ jQuery!").css("color","#fff");
        });
      });
    </script>
  </head>
  <body>
    <div id="title">
      <h2> jQuery Core <span> "$" ⇒ "_Q"로 단축표시 변경하기 </span> </h2>
    </div>
    <div id="container">
      <div id="box-wrapper">
        <p> Click me! </p>
      </div>
    </div>
    <div id="description">
      <div class="subject">
        var _Q = jQuery.noConflict();   </br>
        _Q(function() {  </br>
        &nbsp;&nbsp;_Q("div#box-wrapper").click(function() {  </br>
        &nbsp;&nbsp;&nbsp;&nbsp;_Q(this).find(">p").text("Hi~ jQuery!").css("color","#fff");  </br>
        &nbsp;&nbsp;});  </br>
        });
      </div>
      <div class="sub-text">
        jQuery의 약어로 "$" 대신에 "_Q"를 사용해도 잘 작동합니다.
      </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
59 JQuery Core 02-01 jQuery Core file happiziger
58 JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
57 JQuery Core 02-03 jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용 happiziger
» 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