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


설정

트랙백

댓글

  • 쿠하하하 2010.07.20 09:39 ADDR 수정/삭제 답글

    좋은 자료 감사합니다. 퍼갈게요 ^^

  • 초보자 2012.01.13 01:31 ADDR 수정/삭제 답글

    안녕하세요, 제이쿼리를 검색하다 들어오게 되었습니다. 버튼을 클릭하고 펼쳐진 레이어가 다시 버튼을 클릭하면 원래사이즈로 줄어들게끔 하고싶은데 이럴땐 어떻게 해야되나요? 아무리 찾아봐도 나오질 않네요ㅜㅜ 답변부탁드립니다 ^^;

    • Favicon of https://siana.tistory.com 샷타이거 2012.01.13 15:27 신고 수정/삭제

      제가 포스팅한 jQuery 합성이벤트 toggle() hover() 를참조히시면 될겁니다. 아주간단한예로 jQuery 합성이벤트 toggle() hover() 에 설명되있는 http://sianasiatiger.cafe24.com/study/J_comevent.html 를 참조하세요

    • Favicon of https://siana.tistory.com 샷타이거 2012.01.13 15:32 신고 수정/삭제

      쉽게 설명하자면 ..toggle()을 이용해서 함수안에 animate()를 이용하면 되겠죠.

  • Favicon of https://ccmpraise.tistory.com 주한길 2013.01.11 15:27 신고 ADDR 수정/삭제 답글

    좋은글 출처를 표시하고 블로그에 담아갑니다. ^^

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


설정

트랙백

댓글

  • ViNS 2009.10.28 16:03 ADDR 수정/삭제 답글

    감사합니다. 많은 도움 되었습니다 ^^

jQuery 마우스 이벤트

jQuery/DOM&jQuery 2009.10.19 16:30

jQuery 마우스 이벤트 onclick() ,bind()

jQuery의 본격적인 이벤트 가장많이 사용하는 마우스 이벤트를 둘러보자. 마우스 이벤트중 가장 많이사용하는 것은 클릭시 발생하는 이벤트이다. 마우스 클릭시 글자가 굵어지게 하는 것을 예제로 보겠다.먼저 사용할 소스를 보자

클릭이벤트

클릭하면 폰트가 크고 굵어진당께

css설정은 클릭하면 생긴 클래스(이름은boxing으로 정했다.)의 폰트가 크고 굵어지도록

.boxing{ font-size:24px; font-weight:bold;}

onclick()

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

click()이벤트는 위와같이 사용된다.이번엔 여러개의 클릭이벤트를 보자

  • 첫번쨰
  • 두번째
  • 세번쨰

그런데 다음과같이 앞선 본예제와 같이 단순하게 해버리면

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

결과적으로 클릭했을때 모든 li의 폰트가 굵고 크게 변한다.원하느바는 클릭한것이 변화하는것이다. 첫번째로는 각각 li엘리먼트에 아이디를 주어 클릭시 클래스를 더하고 빼주고 하는방법이다.하지만 이렇게 되면 일일이 아이디를 부여하기에 소스가 복잡해진다. 이때 사용하는것이 This함수이다

