개발이야기/jQuery58

• 

  [jQuery] input focus event 사용 예제 (스타일 변경, focus 이동, focus element) 아래 소스 코드는 입력 필드에 포커스 이벤트를 추가하고, 포커스 이벤트에 따라 스타일을 변경하고 다음 입력 필드로 포커스를 이동하는 예제입니다. 소스코드 $('input').focus(function() { ... }); - 모든 요소에 대해 포커스 이벤트를 추가합니다. 포커스가 들어온 경우, 해당 입력 필드의 배경색을 'lavenderblush'로 변경합니다. $('input').blur(function() { ... }); - 입력 필드에서 포커스가 빠져나간 경우, 입력 필드의 배경색을 원래대로 돌리기 위해 스타일을 초기화 합니다. $('input').keypress(function(e) { ... }); - 입력 필드에서 키보드 이벤트를 감지합니다. Enter 키 가 눌린 경우, 다음 input 필.. 개발이야기/jQuery 2023. 8. 21.

• 

  [jQuery] UI Sortable 사용하기 (드래그 앤 드롭, 순서변경, 리스트 이동 정렬) 아래 소스 코드는 jQuery UI Sortable 라이브러리를 활용해서 리스트 간 아이템 이동과 이동이 발생할 때 update 이벤트를 활용하여 콘솔로 확인하는 예제입니다. 소스코드 ㅇ $(".sortable-list ul").sortable({ ... }); - .sortable-list 클래스를 가진 요소의 내부에 있는 ul 태그를 대상으로 Sortable을 설정합니다. 리스트 아이템들에 드래그 앤 드롭 기능을 추가하는 역할을 합니다. ㅇ connectWith: ".sortable-list ul" - 위의 옵션은 서로 다른 리스트 간에 아이템을 이동할 수 있도록 합니다. .sortable-list ul로 설정함으로써 같은 클래스를 가진 다른 리스트와 연결될 수 있습니다. ㅇ start: functi.. 개발이야기/jQuery 2023. 8. 16.

• 

  [jQuery] 상위 요소 찾는 closest() 함수 사용법, 예제 (스타일 변경, 이벤트 추가) 아래 소스 코드는 closest() 함수를 사용해서 HTML 요소를 선택해 스타일을 변경하고, 이벤트를 추가하는 예시입니다. closest() 함수 $(selector).closest(filter); ㅇ $(selector): 선택자를 사용하여 원하는 요소를 선택합니다. 해당 선택자에 맞는 요소들 중에서 가장 가까운 조상 요소를 찾을 것입니다. ㅇ .closest(filter): 선택한 요소에서 시작하여 상위로 이동하면서, 주어진 필터 조건을 만족하는 가장 가까운 조상 요소를 반환합니다. 필터가 지정되지 않으면 가장 가까운 조상 요소를 모두 선택합니다. 요약하면, $(selector).closest(filter); 함수는 주어진 선택자로 선택한 요소를 기준으로 상위로 올라가며 가장 가까운 조상 요소 중에.. 개발이야기/jQuery 2023. 8. 11.

• 

  [jQuery] 하위 요소 찾는 find() 함수 사용법, 예제 (스타일 변경, 이벤트 추가) 아래 소스 코드는 find() 함수를 사용해서 HTML 요소를 선택해 스타일을 변경하고, 이벤트를 추가하는 예시입니다. find() 함수 특정 요소 내에서 하위 요소를 검색하는 함수입니다. 선택한 요소의 하위 요소 중에서 특정 조건을 만족하는 요소를 찾을 수 있습니다. $(selector).find(childSelector) ㅇ $(selector): 상위 요소를 선택하는 선택자입니다. 선택자에 해당하는 요소 내에서 하위 요소를 검색합니다. ㅇ childSelector: 상위 요소 내에서 찾고자 하는 하위 요소를 선택하는 선택자입니다. 소스코드 ㅇ HTML 구조 parent 첫번째 P 태그 parent 두번째 P 태그 child class P 태그 child class P 태그 child class P .. 개발이야기/jQuery 2023. 8. 10.

• 

  [jQuery] input, textarea 커서 위치 확인하고 텍스트 감지하기 (selectionStart, selectionEnd, setSelectionRange) 아래 소스 코드는 selectionStart, selectionEnd를 활용하여 textarea 영역 안에서 커서의 위치와 선택한 텍스트를 감지하고 표시하는 예제입니다. selectionStart 텍스트 영역 내에서 선택된 텍스트의 시작 위치(인덱스)를 나타내는 속성입니다. selectionEnd 텍스트 영역 내에서 선택된 텍스트의 끝 위치(인덱스)를 나타내는 속성입니다. setSelectionRange(start, end) 텍스트 영역 내에서 특정 범위의 텍스트를 선택하도록 설정하는 메서드입니다. start 매개변수는 선택된 텍스트의 시작 위치(인덱스)를 나타내며, end 매개변수는 선택된 텍스트의 끝 위치(인덱스)를 나타냅니다. 간단한 소스이니 확인해보시고 테스트하시면 됩니다. 개발이야기/jQuery 2023. 8. 7.

• 

  [jQuery] jqGrid gridComplete 이벤트로 마우스 커서 변경하기 jqGrid gridComplete 이벤트를 사용하여 그리드 내의 각 행에 마우스를 올리면 커서 스타일로 변경하는 로직입니다. gridComplete 이벤트 jqGrid가 그리드 뷰의 모든 셀과 로우를 생성하고 렌더링 한 후에 발생하는 이벤트입니다. 주로 그리드 뷰의 전체 레이아웃에 관련된 작업을 수행하는 데 사용됩니다. 간단한 소스 코드이니 확인해서 사용하시면 됩니다. 개발이야기/jQuery 2023. 8. 3.

