상세 컨텐츠

본문 제목

jQuery 사용법 다운로드 관련

WEB/jquery

by AlrepondTech 2014. 6. 10. 12:01

본문

반응형



/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


출처: http://azurecourse.tistory.com/entry/jquery-js-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C


** jquery js 다운로드

jquery를 사용하기 위해서는 아래의 jquery 홈페이지에서 js 파일을 다운받아야 한다.

http://jquery.com/download/

페이지 하단에 아래와 같이 보인다.



자신이 원하는 버전을 다운 받은면 된다.

minified는 umcpmpressed 보다는 가벼운 버전이라고 생각하고 사용하면 된다.

js 파일들은 용량이 작기때문에 그냥 선택하면 바로 다운받아진다.

* js 파일들은 jquery에 대한 library 라고 생각하면 된다.

* jquery css, html, 자바스크립트를 복합적으로 조금씩들은 아셔야 사용하기 편합니다. ^^

 

댓글이나 공감을 남겨주세요. ^^  




///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


출처: http://www.erzsamatory.net/48



-----------------


최종 수정일: 2014년 3월 7일 금요일

jQuery(제 이쿼리)는 자바스크립트로 쉽고 빠르게 웹 페이지를 개발할 수 있도록 해주는 자바스크립트 프레임워크입니다. 전 세계적으로 가장 널리 사용되는 자바스크립트 프레임워크입니다. 이 포스트에서는 자신의 블로그 또는 홈페이지에서 jQuery를 사용하는 방법에 대해서 소개하겠습니다.


jQuery를 사용하기 위해서는 jquery.js 파일을 불러 와야 합니다. 이 파일은 다음 사이트에서 다운로드할 수 있습니다. 반드시 다운로드하여 불러 와야 하는 것은 아닙니다. 외부 링크로 자바스크립트를 불러 올 수도 있습니다. 이렇게 하면 자신의 블로그가 저장된 서버의 트래픽을 감소시키는 효과를 가져올 수 있습니다.

jQuery 공식 사이트 바로가기: http://www.jquery.com


jQuery는 단 한 개의 스크립트 파일로 구성됩니다. 하지만 더 많은 기능을 사용하기 위해서는 jQuery 플러그인을 설치해야 하는데요. 플러그인을 설치하면 jQuery를 구성하는 스크립트 파일의 갯수가 늘어나게 됩니다.


-----------------


jQuery 파일을 불러 오는 방법


jQuery 파일은 jquery.js 파일과 jquery.min.js 파일로 구분됩니다. jquery.js는 압축되지 않은 스크립트 파일(uncompressed script file)이고 jquery.min.js는 압축된 스크립트 파일(compressed script file)입니다. 압축된 스크립트 파일을 사용하면 사용자가 불러오는 웹 페이지의 용량이 줄어들기 때문에 로딩 속도가 향상된다는 장점이 있습니다.

일반적으로 홈페이지에서 jQuery를 사용할 때에는 압축된 스크립트 파일을 사용합니다. 따라서 이 포스트에서도 압축된 스크립트 파일을 사용하는 것을 전제로 설명하겠습니다.
※ 압축된 스크립트 파일을 사용한다고 해서 jQuery의 사용 방법이 달라지는 것은 절대로 아닙니다.

jQuery를 자신의 홈페이지 또는 블로그에서 사용하려면, 다음과 같이 <HEAD>와 </HEAD> 사이에 jQuery 스크립트를 불러오는 태그를 삽입해야 합니다. 기본적으로 티스토리 블로그는 jQuery를 지원하고 있기 때문에 이 과정은 생략해도 됩니다. 현재 자신이 티스토리 블로그를 사용하고 있다면, 가장 먼저 본인이 사용하고 있는 스킨에서 jQuery를 지원하고 있는지를 반드시 확인하십시오! 지원하지 않는다면 아래의 소스코드를 스킨 파일에 추가하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html>
<head>
    ..........
    <!-- 이렇게 함으로써 외부의 CDN 서버에서 가장 최신의 jQuery 배포판을 불러 올 수 있습니다. //-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    ..........
</head>
<body>
    ..........
</body>
</html>



기본적인 jQuery 사용 방법


jQuery는 $라는 식별자를 사용합니다. 이 식별자를 통해서 jQuery의 모든 명령어가 실행됩니다.

참고
기존의 홈페이지에서 다른 자바스크립트 프레임워크를 사용 중이라면 $를 사용했을 때 오류가 발생할 수 있습니다. 같은 식별자를 쓰는 프레임워크끼리 충돌 현상이 나타나는 것입니다. 이 때에는 $가 아닌 jQuery를 사용해야 합니다.


다음은 하나의 메시지 창을 띄우는 아주 간단한 예시입니다.

1
2
3
$( function () {
    alert('메시지 창을 띄웁니다.');
});



