매년초 jQuery는 업데이트를 발표한다.
작년 1.4는 2010년 1월에 발표하고 이후 일년만인 1.31일에 1.5 메이져버젼 업데이트가 이루어졌다.
총 83개의 버그를 수정했으며 아울러 향후 업데이트 로드맵도 나와있다.
1.5.1 버젼이 2월에 업데이트 예정되어있고 1.6버젼은 놀랍게도 올해 4월에 발표할 예정인듯하다..;;

성능향상에 대한 내용도 있는데 몇몇 함수가 많은 속도 향상이 있다.- 브라우져별로 차이가 많다.


새로 추가된 유용한  함수
 1.  jQuery.parseXML( data ) : 기존에 parseJSON만으론 요구가 많앗나보다..;; XML문서를 파싱할때 사용하게된다.
  var xml = '<rss version="2.0"><channel><title>RSS Title</title></channel></rss>',
                  xmlDoc = $.parseXML( xml ),
                     $xml = $( xmlDoc ),
                     $title = $xml.find( 'title' );

2. jQuery.when(deferreds) : 이번에 1.5버젼에서 주로 추가된 항목들이 동기처리에 대한 부분들이 많았다. 이 when()함수도 그중 하나다. deferreds 에 대한 처리후  콜백처리를 한다.
 
$.when( $.ajax("test.aspx") ).then(function(ajaxArgs){
     alert(ajaxArgs[1]); /* ajaxArgs is [ "success", statusText, jqXHR ] */
});

위에서 말햇다시피 이번 1.5버젼에는 동기처 또는 콜백함수처리에 대해서 추가된 메소드들이 많다.
자세한 사항은 http://api.jquery.com/category/version/1.5/ 참고해보자.

출처 : http://blog.jquery.com/2011/01/31/jquery-15-released/

'jQuery' 카테고리의 다른 글

jQuery 1.5 버젼 업데이트!~  (0) 2011.02.10
$.getJSON을 post 방식으로 사용하기.  (0) 2010.11.28
jQuery 1.4 버젼업~!  (0) 2010.02.04
AJAX & IE Caching Issues  (0) 2010.02.03
jQuery의 live() 함수.  (0) 2009.08.30
jQuery 성능 조정  (0) 2009.08.14

jQuery의 $.getJSON은 기본적으로 post방식을 지원하지 않는다.
그래서 꽤 긴내용의 파라미터를 보내서 처리를 할경우 난감한 상황을 만나게 된다..;;
그래서 구글링했더니 아래와 같은 꽁수(?)로 해결을 봤다.
결과적으로 $.post를 사용 post방식으로 처리를하지만 결과값을 json형식으로 받는다고 정의를 한후 사용하게 된다.

postJSON이라는 별도의 함수를 만든후 사용하게 된다. 

      $.postJSON = function(url, data, func) { 
             $.post(url+(url.indexOf("?") == -1 ? "?" : "&")+"callback=?", data, func, "json"); 
      }  



아래는 postJSON을 사용한 샘플 소스

<form name="testFrm" id="testFrm" method="get">
      <input type="hidden" name="test1" value="111" />
      <input type="hidden" name="test2" value="222" />
      <input type="hidden" name="test3" value="333" />
</form>     

<script type="text/javascript">
    function getData(){
        var paramData = $("#testFrm").serialize();   
        

        $.postJSON(url, paramData, function (data) { 
            $.each(data, function(index,jsonData){
                //jsonData의 값을 처리.~~
            });
        });
    }
</script>

'jQuery' 카테고리의 다른 글

jQuery 1.5 버젼 업데이트!~  (0) 2011.02.10
$.getJSON을 post 방식으로 사용하기.  (0) 2010.11.28
jQuery 1.4 버젼업~!  (0) 2010.02.04
AJAX & IE Caching Issues  (0) 2010.02.03
jQuery의 live() 함수.  (0) 2009.08.30
jQuery 성능 조정  (0) 2009.08.14

좀 지났지만 지난 1월 14일에 jQuery가 1.4버젼으로 업데이트 됐다.(1.3버전업이후 1년만이다...)
이번 버젼에서도 지난 1.3업데이트와 마찬가지로 퍼포먼스에 많은 발전이 있었고 몇가지 함수도 추가 되었다..
우선 속도면에서 지난 1.3버젼과 비교를 하자면 아래 그래프를 참고하자.

