안녕하세요🐱‍🐉 오늘은 jQuery Extensions 중 selector 접근 시 id나 name이 여러 개이거나, 유동적일 때 유용한 방법에 대해 정리해보려고 해요. 선택자를 확장하여 query의 like처럼 사용하는 방법입니다. (여러 개의 name을 가진 경우, id 뒷부분에 key 값을 붙이는 경우) .each와 함께 자주 사용돼요. $("input[id^='enchovy']").each(function(index, item){ } 이름이나 아이디을 특정 값과 비교하는 경우 바로 아래처럼 사용하는데 그 외에도 다양한 기능의 선택자를 사용할 수 있어요. Attribute Equals Selector [name="value"] 특정 값과 정확히 동일한 값을 가진 지정된 속성을 가진 요소를 선택합니다..

안녕하세요.🐱‍🐉 이번 글은 Ajax 대해 정리해보려고 해요. Ajax를 사용하면서 Success와 Done의 차이에 대해 뭘까 하는 궁금증이 생겼는데 혹시 여러분은 차이가 뭔지 아시나요? Ajax(Asynchronous JavaScript and XML)란? 자바스크립트를 이용한 비동기식으로 XML 이용하여 서버와 통신하는 방식 최근에는 XML보다 JSON을 더 많이 사용 주로 화면 전체를 전환시키지 않고 부분적으로 처리할 때 사용 페이지 일부분에만 새로운 콘텐츠를 로드하는 기능은 사용자의 전체적인 사용 경험을 향상 SPA(Sinlge Page Application, 브라우저에서 실행되지만 마치 소프트웨어 애플리케이션 같은 느낌을 주는 웹 기반 도구)가 등장하는 계기 2021.12.27 - SSR(Se..

화면을 만들다가 보면 iframe이 필요할때가 있을 때가 있는데 iframe을 넣었더니 길이가 들쭉날쭉하고 스크롤이 생겨버리고 꼴보기 싫다? 그럼 아래와 같은 jQuery를 써주시면 됩니다! function autoResizeIframe() { $('#iframe1').on('load', function() { if(this.contentDocument) { $(this).height(this.contentDocument.documentElement.scrollHeight); } else { $(this).height(this.contentWindow.document.body.scrollHeight); } }); } 이 function을 적용 시키면 이리저리 높이를 맞출 필요없이 적용이 되니 한번 써보시길!

입력란에 숫자 천 단위 표기하는 두 가지 방법이 있다. 1. 정규식 방법 1 2 3 $(".price").on("keyup", function(){ $(this).val($(this).val().replace(/\,/g, '').replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,')); }); 2. toLocaleString() 함수 1 2 3 $(".price").on("keyup", function(){ $(this).val($(this).val().toLocaleString("ko-KR")); }); toLocaleString() 함수를 이용하면 더 간편하게 사용할 수 있지만 각 나라별 금액 표시 방법이 다르기 때문에 해당 국가 코드로 설정을 해줘야 한다. 하지만 locale..

입력창에 대문자 또는 소문자로만 입력하는 방법이다. toUpperCase() 또는 toLowerCase() 함수를 이용하면 된다. 1 2 3 4 5 // 대문자만 입력 // 소문자만 입력 대소문자만 입력하는 경우가 많은 경우 공통스크립트로 관리하는 것이 편할 것이다. 1 2 3 4 5 6 7 8 9 // 대문자만 입력 공통스크립트 $("input[type=text]").filter(".upper").on("keyup", function(){ $(this).val($(this).val().toUpperCase()); }); // 소문자만 입력 공통스크립트 $("input[type=text]").filter(".lower").on("keyup", function(){ $(this).val($(this).va..

입력창에 숫자만 입력되기 원할 때 type을 number, tel로 하면 될 거라고 생각하겠지만, 웹에서나 모바일에서 문자가 입력되는 경우가 있다. 이러한 경우를 방지하기 위해 스크립트에서 입력값이 숫자가 아닐 경우 해당 문자를 공백으로 치환하는 방법을 써야 한다. 1 input태그에 onkeyup 이벤트로 적용할 수 있다. 하지만 각 입력창에 일일이 keyup이벤트를 적용하는 것은 비효율적이다. 1 2 3 $("input[type=number], input[type=tel]").filter(".num").on("keyup", function(){ $(this).val($(this).val().replace(/[^0-9]g, "")); }); 공통스크립트로 위 소스와 같은 이벤트를 기호에 맞게 설정해주면..