본문 바로가기
728x90

제이쿼리8

jquery 특정영역으로 scroll하기 폼체크 할 때 특정 값이 비어있으면 입력해달라고 얼럿을 띄워주면서 해당 항목으로 이동하게끔 하려고 사용했다. $('select[name="test"]').offset().top 로만 이동 시키면 내가 보여주고자 하는 요소 밑부분부터 보여줌. 내가 원한 그림은 아니었다. 그래서 화면의 반만 더 올라가게함! 글솜씨가 없다ㅠ 이해가 안되면 개발자 도구 열고 웹 콘솔에 이런식으로 직접 실행해보면 이해가 될 것이다! 다음과 같이 작성하면 내가 원하는 요소가 중간 부분에 스크롤 되서 나타난다. $('html, body').animate({scrollTop : $('input[name="test"]').offset().top-$(window).height()/2}, 200); 마지막 200이란 숫자는 몇초동안 이동시.. 2021. 9. 15.
javascript, jquery 이미지 미리보기(preview image) 첨부파일 사이즈도 제한하면서 미리보기 구현! (멀티플 아니고 단일파일에 한해서다.) 미리보기 핵심은 굵게 표시한 부분이라고 보면 될것 같다. var maxSize = 10*1024*1024; //10mb $('input[name^="File"]').on("change", function () { var oObj = $(this); if (this.files && this.files[0]) { var fileSize = this.files[0].size; if (fileSize > maxSize) { alert(" 10MB 이내 파일을 업로드해주세요."); return false; } var reader = new FileReader(); reader.onload = function(e){ oObj.par.. 2021. 9. 15.
ajax 사용하기 선택된 체크박스를 서버로 보내기위해 ajax를 사용! var arr_no = new Array(); $("input[name='check_product[]']:checked").each(function () { arr_no.push($(this).val()); }); 위와 같이 배열을 선언하고 체크박스의 벨류를 배열에 넣었다. $.ajax({ url: '/admin/test/action/test.php', data: { arr: arr_no }, method: 'post', success : function(result){ var result2 = JSON.parse(result); alert(result2.msg); location.reload(); }, error:function(e){ console.. 2021. 9. 13.
반복문 사용안하고 체크박스 모두 체크하기 전체체크박스 html 각각체크박스 html 2021. 9. 13.
jQuery,javascript로 data-target 데이터 얻기 data-target 사용하는 법을 알아보자! 치즈봉 위와 같은 요소에서 data-로 시작하는 변수에 들어있는 값을 가져오고 싶을때! 자바스크립트로 document.querySelector('.test').dataset.name; 또는 document.querySelector('.test').getAttribute('data-name'); 제이쿼리로 $('.test').data('name'); //실제 자료형으로 가져온다. $('.test').attr('data-name'); //string으로 가져온다. 웹콘솔로 찍어보면 치즈봉이라고 나온다 ㅎㅎ 실제자료형 스트링? 뭔소린가 싶으면 콘솔에 타입을 찍어보자! 추가로!!! 치즈봉 변수명 더 길게? 사용할때 저런건 어떻게 가져오는가!! 바로 카멜 표기법으로 .. 2021. 9. 13.
jQuery 전체 체크박스 체크 전체 체크박스 클릭시 모든 체크박스에 체크되게 끔 해놓았는데 놓친 부분이 있었다! 체크박스 하나씩 모두 클릭해도 전체 체크박스에 체크되도록 하는거랑... 전체 체크된 상태에서 하나라도 체크 해제하면 전체 체크박스도 해제 시켜주는것! 그림으로 표현하자면.. 전체 체크박스 각각의 체크박스 소스 2021. 9. 13.