JQuery 17

jQuery 한글 API - addClass() 함수, removeClass() 함수

jQuery 효과를 이용하는 것은 클래스를 이용하는 것이 기본이지요. 즉 특정 태그에 클래스를 추가했다가 삭제하는 등의 방법을 이용하는 것입니다. 보통 클래스는 CSS 를 이용한 디자인 코드를 이용하는 것이지만 이러한 CSS 구성요소를 이해해야 더욱더 jQuery 를 이용해서 더 많은 효과를 구현할 수가 있습니다. 처음 jQuery 프로그래밍을 하시는 분들에게는 css 가 무엇인지를 이해하실것입니다. 그러나 정확하게 아시는 분은 많이는 안되실것같아서 약간의 설명을 덧붙여 설명해보겠습니다. 최근에 웹페이지를 구성하는 요소는 html 태그인 소스 코드와 그 시각적인 디자인을 다루는 css 코드로 분리하는 웹표준화가 많이 진행되고 있습니다. 즉 하나의 웹페이지도 하나의 데이터 문서라고 보시면 됩니다. 따라서 ..

IT News/jQuery 2012.12.06

jQuery 본문의 모든 이미지 사이즈 조절. 배열과 관련하여 프로그램의 foreach 구문과 비슷한 기능

jQuery(function($){ // Contents - 다음 에디터에서 작성된 이미지는 txc-image 라는 클래스 이름을 가지는데 // 이미지 사이즈가 본문 크기를 넘으면 스크립트로 줄이도록 함 var Contents = $('div.tx-content-container'); var imgs = Contents.find('img'); imgs.each(function (i) { var width = $(this).attr('width'); if(width > 650) width=650; $(this).attr('width', width); }); }); 위의 내용과 같이 imgs 라는 변수에는 본문에 있는 모든 이미지들을 배열로 가지고 있습니다. 그리고 그것을 .each 함수를 통해서 하나씩 각..

IT News/jQuery 2012.10.24

jquery timer 시간에 따른 이벤트 설정

jquery timer 타이머 시간에 따른 이벤트 설정 jQuery 가 정상적으로 동작하려면 우선 아래의 코드가 포함이 되어있어야 합니다. 위의 예제 코드는 예제 소스 코드입니다. 가장 중요한 핵심은 var timer = window.setInterval(timerAction, 3000); 이 코드 입니다. 즉 타이머라는 변수를 선언하는데 3000 곧 3초마다 timerAction 이라는 이름을 가진 함수를 실행하는 것을 의미합니다. 따라서 timerAction 함수에다가 무엇을 선언하느냐에 따라서 달라지겠죠?

IT News/jQuery 2012.10.12

jQuery Ajax 사용법 예제 $.ajax

jQuery를 이용한 ajax 예제를 간단히 올려봅니다. 은근 잘 까먹어서 적어두는게 나을것 같더군요. 소스코드가 잘 보일것 같아서 텍스트 파일로 하나 첨부합니다. 다운 받으세요. $('.cancle').click(function (){ var payment = $('#payment_radio').find('input[name=payment]:checked').attr('value'); if(payment == 0) var answer = confirm ('취소하시겠습니까? 데이터가 삭제됩니다.'); else var answer = confirm ('취소하시겠습니까?'); if(answer){ var no = 117; var payment = $('#payment_radio').find('input[na..

IT News/jQuery 2012.08.03

jQuery animation (스크립트 에니메이션) 효과 주기

jQuery 를 이용하여 animation (에니메이션) 효과를 주는 것은 jQuery 의 장점이라고 해야할까요? 아무튼 jQuery 는 기존의 자바스크립트를 이용하면 간단한 효과를 주더라도 코드가 길어지고 복잡해집니다. 그런데 이러한 스크립트 코드의 난해함과 복잡함을 싹 없애주는 jQuery 가 개인적으로 저는 더 좋습니다. 물론 javascript 를 사용안할 수는 없지만요. 아무튼 에니메이션 효과를 주고자 jQuery 를 이용해 보았습니다. 우선 기본적인 사용 방법은 아래와 같습니다. 아래의 내용은 http://api.jquery.com/animate/ 에 있는 내용 입니다. Basic Usage To animate any element, such as a simple image: (예제 이미를 에..

IT News/jQuery 2012.05.22

jQuery 이벤트 주기 hover - mouseover, mouseout 이벤트를 한번에

jQuery Events - hover 이벤트로 마우스 오버일때와 아웃일때의 경우를 한번에 처리할 수 있습니다. 보통 hover 하게 되면 마우스 오버일 때만 생각하기 쉬운데.. 마우스가 오버될때나 키보드가 접근이 될 때우에도 포함이 됩니다. 따라서 웹접근성으로 제작하실 때에는 필요한 이벤트라고 생각이 듭니다. hover(over, out) 형식과 같이 hover 이벤트에는 두가지의 파라메터가 들어갈 수 있습니다. 즉 들어가게되는 인자는 콜백 함수로 함수의 이름을 써주는 것입니다. 아니면 아래와 같이 직접 함수의 구현부를 직접 써줄수도 있습니다. jQuery(function($){ $('p').hover( function(){ // 마우스 오버일 경우에 실행 }, function(){ // 마우스 아웃될..

IT News/jQuery 2012.05.16