그래프로도 보듯이 속도가 많이 좋아졋다랄까..
또한 추가된 함수들도 꽤 있는데 평소에 필요했으면하는 함수가 추가되었다..(-_-;;)
쓸만한 메소드중 몇개를 소개하자면..

1.jQuery.parseJSON( json ) : 해당 함수는 1.4.1에 새로 추가된 함수로 기존에 ajax 모듈의 $.getJSON처럼 json 내용을 파싱을 해줘 사용편의를 제공해준다.
ex)    var obj = jQuery.parseJSON('{"name":"John"}');
         alert( obj.name === "John" );

2. delay( duration, [ queueName ] ) : 1.4에 추가된 함수로  내부적으로 setTimeout을 사용 일정시간 딜레이를 준다.

3. .first(), .last() : 기존에 Selectors에 있던 :first, :last를 Traversing로 함수를 뺀듯하며;; 하는일은 동일하게 해당 노드들중 가장 첫번째, 마지막 element를 반환한다.

그외 에도 focusin, focusout, has, toArray등 여러 함수들이 추가되었다. 자세한 추가 함수에 관한 설명은 [http://api.jquery.com/category/version/1.4/]를 참조하시면 되겟다~

그외 자세한 사항은 [http://jquery14.com/day-01/jquery-14] 참조하자.

'jQuery' 카테고리의 다른 글

jQuery 1.5 버젼 업데이트!~  (0) 2011.02.10
$.getJSON을 post 방식으로 사용하기.  (0) 2010.11.28
jQuery 1.4 버젼업~!  (0) 2010.02.04
AJAX & IE Caching Issues  (0) 2010.02.03
jQuery의 live() 함수.  (0) 2009.08.30
jQuery 성능 조정  (0) 2009.08.14

프로젝트 진행중에 jQuery의 $.get 메소를 사용하여 데이터를 가져오는 로직이 추가되었다.
해당 처리부분을 테스트중에 한가지 이슈가 생겻다..

$.get 메소를 사용하여 데이터를 가져올때 계속 새로운 데이터를 가져오지 않고 브라우져의 캐쉬데이터를 사용하고 있더라.;;
해당 브라우져는 IE8.0이였으면 파폭에서 테스트했을경우 정상적으로 데이터를 가져오는 현상발생.;;
처음엔 jQuery의 $.get 메소드에 혹시 초기값을 셋팅을 해줘야하는게 있는줄알앗다.;;
확인결과 IE의 고질적인 브라우져 캐쉬버그(?)로 상당히 오랜전에 나왔던 이슈였던걸 이제야 내가 경험을 하게 됏다.-_-;..

jQuery의 $.get메소드 문제가 아니였으니 해결책은 몇가지 방법이 있었다.(jQuery 기준;;)

1. 파라미터값에 불특정값을 추가하여 매번 request를 날리게 한다..
    var params = {
      tsTimeStamp = new Date().getTime();
    }
    $("test.jsp", params, function (returnData){
        alert(returnData);
    });
   위와 같이하면 new Date()가 항상 다른 값이 나와 test.jsp호출시 매번 서버에 request를 날리게 된다.

2. $.post를 사용하라..
   사실 get과 post의 사용용도가 차이가 있다. get는 주로 일반적인 데이터 조회용이고 post는 데이터의 조작을 위할때 사용한다.
   어쨋든 post는 IE에서도 캐쉬를 사용하지 않으니 $.post를 사용하면 된다.

3. $.ajax 메소드의 cache : false 를 사용하라.
   $.get 이나 $.post의 경우 사용자의 편의를 위해 이미 기본셋팅이 된상태로서 사용자는 기본설정값만으로 사용되어진다.
   하지만 좀더 디테일하게 ajax를 사용하고자할려면 $.ajax를 사용 해당 설정값중에 cache 값에 false를 주면 된다..

참고 : [http://www.sitecrafting.com/blog/ajax-ie-caching-issues/]

'jQuery' 카테고리의 다른 글

$.getJSON을 post 방식으로 사용하기.  (0) 2010.11.28
jQuery 1.4 버젼업~!  (0) 2010.02.04
AJAX & IE Caching Issues  (0) 2010.02.03
jQuery의 live() 함수.  (0) 2009.08.30
jQuery 성능 조정  (0) 2009.08.14
jQuery $.getJSON 사용한 동적 SELECTBOX구현  (0) 2009.05.03

jQuery 1.3되면서 추가된 함수중에 알면 상당히 유용한 함수가 있다..
바로 live() 함수가 그것이다.

보통 이벤트를 적용할때 자주 사용하는게 bind()를 사용하는데 bind()의 문제점은 Ajax나 append 처럼
페이지가 동적으로 생성되었을때 기존 event 효과가 적용이 안되는데 있다.

기존에는 이 문제점을 동적 생성후 재 bind()를 적용했었다.ㅡ.,ㅡa. 아무래도 좋은 방법은 될수없다.
이런 이슈를 해결하기 위해 LiveQuery라는 플러그인이 있었는데..이 플러그인을 사용하면 동적으로 추가된 페이지들도
추가작업을 하지 않고서 event가 적용이 되었다.

이 LiveQuery 기능을 jQuery 1.3으로 버젼업하면서 새로 추가가 되었다. 그게 live()함수 되시겟다.
live()함수는 오라클의 trigger와 같은 개념이라 보면되겠다.
사용법은 기존 bind()와 동일하다.

<script type="text/javascript">
  $(document).ready(function(){
   
    $("p").live("click", function(){
      $(this).
after("<p>Another paragraph!</p>");
    });

  });
</script>

해제는 die()함수다.=_=;.

'jQuery' 카테고리의 다른 글

jQuery 1.4 버젼업~!  (0) 2010.02.04
AJAX & IE Caching Issues  (0) 2010.02.03
jQuery의 live() 함수.  (0) 2009.08.30
jQuery 성능 조정  (0) 2009.08.14
jQuery $.getJSON 사용한 동적 SELECTBOX구현  (0) 2009.05.03
유용한 jQuery plugin  (0) 2009.04.03

자주 들르는 [IBM developerworks]커뮤니티 사이트에 흥미로운 기사가 올라왔다.
jQuery의 성능향상을 위한 방법을 3가지 정도 제시한 기사인데 기존에는 그냥 아무 생각없이 써왔던 방식이
좋지 않은 방법인줄 알았다..;;..

1) 되도록이면 CLASS 대신 ID를 사용하여 검색한다.

#title을 검색하여 1밀리초 동안 1개의 항목이 검색된 결과를 보여 주는 테스트 샘플. .note를 검색한 경우에는 39밀리초 동안 14개의 항목이 검색되었다.
 
2) 최대한 많은 검색 정보를 제공한다.
div.example을 검색하여 2밀리초 동안 43개의 항목이 검색된 결과를 보여 주는 테스트. .note를 검색한 경우에는 39밀리초 동안 14개의 항목이 검색되었다.
 
3) 선택자 캐싱하기

