jQuery DOM wrap 메소드 요소를 감싸기

jQuery/DOM&jQuery 2009.11.22 13:26

jQuery wrap,wrapAll, wrapInner 메소드

앞서 포스팅 한 것은 한엘리먼트를 두고 앞이나 뒤에 생성하는 것이였다. 이번엔 아래그림과같이 한 엘리먼트를 놔두고 감싸는 엘리먼트를 만들어보자.


wrap 메소드

앞서 여러 생성 메소드를 학습했다면 쉽다.다음과 같다.

$('p').warp('
'); //$('내부에 엘리먼트').warp('외부엘리먼트'); $('p').warp('
'); //위와같이 아이디 설정도 가능하다.

위와 같이 해준다면 표현은 다음과 같이 나올것이다

어쩌고 저쩌고...........

주의 할 점은 두가지이다.

  • 인라인 엘리먼트로 블록엘리먼트를 감싸던지(ex)p엘리먼트를 img로)같은 엘리먼트를같은 엘리먼트로 감싼다던지(ex)p를p로 감싸기)이런 실수를 범하지 않는다.
  • 감싸는 엘리먼트에 텍스트가 포함된경우$('p').warp('<div>텍스트</div>');감쌀 엘리먼트 p의 내용은 무시된다

wrapAll 메소드

.wrap()는 지정한 엘리먼트를 일일이 감싸는 반면 .wrapAll()메소드는 ALL, 즉 한번에 다 감싸버린다.차이를 비교한 예제를 보자

감싸줘요.

나도요.

나도요2.

나도요3.

자...위와 같은 html이 있다고 하자 이때 두메소드의 차이점을 보면

$('p').warp('
'); $('p').warpAll('
');

결과는 다음과 같이 나온다

감싸줘요.

나도요.

나도요2.

나도요3.

감싸줘요.

나도요.

나도요2.

나도요3.

한번더 요약하면 warp은 개별로 일일이 감싸주는거고 wrapAll은 전체를 감싼다.

wrapInner 메소드

이 메소드는 대상 엘리먼트를 감싸는게 아니라 그 속성값(텍스트등..)과 하위 엘리먼트를 감싼다. 그래서 Inner이란 말이 붙은것. 예제를 보자

어쩌고 저쩌고

어쩌고 저쩌고

html이 위와 같고...

$('p').warp('');
//p엘리먼트 안에서 b엘리먼트로 감싸준다.
$('alpha#div').warp('
'); //alpha란 아이디의 div엘리먼트안에서 div엘리먼트로 감싼다.

결과는 아래와 같다

어쩌고 저쩌고

어쩌고 저쩌고

주의할점

감싼다는것은 지정한 엘리먼트를 다른 엘리먼트안에 넣는다는 것이다.여기서 인라인과 블록 엘리먼트를 유의할 필요있다. 블록을 인라인엘이먼트로 감싼다면 잘못된것이다.또 같은 엘리먼트로 감싸도 잘못된것이다(물론 div말고..)

마지막으로 적용된예제를 보려면 여기서보자http://sianasiatiger.cafe24.com/study/D_wrap.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM after, befoer 메소드 요소뒤, 앞에 생성하기

jQuery/DOM&jQuery 2009.11.12 15:12

jQuery after, befoer 메소드

.after()은 정해진 엘리먼트 뒤에 생성되고 before()은 앞에 생성된다.예를보자

먼저 html은 다음과 같다.

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

.after()

  $('p').after('

after로 뒤에 생성

');

결과는 다음과 같다.

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

after로 뒤에 생성 된 것

.before()

  $('p').before('

bfore로 앞에 생성

');

결과는 다음과 같다.

before로 앞에 생성 된 것

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

insertAfter(), insertBefore()

이 두메소드 역시 Not only A but also B = B as well as A 와 같다고 보면된다.

A.after(B) = B.insertAfter(A),그리고 A.before(B) = B.insertBefore(A)

$('p').before('

bfore로 앞에 생성

'); $('

insertBfore로 앞에 생성

').insertBefore('p'); $('p').after('

after로 뒤에 생성

'); $('

insertAfter로 뒤에 생성

').insertAfter('p');

적용된 예제는 여기서 보자http://sianasiatiger.cafe24.com/study/D_after_before.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM트리 prepend, prependTo 메소드

jQuery/DOM&jQuery 2009.11.10 15:10

jQuery prepend() 메소드

append()메소드와 사용법은 같다. 그럼 차이점은 무언인가? pre-앞이란 뜻이있듯이 preapend는 앞에 생성된다.앞서 포스팅 append() 메소드를 보면 뒤에 생성된것을 볼 수 있다.preapend는 앞에 생성된다. 사용방법은 똑같다.

$(document).ready(function() {
  $('p').preppend('노말');
  $('p').prepend('굵게');
  $('가늘게').prependTo('p');
  });

결과는 아래와 같다

가늘게굵게노말본문

적용된 페이지는 여기로http://sianasiatiger.cafe24.com/study/D_append.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM트리 append, appendTo 메소드

jQuery/DOM&jQuery 2009.11.10 14:55

jQuery append() 메소드

먼저 DOM이뭔지 다시 잠깐보자

"객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.DOM은 HTML 문서의 요소(엘레멘트; element)를 제어하기 위해 웹 브라우저에서 처음 지원됐다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었다."

jQuery 또한 이런 접근을 통해 모델을 구현한다.엘리먼트안에 새 엘리먼트를 만들거나.엘리먼트를 감싸거나, 엘리먼트 앞뒤에 추가하는 메소드를 지원한다. 그중 append()메소드가 엘리먼트안에 자식엘리먼트를 추가하는 방법이다.

append() 메소드

.append() 메소드는 선택한 엘리먼트안에 자식 엘리먼트,텍스트를 추가한다.

사용방법은 $('선택').append('내용');

예를보자

본문

$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  $('가늘게').appendTo('p');
  });

굵게 하도록하고 하위엘리먼트를 넣어보자<strong>굵게</strong>

$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  });

appendTo메소드를 보자 이것은 앞뒤가바뀌었다고 보면된다.

appendTo() 메소드

영어에서 as well as와 not~ but~ 를보자.Not only A but also B = B as well as A .대상 A,B가 바귀었다..appendTo()메소드 역시마찬가지다.$('A').append('B') = $('B'),appendTo('A')와 같다 다음예제를 보자

$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  $('가늘게').appendTo('p');
  });

