Life goes slowly...

자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소의 css 속성 값을 가져오거나 style 속성을 추가하는 함수로 .css() 함수가 있습니다. jquery(제이쿼리)의. css() 함수 jQuery(제이쿼리)의 .css() 함수를 통하여 속성 값을 가져올 수 있습니다. //.css함수를 사용하여 속성값 가져오기 .css( propertyName ) $("#test").css("color"); jQuery(제이쿼리)의 .css() 함수를 통하여 속성 값을 추가하기도 가능합니다. //.css함수를 사용하여 속성값 추가하기 .css( propertyName, val ) $("#test").css("color", "blue"); .css() 함수와 비슷한 성격을 가지고 있는 함수로써는 HTML 요소..

웹페이지에서 Popup창을 열고 input Text 창에 웹페이지 URL을 작성한 뒤에 복사하기 쉽도록 URL 전체를 선택하도록 하는 경우가 있습니다. 이는 제일 먼저 Popup창을 열게 하고 나서 input 창에 focus를 이동하도록 한 뒤에 선택하도록 하면 됩니다. Ctrl + C로 아래의 URL을 복사. //Foucs 이동후에 onfocus="this.select()" input창 text 선택 닫기 제이쿼리(Jquery)의 포커스 강제이동 함수는 focus()입니다.

stopPropagation() 함수는 제이쿼리(jquery)에서 preventDefault() 함수와는 다르게 이벤트 취소를 하는 함수로써 현재 이벤트 이후의 전파를 모두 취소하는 함수입니다. 쉽게 말하자면 부모 태그로의 이벤트 전파를 모두 취소하는 함수입니다. //stopPropagation() 함수 사용법 event.stopPropagation() 제이쿼리(jQuery)의 preventDefault() 함수 제이쿼리(jQuery)의 stopPropagation() 함수는 클릭 이벤트 외에 별도의 브라우저 행동을 제지하기 위하여 사용되는 함수입니다. TEST ===================================== //이벤트 전달을 중단하는 stopPropagation() 함수 $("#Te..

preventDefault()는 제이쿼리(jquery)에서 이벤트 위임을 통하여 다수의 요소(elemnet)에 공통으로 적용되는 이벤트 핸들러를 공통된 상위 요소에 단 한 번의 연결만으로 동작할 수 있도록 하는 함수입니다. 쉽게 말하자면 preventDefault() 함수는 취소 할수 있는 이벤트들을 취소하도록 하는 함수이지만 모든 이벤트 전파를 막지는 못하고 이벤트를 취소만 가능합니다.. 발생하는 이벤트들의 Default 액션이 발생하지 않는다는 의미입니다. 하지만 모든 이벤트가 취소가능한 이벤트는 아님을 명심해야 합니다. 이벤트의 취소 가능 여부는 event.cancelable를 사용하여 확인이 가능합니다. //preventDefault() 함수 사용법 event.preventDefault() 제이쿼..

제이쿼리(jquery)에서 가장 많이 사용하고 자주 사용하고 있는 엘리먼트의 형제 엘리먼트를 찾아주는 함수입니다. siblings() 함수는 자신을 제외한 형제 엘리먼트를 찾는 함수입니다. 형제 엘리먼트의 class를 추가하거나 삭제할 때 많이 사용되는 함수입니다. //siblings() 함수 사용법 elements.siblings([filter]) 제이쿼리(jQuery)의 siblings() 함수 제이쿼리(jQuery)의 siblings() 함수는 지정한 선택자의 형제 요소를 모두 선택합니다. 1. 철수 2. 동건 3. 토마스 4. 원빈 5. 인성 ===================================== //id 가 test 요소를 제외하고 나머지 요소가져오기 $("li#test").sibl..

자바스크립트(Javascript)의 엑셀 다운로드 하기 자바스크립트(Javascript)에서 HTML로 된 table 형태로 된 데이터를 엑셀로 다운로드를 받는 방법입니다. 프론트엔트 개발에 많이 사용될거라 생각되어 작성하여 봅니다. Java 형태로 된 개발은 많이 사용되었지만 API로 호출하여 가져온 데이터를 HTML 형태로 만들어져 있는 Table 데이터를 자바스크립트(Javascript)로 엑셀 다운로드 하는 방법입니다. Column 1 Column 2 Column 3 데이터1_1 데이터1_2 데이터2_1 데이터2_2 데이터3_1 데이터3_2 엑셀다운로드 버튼의 onclick 이벤트를 생성하여 제이쿼리(jQuery)로 클릭 이벤트 함수를 만들면됩니다. //엑셀 다운로드 함수 $('#buttonExc..

Cookie(쿠키)란 클라이언트 로컬에 저장되는 키와 값의 데이터입니다. 사용자 인증이 유효한 시간을 명시 가능하며, 유효시간이 정해지면 브라우저가 종료되더라도 인증은 유지됩니다. //jquery 라이브러리에 있는 cookie 플러그인을 사용하면 됩니다. 제이쿼리(jQuery) Cookie 생성하기 제이쿼리(jQuery)로 Cookie를 생성할때 옵션을 정할수 있습니다. // Cookie 생성 - 브라우저를 닫을때 cookie 삭제 $.cookie('test', '1111'); // 7일 뒤에 만료 Cookie 생성 $.cookie('test', '1111', { expires: 7 }); // 전체 사이트에 대해 7일 뒤에 만료 Cookie 생성 $.cookie('test', '1111', { expi..

