웹관련/JavaScript-Jquery45 [Jquery] 체크박스 체크여부 확인하기 총정리 사용자 정보를 받기위해선 유효성 검사를 해야한다.input 박스의 경우 val() 함수를 사용하여 유효성 검사를 하면 되지만체크박스의 경우 약간 체크하는 방법이 다르기때문에 기록을 해둔다. ID 명으로 checked 확인을 할 경우 if (!$("input:checked[id='box1']").is(":checked")){ alert("에러문구를 표시"); $("#box1").focus(); return; } Name 으로 checked 확인을 할 경우 if (!$("input:checked[Name='box1']").is(":checked")){ alert("에러문구를 표시"); $("#box1").focus(); return; } 전체 체크박스를 한번에 체크또는 해제하기 HTML 코드 부분 전체선택 .. 2019. 9. 25. [자바스크립트] if문으로 undefined 체크방법 그리고 Null체크방법 정말 자바스크립트 기초이긴한데... 헷갈릴때가 많다... 나만그런가...비교문을 통해 값이 없을경우 undefined 를 if 문을 사용하여 비교하는 경우가 있는데 이럴때 if(aa = "undefined"){...} 으로 큰따옴표를 감싸야 되는지 아니면, if(aa = undefined){...} 으로 큰따옴표 없이 체크를 해도 되는지 헷갈릴때가 종종 있습니다. 이럴경우엔 큰따옴표 없이 체크를 하는게 맞습니다.if (aa === undefined){....} 만약 따옴표를 넣고 체크를 할꺼라면if (typeof aa == "undefined"){....}이런식으로 체크를 하면 됩니다 번외로 Null을 체크할땐 어떻게 할까요?if (aa == null) {.....} 이렇게 해도 되겠지만 좀더 정확하게 .. 2019. 9. 6. [자바스크립트] input 창에서 핸드폰 번호 자동으로 하이픈 입력하기 기본적으로 회원가입 폼을 만들때나 고객정보를 받기위해 폼을 만들때핸드폰 번호를 입력하는란을 만들때가 있습니다. 보통은 select 박스로 010,011,017 등을 선택하게 만들고input 박스 2개를 만들어서 나머지 번호를 받도록 만드는게 일반적이긴 합니다. 하지만 CSS를 브라우저별로 맞춰야 하고 간격유지와 반응형으로 제작시CSS를 넣기가 만만치 않습니다. 그래서 input 창에 숫자를 입력하면 자동으로 하이픈이 들어갈수 있도록스크립트로 처리를 하니 CSS를 따로 만들필요가 없어서 편했습니다. HTML 부분 JS부분 $('.phone').keydown(function(event) { var key = event.charCode || event.keyCode || 0; $text = $(this); i.. 2019. 1. 30. [자바스크립트] Form 유효성검사 원칙 웹개발을 하다보면 form을 정말로 많이 사용하게 됩니다. 폼을 사용하면서 잘못된 습관이 있습니다. 바로 유효성 검사를 할때 a 태그로 유효성 검사로 폼을 넘기는 부분이죠. 폼의 유효성 검사는 여러가지가 있지만.... 저같은 경우엔 엔터키로 값이 넘어가는걸 우선시 하게 됩니다. 이때 a 태그로 유효성 검사를 하게 된다면 엔터키가 먹지를 않아요. 그래서 저는 주로 사용하는 방법이 바로 form 에 있는 onsubmit 을 사용하는부분입니다. 아래 예제를 한번 살펴보세요~~ HTML부분 JavaScript 부분 function loginSuccess(){ var loginSuccess = $(".loginMessage"); if (!document.login.id.value){ loginSuccess.tex.. 2019. 1. 17. [자바스크립트] 이미지업로드 미리보기 기능 서버단 까지 가지 않고 클라이언트 단에서 file에 이미지를 업로드를 하면이미지를 바로 보여주는 방법입니다. 단 이방법은 FileReader 를 사용하기 때문에 익스플로러 11 이상에서만 작동을 합니다.. HTML 부분 찾아보기 CSS 부분 .input-file {display:none;} .img-photo {width:150px; height:250px;} .btn {display:block; width:200px; padding:10px 0; text-align:center;} JS부분 function fnUpload(){ $('.bind-input-id').click(); } function LoadImg(value){ if (value.files && value.files[0]){ var rea.. 2018. 11. 1. [자바스크립트] 스크롤시 요소하나하나 FadeIn 하기 요새 홈페이지들이 애니메이션 효과를 많이 줍니다... 특히 갤러리 게시판등에서 스크롤시 게시물들이 하나씩 보여지는 효과를 많이 쓰는것 같습니다 나도 구연할일이 생겨서 구연을 해보았습니다. HTML 갤러리 갤러리 갤러리 갤러리 JS $(function(){ console.log("현재위치 : " + $(window).scrollTop()); console.log("윈도우높이값 : " + $(window).height() / 2); var ele = $("ul.anyBox > li"); var any = Array(); // li의 위치값을 확인하여 ani 배열에 넣는다 ele.each(function(i){ ani[i] = $(this).offset().top; }); $(window).scroll(fun.. 2018. 10. 26. [자바스크립트] 하나의 웹사이트로 된 모바일스크립트 하나의 웹사이트로 된 즉 웹사이트 하위경로에 모바일 웹사이트가 존재하는경우(거의 대부분이 이렇게 되어 있다) 모바일 스크립트를 사용하는방법입니다. 예시)웹사이트 주소 : http://mrb18.com 모바일사이트 주소 : http:mrb18.com/mobile 위 처럼 사이트 구성이 되어있는경우 사용하는 모바일 스크립트입니다. See the Pen 모바일접속 스크립트 by DeokHwan (@deokhwan) on CodePen. 이렇게 사용을 하면 모바일에서 접속시 자연스럽게 모바일경로로 자동으로 이동을 하게 됩니다. 모바일 스크립트는 당연하겠지만 모바일사이트가 아닌 웹사이트에 스크립트를 넣어주면 됩니다. 여기에서 쿠키를 사용한다면 모바일에서 PC버전보기와 같은 응용을 할수가 있습니다. 2018. 8. 31. [자바스크립트] Location 객체 location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올수 있습니다. - location- location.host- location.hostname- location.href- location.pathname- location.protocol 예시) http://mrb18.tistory.com/category/JavaScript-Jquery.html - locationhttp://mrb18.tistory.com/category/JavaScript-Jquery.html - loction.hostmrb18.tistory.com - location.hostnamemrb18.tistory.com - location.hrefhttp://mrb18.tistory.com/cate.. 2018. 8. 10. [Jquery] 노드찾기 제이쿼리 하면서 가장 중요한 요소에 대한 노드찾기....좋은 자료를 발견하여 스크립트 해놓습니다...출처는 맨 하단에 있으니 참고하시길... ^^ 1. 노드 찾기 - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자") - 클래스 이름으로 노드 찾기 : $(".클래스이름") - ID로 노드 찾기 : $("선택자") - 속성으로 노드 찾기 : $("[속성이름=값]") - 찾은 요소 개수 구하기 : .size() , .length - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){}); - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자") - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자") 2. 자식 노드 찾기 - 전체 .. 2018. 5. 30. 이전 1 2 3 4 5 다음
