개발이야기/jQuery58

• 

  [jQuery] jQuery.extend() 함수 사용법, 예제 (객체 합치기) jQuery.extend() 함수는 객체를 확장하거나 병합하는 데 사용됩니다. 하나 이상의 객체를 결합하여 새로운 객체를 생성하거나 기존 객체를 수정할 수 있습니다. 주로 설정 옵션을 병합하거나 두 개의 객체를 합칠 때 유용합니다. 사용법 jQuery.extend(target, object1, object2, object3, ...); target: 목표 객체로, 이 객체는 다른 객체의 속성을 포함하고 확장할 대상입니다. object1, object2, object3, ...: 확장할 객체들을 지정합니다. 이러한 객체들의 속성은 목표 객체에 추가됩니다. 소스코드 및 설명 1. 기본 객체 병합 (첫번째 예제) -jQuery.extend()를 사용하여 obj1에 obj2를 병합하고, 두 객체의 속성을 병합합.. 개발이야기/jQuery 2023. 11. 3.

• 

  [jQuery] trigger() 메서드 사용법, 예제 (이벤트 강제발생) trigger() 메서드는 특정 이벤트를 강제로 발생시키는 데 사용됩니다. DOM 요소에서 이벤트 핸들러를 호출하거나 사용자 지정 이벤트를 트리거할 때 유용합니다. 사용법 $(선택자).trigger(이벤트_이름); $(선택자): 이벤트를 발생시킬 대상 요소를 선택합니다. 이벤트_이름: 발생시키려는 이벤트의 이름을 나타냅니다. 이벤트 이름은 문자열로 제공됩니다. $("#myButton").click(function() { $("#anotherElement").trigger("click"); }); 위 예제에서 #myButton은 클릭 이벤트를 처리하며, 해당 버튼을 클릭할 때 #anotherElement에 대한 클릭 이벤트가 발생합니다. 소스코드 및 설명 버튼 클릭 버튼을 클릭해보세요. 버튼 클릭 1. 강.. 개발이야기/jQuery 2023. 11. 3.

• 

  [jQuery] Air Datepicker 사용방법, 예제 (날짜 선택) 아래 소스 코드는 Air Datepicker 라이브러리를 사용하여 달력 기능을 추가하고, 사용자가 날짜를 선택하면 해당 날짜를 표시하고 선택한 날짜의 요일을 표시하는 간단한 예제입니다. 소스코드 1. $('#datepicker').datepicker({ ... }) -#datepicker 요소에 air-datepicker를 적용하는 코드입니다. -language: 달력의 언어 설정. 요일과 월 이름을 한국어로 설정하고, 오늘 및 지우기 버튼 텍스트를 지정합니다. -minDate: 최소 선택 가능한 날짜를 현재 날짜로 설정합니다. -dateFormat: 선택한 날짜의 형식을 "yyyy-mm-dd"로 설정합니다. -onSelect: 사용자가 날짜를 선택했을 때 호출되는 콜백 함수를 정의합니다. 이 함수는 선.. 개발이야기/jQuery 2023. 10. 31.

