웹 프로그래밍/웹 (15) 썸네일형 리스트형 [Jquery] 오브젝트에 새로운 메서드 추가하기. 항상 플러긴을 분석하다보면 $.fn이 많이 등장하기 마련이다. 이 의미는 즉 Jquery.fn이라고도 볼 수 있는데 이것은 제이쿼리 오브젝트 객체속의 메서드(함수)객체를 의미한다고 해석할 수 있다.여하튼 자바스크립트에서 함수를 선언할 땐 보통1. function 이름 (인수1, 인수2, 인수3 ....) { } 2. var 이름 = function () { };이런식으로 선언하지만 함수와 메서드는 같으면서도 다르다. 함수의 경우 직접호출하여 실행할 수 있지만 특정 객체 내에 메서드가 된 것은 아니다. 메서드를 추가(?)하는 방법은1. Object(또는 객채명).이름 = function() { };이정도로 생각할 수 있다. 하지만 자바스크립트에서 선언한 메서드와 제이쿼리에서 선언한 메서드는 서로 다르다. .. [Javascript] 마우스 휠 이벤트, 위 아래 판단하기. 저도 그렇지만 일단 제이쿼리를 야매(?)로 배운 사람들의 특징은 예외 처리, 버블링 캡쳐링, 이벤트의 객체에 대해서 이해하지 않고 있다는 것입니다. 모든 이벤트는 이벤트 발생시 해당 함수 인자에 이벤트 객체를 전송합니다. 사실 대부분의 이벤트 리스너를 등록할 때에는 이런 고민을 하지 않아도 되지만 터치 이벤트나 스크롤 이벤트는 "위로 갔는지 아래로 갔는지" 확인해야할 떄가 많습니다. 그러한 정보가 전달받은 이벤트 객체 내에 들어있습니다. event > originalEvent > wheelDelta 에서 해당되는 정보를 얻을 수 있습니다. $("body").on("mousewheel", function (event) { console.log(event.originalEvent.wheelDelta); }).. [WEB/Javascript] mouseover 이벤트와 mouseenter 이벤트 mouseenter Event 와 mouseover Event의 차이점 '오버'이벤트와 '엔터'이벤트의 결정적인 차이점은 자식노드에 마우스 포인트가 진입할때의 이벤트 발생 여부이다. mouseover/out 마우스 오버 이벤트의 경우 자신의 자식노드(예를들어 #parent > #child에서 child가 parent의 자식노드이다.)의 영역에 진입할 때 out이벤트를 발생하고 바로 직후 over이벤트를 발생시킨다. mouseenter/leave 마우스 엔터이벤트의 경우 자신의 자식노드의 영역까지 포함해 들어올 때와 나갈 때만 이벤트를 발생시킨다. over/out이벤트의 경우 자신의 자식 노드에 들어갈때도 이벤트를 발생시켰지만 enter/leave이벤트는 발생시키 지 않는다. http://api.jquer.. [Web/Jquery] 문서 객체 조작 Jqeury는 문서 객체를 다양하게 조작할 수 있다. 1. addClass('이름') : 문서 객체에 클래스 속성을 추가한다. $('h1').addClass('stiky'); 2. removeClass('이름') : 해당이름의 클래스를 삭제한다. $('h1').removeClass('stiky'); 3. attr() : 속성과 관련된 모든 기능을 수행함 1) $('h1').attr('속성 이름'); 속성에 할당되어있는 값 반환 2) $('h1').attr('속성이름', '값'); 해당 속성 이름에 값을 넣어 속성을 추가한다. 3) $('h1').removeAttr('속성이름'); 해당 속성 제거 작성중입니다. [Web/Jquery] 기본 선택자 (요약노트와 비슷하므로, 기본적인 CSS3 개념은 아시고 와야할 겁니다!) 기본형태 ------------------------------------------ $('h1').css('color', 'orange'); ------------------------------------------ 1. 전체 선택자 $('*').css('color', 'orange'); 2. 태그 선택자 $('h1').css('color', 'red'); 3. 아이디 선택자 $('#wrap').css('background','#FFF'); $('div#wrap').css('background', '아귀찮다.'); 4. 클래스 선택자 $('.item').css('font-family', '나눔고딕'); $('h1.item')... [Javascript] 예외 처리하기 그 전에 일단 예외(Exception)과 오류(Error)를 구분할 필요가 있다. 예외(Exception) : 해당 브라우저에 없는 메서드나, 객체 등을 사용할 경우일어난다. (강제 예외 발생은 throw 'String'; 구문을 통해서 발생시킬 수 있다.) 오류(Error) : Javascript 문법상의 오류가 프로그래밍적 버그 등을 지칭하므로, 해당 페이지에서의 JS는 아에 동작하지 않는다. 개발자는 이러한 예외발생을 막기위해서 예외처리라는 것을 하는데, '기본 예외 처리'와 '고급 예외 처리'로 나뉜다. 기본 예외처리는 If와 else구문을 이용하여 할 수 있고, 고급 예외처리는 try { } catch(exception) { } finally { }구문을 통해 할 수 있다. 아래 예제를 통해서 .. [Javascript] 이벤트 버블링, 캡쳐링 제거하기 보통 자식노드부터 상향이나 하향으로 연쇄적으로 이벤트가 발생하는 것을 버블링, 캡쳐링이라한다. 이러한 현상은 웹 애플리케이션을 만들때 치명적인 부분으로 작용할 수 있으므로 반드시 제거해야하는 부분 중 하나인데, 이때 바로 이벤트를 구현할 때 객체전달이 필요한지 알 수 있을 것이다. 관련코드는 이러하다. document.getElementById('test').onclick - function (e) { var event = e || window.event; // 객체 전달 alert('testsetestestsets123123123'); event.cancelBubble = true; //값 변경 -> 보통 IE에서만 실행된다. IE9부터는 아래와 위 모두 가능 if(event.stopPropagatio.. 이전 1 2 다음