네이처리 노트

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 coke juice water //jQuery // 최하단에 옵션 추가 $('#drink').append(` ${title} `); // 반복문으로 작업할 때 ${}사용한 예시 // 최상단에 옵선추가 $('#drink').prepend(` ${title} `); // 모든 옵션 제거 $('#drink').children('option').remove(); // 첫번째 옵션을 제외한 나머지 옵션제거 $('#drink').children('option:not(:first)').remove(); // 특정 값을 가진 옵션 제거 $("#drink option[value='2']").remove();

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 let file= $("input[type=file]"); let img = $("img"); file.off("change").on("change", function() { if(file.get(0).files && file.get(0).files[0]) { let fReader = new FileReader(); fReader.readAsDataURL(file.get(0).files[0]); fReader.onload = function(event){ img.attr("src", event.target.result); file.val(""); // 파일 초기화 }; } }); // 파일정보확인 file[0].files[0] file.get..

기초리스트 ▶기초 ( 선언하기 $.ready() ) ▶ 속성보기 ( attr val checked disabled ) ▶ 추가 및 삭제 ( append remove before after text html ) ▶ 부모형제요소 찾기 ( parent closest children find prev next filter ) ▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass ) 공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 🐟 스타일 전체 css 속성에 관여하기 가능 // 값 가져오기 $("#item").css('background-color'); // 값 부여하기 $("#item").css('font-weight','bold'); // 값 객체로..

기초리스트 ▶기초 ( 선언하기 $.ready() ) ▶ 속성보기 ( attr val checked disabled ) ▶ 추가 및 삭제 ( append remove before after text html ) ▶ 부모형제요소 찾기 ( parent closest children find prev next filter ) ▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass ) 공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 부모요소 찾기 // (셀렉터에 부합하는) 바로 위의 부모 $('span').parent(selector); // a, input, input // (셀렉터에 부합하는) 위의 부모들 $('span').parents(selector..

기초리스트 ▶기초 ( 선언하기 $.ready() ) ▶ 속성보기 ( attr val checked disabled ) ▶ 추가 및 삭제 ( append remove before after text html ) ▶ 부모형제요소 찾기 ( parent closest children find prev next filter ) ▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass ) 공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 append, prepend // 선택자의 마자막에 추가 $('ul').append(' 리스트 마지막 '); // 선택자의 첫번째에 추가 $('ul').prepend(' 리스트 맨처음 '); // 선택자를 타겟 마지막..

기초리스트 ▶기초 ( 선언하기 $.ready() ) ▶ 속성보기 ( attr val checked disabled ) ▶ 추가 및 삭제 ( append remove before after text html ) ▶ 부모형제요소 찾기 ( parent closest children find prev next filter ) ▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass ) 공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 왠만한 속성에 전부 관여하기 가능 // 이미지 src 가져오기 $('img').attr('src'); // 이미지 입력 $('img').attr('src', 'images/logo.png'); // 스타일 부여 $('input'..

기초리스트 ▶기초 ( 선언하기 $.ready() ) ▶ 속성보기 ( attr val checked disabled ) ▶ 추가 및 삭제 ( append remove before after text html ) ▶ 부모형제요소 찾기 ( parent closest children find prev next filter ) ▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass ) 공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 🐟 선언하기 ID로 정확하게 선언하는 것을 권장하지만, 상황에 따라 Element나 Class로 선언 할 수 있다. 그 외의 다양한 방법으로도 선언이 가능하다. //jQuery // element 선언 let example1 =..

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 영역 내에서 Element 순서를 마우스로 드래그하여 정렬할 수 있도록 합니다. 리스트의 형태는 CSS 프레임워크로 스타일을 다르게 구현할 수 있습니다. sortable 지정 후, 영역안에 새로운 item이 추가된다면 sortable을 다시 지정해줘야 합니다. 다운로드 : jQuery UI framework 사용방법 : jQuery interface , 블로그 가이드 list 1 list 2 list 3 $("#zone").sortable();

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 원하는 스타일 프레임워크 및 확장기능을 선택하여 CDN 혹은 다운로드 할 수 있다. 다운로드 : https://datatables.net/download/index 사용방법 : Grid 라이브러리 datatable 사용법예제 활용예제 : https://blog.naver.com/ahero00/221505709164 테이블에서 Ajax 통신 https://datatables.net/reference/option/ajax ajax ajax Since: DataTables 1.10 Load data for the table's content from an Ajax source. Description DataTables can obtain the d..

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 프론트엔드 개발을 빠르고 쉽게 할 수 있는 반응형 웹사이트의 프레임워크 HTML, CSS 기반의 템플릿 양식, 버튼, 네비게이션 및 기타 페이지를 구성하는 요소 포함 자바스크립트를 선택적으로 확장 할 수 있음 ‘프레임워크’라고 하는 것은 재사용이 가능한 요소들이 집합되어 있으며, 정해진 구조와 틀 안에서 이것들을 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jQuery는 라이브러리이고 부트스트랩은 프레임워크이다. 따라서 ‘부트스트랩4 프레임워크에서 jQuery 라이브러리를 사용되어 진다.’ 라고 할 수 있다. 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 ‘그리드 시스템’을 채용하고 있기 때문에 웹 페이지를 데스크탑, 태블릿, 스마트폰..