$(document).ready(function(){
	$('li').bind('click',function() {
    /* li엘리먼트에접근 
     click메소드 즉 마우스를 클릭했을떄
     아래 함수실행*/					   
 	$('li').removeClass('boxing');
    /*먼저 클래스가 있던 없든 클릭한것의 클래스를 지운다*/
	$(this).addClass('boxing');
    /*그 클릭한것(this)의 클래스를 만들어준다.
	});	});

클래스를 만드는것보다 먼저지우는 이유는 그전에 클릭한것의 효과르 없애주기때문이다.페이지 로딩시 처음엔 물론 아무 효과가 없다 하지만 하나를 클릭하고 효과가 적용된후 다른걸 클릭한다고 생각해보자 이때 그전에 클릭한 클래스를 없애주어 효과를 초기화시키기 위해 removeClass()메소드가 먼저 나오는 것이다.

bind()

on click() 말고도 bind()메소드를 이용해 같은 마우스 이벤트를 줄수있다. bind()는 click말고도 여러가지를 지원한다. 더블클릭이라던지, 포거스등 예제로 click dl벤트를 사요하는것만 보자

$('p').bind('click',function() {
     //함수
	});

bind('타입',function(){});이런식으로 지정한다.여기서 타입에따라효과가 달라지는것.앞서말한 포커스라든지 더블클릭.등..

이벤트 예제는 여기로http://sianasiatiger.cafe24.com/study/J_event.html


설정

트랙백

댓글

  • cosmos 2011.02.17 13:00 ADDR 수정/삭제 답글

    bind()메소드를 왜 사용하는지 이해가 잘 안갑니다. 그냥 click()만으로도 작동이 되는것 같은데 왜 굳이 bind()를 사용해서 작성해야 하는지 궁금해요?

    • Favicon of https://siana.tistory.com 샷타이거 2011.02.17 16:11 신고 수정/삭제

      이벤트 순차에따른 버블링때문에 사용하고 안하고 합니다. 제 블로그에서 버블링이라고 검색하고 뜨는 두가지포스팅을 읽어보시면 도움 될껍니다.

      간단히설명하자면 click()의경우 여러번 사용 할 경우 이벤트 처리 부작용으로 시간이 걸리고 오류나는경우가 있죠. 올려진 예제는 간단한 겁니다만, 복잡할경우 문제가 생기는 거지요.

      bind()를 사용하고 unbind로 확실하게 이벤트를 끝내줌으로서 이런 부작용을 막는거지요

jQuery , prototype.js등 라이브러리의 충돌

jQuery/DOM&jQuery 2009.10.17 23:36

jQuery와 다른 라이브러리와 함께사용하기

라이브러리끼리의 충돌
자바스크립트는 jQuery말고도 다른 라이브러리가 많다. 가장대표적인 경우가 prototype.js이다. 문제는 jQuery사용의 경우 $()를 변수 접근자로 사용하는데, 이때 $이 다른라이브러리들의 문서와 충돌이 일어나 오류를 발생시킬수 있다는점이 문제이다. 이런충돌을 막기위해 사용되는 것이 메서드가 .noConfliict()이다.

.noConfliict() 메서드

예제를 보자




위에서 먼저 prototype.js를 포함시키고 그다음 jQuery를 포함시켰다 그리고 jQuery.noConflict();를 사용하여 $를 prototype.js에서도 $를 사용할 수 있도록한다.

위와같이하면 prototype.js에서 $를 사용할수있지만 jQuery에서는 $대신에 jQuery를 사용해야한다.예제는 다음과 같다.

jQuery(document).ready(function($){
 //$가들어가는 코드입력
});



설정

트랙백

댓글

  • 손님 2013.07.11 16:57 ADDR 수정/삭제 답글

    찾는자료네요 감사합니다

jQuery 이벤트의 이해

jQuery/DOM&jQuery 2009.10.16 23:45

jQuery 이벤트의 이해

페이지가 로드될때 jQuery가 동작하기위해서 $(document).ready() 이벤트 핸들러에 특정함수를 수행하도록 해야한다.이에대해서 앞에서 설명한바있다.포스팅참조:간단한 jQuery 예졔 문서

위의 링크된 포스팅을 보면 알 수 있듯이 아래와 같이 단순히 코드만으로는 실행되지않고

$('ul').addClass('boxing');

아래와 같이 $(document).ready()를 사용해야한다.

$(document).ready(function(){
	$('ul').addClass('boxing');					   
	});

기존 자바스크립트의 window.onload대신에 jQuery에서는 $(document).ready()이 대신 사용된다.

onload와 $(document).ready() 비교

이둘다 자바스크립트에서 페이지의 모든요소에 접근가능하다는 강점을 가지고 있다. 하지만 차이점은 onload의 경우는 페이지의 모든게 다 브라우저로 다운된후에 이벤트가발생하고, jQuery의 경우는 DOM트리를 인식하고 준비완료되면 바로 이벤트가 발생한다.

간단한 예를 들면 여러 이미지가 있는 페이지의 경우 onload의 경우는 모든 이미지를 받은 후 일어나고, 반면 jquery의 경우는 DOM트리를 인식한후 바로 이벤트가 일어난다.

언뜻 들으면 jQuery가 우세하지만 단점도 있다. 만약 이벤트와 관련된 이미지라던지 다른것들이 다운되지 않은상태에 이벤트가 발생해버리면 원하는 결과를 얻을 수 없을 것이다. 따라서 때에 따라 적절하게 사용해야 한다.

jQuery에서 onload
위에서 설명한 jQuery문제를 위해 $(document).ready() 대신 아래와 같이 사용하기도 한다.
$(window).load(function(){
 함수내용 어쩌고 저쩌고 나불나불
	});

다중 스크립트 사용

우리가 스크립트를 하면서 함수를 한두번 사용할것이아니다.여러번사용해야하는데 onload의 경우는 두함수가있다면 두번째 함수를 이벤트 명령시키면 첫번째 함수는 제거되버린다.

 window.load = function01;/*무시된다*/
 window.load = function02;

하지만jQuery에서는 순서대로 모두 실행된다. 그리고window.load의 경우 다중함수 사용에 해답이 없는건 아니다. addLoadEvent를 사용하면 된다. 아래포스팅을 참조하자

addLoadEvent에 대해서는 이포스팅참조 함수를 여러번 사용할때 쓰는 addLoadEvent

코드 단순화 시키기

복잡한 것은 무슨언어든 삻다 간결하고 짧은것이 쓰기 편할 것이다.가장대표적인예로 $(document).ready()를 단순화 시켜보자

앞서소개했듯이 아래와 같이 사용했다.

$(document).ready(function(){
//코드 삽입 어쩌고 저쩌고
	});

단순화 문서를 빼줄수있다.

$().ready(function(){
//코드 삽입 어쩌고 저쩌고
	});

또 다음과 같이 단순화 시킬수도 있다.

$(function(){
//코드 삽입 어쩌고 저쩌고
	});

이는 묵시적으로 실행되는 것을 단순히 한것이다. 어디까지나 이런식으로 단순화 시킬 수 있다고 설명한것이며 누구나 쉽게 실무에서 함께 볼려면 다 적어주는 것이 좋다 본격적으로 단순화 시키는 것은 다음에 알아보겠다.


설정

트랙백

댓글

  • creezy 2014.07.11 18:11 ADDR 수정/삭제 답글

    우와 정말 알기쉽게 설명이 잘되어 있어요~!!!
    머리에 쏙쏙 들어와요 ㅋㅋ 잘 이해하고 갑니다~ 감사합니다~