dom52 jQuery 마우스 이벤트 jQuery 마우스 이벤트 onclick() ,bind() jQuery의 본격적인 이벤트 가장많이 사용하는 마우스 이벤트를 둘러보자. 마우스 이벤트중 가장 많이사용하는 것은 클릭시 발생하는 이벤트이다. 마우스 클릭시 글자가 굵어지게 하는 것을 예제로 보겠다.먼저 사용할 소스를 보자 클릭이벤트 클릭하면 폰트가 크고 굵어진당께 css설정은 클릭하면 생긴 클래스(이름은boxing으로 정했다.)의 폰트가 크고 굵어지도록 .boxing{ font-size:24px; font-weight:bold;} onclick() $(document).ready(function(){ $('p').click.function() { /* p엘리먼트에접근 click메소드 즉 마우스를 클릭했을떄 아래 함수실행*/ $('p').addC.. 2009. 10. 19. jQuery , prototype.js등 라이브러리의 충돌 jQuery와 다른 라이브러리와 함께사용하기 라이브러리끼리의 충돌 자바스크립트는 jQuery말고도 다른 라이브러리가 많다. 가장대표적인 경우가 prototype.js이다. 문제는 jQuery사용의 경우 $()를 변수 접근자로 사용하는데, 이때 $이 다른라이브러리들의 문서와 충돌이 일어나 오류를 발생시킬수 있다는점이 문제이다. 이런충돌을 막기위해 사용되는 것이 메서드가 .noConfliict()이다. .noConfliict() 메서드 예제를 보자 위에서 먼저 prototype.js를 포함시키고 그다음 jQuery를 포함시켰다 그리고 jQuery.noConflict();를 사용하여 $를 prototype.js에서도 $를 사용할 수 있도록한다. 위와같이하면 prototype.js에서 $를 사용할수있지만 jQu.. 2009. 10. 17. jQuery 이벤트의 이해 jQuery 이벤트의 이해 페이지가 로드될때 jQuery가 동작하기위해서 $(document).ready() 이벤트 핸들러에 특정함수를 수행하도록 해야한다.이에대해서 앞에서 설명한바있다.포스팅참조:간단한 jQuery 예졔 문서 위의 링크된 포스팅을 보면 알 수 있듯이 아래와 같이 단순히 코드만으로는 실행되지않고 $('ul').addClass('boxing'); 아래와 같이 $(document).ready()를 사용해야한다. $(document).ready(function(){ $('ul').addClass('boxing'); }); 기존 자바스크립트의 window.onload대신에 jQuery에서는 $(document).ready()이 대신 사용된다. onload와 $(document).ready() 비.. 2009. 10. 16. jQuery css 선택자에 접근 jQuery에서 css 선택자 접근하기 앞선 포스트에서 $()이방법으로 선택자에 접근한다고 설명했다.괄호안은 그대상을 넣어주면된다. css파일에서 선택했을때와 차이를 비교해보자. 선택자CSSjquery 엘리먼트p$('p') ID(아이디)#name$('#name') class(클래스).name$('.name') 되돌아보기 :: getElementByTagName,getElementById..... jQuery를 사용하지않을떄 그 전에는 자바스크립트에서 getElementByTagName,getElementById로 선택자에 접근했어야 했다.또클래스에 접근할 getElementByClass는 만들어 줘야했다.게다가for(var i=0; i 2009. 10. 15. jQuery 사용한 예제 간단한 jQuery 예졔 문서 간단한 jQuery 예졔 문서를 보자.그전에 먼저준비할 일은 다음과 같다 1.jQuery 다운 http://jquery.com/에서 다운받는다.버전별로 보려면 여기가보면 된다.http://docs.jquery.com/Downloading_jQuery 2.문서에 링크 시키기 헤더에 삽입.경로는 알아서 html예제 보기 목적은 내용에 border를 줄것이다. 먼저 코드를 보자 jQuery 예제 jQuery를 이용border를 준예제 뭐시기저시기 어쩌고 저쩌고 이렇고 저렇고 기타 뭐시기저시기 어쩌고 저쩌고 이렇고 저렇고 기타 위와 같은 코드에서 ul엘리먼트 부분에 보더를 1px줄것이다.css는 다음과 같다. .boxing{ border:solid 1px #000;} 클래스 box.. 2009. 10. 13. jQuery 알아보는 간단한 예제 jQuery 맛보기 일반적인 자바스크립트 방법,그리고 분리된 모습,jQuery소스를 보면서 비교해보자 일반적으로 내부에 포함된 스크립트 클릭하면 사라짐 클릭하면 사라짐 클릭하면 사라짐 이와같은 방법은 초창기 자바스크립트가 사용되고 마구남발되었을떄 사용되던것이며(물론지금도 어쩔수 없이 사용되기도하지만) 스크립트와 html의 뒤섞여 많이 사용이반복되고 다른 코드들이있다면 혼란스러워진다 이제 분리한예제를보자 스크립트와 html분리 클릭하면 사라짐 클릭하면 사라짐 클릭하면 사라짐 분리는되었으나 onload속성을 추가하여 바인딩되는시점을 지정했다.하지만 onload시점은 모든 소스들이 load되는 시점으로 이렇게 할경우 시간이 지연될 수 있다. jQuery 클릭하면 사라짐 클릭하면 사라짐 클릭하면 사라짐 무척단순.. 2009. 9. 3. jquery란 무엇인가? jquery jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레시그에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다. http://jquery.com/ jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다. 웹 애플리케이션 프레임워크? 웹 애플리케이션 프레임워크(framework)는 동적인 웹 페이지나, 웹 애플리케이션, 웹 서비스를 개발하기 쉽게 해주는 구성요소 모음이다. 주로 웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이기 위해 만들어졌다. 따라서 수많은 웹 애플리케이션 프레임워크는 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드의 재사용 등을 .. 2009. 9. 3. DOM 라운드박스 심플 먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다. 그런데 굳이 가로가 일정치라면 그방법대로 할필요가 없다. 이번엔 가로 사이즈가 정해진경우 목적은 태그 내용물 //아래 라운드박스 //먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 //두함수의 기능은 insertBefore(A, B); :B 엘레먼트앞에 A를 삽입 insertAfter(A, B); :B 엘레먼트뒤에 A를 삽입 //먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다. function insertAfter(newElement,targetElement) { var parent = targetElement.parent.. 2009. 7. 2. dom 라운드 박스 원래 의도는 둥근박스를 위해서 의미 없는 불필요한 클래스를 여러개 지정해야 하는데...이를 자바로 따로 생성한다. 의도하고자하는 기본 html는 다음과 같고 sdsasd 사용될 html은 준비할 이미지는 box.gif(이미지 에디터 에서 제작한 커다란 라운드 박스) borders.gif(양쪽 라인)이둘. css는 .box { margin: 15px 0 0 0; padding: 5px 0 5px 0; } /* cbb 자바스크립트가 지원 안될때 */ .cbb { margin: 0 10px 0 10px; background: #FFF; padding: 5px 0 5px 0; line-height: 170%; } /* 메인박스 */ .cbb p, .cb p { margin: 0; padding: 0 5px 5p.. 2009. 7. 2. DOM 함수 addLoadEvent 함수를 여러번 사용할때 쓰는 addLoadEvent function A(){ } function B(){ } function C(){ } . . . function D(){ } 여러합수를 사용할때 전역 함수가 아닌 경우, 그리고 각함수에 귀찮게 이벤트핸들러를 줄필요없게 쓰는함수이다. addLoadEvent ( 함수명); 그리고 순차적으로 실행된다. addLoadEvent(A) ; addLoadEvent(B) ; 코드는 다음과 같다 function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = funct.. 2009. 7. 2. 이전 1 2 3 4 5 6 다음