최종결과는 다음과 같이 나올것이다.

본문노말굵게가늘게

적용된 페이지는 여기로http://sianasiatiger.cafe24.com/study/D_append.html

웹표준관련 주의사항

DOM트리를 짤는 메소드 사용시 appendsk기타등 변수값에 우리는 태그엘리먼트를 입력하게된다.예제에서 $('<i>가늘게</i>').appendTo('p');처럼 </i>를 넣는경우. 이런경우 자바스크립트 삽입시 html페이지에 그대로 넣을경우 코딩유효성 검사시 경고가뜬다. 따라서 이같이 태그 엘리먼트를 사용할시에는 별도로 파일이름을 정해주고 링크시키는방법이옳다.

또하나더 유의사항을 인코딩 방법이다. 인코딩방법에 따라 글자가 개지니 js파일이 무슨 종류의 인코딩인지 알아야한다. html과 일치하지않는경우 깨진다.

저작자 표시
신고

설정

트랙백

댓글

jQuery animate() 애니메이션 메소드

jQuery/DOM&jQuery 2009.10.29 16:55

jQuery animate() 애니메이션 메소드

앞서본 보여준 애니메이션메소드가 있었다. jQuery hide, show ,fade 애니메이션 메소드

animate()는 간단하기도 하고 때로는 사용자정의에 따라 다양하게 이용될수 있다.사용법부터 보자.

animate()는 4개의 인자를 가진다.

  • .css()와 비슷한 속성값
  • 속도, 역시 1/1000초 단위
  • 외부 플러그인(pulg-in)효과주기
  • 콜백함수

이 네가지에서 속성값은 필수 이고 나머지는 지정안해도 무방하다. 예제를 보자.

$('#box').animate({ 'width':'500px',opacity:0.4});

위의 예제는 #box라는 아이디에접근하고 가로길이를 500px 그리고 투명도를 0.4로 하게한다.이번엔 여기에 속도를 줘 보자

