jQuery 9

09. [jQuery] XXXX-XX-XX년를 구분하는 정규표현식(regExp) 만들기

XXXX-XX-XX 형식을 판별하는 정규표현식 let regDate = /^([0-9]{4})-?([0-9]{2})-?([0-9]{2})$/; 날짜를 입력받아 날짜 정규표현식이 맞으면 ajax로 데이터를 갱신하는 코드 $("td input").on("keyup",function(e){ let id = $(this).closest("tr").data("id"); let date = $(this).val(); let type = $(this).data("type"); let regDate = /^([0-9]{4})-?([0-9]{2})-?([0-9]{2})$/; if (regDate.test(date) === true || date === "") { $.ajax({ type:"post", url: "./se..

jQuery 2021.12.30

07. [jQuery] 체이닝 기법

체이닝 기법이란? 선택한 요소에 메서드를 연속해서 사용할 수 있는 이를 마친 체인이 엮인 모양과 같다고 하여 '체이닝 기법'이라 합니다. 제이쿼리에서는 한 객체에 다양한 메서드를 줄줄이 이어서 사용할 수 있습니다. 메서드 사용이 완료되면 문장 마지막에는 세미콜론(;)을 작성하여 마무리합니다. $(요소 선택).css(속성1,값1).css(속성2,값2).css(속성3,값3); // ex) $("#title").css("background-color","#ff0").css("border","2px solid #f00");

jQuery 2021.09.14

06. [jQuery] 제이쿼리 최신 버전에서 삭제된 이전 버전의 메서드 사용하기

제이쿼리는 최신 버전으로 자주 업그레이드합니다. 이렇게 최신 버전을 사용하다 보면 이전 버전에서 자주 사용했던 기능(메서드)이 삭제되어 사용할 수 없는 경우가 종종 있습니다. 이런 경우 최신 버전에서 삭제된 이전 버전의 기능을 사용하려면 'Migrate plugin'을 설치하면 됩니다. 아래 사이트로 이동합니다. https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compre..

jQuery 2021.09.14

03. [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법

[jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제하는 방법 일반적으로 라디오 버튼과 체크박스를 컨트롤하기 위해서는 jQuery의. attr() 함수를 많이 사용했습니다. 하지만 jQuery 1.6 버전 이후부터는. attr() 함수가. attr()과. prop() 함수로 구분되어 사용하도록 바뀌었습니다. 결론적으로 라디오 버튼과 체크박스를 javascript 에서 다루기 위해서는. prop() 함수를 사용해야 한다. [예 1 - 라디오 버튼] HTML 사과 복숭아 Javascript $("input:radio[name='fruits']:radio[value='사과']").prop('checked', true); // 선택하기 $("input:radio[name='fruits..

jQuery 2021.09.03

02. [jQuery] 동적으로 생성된 버튼의 클릭 이벤트가 되지 않을 때

보통 jQuery로 이벤트를 걸 때 $(id). click(function(){ }); 형태로 많이 사용합니다. 위의 경우로 사용할 경우, element가 나중에 생긴 경우에는 위의 click 이벤트 적용이 되지 않는 문제가 발생합니다. 그럴 때 필요한 코드가 다음과 같습니다. $(document).on('click', id, function) 다음과 같이 작성하면 element가 나중에 동적으로 생성되었다 하더라도, 이벤트가 동작하게 됩니다. 예제 코드 버튼 #1 버튼 1의 클릭 Function btn1을 클릭했을 때 btnBox안에 btn2를 생성한다. $("#btn1").click(function(){ $(".btnBox").append('버튼 #2'); }); 동적으로 생성된 버튼 2의 Funct..

jQuery 2021.07.19

01. [jQuery] jQuery CDN 이용하기

jQuery와 CDN 설명 jQuery는 자바스크립트의 라이브러리로, 짧은 코드를 이용해서 효율적으로 자바스크립트 코드를 작성할 수 있도록 해줍니다. jQuery를 이용하는 방법에는 아래 사이트에서 라이브러리를 다운받아서 사용하는 방법과 CDN을 이용하는 방법이 있습니다. https://jquery.com jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that ..

jQuery 2021.07.15