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

저작자 표시
신고

설정

트랙백

댓글

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

저작자 표시
신고

설정

트랙백

댓글

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($){
 //$가들어가는 코드입력
});


저작자 표시
신고

설정

트랙백

댓글

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(){
//코드 삽입 어쩌고 저쩌고
	});

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

저작자 표시
신고

설정

트랙백

댓글

jQuery css 선택자에 접근

jQuery/DOM&jQuery 2009.10.15 16:36

jQuery에서 css 선택자 접근하기

앞선 포스트에서 $()이방법으로 선택자에 접근한다고 설명했다.괄호안은 그대상을 넣어주면된다. css파일에서 선택했을때와 차이를 비교해보자.

선택자CSSjquery
엘리먼트p$('p')
ID(아이디)#name$('#name')
class(클래스).name$('.name')
되돌아보기 :: getElementByTagName,getElementById.....
jQuery를 사용하지않을떄 그 전에는 자바스크립트에서 getElementByTagName,getElementById로 선택자에 접근했어야 했다.또클래스에 접근할 getElementByClass는 만들어 줘야했다.게다가for(var i=0; i<elementLi.length; i++)처럼 문서 전체에서 원하는것을 찾기위해 for 구문도 사용해야했다.하지만 jquery에서는 $( )으로 엘리먼트, 아이디 클래스 모두 쉽게 접근가능하다.

간단한 예제보기

$('p').addClass('nanan');
$('#happy').addClass('nanan');
$('.unhappy').addClass('nanan');

위예제는 $()로 엘리먼트p, 아이디happy, 클래스unhappy에 접근하고 addClass란 메소드드를 통해 nanan이라는 클래스를 추가하는예제이다.

또다른 jQuery의 더 좋은 점은 브라우저를 넘나들 수 있다는 점이다.

크로스 브라우징(cross browsing)

최근 css3까지 개발중인 css로 접근할때 문제점은 브라우저에 따라 지원하고 안하고 차이가 엄청나다는 점이다. 지원여부는 아래 포스팅참조

이같은 지원문제를 jquery에서는 버전 종류를 떠나 모두 가능하게 해준다.특히 문제되는 IE버전 해결에 도움이 크다.앞에서 jQuery에서는 $()로 접근한다고 설명했다. 이방법으로 IE6~7에서 지원하지 않는 것도 접근가능하게 된다.대표적으로 유사,자식선택자 등이 있겠다. CSS3를 복습할겹 예제를 보자

크로스 브라우징

인접이요

  • 자식
  • 나도 자식
  • 막내

위의 html코드에서 인접, 자식선택자로 접근해보자

$('h1 + p').메소드();/*인접선택자*/
$('#parents > li').메소드();/*자식선택자*/

위의 예제에서 첫번째는 h1엘리먼트 다음바로오는 인접한 p엘리먼트를 선택하게될것이고, 두번째는 parents란 아이디의 자식 li를 선택할것이다.

인접,자식선택자가 떠오르지않으면 아래 포스팅 참조

요약하면 jQuery를 이용하여 접근하는 방식의 장점은 두가지이다.

  • 일반적으로 자바스크립트에서 사용했던 getElementByTagName,getElementById 없이 단순하게 $()로 쉽게 접근가능하다
  • 브라우저 버전 종류를 무시하고 css의 대부분의 선택자로 접근가능하다.

마지막으로 예제 페이지http://sianasiatiger.cafe24.com/study.html

저작자 표시
신고

설정

트랙백

댓글

jQuery 사용한 예제

jQuery/DOM&jQuery 2009.10.13 23:21

간단한 jQuery 예졔 문서

간단한 jQuery 예졔 문서를 보자.그전에 먼저준비할 일은 다음과 같다

1.jQuery 다운
http://jquery.com/에서 다운받는다.버전별로 보려면 여기가보면 된다.http://docs.jquery.com/Downloading_jQuery
2.문서에 링크 시키기
헤더에 <script src="jquery-1.3.2.min.js"></script> 삽입.경로는 알아서

html예제 보기

목적은 내용에 border를 줄것이다. 먼저 코드를 보자