$('#box').animate({ 'width':'500px',opacity:0.4},200);

200이라고 속도를 주었다.200/1000초 빠르기로 애니메이션이 실행된다.하나더 자세한에제를 보겠다.원래주어진 사각형을 클릭시 크기변환시키는 애니메이션이다.

여기가 클릭 버튼

어쩌고 저쩌고

css에서 박스 크기를 지정해주었다 색은 #ff

#box{ width:300px; height:200px; background:#fcc;}

이제 클릭시 크기가 변환하도록 하면된다.

$(document).ready(function(){
 		 $('p a').click(function(){
         //엘리먼트 p a에 접근,그리고 클릭시 이벤트 발생 			    
			$('#box').animate(
              {'width':'500px','height':'300px',opacity:0.4},1000
                            );
            //발생하는이벤트.#box 아이디의 엘리먼트의 속성
            //가로가 500px 세로는 300px로 늘어나고 투명도는 0.4
            // 그리고 1초의속도로 애니메이션이전개된다.		   
           });
		});

이벤트 순차적 효과

앞서본예제대로 하면 css에서 정해준 크기의 분홍색사각형이 가로세로 동시에 늘어나면서 효과가 적용될것이다. 그러면 예로 가로먼저 늘어나고 세로 늘어나도록 여러효과를 순차적으로 일어나게할려면 어떻게 해야하는지 알아보자.

$('#boxSec').animate({ 'width':'500px',opacity:0.4},1000)
			.animate({'height':'300px'},1000);

위의 예제는 첫번째애니메이션 가로로늘어나는 것이 먼저 실행되고 그리고 두번째 애니메이션 세로로 늘어나게 된다.이런 순차적이것은 애니메이션메소드에서 어디든지 적용된다.

또다른 .animate() 정의 그리고 queue

첫번째에서 설명한것말고도 도다른 .animate정의법이있다.

$('#box').animate({'width':'500px',opacity:0.4},{duration:1000,pulg-in,queue:false});

위같은 경우는 {효과},{duration(속도),플러그인,queue}부분류로 기본과 옵션을 나누어 준모습이다.주요시 여길점은 queue이다.

일반적으로 여러 애니메이션을 적용하면 순차적으로 일어난다.하지만.animate()에서 queue의값을 false로 할경우 동시에 일어나게된다.예제소스를 보자 .animate메소드를 순차적으로 썼지만 queue:false로 동시에 일어나게 된다

$('p#buttonThr a').click(function(){
				$('#boxThr').animate({ 'width':'200px',opacity:0.4},1000)
				.animate({'height':'100px'},{duration:1000,queue:false});		   
           });

세가지에대해서 설명했다 요약하자면

  • 일반적인 .animate()메소드 사용방법
  • 순차적 사용방법
  • queue:false를 이용한 동시간대 효과

각각예제는 여기서 볼수있다.http://sianasiatiger.cafe24.com/study/J_animate.html

저작자 표시
신고

설정

트랙백

댓글

jQuery hide, show ,fade 애니메이션 메소드

jQuery/DOM&jQuery 2009.10.25 16:49

jQuery hide, show ,fadeIn, fadeOut 메소드

엘리먼트를 간단히 숨기고,보여주기는 css로도 충분히 가능하다.또 jQuery에서 css()메소드로도 마찬가지다.이에대한 간단한 예부터 보자

어쩌고 저쩌고

위 엘리먼트를 단순히 보이게 안보이게 할려면 다음과 같이 하면 된다.

p{display:none;}
/*안보임*/
p{display:block;}
/*블록 스타일로 보임*/

jQuery에서 css메소드를 이용한것을 보자

#('p').css('display','block');

마지막으로 하나더 있으니 css()메소드가 아닌 hide(), show()를 이용하는것이다. 각 명칭대로 보여주기, 감추기 기능이다.예제를 보자

$('p').show();//보여줌
$('p').hide();//감춤

이같은 것은 어느 방법을 이용하던지 단순히 보여주고 안 보여주고의 기능이다.그럼 애니메이션효과로 가보자

hide(), show()를 이용한 애니메이션