• 

  [jQuery] append(), prepend() 메서드 사용법, 예제 (HTML 구조변경) append()와 prepend() 함수는 웹페이지의 요소를 다른 웹페이지의 요소 내에 추가하는 데 사용되는 메서드입니다. jQuery를 사용하여 HTML 요소를 동적으로 조작하고 구성하는 데 유용합니다. 사용법 append() -append() 메서드는 선택한 요소의 마지막 자식으로 지정한 내용을 추가합니다. 선택한 요소의 자식 요소 목록 중 가장 뒤에 새로운 내용을 삽입합니다. $(선택자).append(내용); 선택자: 요소를 선택하기 위한 jQuery 선택자입니다. 내용: 추가할 HTML, 텍스트 또는 요소입니다. prepend() -prepend() 메서드는 선택한 요소의 첫 번째 자식으로 지정한 내용을 추가합니다. 선택한 요소의 자식 요소 목록 중 가장 앞에 새로운 내용을 삽입합니다. $(선택자.. 개발이야기/jQuery 2023. 10. 27.

• 

  [jQuery] each() 메서드 사용법, 예제, 활용방법 (반복 작업) each() 메서드는 선택한 요소에 대한 반복 작업을 수행하는 데 사용되는 메서드입니다. 선택한 요소 각각에 대해 함수를 실행할 수 있으며, 요소와 해당 인덱스에 대한 처리를 수행합니다. 사용법 $(selector).each(function(index, element) { // 반복할 작업 수행 }); -selector: 요소를 선택하기 위한 jQuery 선택자입니다. -function(index, element): 각 요소에 대해 실행되는 콜백 함수입니다. -index: 현재 요소의 인덱스 (0부터 시작). -element: 현재 요소에 대한 참조. 기본 예제 항목 1 항목 2 항목 3 항목 4 ul 요소 내의 각 li 요소를 반복하고 각 li 요소의 텍스트 내용을 콘솔에 출력합니다. each() 메서.. 개발이야기/jQuery 2023. 10. 26.

• 

  [jQuery] select 선택 값 가져오고 변경하기, option 추가하고 확인하기 아래 소스코드는 select 박스를 다루고 관련 이벤트를 처리하는 예제입니다. select 박스 선택한 값과 text에 대해서 확인하고, 버튼을 통해서 select 박스의 값을 변경하고, 또 버튼을 통해서 모든 option 값을 노출시키고 있으며 input 창을 통해 새로운 option을 생성하고 select 박스에 추가하고 있습니다. 과일 변경 (바나나) 모든 옵션 가져오기 모든 옵션 값 선택한 과일 Select 박스 옵션 추가 선택 사과 바나나 체리 포도 오렌지 1. 과일 변경 버튼 - select 박스의 값을 banana로 변경하고, 변경된 값을 trigger('change') 메서드를 통해 변경 이벤트를 강제로 발생시켜서 "선택한 과일" 및 "선택한 과일 값"을 업데이트합니다. 2. 모든 옵션 가.. 개발이야기/jQuery 2023. 10. 12.

• 

  [jQuery] radio, checkbox 체크 값 가져오기, 확인하기, 선택하기 아래 소스코드는 라디오 버튼과 체크박스를 조작하며 값을 확인하고, 선택 확인 버튼을 통해 체크된 값에 대해서 확인하는 코드입니다. 소스코드 1. 라디오 버튼 및 체크 박스 이벤트 처리 updateGenderResult(), updateFlavorResult() 함수를 통해서 변경 이벤트를 처리하고 선택된 값에 대해서 화면에 노출합니다. 2. 버튼 이벤트 버튼을 통해서 라디오 버튼과 체크박스를 선택하는 기능입니다. 각각의 버튼을 통해서 선택된 값을 확인할 수 있습니다. 3. 선택 확인 버튼 checkSelection() 함수를 호출하여 현재 선택된 라디오 버튼과 체크박스 값을 확인한 후 결과를 표시하고 있습니다. 선택 확인 라디오 남자 선택 여자 선택 남자 여자 체크 박스 초콜릿 선택 바닐라 선택 초콜릿 .. 개발이야기/jQuery 2023. 10. 11.

• 

  [jQuery] remove(), empty() 메서드 사용방법, 예제 (요소 제거와 내용 비우기) 아래 소스코드는 remove()와 empty() 메서드를 각각의 버튼으로 요소를 제거하고, 요소를 비우는 것을 확인하고 콘텐츠 추가 버튼을 통해 두 영역의 차이점을 확인하고 있습니다. remove(), empty() 1. remove() 메서드 ㅇ remove() 메서드는 선택한 DOM 요소를 완전히 제거합니다. 선택한 요소와 해당 하위 요소가 모두 제거됩니다. $("#myDiv").remove(); 2. empty() 메서드 ㅇ empty() 메서드는 선택한 DOM 요소의 내용(하위 요소 포함)을 제거합니다. 요소 자체는 그대로 남아 있지만 내용이 비워집니다. $("#myDiv").empty(); remove() 메서드는 선택한 요소와 그 하위 요소를 완전히 제거하고, empty() 메서드는 선택한 요.. 개발이야기/jQuery 2023. 9. 25.

• 

  [jQuery] beforeunload 이벤트로 페이지 이탈 확인하기 아래 소스 코드는 beforeunload 이벤트를 통해서 사용자가 페이지를 벗어날 때 경고 메시지가 표시되며, 이벤트 제거하기 버튼을 클릭하면 beforeunload 이벤트를 제거하고 메시지를 표시하지 않는 코드입니다. beforeunload 이벤트는 페이지를 벗어나기 전에 발생하는 이벤트로, 벗어나기 전에 추가 동작을 수행하거나 경고를 표시할 수 있습니다. beforeunload 이벤트를 사용하려면 일반적으로 이벤트 핸들러를 등록하고, 해당 이벤트 핸들러 내에서 사용자에게 보여줄 메시지를 반환해야 합니다. 이 메시지는 브라우저에 표시되며, 사용자에게 어떤 작업을 할 것인지를 확인하는 기회를 제공합니다. 사용자가 페이지를 떠나려고 할 때, 이 메시지가 표시되면 사용자는 "확인" 또는 "취소"와 같은 선택.. 개발이야기/jQuery 2023. 9. 19.

• 

  [jQuery] load() 메서드 사용법, 예제, 데이터 전달 (페이지 로드) 아래 소스 코드는 load() 메서드를 사용해서 버튼을 클릭하면 외부 페이지(t2.html)를 로드하고, 로드가 완료되면 버튼을 숨기는 화면입니다. 외부 페이지로 변수를 전달하고 노출도 시키고 있습니다. 사용방법 $(선택자).load(URL, [데이터], [콜백 함수]); ㅇ 선택자 : 로드한 컨텐츠를 삽입할 요소를 선택합니다. ㅇ URL : 로드할 리소스(외부 페이지 또는 파일)의 URL을 지정합니다. ㅇ 데이터 (선택 사항) : 서버로 전송할 데이터를 지정합니다. 주로 POST 요청에 사용됩니다. ㅇ 콜백 함수 (선택 사항) : 로드가 완료된 후 실행할 함수를 정의합니다. 이 함수는 로드가 성공하거나 실패했을 때 호출됩니다. 특징 ㅇ 비동기적 로드 : load() 메서드는 비동기 방식으로 동작하며, .. 개발이야기/jQuery 2023. 9. 18.

• 

  [jQuery] jqGrid header colNames 색상 변경하기 (header 테이블 스타일 수정) 아래 소스 코드는 jqGrid 테이블 헤더 셀에 배경색을 지정하여 표시하고 있습니다. 각 열 header의 ID를 지정하여 스타일을 개별적으로도 지정할 수 있습니다. 각각의 열에 대해서 스타일을 지정함으로써 헤더와 데이터를 쉽게 식별할 수 있습니다. 개발이야기/jQuery 2023. 8. 31.

• 

  [jQuery] 영문, 숫자, 한글, 특수문자 정규식 입력 체크 (영문 숫자만, 한글만, 영문 숫자 특수문자 조합) 아래 소스 코드는 입력 필드에 대해 입력 값 체크 로직을 구성하였습니다. 입력 필드에 대해 keyup 이벤트를 통해서 입력된 값에 대해 정규식을 사용해 모든 문자열을 체크하고 정규식에 위배되는 문자를 찾아내고 빈 문자열로 대체합니다. 입력 필드에 대해서 원하는 형식으로 데이터를 입력하도록 유도하고, 잘못된 데이터가 입력되는 것을 방지할 수 있으며 데이터의 정확성을 보장하기 위해 사용됩니다. 아이디 : 이름 : E-mail : 개발이야기/jQuery 2023. 8. 21.