jQuery 예제

jQuery를 이용border를 준예제

  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타
  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타

위와 같은 코드에서 ul엘리먼트 부분에 보더를 1px줄것이다.css는 다음과 같다.

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

클래스 boxing에 보더를 주도록되어있다.하지만 html코드에 클래스가 지정되어있지않다. 이제 jquery로 클래스를 지정해주어보자

jQuery 이용하기

<script type="text/javascript"></script>에 다음을 삽입하면된다

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

위코드는 다음과 같은 의미이다.하나하나 보자

1.$( ) :선택자 변수 광호 안에 필요한 것을 선택한다, 엘리먼트,아이디,클래스 등이되겠다. 위 예제에서는 $('ul ')으로 되어있다.이것은 엘리먼트 ul에 접근한다는 뜻이다.

2..addClass() :jquery메소드의 일종이다. 영어번역그대로 클래스를 더한다는 역할을한다.위예제에서는addClass(boxing)으로 boxing이라는 클래스를 추가가하게된다.

3. boxing이라는 클래스를 추가 했으므로 워래 html코드의 엘리먼트 ul의 클래스명이boxing이되고 css가 적용된다.

결과는 다음과 같다.

  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타

예제가 적용된 페이지는 여기에서보자 http://sianasiatiger.cafe24.com/study/J_document.html

이예제는 jQuery를 이용한 간단한 예제일 뿐이다.소스를 보면 알 수 있듯이 그저 boxing을 추가 해주었을 뿐이다. 이런방식으로 다른 여러가지 좋은 기능을 사용할 수 있게 된다.

저작자 표시
신고

설정

트랙백

댓글

jQuery 알아보는 간단한 예제

jQuery/DOM&jQuery 2009.09.03 13:55

jQuery 맛보기

일반적인 자바스크립트 방법,그리고 분리된 모습,jQuery소스를 보면서 비교해보자

일반적으로 내부에 포함된 스크립트


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

이와같은 방법은 초창기 자바스크립트가 사용되고 마구남발되었을떄 사용되던것이며(물론지금도 어쩔수 없이 사용되기도하지만) 스크립트와 html의 뒤섞여 많이 사용이반복되고 다른 코드들이있다면 혼란스러워진다 이제 분리한예제를보자

스크립트와 html분리


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

분리는되었으나 onload속성을 추가하여 바인딩되는시점을 지정했다.하지만 onload시점은 모든 소스들이 load되는 시점으로 이렇게 할경우 시간이 지연될 수 있다.

jQuery


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

무척단순함을 알수있다 코드도 짧고,사용도편리하다

jQuery를 배워야하지만 이미 자바스크립트를 조금이라도 안다면 배우기 쉽다.또한 필요한경우 반드시 소스의 내용자체를 알필요없이 pulg-in으로 이용할수 있다.(물론이전에도 소스를 복사 붙임으로 사용해왔지만 표준화되지않은 점과 간결성 등에 문제가많다)

이상 jQuery에 대한 간단한 소개였고 다음엔 사용법을 알아보자

저작자 표시
신고

설정

트랙백

댓글

jquery란 무엇인가?

jQuery/DOM&jQuery 2009.09.03 13:23

jquery

jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레시그에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다.

http://jquery.com/

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.

웹 애플리케이션 프레임워크?

웹 애플리케이션 프레임워크(framework)는 동적인 웹 페이지나, 웹 애플리케이션, 웹 서비스를 개발하기 쉽게 해주는 구성요소 모음이다.

주로 웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이기 위해 만들어졌다. 따라서 수많은 웹 애플리케이션 프레임워크는 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드의 재사용 등을 지원하고 있다.

대표적인 프레임워크 예로 Prototype이 있다

편의성

이와같은 웹 애플리케이션 프레임워크의 개발은 편의성에있다. 일반 자바스크립트의 사용시 지정하고 함수를만들며 또 반복해서 작업하는것은 상당한 시간이소요된다. 이 자바스크립트를 일정규칙하에 패키지처럼 정해놓고 새로운 언어처럼 대신 좀더쉽게사용할 수있게하는 것이목적이다.

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바