hide(), show()를 좀더 이용하면 애니메이션 효과를 줄수있다.방법은 괄호안에 값을 주는것이다.단위는 1/1000초이다.괄호안에 값을 줌에 따라 나타나고 사라지는 속도가 달라진다. 또 'slow', 'nomal' ,'fast'를 주어 속도를 줄수도있다.그속도는 아래예제를 보자

$('p').show(350)
//1000분의 350초 속도로 나타남
$('p').show('slow')
//0.6초
$('p').show('nomal')
//0.4초
$('p').show('fast')
//0.2초

fadeIn(), fadeOut()를 이용한 투명 애니메이션

fadeIn(), fadeOut()을 이용하면 나타남과 사라짐에 투명도를 줄수있다.괄호안에 값은 hide(), show()와 같다.

$('p').fadeIn(350);
$('p').fadeOut('fast');

클릭이벤트로 간단한예제

이제까지 설명한것으로 클릭을 통한 예제를 만들어보겠다. 버튼이란 글자를 클릭하면 바로나타나는 엘리먼트, 그리고 천천히나타나는 엘리먼트. 그리고 투명하게 사라지는 엘리먼트를 구현해 보겠다.

먼저 소스에는 h3엘리먼트를 버튼으로 그리고 각각 일어날 애니메이션에 아이디를 주었다.

버튼

클릭하면 바로 나타난다

클릭하면 천천히나타난다.

클릭하면 페이드효과로 투명하게 사라진다.

스크립트를 보자.설명은 소스에 각개 자세히 해놓았다.

$(document).ready(function(){
  //문서이벤트
    $('#gamma, #zeta').hide();
   // #gamma, #zeta 이란 두아이디에 접근하고 감추어 둔다.
     $('h3 a').click(function(){
       //h3 a 즉 버튼이라는 글자를 클릭했을떄
			$('#gamma').show();	
            //#gamma아이디의 엘리먼트를 보여줌
			$('#zeta').show(350);
            //#zeta아이디의 엘리먼트를
              350/1000초의 속도로보여줌
			$('#fader').fadeOut(900);
            //#fader아이디의 엘리먼트를
             900/1000초의 속도로 투명하게 숨김
		return false;
        //false값을 주어 기본동작 
        //즉 $('#gamma, #zeta').hide();이 일어나지않도록함
	 });
});

위의것을 적용한 예제는 여기로http://sianasiatiger.cafe24.com/study/J_display.html

저작자 표시
신고

설정

트랙백

댓글

jQuery를 이용한 CSS 효과

jQuery/DOM&jQuery 2009.10.24 13:22

jQuery CSS 메소드

css를 jquery에서 별도로 지정하여 효과를 줄수있다. 이때 장점은 브라우저를 넘나들어 모두 가능하다는점이다.문제시 되는 IE6에서도 유사클래스등 지원되지않는것을 jQuery로 해결할 수 있다.복습겸 먼저 css사용법을 다시보자

CSS 지정

css는 다음과 같이 사용 한다. 선택자{ 프로퍼티: 값;} 예제를 보자

#example{backgound: #fcc;}
/*선택자는 아이디인 #example 
 그리고 프로처티는 배경인backgound
 마지막으로 그배경색은 #fcc로 한것*/

이 같은 것을 브라우저를 넘나들어 사용할 수 있도록 jQuery를 이용한것을 보자

jQuery css()메소드

jQuery에서 사용해보자 방법은 다음과 같다.

  • .css('프로퍼티' ,'값')
  • 만약 여러개를 정한다면 중괄호와 콜론을 사용한다. .css({'프로퍼티1':'값1','프로퍼티2':'값2' })

예제를 통해 알아보자

배경색을 #fcc로 할것임

배경색을 #fcc로 하고 폰트 사이즈를 28px로

h4엘리먼트에는 배경색변화 그리고 p엘리먼트에는 배경색변화와 더불어 폰트사이즈도 변하게 할것이다.

$(document).ready(function(){
  $('h4').css('background','#fcc');
  $('p').css({'background':'#fcc','font-size':'28px' });
});

위 소스와 같이$('h4'),$('p')로 접근했고 .css()메소드로 css를 지정해주었다.프로퍼티를 여러개 사용할떄는 중괄호와 콜론을 사용한다는점을 명심해두자.

