Life goes slowly...

자바스크립트의 제이쿼리(jQuery)를 사용하여 목록 List의 데이터중에 체크박스(checkBox)에 체크된 행(Row)을 삭제하는 방법입니다. 체크박스(checkBox)의 체크된 행 삭제하기 삭제 선택 No. 아이디 이메일 1 Test01 Test01@gmail.com 2 test02 test02@naver.com 3 test03 test03@gmail.com 가장 먼저 체크박스(checkBox) 목록 데이터를 반복문으로 체크된 데이터만 조회하여 관련된 상위 엘리먼트(parentElement)를 확인하여 관련돼 행(Row)을 삭제하면 됩니다.

자바스크립트의 제이쿼리(jQuery)를 사용하여 일정 시간 뒤에 콜백 함수를 실행하는 방법에는 .setTimeout() 함수를 사용하게 됩니다. .setTimeout() 함수 이외에도 일정 시간이 지난 후 애니메이션 큐를 지연하여 실행하기 위한 함수로 .delay() 함수가 있습니다. jquery(제이쿼리)의 .delay() 함수 jQuery(제이쿼리)의 .delay() 함수는 일정 시간이 경과한 후에 다음 코드를 강제적으로 실행하도록 지연시간을 생성하는 함수입니다. 단 큐를 가진 애니메이션에만 적용되는 함수입니다. 실행 중인 함수를 정해진 시간만큼 중지하기도 하는 함수입니다. // .delay()함수 사용방법 .delay( [중지할 시간] , [ queueName ] ) //p 태그의 엘리먼트가 5초후..

자바스크립트(Javascript)의 attr()과 prop() 차이점 자바스크립트(Javascript)에서 선택자를 통하여 선택한 엘리먼트를 append 하여 새롭게 생성하는 엘리먼트에 속성을 지정할 때 많이 사용하는 attr() 함수와 prop() 함수가 있습니다. attr()과 prop() 함수의 차이점은 무엇이 있을까 알아보도록 하겠습니다. jQuery(제이쿼리) 1.6 버전 이전에는 attr() 함수와 prop() 함수의 차이는 없었지만 1.6 버전 이후에는 구분되어 있습니다. attr() 함수는 엘리먼트가 가지고 있는 속성값이나 정보를 조회할 때 사용하는 함수이며, prop() 함수는 엘리먼트가 가지고 있는 상태를 제어할 때 사용하는 함수입니다. 폼의 속성 값을 확인하거나 변경할 때에는 prop..

자바스크립트의 제이쿼리(jQuery)를 사용하여 현재 선택한 요소와 함께 이전에 선택한 요소도 함께 선택하는 함수입니다. .addBack() 메소드는 현재 선택된 요소의 이전 요소를 한번 더 찾아주는 필터링 역할의 함수입니다. jquery(제이쿼리)의 .addback() 함수 jQuery(제이쿼리)의 .addback() 함수는 현재 선택한 요소와 이전 요소를 함께 동시에 효과를 나타내는 함수입니다. //함수 사용방법 $([선택자]).addBack(); $([선택자]).addBack([선택자]); //ul의 하위 태그중에서 li를 선택하고 처음에 선택했던 ul 태그도 함께 선택하기 $("ul").find("li").addBack();

jQuery의 .hover() 함수 jQuery의 .hover() 함수는 제이쿼리의 마우스 이벤트 함수중 하나입니다. .hover() 함수로 선택한 요소에 마우스 포인트를 올렸을 때와 떠났을 때 이벤트 효과를 넣을 수 있습니다. 마우스의 다양한 이벤트 관련 메서드 중 하나로 특정 엘리먼트 위에 올리게 되면 발생하는 이벤트 중 하나입니다. hover() 함수는 CSS의 :hover 선택자를 사용하는 것과 동일한 방식으로 동작을 하게 되지만 css에 사용할 때에는 새로운 스타일을 적용하는 것이 목적이지만 제이쿼리(jQuery)는 이벤트를 적용하기 위한 조작임을 잊지 말아야 합니다. 자바스크립트(javascript)의 mouserover 등의 이벤트와 동일하다고 생각하면 됩니다. // .hover() 함수 사..

jQuery의 .queue() 함수 jQuery의 .queue() 함수는 요소에 실행되고 있는 함수의 큐를 보여주는 함수입니다. .queue() 함수는 대기열의 함수와 대기열에 대기하고 있는 함수를 조작하기 위한 함수입니다. 즉 요소에서 실행되고 있는 함수의 큐들을 보여주며, 사용되고 있는 함수들이 실행 유무를 확인이 가능합니다. 모든 요소에는 제이쿼리(jQuery)에 의하여 자체의 함들을을 큐의 형태로 지니게 되는데, 이 큐는 순서에 의하여 액션이 이루어집니다. 하나의 요소에 여러 개의 애니메이션 함수를 실행시키는 방법이 이것에 대하여 기본적인 예시입니다. // .queue() 함수 사용법 .queue( element , [queueName] ) //element - 요소 //queueName - 큐명..

Uncaught TypeError: 'undefined' is not a function 오류 원인 웹 개발 시 Chrome의 console 창에서 Uncaught TypeError: 'undefined' is not a function 에러 메시지가 나타나는 경우가 발생합니다. 이러한 에러 메시지가 발생하는 원인으로는 선언한 함수(function)를 찾을 수 없을 경우이거나 선언한 함수명이 tag ID, name등과 동일한 경우에 함수 내에서 오류가 발생하는 코드가 있다면 발생하는 에러 메시지입니다. 그 이외에도 제이쿼리(jQuery)의 라이브러리가 설치되지 않거나 중복되어 설치되어 있는 경우에도 이러한 에러메시지가 발생합니다. Uncaught TypeError: 'undefined' is not a ..