우선 1,2번의 경우는 이미지를 보면 충분히 이해가 가리라 본다.
3번의 선택자 캐싱하기의 경우는 매 함수 호출때마다 초기화시켜서 변수를 비교하기 보다는
전역변수를 사용 처음에 메모리에 올려놓고 후에 비교하는것을 추천하고 잇다.

자세한 사항은 [매개체로서의 jQuery(2)]에서 확인해보시길..

참고로 이 기사에서 실제 속도를 체크한 테스트 페이지를 알려주는데 [slickspeed] 보면 스크립트 라이브러리중
가장 많이 사용하고 있다는 5대 라이브러리를 기준으로 속도를 체크하고있다..한번 흥미삼아 보는것도 좋을듯..
근데 좀 구버젼으로 체크를 한거라 실제 최신버젼과는 차이가 있을수 있다.

'jQuery' 카테고리의 다른 글

AJAX & IE Caching Issues  (0) 2010.02.03
jQuery의 live() 함수.  (0) 2009.08.30
jQuery 성능 조정  (0) 2009.08.14
jQuery $.getJSON 사용한 동적 SELECTBOX구현  (0) 2009.05.03
유용한 jQuery plugin  (0) 2009.04.03
Release:jQuery 1.3  (0) 2009.01.19
jQuery에서 서버로 GET방식의 요청을 보내고 응답을 JSON으로 받는 $.getJSON 함수를 제공한다.
getJSON을 사용해서 간단한 동적 selectbox를 구현해보자. -_-/