• 

  [jQuery] 트리 메뉴 만들기 예제, 체크박스 사용하기 jQuery를 사용하여 트리 메뉴(구조)를 가진 체크박스 목록을 만드는 예제입니다. 펼치기/접기 기능이 있으며, 각 노드의 체크박스를 클릭하면 하위 노드의 체크박스도 모두 선택 또는 해제됩니다. '선택 확인하기' 버튼을 클릭하면 선택된 노드의 ID를 알려주는 알림 창이 뜨게 됩니다. 선택 확인하기 Root Child 1 Grandchild 1 Grandchild 2 Child 2 개발이야기/jQuery 2023. 7. 31.

• 

  [jQuery] UI Tabs 사용하기 (가로/세로 tabs, tab 추가하기) jQuery UI 라이브러리의 하나로, 웹 페이지에서 탭 기능을 구현하는 데 사용되는 플러그인입니다. 여러 개의 탭으로 구성된 컨텐츠를 간편하게 관리하고, 사용자가 탭을 클릭하여 내용을 전환할 수 있습니다. 아래 소스 코드는 기본적인 가로(수평) 탭과 세로(수직) 탭, 그리고 동적으로 탭을 추가하는 버튼이 있는 예제 코드입니다. 간단한 소스 코드이니 확인하시고 응용하셔서 사용하시면 됩니다. 가로(수평) 탭 새 탭 추가 탭 1 탭 2 탭 3 탭 1 컨텐츠 이곳에 탭 1의 내용을 작성합니다. 탭 2 컨텐츠 이곳에 탭 2의 내용을 작성합니다. 탭 3 컨텐츠 이곳에 탭 3의 내용을 작성합니다. 세로(수직) 탭 탭 1 탭 2 탭 3 탭 1 컨텐츠 이곳에 탭 1의 내용을 작성합니다. 탭 2 컨텐츠 이곳에 탭 2의 .. 개발이야기/jQuery 2023. 7. 27.

• [jQuery] 이벤트 등록/해제하기 사용법,예제($(document).on(),$(document).off()) $(document).on()과 $(document).off()는 이벤트를 처리하고 등록하고 해제하는 메서드입니다. 이벤트 처리는 웹 페이지의 특정 상황에서 코드를 실행하는 데 사용됩니다. $(document)은 문서 전체를 나타내는 jQuery 객체를 의미하며, 이벤트 처리를 문서 전역에서 수행하려는 경우에 자주 사용됩니다. 1. $(document).on() $(document).on() 메서드는 지정된 이벤트를 감지하고 처리하기 위해 요소에 이벤트 핸들러를 등록합니다. $(document).on(eventType, selector, handler); eventType: 이벤트의 종류를 지정합니다. ('click', 'mouseenter', 'keyup' 등) selector: 이벤트를 발생시킬 요소.. 개발이야기/jQuery 2023. 7. 19.

• 

  [jQuery] jstree checkbox 사용법, 예제, 이벤트 핸들링 아래 코드는 jsTree를 사용하여 트리 구조를 생성하고, 다양한 이벤트를 활용하여 트리 노드의 상태 변경 및 핸들링을 수행하고 있습니다. jsTree를 사용하기 위해서는 css와 javascript 라이브러리를 가져옵니다. 트리구조는 내부에 과 태그를 사용해 각각의 id 속성을 가지고 있습니다. $('#jstree').on('이벤트명.jstree', function (e, data) { ... }) 를 통해 이벤트마다 콘솔 로그에 정보를 출력합니다. 변경된 노드 ID, 노드가 열렸을 때, 닫혔을 때, 선택되었을 때, 선택 해제되었을 때 등의 이벤트를 콘솔에서 확인할 수 있습니다. Root node A 그룹 Child node 1 Child node 2 B 그룹 Child node 3 Child node.. 개발이야기/jQuery 2023. 7. 18.

• [jQuery] 화면 (브라우저) 크기 확인, 화면 변경 감지하기 jQuery를 사용하여 현재 브라우저의 화면 해상도를 가져 올 수 있습니다. $(window).width()를 사용하여 브라우저 창의 너비를 가져올 수 있고, $(window).height()를 사용하여 브라우저 창의 높이를 가져올 수 있습니다. 이렇게 얻은 값은 픽셀 단위로 반환됩니다. 예제 1. $(window).width() 로 분기처리 하기 2. 화면 크기에 따라 CSS 수정하기 3. 스크롤 이벤트 처리 개발이야기/jQuery 2023. 7. 4.

• [jQuery] input name 배열 값 가져오기, 유효성 검사 아래 소스 코드는 input name 배열의 값에 대해서 각각의 입력 필드에 대해 유효성을 검사하는 기능을 구현하고 있습니다. each() 함수를 통해서 classe_cnt [], age_cnt [] 이름을 가진 입력 필드에 대해 반복적으로 코드가 실행됩니다. index 매개 변수를 통해서 입력 필드 값이 비어 있으면 메시지를 보여 줍니다. 간단한 소스 코드이니 응용해서 사용하시면 됩니다. 확인 No 학번 나이 1 2 3 개발이야기/jQuery 2023. 7. 3.