javascript/jQuery11 jQuery change 이벤트 배우기 (select, input 요소) 안녕하세요. 오늘은 jQuery의 change 이벤트에 대해서 알아보려고 합니다. change 이벤트는 이름에서도 알 수 있듯이 선택한 요소의 변경이 발생했을 때의 이벤트를 핸들링하는 기능입니다. click과 같은 이벤트처럼 사용 빈도가 높은 이벤트이며, 보통은 select box, input text, input checkbox, input radio 등 선택 요소를 변경할 때 많이 사용합니다. 그럼 예제 소스 코드를 통해서 하나씩 정리해 보도록 하겠습니다. import jQuery v3.6.1 예제 소스 코드를 설명하기 전에 먼저 jQuery 라이브러리를 import 시켜줍니다. 저는 cdn 방식으로 연동을 하였고, jQuery 버전은 3.6.1입니다. 사용하는 환경의 라이브러리 버전을 꼭 확인하고 .. 2023. 2. 16. jQuery 천단위 콤마 자동 적용하기 (input 활용) 안녕하세요. 오늘은 jQuery에서 input 태그 요소에 숫자 천 단위 콤마를 추가하는 방법을 포스팅하려고 합니다. 화면을 개발하다보면 input 요소에 숫자값을 입력하는 경우가 있는데, 입력값이 금액인 경우에는 자동으로 입력이 되도록 처리해야 하는 경우가 있습니다. 콤마를 추가해 주는 기능은 기본적으로 자바스크립트로 처리를 하며, input 요소를 컨트롤하는 이벤트와 값을 처리하는 부분이 jQuery로 처리를 하게 하였습니다. 그러면 어떤 식으로 처리를 하면 되는지 예제를 통해서 알아보도록 하겠습니다. 1. 천단위 기준으로 콤마 추가하기 import jQuery 먼저 jQuery 라이브러리를 import 시켜줍니다. html input 요소 추가 input 요소를 추가해 주고, type은 text로 .. 2023. 2. 13. jQuery attr(), prop() 차이점 알아보기! 안녕하세요. 오늘은 jQuery에서 속성값을 다루는 attr()과 prop()에 대해 포스팅하려고 합니다. 자바스크립트의 DOM 요소를 다루면서 태그마다 특수한 기능을 가진 요소가 있습니다. 오늘 예제를 통해 다뤄볼 요소는 a, input, checkbox, radio 태그를 이용하여 attr(), prop() 기능을 다루는 방법과 차이점을 알아보도록 하겠습니다. attr() attr : attribute를 줄인 용어로 태그의 속성 값을 key, value 구조로 태그에 등록하여 다루는 기능으로 html 기준의 속성값이라고 이해하면 됩니다. prop() prop : property를 줄인 용어로 태그의 고유 속성 값을 다루는 기능으로 javascript 기준의 속성값이라고 이해하면 됩니다. 그럼 간단한 .. 2023. 1. 28. jQuery .empty() .remove() (DOM 삭제하기) 오늘은 jQuery에서 요소를 비우거나 삭제할 때 많이 사용되는 empty()와 remove() 함수에 대해 정리해 보려고 한다. UI에서 동적으로 특정 요소를 비워주거나 삭제해줘야 하는 경우가 많이 있기 때문에 해당 함수에 대해서 알아두는 것이 좋다.두 함수는 모두 태그 요소를 삭제한다는 개념은 동일하지만 선택 요소가 포함되는지, 아니면 선택 요소의 하위 요소만 삭제하는지의 차이가 있다. 개념과 특징을 살펴보면서 알아보도록 하자.DOM 요소를 비워줘야 하는 이유UI의 DOM 요소를 비워줘야 하는 이유는 여러 가지 이유가 있다. 기능을 배우기 전에 이 작업을 왜 하는지에 대해서 한번 정리해 보고 접근한다면 훨씬 더 도움이 될 수 있다.메모리 관리웹 페이지에서 동적으로 생성되고 제거되는 요소들이 많.. 2023. 1. 3. jQuery 태그 요소를 조회하는 closest(), find() 함수를 알아보자 오늘은 jQuery의 closest와 find 함수에 대한 내용을 주제로 글을 쓰려고 한다. 두 함수는 모두 태그 요소를 조회하기 위한 함수이며, children, parent 함수와 유사한 기능을 제공하고 있다. 간단하게 closest는 선택자 기준에서 가장 가까운 상위 요소를 찾고 다룰 수 있는 함수고, find는 선택자 기준에서 가장 가까운 하위 요소를 찾고 다룰 수 있는 기능이다. children, parent와 매우 유사하지만 사용법에 대해서 차이가 있기 때문에 차이점도 함께 확인해보도록 하자. closest() closest() 함수는 jQuery에서 제공하는 DOM 탐색 메서드 중 하나로써, 선택한 요소부터 시작하여 DOM 트리를 위로 올라가며 가장 가까운 상위 요소를 찾는 기능이다. 선택한.. 2023. 1. 2. jQuery .children() .parent() 배워보기! 오늘은 jQuery의 자식 요소를 찾아주는 children과 부모 요소를 찾아주는 prarent 함수에 대해서 정리해 보려고 한다. DOM 트리에서 요소를 탐색하고 조작하는 데 사용되는 메서드이며, 다양한 상황에 응용될 수 있는 함수다. children과 parent 함수의 개념 children과 parent 함수는 이름에서도 알 수 있듯이 자식과 부모 요소를 찾을 수 있도록 도와주는 기능의 함수다. 두 함수 모두 DOM 객체 내에서 요소 간의 관계를 탐색하고 조작할 때 편리하게 활용할 수 있으며, 특정 요소의 직계 자식 요소를 선택하여 스타일을 변경하거나, 특정 요소의 부모 요소를 선택하여 이벤트를 추가하는 등의 작업을 수행할 수 있다. children() children 함수는 선택한 요소의 직계 자.. 2023. 1. 2. 이전 1 2 다음
