웹쟁이의 일상

안녕하세요! 오늘은 JQuery를 이용한 요소 선택법에 대해 알아보겠습니다. 먼저 요소 선택을 할 샘플 테이블을 하나 만들어 보겠습니다. 굳이 테이블이 아니더라도 부모자식형제간의 관계가 있는 html코드면 무엇이든 가능합니다. 축구 농구 야구 손흥민 조던 류현진 메시 코비 커쇼 강두 하승진 김원중 버튼 테이블과 이벤트를 적용시킬 버튼을 하나 만들어 주었습니다. 부모 선택 1) .parent() $(function () { $("#btn").on("click", function () { $("#thief").parent().css({ "background-color": "red" }); }); }); 위의 스크립트를 작성해 주고 버튼을 누르면 thief라는 아이디를 가진 요소, 바로 상위tr의 css가 바..

안녕하세요~ 이번 포스팅에서는 Modal창을 띄워주는 방법을 알아보겠습니다. 모달은 팝업창과 비슷하지만 약간은 다른 개념입니다. 팝업은 창이 띄워져 있는 동안에도 부모 페이지를 컨트롤 할 수 있지만, 모달은 창이 띄워져 있는 동안에는 부모 페이지를 컨트롤 할 수 없다는 차이점이 있습니다. 그럼 코드를 통해 어떻게 모달을 띄워서 사용하는지 알아보겠습니다. MODAL Modal창 테스트입니다. 일단 HTML과 CSS를 작성해 주겠습니다. CSS는 꾸미고 싶은대로 꾸며주시면 되겠습니다. 모달창을 띄워주고 없애주는 스크립트를 작성해 줍니다. 이렇게 해주면 아래처럼 모달창이 페이지 로딩 시에 나오게 됩니다.

오늘은 Jquery플러그인 중 날짜를 컨트롤할 수 있는 datepicker, daterangepicker에 대해 알아보겠습니다. 쉽게 말해서 달력을 띄워 원하는 날짜나, 원하는 날짜 범위를 지정할 수 있게 해주는 플러그인입니다. 먼저 달력을 넣어줄 input창을 만들어 줍니다. 이제 이 input창을 클릭하면 달력이 뜨게 만들어 줘야 합니다. datepicker를 사용하기 위해 필요한 js, css를 선언해 줍니다. 그 다음 스크립트에서 위의 코드만 작성해주면 달력이 뜨게 됩니다. 이런식으로 달력이 뜨게 됩니다. $("#datepicker").datepicker({ dateFormat: 'yy-mm-dd', //날짜 표시 형식 설정 showOtherMonths: true, //이전 달과 다음 달 날짜를 ..