모바일에서 레이어 팝업을 띄우고 본문에서 스크롤이 안되게 하려면 $('body').on('touchmove', function(e){ e.preventDefault() }); 반대로 레이어 팝업을 닫고 다시 스크롤을 되게 해제 하려면 $('body').off('touchmove');

키코드표 ←(백스페이스) = 8 TAB = 9 ENTER = 13 SHIFT = 16 CTRL = 17 ALT = 18 PAUSEBREAK = 19 CAPSLOOK = 20 한/영 = 21 한자 = 25 ESC = 27 스페이스 = 32 PAGEUP = 33 PAGEDN = 34 END = 35 HOME =36 ←(중간) = 37 ↑(중간) = 38 →(중간) = 39 ↓(중간) = 40 INSERT = 45 DELETE = 46 0 = 48 1 = 49 2 = 50 3 = 51 4 = 52 5 = 53 6 = 54 7 = 55 8 = 56 9 = 57 A = 65 B = 66 C = 67 D = 68 E = 69 F = 70 G = 71 H = 72 I = 73 J = 74 K = 75 L = 76 M..

.map() 인자값: currenValue, index, array 요소를 일괄적으로 변경 var arr = ['foo', 'hello', 'diamond', 'A'] var arr2 = arr.map((v) => v.length) // 각 요소의 글자 길이값 반환 console.log(arr2) // [3, 5, 7, 1] .filter() 요소를 걸러내어 배열로 true/false 반환, 없으면 빈 배열 var arr = [4, 15, 377, 395, 400, 1024, 3000] var arr2 = arr.filter((v) => (v % 5 === 0)) console.log(arr2) // [15, 395, 400, 3000] .find() 단 하나의 요소만 반환, 여러 개 있으면 처음값만 반..