직접작성한 예제는 여기서보자 그냥 css를 사용한것과 jquery를 이용한예제이다http://sianasiatiger.cafe24.com/study/J_cssEffect.html

jQuery를 이용한 것은 크로스브라우징의 목적도 있지만 이외 css()메소드와 함께 jQuery의 다른 메소드와 함께 혼용하여 다양한효과를 줄수도 있다는 점이 장점이다.

저작자 표시
신고

설정

트랙백

댓글

jQuery 이벤트 전파

jQuery/DOM&jQuery 2009.10.22 15:20

jQuery 이벤트 전파, 이벤트 객체 명확화

버블링같은 문제점을 해결하기위해 필요한것은 이벤트가일어나는 엘리먼트 그리고 이벤트 핸들러를 명확히 할 필요가 있다. 어디서 이벤트가 시작하고 끝나는지는 정해주는것이다.먼저 폰트가 커지는 클릭이벤트예시를보자

  • 하나
  • 하나

li엘리먼트를 클릭시 이벤트를 일어나게할것이다.생성되는 클래스의 스타일은 폰트가 크게되도록해줬다.

.boxing{font-size:24px;}

클릭시 클래스를 생성해주는 이벤트는 다음과 같다.

$(document).ready(function(){
	$('ul li').click.function() {
    /* li엘리먼트에접근 
     click메소드 즉 마우스를 클릭했을떄
     아래 함수실행*/					   
     $('ul li').addClass('boxing');
	});	});

위에서 변수접근을 보면 'ul li'로 상위엘리먼트에도 영향을 미칠수 있음을보여준다 이는 앞서설명한 버블링같은 문제를 야기할 수 있다. 정확히이벤트가 일어나는 li엘리먼트를 위해서는 다음과 같이 변수 event를 추가하면된다

$('ul li').click.function(event) {
//내용
});

하지만 여기서 끝이아니다 이벤트를 정확히멈추게하려면 다음과같이 뒤에서 종결지어야한다.

$('ul li').click.function(event) {
//내용
event.stopPropagation();//종결
});

stopPropagation()이것은 자바스크립트의 메소드로 종결할 수 있도록한다.이로서 이벤트는 상위엘리먼트에 영향을 주지않고 li엘리먼트에서 일어난다.

이벤트 위임

이벤트 버블링이 항상문제만 있는것은 아니다 버블링이 여러이벤트가 일으킨다는점을 이용하여 하나의엘리먼트에가 여러 이벤트를 수행하도록할수 있다.이것이바로 이벤트 위임(event delagation)이다.

$(document).ready(function(){
 $('ul').bind('click',function(event) {
	if ($(event.target).is('li')) {					   
      $('ul li').removeClass('boxing');
      $(event.target).addClass('boxing');
	}
 });  
});

위 스크립트에서는 조건문이 추가된것을 볼 수 있다.

if ($(event.target).is('li')) {
//내용
}

  • event.target은 실제로 이벤트가 일어나곳을 지명한다.
  • .is('li') 는 li엘리먼트가 할당되어있는지를 검사한다.
  • this 역시 명확성을 위해 event.target로 바꿔져있다.
  • 조건문을 바꾸어 다른 이벤트에 적용하여 한엘리먼트에 여러이벤트가 일어날 수 있게 한다.

이벤드 핸들러 제거하기

마지막으로 남은것이 이벤트 핸들러를 제거하는것이다.이벤트 발생후 더이상 동작이필요하지않은 겨우 환전히 제거하는 것이 좋다.이떄 사용하는 것이unbind()메소드이다.

bind('click' ,function()){}과 click.function(){}
위의 기능은 똑같다. click이벤트가 훨씬 간단하다 굳이 bind를쓰는 이유는 꼭필요할떄 unbind와 같이 이벤트핸들러제거를 위함이다.

제거방법은 간단하다

$('ul').unbind('click');

괄호안에 사용한 이벤트를 쓰면된다.

예제는 여기서보자http://sianasiatiger.cafe24.com/study/J_enentProcedure.html

저작자 표시
신고

설정

트랙백

댓글

jQuery 이벤트 버블링 부작용

jQuery/DOM&jQuery 2009.10.21 22:05

