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. [jQuery] .append() .prepend() 알아보자! 오늘은 jQuery의 append와 prepend 함수에 대한 내용을 정리해보려고 한다. 태그 요소를 추가할 때 주로 사용되는 개념이며, 활용도가 아주 높기 때문에 학습해 둔다면 유용하게 사용될 수 있다. 요소에 특정 콘텐츠를 추가해야 하는 경우는 많기 때문에 append와 prepend는 어떤 방식으로 동작하는지 개념과 활용 예제, 주의사항 등을 알아보자. append와 prepend의 개념 위에서 설명한 바와 같이 두 함수는 HTML 요소에 새로운 콘텐츠를 추가하는 데 주로 사용되는 함수다. 두 함수의 기능은 매우 유사하나 약간의 차이가 있기 때문에 차이점을 파악하고 상황에 맞게 활용하는 것이 중요하다. append append 함수는 선택한 요소의 마지막 자식 요소로 설정된 콘텐츠를 추가하는 기능이.. 2022. 12. 31. jQuery show() hide() 이벤트 배워보기! 오늘은 jQuery의 show와 hide 이벤트에 대한 내용을 주제로 정리해 보려고 한다. 해당 이벤트는 특정 요소를 간단하게 보여주거나 숨기는 기능이며, 사용 방법은 매우 간단하다. show와 hide의 개념 UI에서 show와 hide의 처리는 다양한 환경에 사용되는 중요한 개념이다. 특정 요소를 선택하여 보이거나 감추는 기능인데, 이 간단한 기능이 매우 유용하게 쓰이고, 자바스크립트와 jQuery 뿐만 아니라 다양항 프론트엔드 라이브러리에서는 공통되는 개념이기 때문에 숙지하고 넘어가는 것이 좋다. Show 요소의 표시를 할 때 사용되며, show는 화면에 특정 요소를 보이게 한다. 이는 사용자에게 해당 요소를 표시하여 시각적으로 접근할 수 있도록 한다. 사용자가 요소와 상호작용할 수 있도록 하기 위.. 2022. 12. 30. jQuery click 이벤트의 개념과 활용방법 알아보기 오늘은 jQuery의 기본 기능 중 하나인 click 이벤트에 대해서 정리해 보려고 한다. 화면 개발에서 가장 많이 사용하는 이벤트가 아닐까 생각한다. 그만큼 사용자가 가장 많이 사용하는 기능인 것이고, 그만큼 기능의 사용법과 특징, 주의사항 등을 잘 알아두는 것이 중요하다. jQuery는 러닝커브가 낮은 편이고, click 이벤트와 같이 흔한 기능을 위주로 학습한다면 실력 향상이 빠르다는 것을 느낄 수 있다는 장점이 있다. click 이벤트의 개념 jQuery에서의 click 이벤트는 웹 페이지에서 요소를 클릭했을 때 발생하는 이벤트를 처리하기 위한 함수다. 이를 통해서 사용자와의 상호작용에 대한 반응을 구현할 수 있다. 선택자의 활용 jQuery에서는 css 선택자를 사용하여 특정 요소를 선택할 수 .. 2022. 12. 28. jQuery 텍스트 문구 자동 롤링 기능 (fade in / out) 지난번 animate 기능으로 구현한 텍스트 문구 자동 롤링에 이어 오늘은 fadein과 fadeout 기능을 활용하여 문구 자동 롤링 처리되는 기능에 대해서 정리해 보려고 한다. 사용하는 함수는 다르지만 효과는 매우 유사하며, animate 함수가 아니더라도 동일한 기능을 낼 수 있다. 개발자라면 하나의 기능 구현보다는 다양한 기능을 활용하여 동일한 기능을 구현해 보는 것도 매우 중요하다. 기능을 정리하기에 앞서 fadein과 fadeout 함수에 대해서 개념을 정리하고 시작하는 것이 좋다. fadein(), fadeout() 함수 텍스트 문구의 자동 롤링 가능을 구현하는 데에는 jQuery의 fadeIn()과 fadeOut() 함수를 사용할 수 있다. animate()함수와 달리 두 개의 이들을 조합.. 2022. 2. 17. 이전 1 2 다음 728x90
