Duck's Log Duck's Log

Selection : 사용자가 마우스를 통해 드래그&클릭하거나 키보드를 통해 선택한 텍스트의 범위를 나타냅니다. 혹은 유저의 현재 커서 위치(caret)를 나타냅니다. 크롬, IE 등 브라우저에서는 사용자가 선택한 텍스트에 대한 처리를 지원하기 위해 Selection API를 지원하고 있습니다. 특히 Selection과 Range 객체는 특히 위지위그(WYSIWYG) 에디터, 텍스트 리치 에디터등을 구현할때 중요하게 사용되니까 필요하신 분들은 꼭 알아두시기 바랍니다. Selection은 anchor와 focus를 가지는데요. anchor는 텍스트 선택을 시작한 지점, focus는 선택을 끝낸 지점을 말합니다. Selection은 방향을 가질 수 있습니다. 이 말은 텍스트의 왼쪽에서 오른쪽으로, 혹은 오른..

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748//문자열을 제외하고 소수점 이하까지 가져오는 정규식 (ex) 233.33px -> 233.33)window.REGEX_TRIM_DIM_SIZE_EXTEND = /(?=\D)(?=^\.)/; //Footer Object function Footer(){ let $footer; (function(){ $footer = $("footer"); })(); //Footer의 높이를 반환하는 함수 this.getFooterHeight = function(){ let footerHeight = $footer.css("height").replace(window.R..

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748function TimeChecker() { let startTime; const TIME_INTERVAL = 2000; this.validateOverInterval = function () { let endTime = new Date().getTime(); if (endTime - startTime = TIME_INTERVAL) { startTime = new Date().getTime(); return true; } } } window.onload = function(){ let timeCheckerTest = new TimeChecker(); ..

Jquery UI와 부트스트랩을 함께 사용할 때 충돌이 일어나는 문제가 발생한다. 문제가 ToolTip을 사용할 때 서로 충돌이 일어나는데, 나 같은 경우는, 같은 HTML 소스가 계속 추가되었다. 이를 해결하기 위해서는 라이브러리 파일을 import 시킬 때, Jquery와 Jquery UI를 먼저 import 시킨 후에, 부트스트랩을 import 시켜야 한다.

let copyedChild = $.extend(true, {}, selectedChild) copyedChild 변수에 selectedChild 객체의 모든 요소를 깊은 복사하여 초기화한다.

Jquery 함수 중 특정 DOM 노드를 복사하면, $("#node").clone()을 사용하면 된다. 만약 이벤트요소 까지 전부 복사하려면 $("#node").clone(true)을 사용하면 된다.

123let checker = $._data($("#node")[0], "events");console.log(checker);console.log(checker && checker.dblclick);cs $.data를 사용하면 특정 노드에 적용된 이벤트를 확인할 수 있다. 만약 특정 이벤트가 존재하고 있을시 어떤 로직을 수행하게 하고 싶다면 12345if(checker && checker.dblclick){ //..write code that want to execute. }Colored by Color Scriptercs if문으로 검사해서 사용하면 된다. 위의 예시는 더블클릭 이벤트가 걸려있을 시 특정 로직을 수행하는 코드이다.

Jquery를 사용하다보면 특정 요소가 포함되어 있는지 확인해야 할 경우가 있다. 나의 경우에는 대댓글 기능을 만드는 중에 필요했는데, 여기에 보이는 reply 버튼을 클릭하면 댓글을 쓸수있는 Post Area가 나타나고, 만약 이미 Post Area가 열린 상태에서 reply 버튼을 클릭하면 없어지게 하는 일종의 토글 기능이 필요했다.내가 생각할 때 현재 댓글 한 로우를 표현하는 최상위 div 태그를 들고와서, find 메소드를 통해 하위 자식 요소에 Post Area가 존재하면 remove 시켜주고, 없으면 append 시켜주는 동적인 기능이 필요했는데, 여기에서 문제는 Post Area가 현재 하위 자식 노드로 포함되어 있는지 없는지를 판단하는 조건식을 만드는 것이었다. 그래서 열심히 구글링 해서 ..