본문 바로가기

JavaScript31

[Jquery] 제이쿼리 .append() .prepend() . .remove() .empty() 사용법 & 예제 개발을 진행하다 보면 정적이 화면이 아닌 동적인 화면을 구성해야 할 경우가 종종 생긴다. 동적인 화면의 경우 특정 엘리먼트가 show/hide 될수도 있으면 현재 엘리먼트의 자식에 새로운 엘리먼트를 추가해야 하는경우도 있습니다. 그리하여 오늘은 동적인 화면을 컨트롤할때 자주 사용하느 append(), prepend(), remove(), empty()에 대해서 알아보겠습니다. 1. .append() 사용법 & 예제 제이쿼리 .append() 함수의 경우 현재 대상의 엘리먼트 내에 맨끝에 새로운 엘리먼트를 추가하는 함수입니다. 아래 소스의 경우 div1이라는 id를 가진 엘리먼트 안의 자식 맨 끝에 div를 새로 추가하는 방법입니다. * 실행코드 1 2 3 4 5 6 7 8 9 10 11 $(documen.. 2021. 1. 12.
[JavaScript] 자바스크립트 Array() 배열 사용법 & 예제 배열 선언 방법 자바스크립트를 이용하여 개발을 진행하다 보면 다수의 데이터를 처리해야 하는 경우가 있습니다. 그럴경우 배열을 이용하여 변수 하나나에 데이터를 넣는게 아닌 배열 안에 데이터를 한번에 넣어서 관리하여 가공하여 사용하면 조금 더 편리하게 사용 할 수 있습니다. 1. 배열 선언 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 첫번째 방법 var array = new Array(); array[0] = "a"; array[1] = "b"; array[2] = "c"; console.log(array); // 결과 값 [a, b, c] // 두번째 방법 var array2 = ["가", "나", "다"]; console.log(arra.. 2021. 1. 6.
[Javascript] 제이쿼리 엘리먼트(Element) 존재 확인 사용법 & 예제 오늘은 자바스크립트에서 엘리먼트(Element)의 존재 유/무를 확인할수 있는 방벙에 대해서 알아보겠습니다. 개발을 하시면서 보통 특정 엘리먼트(Element)를 클릭하였을경우 hasClass() 함수를 사용하여 Class 존재 유/무를 파악하는 경우가 많습니다. 그러나 특이하게 특정 엘리먼트(Element)가 존재 유/무 구하는 경우도 있어서 긁을 써봅니다. 엘리먼트(Element) 존재 유무 확인 예제 & 사용법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $(document).ready(function(){ $("#testBtn").click(function(){ if($("#testDiv")[0] != null || $("#testDiv")[0] != 'u.. 2020. 9. 23.
[Javascript] 자바스크립트 체크박스 체크 유/무 확인방법 & 예제 오늘은 html의 checkbox(체크박스)에 체크 혹은 미체크로 되어있는지 확인하는 방법에 대해서 설명 드리겠습니다. 설명 1. 'next'라는 id를 가진 버튼을 클릭 시 'chk1', 'chk2'의 id를 가진 체크박스가 체크가 되어 있는지 체크. '$("#chk1").is(":checked")'함수가 'true'가 나오면 체크가 되어 있다는 표시입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 // 다음 버튼 클릭 $("#next").click(function(){ // 첫번째 체크박스가 체크되어 있는경우 if($("#chk1").is(":checked")){ alert("첫번째.. 2020. 5. 11.
[JavaScript] 자바스크립트 window.open() 새창 열기 기능 사용방법 & 예제 안녕하세요. 오늘은 자바스크립트 window.open()에 대해서 알아 보겠습니다. 개발을 하시면서 새창으로 열기 기능을 많이들 사용하시는데요. 자주 까먹는 기능이라 자주 쓰이는 함수 위주로 설명 드리겠습니다. 예제 1. 버튼에 'id'를 기준으로 클릭 이벤트를 선언하구 window.open()을 사용하여 네이버 홈페이지를 새창으로 띄울수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 네이버 바로가기 $("#gotoNaver").click(function(){ window.open("https://naver.com."); }); 2. 이번에는 위와 같이 window.open()을 사용하여 새로운 팝업창을 띄우지만 새로운 팝업창의 크기를 지정할 수 있습니다.. 2020. 5. 8.
[ Jquery ] 제이쿼리 실시간 검색어 자동완성 ajax 통신 방법 & 예제 안녕하세요. 오늘은 제이쿼리 자동완성 기능에 대해서 설명 드리겠습니다. Web개발을 하면서 DB에있는 데이터를 기반으로 자동완성 기능을 개발 해달라고하는 경우가 종종 있습니다. 그래서 오늘은 Ajax통신을 통해 실시간으로 DB에 있는 데이터를 기준으로 자동완성 기능을 만들어 보겠습니다. 설명 1. 입력 필드를 만듭니다. ↓ 소스 참조 1 2 3 4 2. id를 기준으로 autocomplete 기능을 선언 해줍니다. ↓ 소스 참조 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 $("#testInput").autocomplete({ source : funct.. 2020. 4. 3.