$(function() { ~ }) 또는 jQuery(function() { ~ }) 내부에 개발자가 실행하고자 하는 모든 자바스크립트를 넣으면 됩니다. 이 구문을 사용하면 해당 페이지에 정의된 모든 자바스크립트가 실행된 후에 자신이 작성한 자바스크립트가 실행되게 할 수 있습니다. 쉽게 말하면, 자바스크립트의 실행 순서를 제어할 수 있습니다. 다음의 예시를 통해서 더욱 쉽게 설명하겠습니다.

1
2
3
4
5
6
7
$( function() {
    alert('b');
});
     
alert('a');
     
/* 실행 결과: {a} -> {b} */


위 스크립트는 결과적으로 a 메시지 창이 먼저 나타난 후, b 메시지 창이 나타납니다. 이러한 결과가 나타나는 이유는 해당 페이지에서 정의된 모든 자바스크립트가 실행된 후에야 비로소 jQuery 구문 내부의 자바스크립트가 실행되기 때문입니다.


jQuery 선택자


jQuery는 BODY 내에 있는 모든 DOM 객체를 아주 간단하게 선택할 수 있는 막강한 기능을 제공합니다.

$("선택자") 또는 jQuery("선택자") 와 같은 방법으로 DOM 객체를 선택할 수 있습니다. 여기에서 선택자는 HTML 태그가 될 수도 있고, id가 될 수도 있으며, class가 될 수도 있습니다. id 속성을 통해서 객체를 선택할 때에는 #를 접두사로 사용하고, class 속성을 통해서 객체를 선택할 때에는 .(점)을 접두사로 사용합니다. 다음은 간단한 예시입니다.

1
2
3
4
5
/* container 라는 ID를 가지는 DOM 객체를 선택하여 변수에 저장합니다. */
var container = $("#container");
     
/* title 이라는 class를 가진는 DOM 객체를 선택하여 변수에 저장합니다. */
var title = $(".title");




jQuery에서 DOM 객체를 선택하는 방법은 CSS에서의 방법과 동일합니다. 따라서 다음과 같은 방법으로 객체를 선택할 수도 있습니다.

1
2
3
4
/* container 라는 ID를 가지는 DOM 객체 하위에서
 * title 이라는 class를 가지는 DOM 객체를 선택하여 변수에 저장합니다.
 */
var obj = $("#container .title");



그렇다면 일반적인 HTML 태그를 선택할 때에는 어떠한 방법을 사용해야 할까요? CSS에서 HTML 태그를 선택하는 방법을 떠올린다면 이 내용은 아주 쉽게 이해할 수 있을 것입니다.

1
2
/* BODY 내의 모든 img 객체를 변수에 저장합니다. */
var img = $("img");


웹 페이지 내의 모든 HTML 태그를 선택할 때에는 아무런 접두사 없이 곧바로 태그명을 선택자로 사용하 면 됩니다. 이는 CSS에서 HTML 태그에 스타일 속성을 부여할 때와 같은 방법입니다. 지금까지 살펴본 jQuery의 사용법 중 선택자에 대한 것은 대부분 CSS에서의 선택자와 동일하기 때문에 CSS에 대해서만 잘 알고 있다면 jQuery를 배우는 것은 크게 어렵지 않을 것입니다.


마무리


지금까지 jQuery를 홈페이지 또는 블로그에 적용하는 방법과 아주 간단한 사용 방법에 대해서 알아 보았습니다. jQuery를 활용하면 웹 표준을 준수하면서 화려한 웹 페이지를 만들 수 있습니다. 현재 jQuery는 인터넷 상에서 아주 다양하게 응용되어 사용되고 있으며, 지금도 계속 그 사용법이 개발되고 있는 상황입니다. 누구나 다 만들 수 있는, 어디에서나 볼 수 있는 스킨을 사용하고 있는 블로거라면, 아니면 사이트 관리자라면, jQuery를 사용하여 전 세계에서 단 하나 밖에 없는 특별하고 독특한 스킨을 만들어 보시기 바랍니다.



//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


출처: http://hobbiez.tistory.com/231



티스토리에서 jquery를 사용할 수 있다.

스킨에서

1
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

를 추가해주고
1
<script type="text/javascript">

이 부분에 원하는 기능을 구현하면 된다.

1
</script>


물론 저렇게 하지 않고 직접 스킨에 jquery 파일을 업로드하여 사용할 수도 있다.

다운로드 받은 jquery.js 파일을 업로드 한 후 

1
<script type="text/javascript" src="./images/jquery.min.js"></script>

해주면 된다. 위의 경우엔 자동으로 최신의 버전을 받아오게 되어 좋지만, 느릴 가능성도 있다.

