jQuery 1.3으로 업그래이드시 주의사항 3가지

Learning jQuery 사이트에서 알게된 내용인데 상당히 중요한 내용을 갖고 있습니다. jQuery 1.3으로 업그래이드 아실 분들은 참고해야 할 것 같네요.

1. Attribute Selector

Attribute로 검색 할 때 주로 “[@”를 사용하시는 분들이 있을겁니다. 그런데 이걸 사용하지 말라고 하네요.  “@”를 빼고 사용하라는 군요.

[이전 코드]

input[@type=button]

[이후 코드]

input[type=button]

2. Custom Selector

Custom Seletor의 정의 방법이 변경되었네요. 기존에는 String으로 처리하던것을 Function으로 변경되었나 봅니다. 어려운것은 아니고 아래와 같이 함수로 둘러 싸주면 되나봐요. 다만, 변경한 뒤에는 사용가능한지 태스트를 해봐야 하나봅니다. 많이 확인했다고는 하지만 빈틈이 있을지도 모르나 봐요.

[이전 코드]

jQuery.extend(jQuery.expr[':'], {
  hasSiblings: "jQuery(a).siblings(m[3]).length>0"
});

[이후 코드]

jQuery.extend(jQuery.expr[':'], {
  hasSiblings: function(a,i,m) {return jQuery(a).siblings(m[3]).length>0;}
});

3. visibility:hidden 속성과 display:none 속성 처리 변경

이건 상당히 주위해야겠네요. 결과값이 완전히 바뀌었습니다. 일단 원문에서 사용한 2개 예제의 HTML을 보여드리겠습니다.

첫번째 HTML은 div#outer1에 display:none을 해서 div#inner1을 않보이게 했습니다. 두번째 HTML은 div#inner2에 visibility:hidden을 사용해 않보이게 했습니다.

이때 $(‘#inner1’).is(‘:visible’) 의 리턴값, $(‘#inner1:hidden’).length의 리턴값, $(‘#inner2’).is(‘:visible’)의 리턴값, 그리고 $(‘#inner2:hidden’).length의 리턴값이 1.3 버전과 이전 버전에서 값이 다르게 표시됩니다.

jQuery 1.2.6

#outer1 display:none

$(‘#inner1’).is(‘:visible’) == true
$(‘#inner1:hidden’).length == 0

#inner2 visibility:hidden

$(‘#inner2’).is(‘:visible’) == false
$(‘#inner2:hidden’).length == 1

jQuery 1.3.2

#outer1 display:none

$(‘#inner1’).is(‘:visible’) == false
$(‘#inner1:hidden’).length == 1

#inner2 visibility:hidden

$(‘#inner2’).is(‘:visible’) == true
$(‘#inner2:hidden’).length == 0

첫번째 HTML의 div#inner1을 보면 div#outer1을 display:none을 했기 때문에 화면상에서 실제로는 보이지 않습니다. 하지만 $(‘#inner1’).is(‘:visible’)의 값은 true로 표시되고 있었습니다. 실제로는 않보이는데 화면에 보이고 있다고 나오는거죠. 이부분이 1.3버전에서 false로 변경되었나 봅니다. 화면에 실제로 보이는지 아닌지를 표시하도록 변경되었나 봐요.

두번째 HTML에서 div#inner2를 보면 div#inner2를 visibility:hidden으로 했기 때문에 화면상에서 내용이 보이지 않습니다. 하지만 visibility:hidden은 내용만 않보일 뿐 차지하고 있는 영역은 그대로 있습니다. 따라서 div#inner2의 입장에서 보면 투명인간 같은거죠 자리는 차지하고 있지만 실재로는 보이지 않습니다. 암튼, 위의 결과와 같이 이전 버전에서는 $(‘#innner2’).is(‘:visible’)의 결과가 false였는데 true로 변경되었네요.

다른건 jQuery 1.3 Release Notes를 참고하라고 하지만, 일단 이것 만으로도 1.3  버전 적용을 고민하셔야 할 것 같습니다.

원문

  1. 3 Quick Steps for a Painless Upgrade to jQuery 1.3, Learning jQuery
Advertisements

Published by: benant

WEB PROGRAMMER. PHP, ASP, XML, Javascript, VBScript, PL/SQL, MySQL, Oracle. scrollads.co.kr 새로운 모바일 광고 서비스. trenue.com 시스탬 트래이딩 서비스. blogman.co.kr 블로그 운영 관리 서비스. creget.co.kr 해외 상품 구매대행. 핫딜 정보 제공 서비스. fgshop.co.kr - 독립형 쇼핑몰 솔루션.

카테고리 Web댓글 5개

5 thoughts on “jQuery 1.3으로 업그래이드시 주의사항 3가지”

  1. (X) 앤진룸을 청소
    (O) 엔진룸을 청소

    (X) 1.3으로 업그래이드
    (O) 1.3으로 업그레이드

    (X) 가능한지 태스트를 해봐야
    (O) 가능한지 테스트를 해봐야

    (X) 상당히 주위해야겠네요
    (O) 상당히 주의해야겠네요

    (X) 을 않보이게 했습니다
    (O) 을 안보이게 했습니다

    (X) 실제로는 않보이는데
    (O) 실제로는 안보이는데

    (X) 내용만 않보일 뿐
    (O) 내용만 안보일 뿐

  2. 안녕하세요. 웹기획하다가 jquery 달력을 만나는데. 버그가 생겨서 무례하나마 글 남겨봅니다. 1페이지에서 달력 2개 이상 띄울때 요일이 맘대로 되는 버그(일 수 토 월 화..). 어떻게하면 좋을까요?

    1. 음… 저도 접해 보지 못한것이라 뭐라 말하기가 난감하네요. 어떤 버전을 사용하시는지 모르겠지만, dayName 정렬이 바뀐다는 것인데 실제 소스를 볼 수있으면 좋겠네요. 일, 수, 토, 월, 화 … 라고 이야기 하신걸로 봐서는 아래와 같이 사용하시는 것 같은데 사용 예를 보고 싶군요.
      $(“.datepicker”).datepicker({ ‘dayNamesMin’: [‘일’, ‘월’, ‘화’, ‘수’, ‘목’, ‘금’, ‘토’] });

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중