Front/JavaScript & jQuery27 [JavaScript] 자주 사용하는 querySelector 문법 (CSS 선택자) 서론자주 사용하는 JavaScript의 querySelector(All) 메소드의 문법을 정리해보자. ✏️참고! querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환한다.일치하는 요소가 없으면 null을 반환한다. 지정한 선택자와 일치하는 모든 요소의 목록이 필요한 경우 querySelectorAll() 함수를 사용해야 한다. 적용 ✔️1. 기본적인 선택자// iddocument.querySelector("#btnPrev")// classdocument.querySelector(".btnPrev")// 태그document.querySelectorAll("button")// 속성document.querySelectorAll("[name]"); // name 속성이 .. 2024. 5. 21. [jQuery] jquery validation 사용 시 submit 막기 상황 jquery validation 라이브러리 사용하여 유효성 검사를 했다. 보통 유효성 검사에 통과하면 서버에 데이터를 보내고 DB에 저장,수정을 하는 로직을 태운다. 기본적인 jquery validation 라이브러리 사용법은 아래 포스팅 참고!👇 2023.02.28 - [Front/JavaScript & jQuery] - [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 하지만 이번 요구사항에는 유효성 검사에 통과하면 미리보기처럼 하단에 리스트를 하나씩 차곡차곡 쌓고, 맨 마지막에 [저장] 버튼을 클릭했을 때 쌓아놓은 리스트들을 한꺼번에 DB에 저장하도록 구현해야 했다. 적용 ✔️1. html 파일의 form 태그에 onsubmit="return false;" 추가 ✔.. 2024. 2. 16. [jQuery] Sortable 드래그앤드랍 drag&drop 순서 변경 후 처리하기 상황 목록을 drag&drop을 이용하여 정렬 순서를 변경하는 기능을 구현할 때, 좀 더 쉽게 jQuery-ui 라이브러리 내에 sortable 을 사용할 수 있다. 참고로 drag&drop 기능을 바닐라JS를 사용해서도 구현할 수 있다. 이전 포스팅 참고!👇 2021.12.21 - [Front/JavaScript & jQuery] - [JavaScript] 드래그 앤 드롭, 위 아래로 이동시키기 정렬 기능 구현은 어렵지 않게 했는데, drag&drop으로 정렬을 마친 후에 다른 기능을 수행하려면 어떻게 해야할까? 적용 ✔️정렬을 마치고 DOM의 위치가 변경되었을 때를 감지하는 이벤트를 아래와 같이 추가하면 된다. $( ".dragTable" ).off("sortupdate").on("sortupdate.. 2024. 2. 16. input이 하나인 경우, enter키를 누르면 form submit 되는 현상 막기 상황 form태그 안에 input 태그가 오직 하나인 경우 엔터를 치게 되면 기본적으로 submit이 된다. 의도하지 않은 submit을 막기 위한 방법은 여러가지가 있다. 그 중에 내가 사용한 방법을 정리해보려고 한다. 적용 📌form 태그에 onsubmit="return false;" 를 주어 submit을 막는다. 📌onkeyup에 엔터(keyCode == '13') 인 경우에 실행할 함수를 호출한다. 검색 📌fnSearch() 함수 부분 : 이제 submit 속성을 true로 바꾸어준다. function fnSearch(){ $('#frm').attr("onsubmit", "return true"); $('#frm').submit(); } 2023. 7. 18. [jQuery] 제이쿼리 validation 활용하여 유효성 검사(ajax 실시간 통신, 유효성 실패 메시지 변경) jQuery validation 커스텀 제이쿼리 validation 플러그인의 기본적인 사용법은 저번 포스팅을 참고하면 좋을 것 같다.2023.02.28 - [Programming/JavaScript & jQuery] - [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 이번 포스팅에는 좀 더 자유도 높게 다양한 커스터마이징을 해보려고 한다. 적용 ✔️1. 필드에 입력 시, 실시간 ajax 통신하여 유효성 검사하기 📌input에 입력할 때, 서버 호출하여 유효성을 검사하는 방법이다.자주 쓰이는 예를 들자면 바로 회원가입할 때, 동일한 ID 존재 여부 검사이다. 사실 커스터마이징할 필요 없이, jquery validation은 remote라는 메소드를 제공해주긴 한다.관.. 2023. 5. 2. [JavaScript & JQuery] 동적으로 생성된 요소에 이벤트 바인딩 상황 프로젝트를 진행하다보면, 페이지가 그려지고 난 후에 ajax 등 비동기 방식을 이용하여 동적으로 요소들을 생성, 추가하는 경우가 있다. (innerHTML이나 jQuery의 append()와 같은 방법 등..) 이런 경우에는 이벤트 바인딩이 되지 않는다. 이미 페이지가 로드되면서 작성한 이벤트 코드가 바인딩 된 상태이기 때문이다. 동적으로 추가된 요소에 이벤트를 바인딩해야 한다면 어떻게 해야 작동할까? 적용 ✔️1. 자바스크립트로 동적 요소 이벤트 바인딩 📌이벤트 버블링을 이용해서 미리 그려져있는 요소에 이벤트를 건다. // 여기에 동적으로 appendChild 동적 추가 동적으로 생성! 동적 추가 위 소스를 간단히 설명하면, [동적 추가] 버튼을 클릭 시 root태그 하위에 h2태그로 감싸진 ht.. 2023. 4. 26. 이전 1 2 3 4 5 다음