jQueryMobile의 swipteleft, swipright를 쓰지 않고 모바일에서 손가락 터치에 반응하도록 구현 방법입니다. jQuery 터치 이벤트 중 하나인 touchstart와 touchmove를 사용하면 간단합니다. nextSlide를 다음 화면으로 슬라이드 하는 이벤트, prevSlide를 이전 화면으로 슬라이드하는 이벤트라 가정해 보면 아래 같이 간단하게 구현할 수 있습니다. var startX = {}; var endX = {}; $slider.on({ 'touchstart': function(e){ startX = event.touches[0].pageX; }, 'touchmove': function(e){ endX = event.touches[0].pageX; var fnX = st..

일반적으로 javascript에서 == 을 하게 되면 값을 비교한다. 데이터 타입이 String, Int, Long 관계없이... 값만 같으면 true를 리턴했지만... === 3개짜리는 데이터 타입과 값이 같은 경우에 true를 리턴한다. !== 는 당연히 반대겠죠~ === This is the strict equal operator and only returns a Boolean true if both the operands are equal and of the same type. These next examples return true a === 2 b === 4 !== This is the strict not equal operator and only returns a value of true i..

조건 연산자는 조건식의 결과에 따라 수행되는 값을 결정하는 연산자입니다. 참과 거짓을 판단할 수 있는 조건식을 제시한 후에 참일 경우와 거짓일 경우의 값이 나타납니다. C = (조건)?A:B 조건이 참일 경우 C에 A를 대입하고 거짓일경우 B를 대입함

http://css-tricks.com/examples/jQueryStop/ Full Cycle of Animation on Hover/Off Goals: Animate wide on mouseEnter Animate back on mouseLeave No matter what, perform a complete wide/back cycle Not queue up animations on multiple hovers Be smooth NOT Using .stop(); The smoothness of this is perfect, but the animations queue up. $("div").hover(function(){ $(this).animate({ width: "200px" }); }, fun..

white-space 공백문자를 어떻게 다룰 것인지 지정하는 코드. (html 코드 상에서 띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등) white-space: normal;기본값. 연속 공백과 줄바꿈 등을 통합해서 표현 ( 보통 띄어쓰기를 500번 하든지 줄바꿈을 하든지 결과는 띄어쓰기 한칸 인것처럼 적용됨) white-space: pre;normal과 반대. 원문 그대로 출력 white-space: nowrap;스페이스바를 막 눌러서 들어가는 연속공백은 통합되지만 (normal의 효과)줄바꿈은 인정함 (pre의 효과) white-space: inherit;부모요소의 값을 상속 word-break텍스트가 들어가는 블록요소의 가로 사이즈에 맞춰 줄바꿈 해줄까, 말까 하는 코드. (강제줄바꿈 방지, 텍..

a태그에서 자바스크립트를 실행할 때 다양한 방법들이 있는데 어떤 방법이 좋을까요? link link link link 웹 접근성 측면과 SEO를 고려해 본다면 a태그 href 속성에 접근할 수 있는 url 이 필요합니다. javascript로 처리하는 것 외에 실제 페이지 접속을 통해 처리할 수 있는 방법을 제공하는 것이 좋습니다. go 자바스크립트를 이용하지 않고 실제 페이지를 제공하기 어려운 경우 javascript_required.html과 같은 페이지를 생성해두고 안내를 하는 것이 좋을것 같습니다. go 페이지의 전환이 전혀 들어가지 않고 데이터 처리만을 위해 javascript를 사용하는 거라면 a태그를 사용하지 말고 대신 button 태그를 사용합니다. (span 태그로 할 경우 focusin..

요소는 폼양식의 요소를 설명하는 텍스트로써 모든 양식 요소는 항상 label과 명시적인 방법으로 1:1 대응해야 한다. label 텍스트를 제공하면 화면 낭독기를 사용하는 사용자는 특정 폼양식 요소에 대하여 문맥의 도움 없이 독립적으로 접근 하더라도 label 설명을 전달 받을 수 있다. 아이디 * 허나 label 텍스트를 생략하거나 레이블과 맵핑되야 할 두 개 이상의 요소에 하나의 설명만을 제공해야 할 때는 ... 요소 대신 title 속성을 사용할 수 있습니다. 이 때는 주소 * - 식으로 앞에 것만 label과 매핑하고 둘 다 title을 사용하여 해당 텍스트에 대한 설명을 적어주면 된다. label 텍스트가 존재함에도 불구하고 label을 사용하지 않고 title속성을 사용하는 것은 바람직 하지 ..

기본적으로 jQuery에서 셀렉터(selector ), 함수(method)를 사용하면 jQuery object가 리턴됩니다. 이 오브젝트를 기반으로 여러 method들을 묶어서(chaining) 사용할 수 있습니다. 하지만 가끔씩 순수 자바스크립트의 DOM element를 직접 접근 해야 할 때가 있습니다. 이럴 경우를 대비해서 jQuery에는 get() method를 제공하는데, 예를 들어 특정 element의 tag 이름을 얻고 싶을 때는 다음과 같이 작성 할 수 있습니다. var tag = $('.element').get(0).tagName; .get() 메소드 대신 이렇게 바로 $('.element')[0] 사용할 수도 있습니다.

jquery를 사용하면서 가장 많이 쓰고 쓰이고 있고 사용되고 있는 이벤트 핸들러 메서드 bind(), on(), live(), delegate() 어느 누구는 bind를 써라. 아니다 bind보다는 on이다. live도 쓰이던데 delegate는? 대체 그 차이점은 무엇이고 언제 써야 하는 건지 정리해 보았습니다. bind() $(select).bind('click', function(){ ... }); jQuery1.7인 시점에서 bind는 사용하지 않습니다. 그 이유는 on메서드가 나오면서 새로운 기능 적용이 안될 예정이며 사라질 수도 있기 때문입니다. 단일 요소를 각 이벤트 처리기에 연결합니다. 업데이트(복제)된 요소는 이 이벤트 처리기를 받을 수 없습니다. 복제된 요소가 생긴 다음에 unbind..

태그를 제외한 모든 인라인 엘리먼트는 margin과 padding이 좌우에만 적용된다. 만약, 억지로라도 상하 공간을 만들어내고 싶다면, line-height 프로퍼티를 사용할 수 있다. height 로 박스의 높이를 지정한 경우, 내용물의 높이가 박스에 지정한 높이보다 커지면 IE 에서는 내용의 높이에 따라 알아서 박스의 높이가 늘어나게 되고, 나머지 브라우져들은 박스 높이가 유지된 채 내용이 밖으로 빠져나가 버린다. 만약, 넘치는 내용물을 죽여버리고서라도 박스의 높이를 유지해야겠다 싶으면 overflow 프로퍼티를 사용하여 hidden 값을 준다. 많이 사용하진 않지만, font 프로퍼티의 variant 를 사용하여 소형대문자를 구현할 수 있다.It Is This letter-spacing 은 자주 ..

.find() - 하위의 대상을 파라미터로 받습니다. -> $('#selector').find('a') #selector의 자식들 중 모든 a .filter() - 파라미터로 받은 셀렉터를 찾습니다. -> $('a').filter('#selector') #selector라는 ID를 가진 a

기본적으로 사용하는 input 요소와 label을 짝을 이룹니다. A 체크박스와 라디오의 경우 input요소 뒤에 label이 위치해야 합니다. B 하지만, 디자인이 label을 수용할 수 없을 때 혹은 label로 식별되는 텍스트가 없을 때, 혹은 label을 표시하는 것이 혼란스러울 수 있는 곳에서는 title 만으로 폼 컨트롤을 식별하게 됩니다. 검색의 경우 Search for subject actor writer content 전화번호의 경우 전화번호 그 외 label을 쓰지 않는 경우 전송과 초기화 버튼 (input type="submit" 또는 input type="reset") 이미지 버튼 (input type="image") 숨겨진 입력필드 (input type="hidden") 스크립트 ..

1) 기본설정에서일반 > html태그를 소문자로 입력 (전 소문자로 하거든요) Home키를 누르면 첫 비공백문자로 이동 (이게 의외로 편해요. 우리 코딩할때 TAB이나 SPACE로 자리이동하잖아요... 그럼 그 위치에서 HOME를 누르면 젤 앞으로 가거든요. 공백문자까지 인식해서 앞으로 갈 필요는 없으니까.. 체크해두면 좋죵.) Internet Explorer 5에서 Editplus설정 (이것도 체크해두면 소스보기할때 편하지요~~) 2) 파일 >설정및 구문강조 탭들여쓰기는 4로 설정 칸표식은... 이걸 선택후 4,8,12,16, 값을 입력해주면... 에디터에 줄이 생기지요. 소스 줄맞추기 좋죠.. 이 기능은 모르시는 분들이 많더라구요. ㅡㅡ; 이 기능을 쓰는 저를 보고 다른 개발자들은 편집증 환자 같다고..

Ajax는 비동기 방식으로 http통신을 통해 데이터를 주고받으며 화면 일부분을 페이지의 전환 없이 최신의 데이터로 업데이트 시켜줄 수 있는 개발방식입니다. 기본 속성 data: 서버에 전송할 데이터 key/value형식의 객체 dataType: 서버가 리턴하는 데이터 타입(xml, json, script, html) type: 서버로 전송하는 데이터의 타입(POST, GET) url: 데이터를 전송할 URL success: ajax통신이 성공했을 때 처리할 내용 error: ajax통신 에러 발생 시 처리할 내용 $.ajax({ data:{'data':$('#inputText').val()}, // URL 호출시 보낼 파라미터 데이터 dataType:'json', // http 통신 후 응답 데이터 타..

.submit() – 폼 전송 $('form').submit(function() { if($('#inputText').val() == 'submittest') { return true; } else if ($('#inputText').val() != 'submit test') { $('span').text('텍스트를정확히 입력하여 주십시오').show().fadeOut(1000); return false; } }); Target 'submittest'를 입력하세요.

.attr() - 해당 요소의 속성값 가져오기, 해당 요소의 속성값 부여 .removeAttr() - 해당 요소의 속성값 제거 .val() - 해당 요소의 value 속성값 가져오기 $('#attrBtn').click(function(){ alert($('#target').attr('value')); }); $('#removeAttrBtn').click(function(){ $('#target').removeAttr('value'); }); $('#valBtn').click(function(){ alert($('#target').val()); }); Target

addClass() – 지정한 요소에 클래스를 추가 removeClass() – 지정한 요소에 클래스를 제거 hasClass() – 지정한 요소에 클래스 유무 확인 toggleClass() – 지정한 요소에 클래스를 추가/제거 $('#addClassBtn').click(function(){ $('#target').addClass('testClass'); }); $('#removeClassBtn').click(function(){ $('#target').removeClass('testClass'); }); $('#hasClassBtn').click(function(){ if($('#target').hasClass('testClass') == true) { alert('textClass 있음'); } els..

.replaceAll() – 지정한 요소들을 다른 요소로 대체 합니다. .replaceWith() – 지정한 요소들을 새로운 요소로 대체 합니다. $('#replaceAllBtn').click(function(){ $('#source').replaceAll($('#target')); }); $('#replaceWithBtn').click(function(){ $('#target').replaceWith($('#source')); }); Source 적용되어질 텍스트입니다. Target 타겟 영역입니다.

.detach() – 지정한 요소를 포함 하위 요소 모두 제거 .empty() – 지정한 요소의 하위 요소를 제거 .remove() – 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거 $('#detachBtn').click(function(){ $('#target').detach(); }); $('#emptyBtn').click(function(){ $('#target').empty(); }); $('#removeBtn').click(function(){ $('#target').remove(); }); Target

wrap() – 대상 요소를 감쌈 unwrap() – 감싸고 있는 부모를 삭제 wrapInner() – 대상 요소의 하위 요소를 감쌈 wrapAll() - 대상 요소들을 한번에 감쌈 $('#wrapBtn').click(function(){ $('#target').wrap($('#source')); }); $('#unwrapBtn').click(function(){ $('#innerTarget').unwrap(); }); $('#wrapInnerBtn').click(function(){ $('#target').wrapInner($('#source')); }); $('#wrapAllBtn').click(function(){ $('#target').wrapAll($('#source')); });

after() - 지정한 요소 뒤에 새로운 요소를 삽입 insertAfter() - 지정한 요소 뒤에 새로운 요소를 삽입 after()와 insertAfter()는 동일한 기능을 수행하지만, 삽입될 내용과 타겟의 위치가 다릅니다. A.after(B) – A 뒤에 B를 추가 A.insertAfter(B) – B 뒤에 A를 추가 $('#afterBtn').click(function(){ $('#target').after($('#source')); }); $('#insertAfterBtn').click(function(){ $('#source').insertAfter($('#target')); // after와 타겟, 소스 위치가 다름 }); before() – 지정한 요소의 시작 부분에 내용을 삽입 inse..

append() - 지정한 요소의 마지막에 내용 추가 appendTo() - 지정한 요소의 마지막에 내용 추가 append()와 appendTo()는 동일한 기능을 수행하지만, 추가될 내용과 타겟의 위치가 다릅니다. A.append(B) - A에 B를 추가 A.appendTo(B) – B에 A를 추가 prepend() – 지정한 요소의 시작 부분에 내용 추가 prependTo() – 지정한 요소의 시작 부분에 내용 추가 prepend ()와 prependTo()는 동일한 기능을 수행하지만, 추가될 내용과 타겟의 위치가 다릅니다. A.prepend(B) - A에 B를 추가 A.prependTo(B) – B에 A를 추가 text(value) – 지정한 요소 내부에 새로운 text 문자열(value) 추가 h..

bind() – 이벤트 연결 $('#click_btn').bind('click', function() { alert('OK'); }); unbind() – 이벤트 해제 $('#click_btn').bind('click', function() { $('#click_btn').unbind('click'); // click 이벤트를 해제(비활성) }); trigger() – 이벤트 자동 발생 $('#click_btn').trigger('click'); // 해당 엘리먼트의 이벤트 자동 실행

가능하면 ID selector를 사용하세요. jQuery에서는 document.getElementById()를 사용하기 때문에 ID selector가 빠릅니다. 하지만 가장 빠른 것은 native javascript 입니다. // Fastest document.getElementById(‘myId’); // Fast - still little slower than native $(‘#myId’); // Slow $('.myClass'); class selector를 사용할 때에는 element type을 selector 앞에 사용하지 마세요. // Fast var $products = $('.products'); // Slow var $products = $('div.products'); 특정 id를 기..

css display 속성을 이용해 컨텐츠 영역을 접거나 펼치는 방법 입니다. if ( $('.box').css('display') === 'none' ) { $('.box').show(); } else { $('.box').hide(); } 위 코드를 자바스크립트로 변경하면 아래와 같습니다. var box = document.querySelector('.box'); if ( box.style.display === 'none' ){ box.style.display = 'block'; } else { box.style.display = 'none'; }

jQuery에서 요소가 있는지 .length 속성을 사용해 확인 합니다. if ($('#elem').length) { alert('elem exists'); } 자바스크립트에서는 아래와 같이 해당 id가 있는지(exists) 체크를 합니다. if (document.getElementById('elem')) { alert('myDiv exists'); }