가카리의 공부방

이번에는 현재 스타일 속성을 알아내서 추가 값을 부여하여 animate 메소드 를 사용해 동적으로 애니메이션을 적용하는 예제입니다. 간단하므로 소스코드를 바로 보시면 이해가 되실겁니다. 소스코드 DOCTYPE html> div{ width: 50px; height: 50px; background-color: orange; } $(document).ready(function (){ $('div').click(function(){ //변수를 선언합니다. var width = $(this).css('width'); var height = $(this).css('height'); //animate 메소드를 사용합니다. //즉 클릭시 다음 animate 메소드 효과가 적용됩니다. $(this).animate({ ..

hover 메소드는 다음과 같습니다. .hover( handlerIn(eventObject), handlerOut(eventObject) )Returns : jQuery 개요 : 마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다. .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject) 마우스 포인터가 요소에 들어올 때 실행될 기능 handlerOut(eventObject) 마우스 포인터가 요소에서 떠날 때 실행될 기능 animate 메소드를 사용하려면 position 스타일 속성이 absolute이거나 relative 여야합니다. 그점에 유의하여 hover 메소드와 animate 메소드..

innerfade 플러그인은 시각효과를 위한 플러그인입니다. 다운은 http://medienfreunde.com/lab/innferfade 에서 내려 받을수 있습니다. innerfade 플러그인을 사용하려면 head 태그에 script를 추가해야합니다. innerfade 메소드를 구현하면 쉽게 플러그인을 구현할 수 있습니다. 필요한 파라미터는 소스에 주석으로 작성했습니다. 소스코드 DOCTYPE html> * {margin: 0px; padding: 0px;} ul {list-style:none;} img {width: 500px; height: 350px;} $(document).ready(function (){ //innerfade 플러그인을 적용합니다. //2초마다 그림을 변경하게 합니다. //sp..

jquery에서 지원하는 간단한 시각 효과 첫 번째는 toggle 메소드를 이용한 show 메소드와 hide 메소드의 실행입니다. show 메소드는 문서 객체를 보여주는것이고 hide 메소드는 문서 객체는 사라지게 하는 것입니다. 실행화면을 보시면 쉽게 이해가 됩니다. DOCTYPE html> $(document).ready(function (event){ //이벤트를 연결합니다. $('button').click(function (){ //간단한 효과를 적용합니다. $('.page').toggle('slow'); }); }); Toggle show lorem issumdolorsit lorem issumdlskjfalsdkjfa;lk 출력화면 클릭시 아래 화면이 다음과 같이 없어집니다.

입력 양식이 바뀔 때 이벤트를 받는 내용은 기존의 자바스크립트와 비슷합니다. 다음은 type 속성이 checkbox와 radio인 input 태그의 상태를 변경하는 이벤트는 click 이벤트가 아니라 change 이벤트입니다. 소스 DOCTYPE html> $(document).ready(function (event){ //체크박스가 변하면 이쪽으로 오게 됩니다. //이중 all-check 값이 변하게 되면 check-item아이디를 가진 것의 //모든 체크박스를 체크하게 됩니다. $('#all-check').change(function() { if(this.checked){ $('#check-item').children().prop('checked', true); }else{ $('#check-item..

스크롤 이벤트를 통한 무한 스크롤을 구현해보기 윈도우 이벤트는 window 객체에 의해서 구현이 됩니다. 이 객체의 scrollTop값과 height 값을 더한 값이 실제 문서의 높이를 의미하는 document 객체의 height 속성 값이 같으면 즉 스크롤이 Rx까지 도달했다는 의미입니다. 이를 사용하여 무한 스크롤을 구현해보았습니다. 소스 DOCTYPE html> $(document).ready(function (event){ $(window).scroll(function(){ var scrollHeight = $(window).scrollTop() + $(window).height(); var documentHeight = $(document).height(); //스크롤이 맨아래로 갔는지 아닌지 ..

keyup메소드는 키보드의 키가 눌리고 올라갈 때 불려지는 메소드입니다. 이 메소드를 이용해서 다음과 같이 간단한 글자수 세기 프로그램을 만들어봅시다. DOCTYPE html> $(document).ready(function (event){ $('textarea').keyup(function(){ //남은 글자 수를 구합니다. var inputLength = $(this).val().length; var remain = 150 - inputLength; //문서 객체에 입력합니다. $('h1').html(remain); //문서 객체의 색상을 변경하빈다. if(remain >= 0){ $('h1').css('color', 'black'); }else{ $('h1').css('color', 'red'); ..

이벤트를 연결시 on 메소드를 쓰는데 만약에 selector 매개변수로 이벤트 범위를 한정 할 수 있습니다. #id명 는 id로 한정하는 selector이고 이러한 selector에 on 메소드를 추가하는 방법으로 이벤트의 연결 범위를 한정할 수 있습니다. DOCTYPE html> *{ margin: 5px; padding: 5px; border: 3px solid black; } $(document).ready(function (){ //이벤트에 연결합니다. //$('h1').click(function(event){ $('#wrap').on('click', 'h1', function(){ var length = $('h1').length; var targetHTML = $(this).html(); $(..

기본 이벤트를 제거하고 이벤트의 전달을 막기 예제입니다. preventDefault메소드로 기본 이벤트를 제거합니다. stopPropagation메소드로 이벤트 전달을 제거합니다. DOCTYPE html> *{ margin: 5px; padding: 5px; border: 3px solid black; } $(document).ready(function (){ //이벤트에 연결합니다. $('a').click(function(event){ $(this).css('background-color', 'blue'); event.stopPropagation(); event.preventDefault(); //아니면 다음과 같이 해도된다. //return false; }); $('h1').click(function..

다음 예제는 context 객체를 활용한 자기 자신의 태그의 내용을 출력하는 예제입니다. 기존의 $(‘h1’).text() 이런식이였다면 이번에는 두 번째 매개변수를 this로 놔서 자기자신의 값을 가져오게 합니다. $(‘h1’, this).text(); DOCTYPE html> *{margin: 0px; padding: 0px} div { margin: 5px; padding: 3px; border: 3px solid black; border-radius: 10px; } $(document).ready(function (){ //이벤트에 연결합니다. $('div').click(function (){ var header = $('h1', this).text(); var paragraph = $('p', ..