본문 바로가기

제이쿼리4

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 태그 요소를 조회하는 closest(), find() 함수를 알아보자 오늘은 jQuery의 closest와 find 함수에 대한 내용을 주제로 글을 쓰려고 한다. 두 함수는 모두 태그 요소를 조회하기 위한 함수이며, children, parent 함수와 유사한 기능을 제공하고 있다. 간단하게 closest는 선택자 기준에서 가장 가까운 상위 요소를 찾고 다룰 수 있는 함수고, find는 선택자 기준에서 가장 가까운 하위 요소를 찾고 다룰 수 있는 기능이다. children, parent와 매우 유사하지만 사용법에 대해서 차이가 있기 때문에 차이점도 함께 확인해보도록 하자. closest() closest() 함수는 jQuery에서 제공하는 DOM 탐색 메서드 중 하나로써, 선택한 요소부터 시작하여 DOM 트리를 위로 올라가며 가장 가까운 상위 요소를 찾는 기능이다. 선택한.. 2023. 1. 2.
jQuery click 이벤트의 개념과 활용방법 알아보기 오늘은 jQuery의 기본 기능 중 하나인 click 이벤트에 대해서 정리해 보려고 한다. 화면 개발에서 가장 많이 사용하는 이벤트가 아닐까 생각한다. 그만큼 사용자가 가장 많이 사용하는 기능인 것이고, 그만큼 기능의 사용법과 특징, 주의사항 등을 잘 알아두는 것이 중요하다. jQuery는 러닝커브가 낮은 편이고, click 이벤트와 같이 흔한 기능을 위주로 학습한다면 실력 향상이 빠르다는 것을 느낄 수 있다는 장점이 있다. click 이벤트의 개념 jQuery에서의 click 이벤트는 웹 페이지에서 요소를 클릭했을 때 발생하는 이벤트를 처리하기 위한 함수다. 이를 통해서 사용자와의 상호작용에 대한 반응을 구현할 수 있다. 선택자의 활용 jQuery에서는 css 선택자를 사용하여 특정 요소를 선택할 수 .. 2022. 12. 28.
728x90