아래의 경우엔 새로운 버전으로 업그레이드 되는 경우 다시 업로드를 해주어야 하지만, 티스토리 서버에서 받아오므로 훨씬 빠르다.


내 경우엔 content div엘리먼트가 sidebar div엘리먼트보다 큰 경우엔 (content 세로길이 - sidebar 세로길이) + 250 만큼

더미 div엘리먼트를 추가하여 마지막 구글 애드의 위치를 잡아주도록 했다.


1
<div id="sidebar_margin"></div>

를 사이드바 맨 밑 부분에 추가해주고


1
2
3
4
var cheight = $("#content").css("height").replace("px", "");
var sheight = $("#sidebar").css("height").replace("px", "");
if( cheight > sheight )
$("#sidebar_margin").css("height", cheight-sheight+250);


를 넣어주었다. 

내 경우에는 구글 애드가 별로 돈도 안되긴 하지만, 레이아웃을 수정하는 연습을 하기엔 딱인거 같다 -_-;



//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


출처: http://apmsoft.tistory.com/17


jquery 활용 js 파일 include 하기


jquery를 이용해 js 파일들을 인클루드 하는 플러그인을 소개할까 합니다.
정말 유용한데요

먼저 include 해야할 js 파일을 한 후
순차적으로 js 파일을 인클루드 할 수 있도록 되어있습니다.

물론 jQuery 를 활용하기 때문에 jQuery는 먼저 불어 와 있어야 하겠죠? ^^



1. 기본환경설정
?
1
2
< script src="/common/js/jquery-1.7.1.min.js" >< /script >
< script src="/common/js/jquery.extended.js" >< /script >


2. 사용법
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 방법 1  /=========================
$.include(
    'js/my.js',
    // my.js 로딩 후 my1.js 를 로딩함
    $.include('js/my1.js')
);
 
# 방법 2 /==============================
$.include('js/my.js',
    // my.js를 먼저 로딩 후 my1.js, my2.js 를 불러 들입니다.
    [
        $.include('js/src/my1.js'),
        $.include('js/src/my2.js')
    ]
);



@ jquery.extended.js 소스 /================
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/**
 * $.include - script inclusion jQuery plugin
 * Based on idea from http://www.gnucitizen.org/projects/jquery-include/
 * @author Tobiasz Cudnik
 * @link http://meta20.net/.include_script_inclusion_jQuery_plugin
 * @license MIT
 */
// overload jquery's onDomReady
if ( jQuery.browser.mozilla || jQuery.browser.opera ) {
    document.removeEventListener( "DOMContentLoaded", jQuery.ready, false );
    document.addEventListener( "DOMContentLoaded", function(){ jQuery.ready(); }, false );
}
jQuery.event.remove( window, "load", jQuery.ready );
jQuery.event.add( window, "load", function(){ jQuery.ready(); } );
jQuery.extend({
    includeStates: {},
    include: function(url, callback, dependency){
        if ( typeof callback != 'function' && ! dependency ) {
            dependency = callback;
            callback = null;
        }
        url = url.replace('\n', '');
        jQuery.includeStates[url] = false;
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.onload = function () {
            jQuery.includeStates[url] = true;
            if ( callback )
                callback.call(script);
        };
        script.onreadystatechange = function () {
            if ( this.readyState != "complete" && this.readyState != "loaded" ) return;
            jQuery.includeStates[url] = true;
            if ( callback )
                callback.call(script);
        };
        script.src = url;
        if ( dependency ) {
            if ( dependency.constructor != Array )
                dependency = [dependency];
            setTimeout(function(){
                var valid = true;
                $.each(dependency, function(k, v){
                    if (! v() ) {
                        valid = false;
                        return false;
                    }
                })
                if ( valid )
                    document.getElementsByTagName('head')[0].appendChild(script);
                else
                    setTimeout(arguments.callee, 10);
            }, 10);
        }
        else
            document.getElementsByTagName('head')[0].appendChild(script);
        return function(){
            return jQuery.includeStates[url];
        }
    },
    readyOld: jQuery.ready,
    ready: function () {
        if (jQuery.isReady) return;
        imReady = true;
        $.each(jQuery.includeStates, function(url, state) {
            if (! state)
                return imReady = false;
        });
        if (imReady) {
            jQuery.readyOld.apply(jQuery, arguments);
        } else {
            setTimeout(arguments.callee, 10);
        }
    }
});






///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


출처: http://okjungsoo.tistory.com/entry/jQuery%EC%99%80-%EB%8B%A4%EB%A5%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%A5%BC-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0


jQuery와 다른 라이브러리를 함께 사용하기
잡학사전/javascript 08. 07/21

  시작하는 글 