Radio Button의 제이쿼리(jQuery) 이벤트를 통하여 제어가 가능합니다. 1 2 3 4 제이쿼리(jQuery)의 radio button 체크된 value 값 확인 제이쿼리(jQuery)를 활용하여 라디오 버튼의 체크된 value 값을 확인할 수 있습니다. // radio button 체크된 value 값 출력 console.log($('input[name="radioType"]:checked').val()); 제이쿼리(jQuery)의 value 값으로 radio button 체크하기 제이쿼리(jQuery)를 활용하여 value 값을 통하여 라디오 버튼의 체크를할 수 있습니다. // value 값으로 radio button 체크하기 // value 값 2 radio button 체크하기 $('i..

자바스크립트(Javascript)에서 버튼(Button) 영역에 disabled 속성을 추가 및 삭제하여 버튼을 클릭하거나 클릭을 하지 못하도록 활용을 해보도록 하겠습니다. 자바스크립트의 disabled 속성 활용하기 Jquery로 disabled 속성 활용하기 자바스크립트(Javascript)뿐만 아니라 제이쿼리(JQuery)에서도 활용이 가능합니다. 제이쿼리(JQuery)의 attr 함수를 사용하여 disabled 속성을 활용할 수 있습니다.

selectbox의 제이쿼리(jQuery) 이벤트를 통하여 제어가 가능합니다. 나라선택 Korea United States Japan China Canada Hong Kong 제이쿼리(jQuery)의 selectbox change 이벤트 제이쿼리(jQuery)를 활용하여 selectbox change 이벤트를 사용할수있습니다. // selectbox의 change 이벤트 $("#country").change(function() { console.log(this.value); }); // selectbox의 on 이벤트 $(document).on('change',"#country", function() { console.log($(this).val()); });

List Check 번호 이름 Check 1 철수 Check 2 영수 Check 3 토마스 Check 4 순이 Check 5 창모 jQuery의 checkbox 여부 확인 jQuery를 활용하여 checkbox 리스트의 전체 갯수와 checked 된 갯수를 확인 가능합니다. // checkbox의 전체 갯수 $("input:checkbox[name=chkList]").length // checkbox의 선택된 갯수 $("input:checkbox[name=chkList]:checked").length // checkbox의 전체 체크 $("input[name=chkList]:checkbox").prop("checked", true); jQuery의 each문을 통하여 checked된 value 값 가져오..

제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소의 넓이와 높이를 값을 설정하거나 넓이, 높이 값을 가져올수가 있습니다. 요소(element)의 크기의 영향을 미치는 구성에는 내부의 여백인 padding, 외부의 여백인 margin, 그리고 테두리 선인 border이 있는데, 이 3가지가 요소(element)가 넓이와 높이 값에 영향을 주게 됩니다. jQuery(제이쿼리)의 요소(element)의 높이 측정구하기 jQuery(제이쿼리)로 요소(element)의 높이를 측정하는 방법은 요소(element)의 크기의 영향을 미치는 구성에 따라서 4가지 방법이 있습니다. 여기서 주의할 점은 Javascript(자바스크립트)와 jQuery(제이쿼리)의 높이 구하는 방법은 달라서 헷갈리지 말아야 합..

우리가 자주사용하고 있는 자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소의 스크롤 위치를 손쉽게 알 수 있고, 스크롤 위치를 설정할 수 있는 함수가 있습니다. 요소의 수직 이나 수평 스크롤 바의 위치를 알 수 있으며, 인수로 전달받은 값으로 수직, 수평의 스크롤 바의 위치를 설정할 수 있습니다. 위치 개념으로는 지역 좌표와 전역 좌표가 있는데 지역 좌표는 부모 노드 기준의 좌표이며, 전역 좌표는 최상위 노드인 Document의 Left와 Top 위치가 0부터 시작합니다. jquery(제이쿼리)의 .scrollLeft() 함수 jQuery(제이쿼리)의 선택한 요소의 수평 스크롤 바의 위치를 얻거나, 선택한 요소의 수평 스크롤 바의 위치를 설정이 가능합니다. //함수 사용방법 ..

자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소를 감싸기가 가능한 함수가 있습니다. 선택한 요소를 원하는 태그로 감싸기를 할 때 대상 요소나 대상 요소의 하위 요소, 대상 요소의 전부를 감싸기를 할 수 있습니다. jquery(제이쿼리)의 .wrap() 함수 jQuery(제이쿼리)의 .wrap() 함수는 선택한 요소에 새로운 태그로 감싸는 함수입니다. .wrap() 함수는 $() 형식으로 사용되는 함수에서 나오는 문자열 또는 객체로도 감싸기를 할 수 있습니다. //함수 사용방법 $(select).wrap(wrappingElement); // wrappingElement 요소들을 감싸는 요소 $(select).wrap( function() ); //p 요소를 div 태그로 감싸..

jQuery(제이쿼리)의 .replaceWith() 함수 자바스크립트(Javascript) - jQuery(제이쿼리)의 .replaceWith() 함수는 선택한 요소를 지정된 요소로 대체 변경하는 함수입니다. 지정되는 요소로는 HTML 코드 형식의 문자열이나 jQuery 객체, DOM 요소 등을 전달받을 수 있으며, 이렇게 선택한 요소를 대체할 수 있는 컨텐츠를 반환 함수를 선택되는 요소로 전달받을 수 있습니다. jQuery(제이쿼리)의 .replaceWith() 함수는 조건에 맞는 요소들을 새로운 요소들로 바꾸고 이전의 요소들은 DOM 내에서 삭제하게 됩니다. //함수 사용방법 $(select).replaceWith(newContent); // newContent 새롭게 대체될 요소 $(select)...