우선 대상 getData.jsp는 아래와 같은 JSON 형식이다.

<% // getJSON을 사용시 callback파라미터를 자동으로 붙여주는데 이 callback으로 감싸줘야 한다. String callBack = request.getParameter("callback"); %>
<%=callBack%>(
[     {         "text" : "테스트01",         "value" : "01"     },     {         "text" : "테스트02",         "value" : "02"     } ])

그럼 저 getData.jsp의 내용을 가져와 적용할 실제 페이지내용은 아래와 같다
<script type="text/javascript">
$(function () {
   var params = { seq : 1 }; //파라미터 선언   $.getJSON("getData.jsp?callback=?", params, function (returnData, textStatus){
       if(textStatus == 'success'){                //sample 객체에 SELECT 옵션내용 추가.
          $("#sample").loadSelect(returnData);
       } else {
           alert("ERROR!");            return;         }        });    });
  //동적 SELECTBOX 구현을 위한 사용자 함수   (function($) {    //SELECT OPTION 삭제
   $.fn.emptySelect = function() {        return this.each(function(){          if (this.tagName=='SELECT') this.options.length = 0;        });     }
  //SELECT OPTION 등록     $.fn.loadSelect = function(optionsDataArray) {        return this.emptySelect().each(function(){          if (this.tagName=='SELECT') {              var selectElement = this;              $.each(optionsDataArray,function(idx, optionData){                  var option = new Option(optionData.text, optionData.value);                  if ($.browser.msie) {                      selectElement.add(option);                  }                  else {                      selectElement.add(option,null);                  }              });          }       });     } })(jQuery); </script> <select id="sample">
</select>
..편집기에서 붙였더니 들여쓰기가 다 엉망이 됐다.ㅡㅜ...
참고도서 : jQuery in Action(인사이트)

'jQuery' 카테고리의 다른 글

jQuery의 live() 함수.  (0) 2009.08.30
jQuery 성능 조정  (0) 2009.08.14
jQuery $.getJSON 사용한 동적 SELECTBOX구현  (0) 2009.05.03
유용한 jQuery plugin  (0) 2009.04.03
Release:jQuery 1.3  (0) 2009.01.19
jQuery Cheatsheet  (0) 2008.12.26
jQuery를 사용하면서 유용한 사용자 플러그인을 많이 만나게 된다.
내가 만들었으면 좋겟지만. ㅎㅎ;;..
이곳에 괜찮게 사용햇던 플러그인을 계속 추가해가야겠다.

http://malsup.com/jquery/

'jQuery' 카테고리의 다른 글

jQuery 성능 조정  (0) 2009.08.14
jQuery $.getJSON 사용한 동적 SELECTBOX구현  (0) 2009.05.03
유용한 jQuery plugin  (0) 2009.04.03
Release:jQuery 1.3  (0) 2009.01.19
jQuery Cheatsheet  (0) 2008.12.26
jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기.  (0) 2008.12.25
새해 1월 14일날 jQuery 1.3 메이져버젼업데이트가 있엇군요..
메이져 버젼업데이트 답게. 큰 변화가 있는데요..우선 CSS 셀렉터엔진을 Sizzle로 변경햇네요.
그래서인지  퍼포먼스가 상당히 향상 됐군요.

자세한 내용은 [여기 참조]
영어가 짧아서..조금씩 해석해보고 달라진점을 확인해봐야할듯하다.ㅜㅜ.
jQuery에서 사용되는 셀렉터들과 기본 함수들을 한눈에 보여준다.
jQuery를 사용하면 할수록 필자가 해왔던 스크립트 방식에 비해 얼마나 간단하게 작업이 변경되었는지 놀라곤한다.-_-;

출처 [COLORCHARGE]

'jQuery' 카테고리의 다른 글

유용한 jQuery plugin  (0) 2009.04.03
Release:jQuery 1.3  (0) 2009.01.19
jQuery Cheatsheet  (0) 2008.12.26
jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기.  (0) 2008.12.25
jQuery each loop에서 빠져나오기.  (0) 2008.12.23
jQuery의 브라우져 구분 함수.  (0) 2008.12.20

+ Recent posts