jQuery는 다른 라이브러리와 함께 사용할 수 있도록 만들어졌는데요. jQuery라이브러리와 플러그인들은 jQuery(namespace) 안에 포함되도록 제한되어 있습니다. jQuery의 일반적인 규칙으로 "global"한 객체들은 모두 jQuery(namespace) 안에 정의되어지기 때문에 Prototype이나 MooTools 또는 YUI와 충돌에 관해서 걱정할 필요가 없습니다.

그러나, 단 하나의 예외가 있는데요. jQuery 라이브러리에서 jQuery(namespace)의 shortcut으로 사용되는 $입니다.

  $ 함수 재정의하기 

그러나, 이러한 $에 대해 충돌이 발생하더라도 jQuery.noConflict()를 호출함으로서 해결할 수 있습니다. (jQuery.noConflict()를 호출하기 위해서는 jQuery 라이브러리가 선언된 뒤여야만 합니다.)

<html>
  <head>
    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
      jQuery.noConflict();
    
      // Use jQuery via jQuery(...), $가 아닌 jQuery를 사용
      jQuery(document).ready(function(){
         jQuery("div").hide();
      });
    
      // Use Prototype with $(...), etc.
      $('someid').hide();
    </script>
  </head>
  <body></body>
 </html>

jQuery.noConfict()를 호출하게되면 _$(jquery.js 파일이 로딩될 때 기존에 선언되었던 $의 내용을 _$에 저장)의 내용들을 복원하게 됩니다. $를 호출하게 되면 위에서 선언하였던 prototype의 $가 호출이 되지만 jQuery는 페이지의 다른 곳에서 계속 사용할 수 있게 됩니다.

이 외에도 다른 해결책도 있습니다. 다른 라이브러리와 충돌이 나지 않는 shortcut을 선언하는 것입니다.

<html>
  <head>
    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
      var $j = jQuery.noConflict();
   
       // Use jQuery via $j(...), $가 아닌 $j를 사용
      $j(document).ready(function(){
         $j("div").hide();
      });
    
       // Use Prototype with $(...), etc.
      $('someid').hide();
    </script>
  </head>
  <body></body>
 </html>

jQuery.noConflict()에서 리턴되는 값은 jQuery입니다. 여기에 $j가 jQuery를 참조하도록 하는 코드구요. 당연히 $j 외에도 여러 다른 기호들을 alias로 사용할 수 있습니다.

  jQuery 코드

jQuery 시작 부분을 보게 되면 jQuery에서 사용되는 jQuery와 $ namespace에 대해서 따로 저장을 하게 되구요.

// Map over jQuery in case of overwrite
var _jQuery = window.jQuery,
// Map over the $ in case of overwrite
    _$ = window.$;

noConflict 함수가 호출되는 경우 이를 복원하는 형태를 취하고 있습니다.

jQuery.extend({
    noConflict: function( deep ) {
        window.$ = _$;

        if ( deep )
            window.jQuery = _jQuery;

        return jQuery;
    },

  참고자료



//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


출처: http://thositeom.tistory.com/entry/jQuery-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95


이것도 안적으니 까먹어서 한참이나 헤메었다... XX..



스프링에서는 jQuery를 사용하기위해서 아래와 같이한다. 


1. jQuery 사이트 방문 (http://jquery.com/)

2. 라이브러리 다운로드

3. 프로젝트의 resources 폴더의 적당한 위치에 복사

4. JSP페이지에 Javascript 구문 추가

<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.8.3.min.js"/>"></script>

또는

<script type="text/javascript" src="/context/resources/js/jquery-1.8.3.min.js"/></script>


이때 주의 사항으로 <c:url>을 사용하였기에 

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> 이것을 추가한다.


참고사항! : <c:url> 태그는 현재의 서블릿 컨텍스트 이름을 자동으로 앞에 붙여주고 세션관리와 파라이터의 이름과 값의 인코딩을 자동으로 지원한다고 한다.

 아이님의블로그 일부 발췌-http://theeye.pe.kr/529



5. servlet-context.xml 에 아래와 같이 경로를 설정해야 사용이 가능하다!.

 

<mvc:resources mapping="/resources/**" location="/resources/" />

또는 
<resources mapping="/resources/**" location="/resources/" /> 


<!-- javascript/jquery -->
  <mvc:resources mapping="/js/**"  location="/resources/js/" />
   
<!-- img path -->
  <mvc:resources mapping="/img/**" location="/resources/img/" />
   
<!-- css path -->
  <mvc:resources mapping="/css/**" location="/resources/css/" />



////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

반응형
저작자표시

'WEB > jquery' 카테고리의 다른 글

jQuery UI Alert Dialog as a replacement for alert() jquery alert (modal)모달 다이얼로그 관련  (0) 2020.09.10
jquery 유저인터페이스 관련  (0) 2020.09.10
jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) jQuery 예제  (0) 2014.06.10


관련글 더보기

댓글 영역

티스토리툴바