jQuery/DOM&jQuery

jQuery 1.4 변경점

샷타이거 2010. 3. 17. 21:33

jQuery 1.4 변경점

지난 1월달에 jquery 1.4가 나왔다. 변화된점을 요약.

참고한 출처는 여기다http://firejune.com/1527.자세히 설명되있으므로 참조

collection방식

프로그램밍을 해본 이들이라면 c언어를 접해봤을 것이고 클래스(class)에 대해 알것이다.집합된 객체(object)에 변수 함수등을 설정해준다. 이번에 나온 jquery 1.4도 이와 비슷하게 지원된다.

먼저 종전에 사용한 방법을 보자 아래의 html에서 아이디(id), css, 실행함수를 나오도록 해보자

jquery 1.4

그리고 종전의 방식으로 여기에 추가해보자

$('a').attr('id', 'new')
      .css({'color':'#fcc','font-size':'28px' })
      .click(function() { 실행될함수});

아이디를 부여했고 css로 꾸미고 실행될함수를 지정해준것이다. jquery의 편리한점은 언제든지 필요한것을 순서대로 붙이면 된다는 점이였으나 그것이 과할 경우에 혼란을 줄수있다. 이번에 지원된 변경되모습을 보자.

$('a',{
   id: new,
   css: {'color':'#fcc','font-size':'28px'
   }
   click : function() { 실행될함수})
  });

어떻게 보면 복잡할 수도 있지만. 많은것을 부할경우 상호간의 개발자들이 알아보기 쉬울것이다.

이벤트 역시 마찬가지

이벤트역시 위와같은 방식처럼 일괄적으로 적용될수있도록 지원한다.

$('a'.bind({
    click: function() {
    //클릭시 실행될함수
     },
    mouseover: function() {
    //마우스 오버시 실행될함수
     },
    mouseout: function() {
    //마우스 아웃시 실행될함수
   }
})

새로추가된 focusIn, focusOut 이벤트

기존의 focus이벤트에서 부분적으로 수행할수 있도록 분리된 focusIn, focusOut이벤트가 추가되었다.

.live()메소드에 추가된 속성

네가지 "submit", "change", "focus" "blur" 속성이추가되었다.또한 .live( eventType, eventData, handler ) 형식으로 eventData옵션이 추가되었다..live()메소드에 대해 알고싶으면 이 포스팅을 참고

live메소드

nextUntil, prevUntil, parentsUntil메소드

    
    
  • Apple
    • 
    
  • Banana
    • 
    
  • Grape
    • 
    
  • Strawberry
    • 
    
  • Pear
    • 
    
  • Peach
    •

위의 리스트에는 여러 과일이 있다. 이중 until 이란 말뜻대로 ~까지 선택하는것

nextUntil

선택한것에서~까지

$('ul li:contains(Apple)').nextUntil(':contains(Pear)');

prevUntil

반대로 이것은 뒤에서 ~까지

$('ul li:contains(Pear)').nextUntil(':contains(Apple)');

parentsUntil

말그대로 부모엘리먼트 까지이다

요소 풀기(Unwrap)

.wrap()메소드는 감싸는역할을 했다 반대로 이것은 풀어서 감싸고있는것을 제거시킨다.



날 감싸는걸 제거시켜주세요

위에서 div엘리먼트를 제거시켜보자

$('p').unwrap();

unwrap()여기 괄호를 비워둔것은 옵션이다.

데이터를 유지한 상태로 요소 제거하기

새로운 .detach()메서드는 DOM에서 요소를 제거한다. 중요한점은 해당 요소가 가진 데이터 요소를 파괴하지 않는다는 것. 이 데이터는 jQuery의 이벤트 시스템에 보존되어있기 때문에 .data()메서드 등을 그대로 사용하여 다시금 호출할 수있다.

주의~

jQuery 1.4는 기반을 뒤업는 업데이트를 포함하고 있기 때문에 1.3.x에서 작동하던 코드가 비정상 적으로 작동할 수 있다. John Resi는 이와 관련하여 하위 호환성을 유지하기 위한 jquery-compat-1.3 플러그인을 별도로 배포하고 있으니 참조.http://github.com/jquery/jquery-compat-1.3
저작자표시