JavaScript/JQuery
-
아래와 같이 id가 inputDate 인 input type date 태그에 min, max 속성값을 준다. 시작날짜는 현재 날짜의 다음날이고 종료날짜는 오늘날짜의 28일 날짜로 설정하겠다. HTML JavaScript // 시작날짜(min 속성) let sDate = new Date(); // 종료날짜(max 속성) let eDate = new Date(); sDate.setDate(sDate.getDate() + 1); // 시작날짜의 날짜를 +1일 한다. eDate.setDate(eDate.getDate() + 28); // 종료날짜의 날짜를 +28일 한다. let minStr = sDate.toISOString().split('T')[0]; let maxStr = eDate.toISOString(..
Javasript input type date min, max 옵션 주기아래와 같이 id가 inputDate 인 input type date 태그에 min, max 속성값을 준다. 시작날짜는 현재 날짜의 다음날이고 종료날짜는 오늘날짜의 28일 날짜로 설정하겠다. HTML JavaScript // 시작날짜(min 속성) let sDate = new Date(); // 종료날짜(max 속성) let eDate = new Date(); sDate.setDate(sDate.getDate() + 1); // 시작날짜의 날짜를 +1일 한다. eDate.setDate(eDate.getDate() + 28); // 종료날짜의 날짜를 +28일 한다. let minStr = sDate.toISOString().split('T')[0]; let maxStr = eDate.toISOString(..
2023.02.14 -
jquery 의 form 태그 데이터 전달방법에는 2가지 방법이 있다. $("#form 태그 id").serialize() 와 $("#form 태그 id").serializeArray() 가 있다. $("#form 태그 id").serialize() $("#form 태그 id").serialize(); // 결과 a=123&b=456&c=789 $("#form 태그 id").serializeArray() $("#form 태그 id").serializeArrary(); // 결과 [{name: 'a', value: '123'}, {name: 'b', value: '456'}, {name: 'c', value: '789'}] 위처럼 일반 parameter 또는 배열처럼 데이터가 전달되기 때문에 Java 의 ..
[JQuery] Form 태그 데이터 JSON 형태로 넘기기jquery 의 form 태그 데이터 전달방법에는 2가지 방법이 있다. $("#form 태그 id").serialize() 와 $("#form 태그 id").serializeArray() 가 있다. $("#form 태그 id").serialize() $("#form 태그 id").serialize(); // 결과 a=123&b=456&c=789 $("#form 태그 id").serializeArray() $("#form 태그 id").serializeArrary(); // 결과 [{name: 'a', value: '123'}, {name: 'b', value: '456'}, {name: 'c', value: '789'}] 위처럼 일반 parameter 또는 배열처럼 데이터가 전달되기 때문에 Java 의 ..
2022.12.13 -
JQuery 를 이용하여 Radio Button Check 설정 HTML(Radio Button) TEST1 TEST2 Radio Button 선택 $("input:radio[name='Radio Name 이름'][value='Radio Button Check할 Value 값']").prop("checked", true); //예시 $("input:radio[name='test_radio'][value='value1']").prop("checked", true); Radio Button Check 값 가져오기 $("input:radio[name='Radio Name 이름']:checked").val(); //예시 $("input:radio[name='test_radio']:checked").val(); ..
[JQuery] Radio Button Checked 설정JQuery 를 이용하여 Radio Button Check 설정 HTML(Radio Button) TEST1 TEST2 Radio Button 선택 $("input:radio[name='Radio Name 이름'][value='Radio Button Check할 Value 값']").prop("checked", true); //예시 $("input:radio[name='test_radio'][value='value1']").prop("checked", true); Radio Button Check 값 가져오기 $("input:radio[name='Radio Name 이름']:checked").val(); //예시 $("input:radio[name='test_radio']:checked").val(); ..
2022.12.13 -
jquery 에서 보이는 jquery.fn 과 $.fn 이 있다. 쉽게 말하면 위 두개는 같은 의미를 말하며 jquery 의 프로토타입을 말한다. 자바스크립트는 프로토타입 기반 언어라고 불린다. 객체지향언어 즉, Java에서 사용하는 Class라는 개념과 비슷하지만 자바스크립트에서는 Class라는게 없습니다. 그래서 사용하는게 프로토타입입니다. 클래스가 없으니 상속기능도 없지만 프로토타입을 사용하여 상속이라는걸 흉내내도록 구현해 사용한다. 쉽게 말해 매번 객체를 생성하지 않고 1개의 객체를 생성해 공유할 수 있는 공간에 넣어놓고 사용하기 위해 프로토타입을 사용한다. 어떠한 특정한 기능을 하는 함수도 넣어놔 공유공간에서 호출해 사용할 수 있다. 정확한 내용은 아래 글 확인해주세요 https://okimar..
jquery.fn 과 $.fnjquery 에서 보이는 jquery.fn 과 $.fn 이 있다. 쉽게 말하면 위 두개는 같은 의미를 말하며 jquery 의 프로토타입을 말한다. 자바스크립트는 프로토타입 기반 언어라고 불린다. 객체지향언어 즉, Java에서 사용하는 Class라는 개념과 비슷하지만 자바스크립트에서는 Class라는게 없습니다. 그래서 사용하는게 프로토타입입니다. 클래스가 없으니 상속기능도 없지만 프로토타입을 사용하여 상속이라는걸 흉내내도록 구현해 사용한다. 쉽게 말해 매번 객체를 생성하지 않고 1개의 객체를 생성해 공유할 수 있는 공간에 넣어놓고 사용하기 위해 프로토타입을 사용한다. 어떠한 특정한 기능을 하는 함수도 넣어놔 공유공간에서 호출해 사용할 수 있다. 정확한 내용은 아래 글 확인해주세요 https://okimar..
2022.12.06 -
modal id 값은 각각 아래와 같다. 1. manageDnisDialog 2. manageDnisLicenceCountDialog 레이어 팝업창을 2개 띄우기 위해 jquery ajax를 사용하여 Controller 에서 html 코드를 받아온 후 modal 태그에 직접 넣었다. // 첫번째 modal 레이어 팝업 $.ajax({ cache : false, type : 'POST', dataType : "html", url : menu_href, data : { dnis : dnis, action_type : action_type }, success : function(data) { $('#manageDnisDialog').html(data); //html data가 담길 target div $('#..
BootStrap modal 2개 띄웠을 때 hidden.bs.modal event 처리modal id 값은 각각 아래와 같다. 1. manageDnisDialog 2. manageDnisLicenceCountDialog 레이어 팝업창을 2개 띄우기 위해 jquery ajax를 사용하여 Controller 에서 html 코드를 받아온 후 modal 태그에 직접 넣었다. // 첫번째 modal 레이어 팝업 $.ajax({ cache : false, type : 'POST', dataType : "html", url : menu_href, data : { dnis : dnis, action_type : action_type }, success : function(data) { $('#manageDnisDialog').html(data); //html data가 담길 target div $('#..
2022.08.16 -
* jquery $(''#subMenuDialog") * document.getElementById("subMenuDialog") 이 두개는 같은 DOM 데이터를 불러오는건 동일하다. $("#subMenuDialog") 처럼 jquery 를 이용해 DOM의 id를 불러올때는 jquery 의 객체를 반환한다. 그리고 document.getElementById("subMenuDialog") 를 이용해 id 값을 부를땐 DOM 객체 자체가 넘어온다. 아래 예시를 확인해보자 예를 들기 위해 bootstrap의 modal 창을 subMenuDialog 라는 id 값으로 생성하여 불러온다. 아래와 같이 html 코드가 있다. > document.getElementById("subMenuDialog") 를 통해 불러..
Jquery $() 와 document.getElementById() 의 차이* jquery $(''#subMenuDialog") * document.getElementById("subMenuDialog") 이 두개는 같은 DOM 데이터를 불러오는건 동일하다. $("#subMenuDialog") 처럼 jquery 를 이용해 DOM의 id를 불러올때는 jquery 의 객체를 반환한다. 그리고 document.getElementById("subMenuDialog") 를 이용해 id 값을 부를땐 DOM 객체 자체가 넘어온다. 아래 예시를 확인해보자 예를 들기 위해 bootstrap의 modal 창을 subMenuDialog 라는 id 값으로 생성하여 불러온다. 아래와 같이 html 코드가 있다. > document.getElementById("subMenuDialog") 를 통해 불러..
2022.08.03