본문 바로가기

web/jQuery

 (16)
ECMAScript6 1. let / const (호이스팅 때문에 탄생)호이스팅 : js의 경우 변수 선언일때 해당 함수의 가장 첫번째에 자동으로 var 변수; 로 선언된후 해당 라인에서 초기화가 된다. 하지만 만일 스코프가 다른 변수가 있을시엔?! 함수이름과 변수 이름이 같을시엔?! 과 같이 문제점이 발생한다. 이를 위해 ecma6에서 블록안에서만 / 상수 등이 탄생 하여 스코프에 대한 영향력을 줄였음. 아래와 같이 소스가 된다면 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack = 'Friskies'; return snack; } return snack; } console.log(getFood(false)); // undefined 아래 소스처럼..
script로 HTML DOM을 생성/추가 하면 왜 bind()/on()이 작동하지 않을까? 언제나 그렇듯이 개발하는 도중에 가장 많이 깜박(그러면 안되지만!)하는 부분이 있습니다.바로 스크립트로 HTML DOM을 추가하고 기존의 이벤트가 잘 돌아가겠지 하는것입니다. ADD test0 test1 test2 위의 소스는 버튼을 클릭하면 li을 생성하며 li를 클릭시 li의 text를 alert로 띄워주는 소스입니다. 위의 소스의 문제를 눈치 체셨나요? 결과물은 아래와 같습니다. 문제점은 기존에 미리 생성된 DOM에는 이벤트가 적용되지만 새롭게 생성/추가된 DOM에는 이벤트가 적용되지 않습니다.해당 소스의 문제점은 아래의 소스로 해결할수 있습니다. 문제 해결!!이라 쓰고 글을 끝낸다면 이글을 쓴 이유가 없겠지요.(위의 정보는 구글에서 치면 바로 나옵니다.)문제는 왜 이런 현상이 일어나느냐 입니다."..
jquery 레티나 체크 함수 function isRetinaDisplay() { if (window.matchMedia) { var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)"); return (mq && mq.matches || (window.devicePixelRatio > 1)); } }
파이어폭스 / IE 에서 scoll 이벤트가 안될때 jquery scoll 기능을 파이어폭스 작동이 안되는것을 인터넷에서 찾아보면 버그라고 나오면서(정확히는 파이어폭스에서 scoll이벤트가 먹는 경우는 스크롤이 있을 경우에만 먹는 괴현상이 있습니다. onepage 같은 스크립트를 쓸때 스크롤이 없으니 scoll 이벤트가 않먹더군요. 만일 최신 것을 쓴다면 위와 같은 버그를 미리 스크립트로 방지했는지 확인하시고 쓰기 바랍니다.) 파이어폭스에서만 지원하는 함수인 "DOMMouseScoll" 를 사용하라고 하지만 작동하지 않았다. (저에게만 해당하는 사항일수도 있습니다.) 반면 아직 파이어폭스는 지원하지 안흔다는 "mousewheel" 가 작동을 하더군요. (이게 무슨.....)해당 이벤트에서 event.originalEvent 객체를 보면 X/Y의 휠 이동값..
jquery change http://api.jquery.com/change/ 예제로는 어제 올린 달력샘플에서 날짜가 변경시 기존에 월/일/년도 에서 년도/월/일 로 바꾸는 소스입니다. ex) 미국식날짜 코드 11/09/2012 -> 한국식날짜 코드 2012/11/09 소스보기에서 빨간색 부분만을 추가하였습니다.input 값이 바뀐다면 날짜를 배열로 뽑아서 다시 집어 넣는 소스 입니다. 간단하죠?
Useful jQuery Datepicker 제목 그대로 정말 유용한 달력피커 입니다.원본 링크 : http://www.tripwiremagazine.com/2012/08/jquery-datepicker.html 그중에서 제가 좋아하는놈은 요놈. jQuery UI Datepicker 링크 : http://jqueryui.com/datepicker/ 소스또한 심플하고 스크립트도 모두 링크 형식으로 되어 있어서복사만 해서 가져다가 쓰시면 됩니다.
jquery-number 를 이용하여 천 단위 콤마 간단히 찍기 script 를 통하여 단위 콤마를 찍는거야 소스가 널리고 널렸지만. 매일 ctrl+c, ctrl+v 하기도 지겨울때가 되었고jquery 도 사용하는 마당에 jquery 이용해서 하면 어떨가 싶어서 찾아보다가 재밌는 스크립트를 찾았다. 원본 : https://github.com/teamdf/jquery-number(아래의 적용 스크립트는 위의 링크에서 받은것으로 사용하였습니다.) 소스코드 해당 소스를 브라우져에서 보면 다음과 같이 나온다. ready function 에서 이미 콤마를 찍기를 완료하고 보여준다.마지막 input에는 blur를 적용하여 포커스를 잃었을때 반응한다. 적용화면은 아래와 같다.(blur 이기 때문에 키보드와 마우스 포커스아웃 모두 먹힌다.) 앞의 0자리는 당연히 알아서 삭제 해준다..
jquery 체크박스를 통한 내용 복사 인터넷 쇼핑몰에서 흔히 볼수 있는 요거 정보 동일 체크 버튼을 true로 하면 정보가 복사되는 이것을 구현해 보았다.(사실...예제로 있던건데 안되서 내가 만들어버렸다;;) 책 : jquery in action 7장 참조 시험 양식 성: 이름: 배송지 주소 거리 주소: 도시, 주, 우편번호: 청구지 주소 청구지 주소는 배송지 주소와 동일합니다. 거리 주소: 도시, 주, 우편번호: -_- 아주 간단하지 않은가;; jquery 부분만 따로 보면은 $(function(){ $('#sameAddressControl').click(function(){ var same = this.checked; $('#billAddress').val(same ? $('#shipAddress').val():''); $('#bill..

티스토리툴바