Uncaught Error : Bootstrap's Javascript requires jQuery 오류 원인 웹 개발 시 Bootstrap을 많이 사용하고 있습니다. 하지만 Bootstrap의 기능은 잘 되고 있지만 Chrome의 console 창에서 Bootstrap의 에러 메시지가 보일 경우가 있습니다. 이는 자바스크립트(Javascript) 나 제이쿼리(jQuery)의 문제로 보일 수도 있습니다. 이는 Bootstrap 사용시 제이쿼리(jQuery)가 필수적으로 요구되기 때문입니다. 제이쿼리(jQuery)가 정상적으로 로드되지 않아서 발생하는 에러 메시지입니다. 이러한 문제의 해결 방법은 Html 페이지에서 Bootstrap을 로드하기 전에 제이쿼리(jQuery)의 라이브러리를 먼저 임포트 하면 ..

jQuery의 .clone() 함수 jQuery의 .clone() 함수는 선택한 요소를 복사하는 함수입니다. .clone() 함수는 일치하는 요소 집합의 전체 복사본을 만드는 함수입니다. 또한 요소뿐만 아니라 요소가 가지고 있는 이벤트를 함께 복사하는 함수입니다. // .clone() 함수 사용법 .clone( [withDataAndEvents] ) //withDataAndEvents - 이벤트 핸들러와 데이터 요소와 함께 복사해야하는지 여부를 나타내는 부울값 ========================= Main is title ------------------------------------------------------------------- Main is title Main is title

jQuery의 .not() 함수 jQuery의 .not() 함수는 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 함수입니다. .not() 함수를 사용 시에는 기준을 지정하여 기준과 일치하지 않는 오쇼를 선택 항목에서 반환되고 일치하는 요소는 제거하도록 합니다. // .not() 함수 사용법 .not( [선택자] ) //a 요소중에 test 클래스 값으로 가지지 않는 것을 선택하는 예제 $("a").not("a.test").css("color","red") .not() 함수의 반대 함수로는 .filter() 함수가 있습니다.

jQuery의 .fadeToggle() 함수 jQuery의 .fadeToggle() 함수는 요소의 투명도를 조절하는 함수로써 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이도록 하는 함수입니다. fadeToggle() 함수를 사용하여 투명도(opacity)를 조절하여 0으로 낮췄을때에 display 속성을 none 처리하여 페이지의 레이아웃 영향을 미치지 않도록 합니다. 옵션에 있는 duration을 조정하여 값에 따라서 속도를 조절하도록 가능합니다.(단위값은 밀리세컨드입니다.) // fadeToggle() 함수 사용법 .fadeToggle( [duration], [easing], [callback] ) duration - 시간 값 easing - 특수한 효과 callback - 콜백 함수 dura..

자바스크립트의 제이쿼리(jQuery)에서 애니메이션 효과를 사용할 수 있는 함수로 .animate() 함수가 있습니다. .animate() 함수는 여러 CSS 스타일 속성을 이용하여 새로운 애니메이션 효과를 만들 수 있습니다. jquery(제이쿼리)의 .animate() 함수 jQuery(제이쿼리)의 .animate() 함수는 수치 CSS 속성을 제어하여 움직이는 애니메이션 효과를 만들어 냅니다. 반드시 CSS 속성 MAP 데이터를 필요로 하며, 이 데이터 MAP은 .css() 함수에 인자로 사용하는 데이터 맵과 유사합니다. //.animate() 함수 사용법 $(선택자).animate(css스타일 ,[지속시간] ,[시간당속도함수] [콜백 함수]); CSS 스타일 : 필수이며, 이펙트 효과를 구성할 CS..

자바스크립트의 제이쿼리(jQuery)에서 이펙트(effect) 효과를 표현하는 함수들이 있습니다. 그중에 해당 요소에 페이드(fade) 효과를 표현하는 함수인 .fadeIn(), .fadeOut() 함수가 있습니다. jquery(제이쿼리)의 .fadeIn() 함수 jQuery(제이쿼리)의 .fadeIn() 함수는 선택한 요소를 서서히 나타나게 표현하는 함수입니다. 나타나게 하는 시간을 설정할 수 있는데 시간 설정을 문자나 숫자로 정할 수 있습니다. 그 이외의 옵션에 나타나게 하는 모양도 설정이 가능합니다. //.fadeIn() 함수 사용법 .fadeIn( [duration], [ easing ]); //duration - 시간설정 //easing - 모양설정 //.fadeIn() 나타나는 시간설정 .fa..

자바스크립트의 제이쿼리(jQuery)의 .detach() 함수는 선택한 요소를 문서에서 제거하는 함수입니다. .remove() 함수와 비슷한 성격을 가지고 있는 함수이기는 하지만 .detach() 함수는 제거한 요소를 저장하여 다시 사용할 수 있는 함수입니다. .detach() 함수는 노드를 document에서 제거하는 동시에 캐싱하여 추후에 다시 사용이 가능합니다. jquery(제이쿼리)의 .detach() 함수 jQuery(제이쿼리)의. tetach() 함수를 요소를 제거하면서 변수에 저장을 할 수 있습니다. //.detach() 함수 사용법 .detach( [selector 요소] ); Cut //id가 test인 버튼을 삭제하고 변수 del에 저장함

자바스크립트의 제이쿼리(jQuery)를 사용하여 테이블 형식의 Row를 Drag and Drop 하는 라이브러리입니다. Drag and Drop를 통하여 테이블 게시글 순서를 변경하는데 많이 사용됩니다. jquery.tablednd.js 라이브러리 페이지 https://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ Table Drag and Drop JQuery plugin I’ve been using JQuery for a while now and really agree with its tag line that it’s the “The Write Less, Do More, JavaScript Library”. We’ve also got this code..