jQuery 이벤트 부작용

페이지의 이벤트가 발생하면 DOm전체계층에 요소들이 이벤트를 처리 할 수 있을때가있다. 이벤트가 있는 html이다음과 같다고 보자.


이벤트 캡처링(capturing)

여러 엘리먼트 가있을때 이에 한번클릭에 반응하는것을 이벤트 캡처링이라고 한다.아래그림처럼 최상위 엘리먼트에서 그하위엘리먼트로 이벤트가 주어진다.

이벤트 버블링(bubbling)

반대로 내부에 엘리먼트부터 이벤트가 일어나는것이 이벤트 버블링이라고 한다. 하위 엘리먼트가 일어나고 그 뒤에 부모 엘리먼트로 이벤트가 일어난다.


위와같은 이벤트 발생순서 (이벤트 전파라고 한다)는 브라우저개발에서 다르게 구현되었다. 후에는 DOM표준에 따르면서 위두가지 모델이모두 사용하게되었고 이벤트 핸들러는 두과정모두에 등록될 수 있다. (이이상은 상세히 설멸할 필요는 없을듯)

이벤트 버블링의 부작용

버블링의 경우 꺼꾸로 이벤트가 인식되기에 문제가 일어난다. 마우스이벤트의경우 div엘리먼트에 연결되어있다고보고 마우스가 div위에있다면 이벤트핸들러가 정상적으로 작동할것이다. 하지만 a엘리먼트위에있다면 먼저 이벤트는 a엘리먼트에서 일어나고 그후 p엘리먼트 그리고 div엘리먼트에서 일어난다 그러면 원하고자했던 이벤트가 아니라  엉뚱한 결과가 나오게 된다.


저작자 표시
신고

설정

트랙백

댓글

jQuery 합성이벤트 toggle() hover()

jQuery/DOM&jQuery 2009.10.20 14:44

jQuery 합성이벤트 toggle() hover()

보통 이벤트는 하나의 사용자 행위에 의해 발생한다.그리고 하나의 행동에 대해 하나의 응답을 내놓는다. 합성이벤트는 하나이상의 사용자 행위에 별개의 응답을 말하는 이벤트이다. 이에 대표적인 메소드가 toggle() ,hover()이다.

toggle()

toggle()은 클릭에따른 메소드이다. 한번클릭할때 그리고 다시클릭할때 이벤트를 보여준다.인자로 두개의 함수를 가진다.

$().toggle(function(A) {} , function(B) {});

한번클릭하면function(A)가 발생하고 한번더클릭하면 function(B)가발생한다.적용된예제를보자

원클릭 커짐 한번더 클릭 원래대로

.boxing{ font-size:24px; font-weight:bold;}
$(document).ready(function(){
	 $('div').toggle(
      function(){ $('p').addClass('boxing'); },
      //첫번째함수
      function(){$('p').removeClass('boxing');}
      //두번재 함수
      );
		});

한번클릭하면 첫번째함수실행으로 boxing라는 클래스가 추가 되고 한번더 클릭하면boxing라는 클래스가 삭제 된다.따라서 css에따라 한번클릭시 크기가 커지고 두번재 클릭시 원래대로 돌아온다.

hover()

hover()는 css에서 잘아는 :hover와 같다고 보면된다. 마우스를 위에 올렸을때 그리고 내렸을때 이벤트이다.당연히 인자도 두개를 가진다.

$().hover(function(A) {} , function(B) {});

예제를 바로 보자.마우스를 위로 올릴때 테두리가 생기도록할것이다.

호버 테두리가 생기도록

.hovering{ border:1px solid #000;}

별반다를바 없다.클래스명을 hovering으로 해주엇을뿐이고 h2엘리먼트 자체에 효과가 적용되도록하는만큼 this를 사용했다.

$(document).ready(function(){
    $('h2').hover(
       function(){ $(this).addClass('hovering');},
       function( ){$(this).removeClass('hovering');}
       );
 		});      

이벤트함수에대해 알아봤다.hover()의 경우 css에도 있는데 굳이 사용하는이유는 이벤트 순서와 관련있다.예제는 http://sianasiatiger.cafe24.com/study/J_comevent.html

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바