728x90
반응형

제이쿼리 6

[ jquery ] jquery-ui calendar 사용법

datepicker html 샘플 코드 datepicker 샘플 코드 설명 datepicker 사용에 필요한 라이브러리 datepicker 는 jquery 라이브러리를 활용한다. datepicker는 jquery를 활용해서 이용할 수 있다. datepicker 는 jquery-ui와 jquery-ui 의 css 라이브러리를 활용한다. Help. jquery-ui.min.js는 datepicker 기능을 활용하기 위한 script이다. jquery-ui.css는 datepicker에 css 요소를 입혀주기 위해 사용하는 라이브러리이다. datepicker 기본 설정한 이미지 datepicker의 속성과 css를 수정해서 다양하게 활용할 수 있지만, 나는 간단히 테스트해 보기 위한 용도로 기본적으로 날짜 형..

javascript 2024.03.22

[ jQuery ] 제이쿼리. 버튼의 서로 다른 디자인 만들기(transition 활용)

※ nth-child(n) / nth-of-type(n) 사용법 - nth-child(n)는 부모의 모든 자식중에서 n번째 자식을 찾는다. - nth-of-type(n)은 부모의 자식 중 해당하는 특정 타입의 n번째 자식을 찾는다. 버튼1 버튼2 버튼3 button { font-size:3rem; display:block; margin-bottom:50px; transition: font-size 1s; } body { transition:background-color 1s;1 } $('button:nth-of-type(1)').click(function(){ $('button').css('font-size', '3rem'); $('button:nth-of-type(1)').css('font-size',..

javascript 2020.10.16

[ jQuery ] 제이쿼리 기초, 클릭 이벤트 기초 연습

BANANA APPLE ORANGE .fruit { display:flex; } .fruit > div { margin-left:30px; } .fruit > div > .btn { height:50px; width:100px; background-color:gold; border:none; cursor:pointer; } console.clear(); // 문제 : 엘리먼트를 3개 만들고 각각을 클릭하면 서로 다른 경고창 내용이 나오도록 해주세요. // 조건 : 사단장 변수 없이 진행해주세요. // 방법 1. $('.fruit > .banana > .btn').click(function(){ alert("I'm BANANA ,,,,,"); }); $('.fruit > .apple > .btn').cli..

javascript 2020.10.15

[ javascript ] 자바스크립트 함수 활용 구구단 만들기 예제

html css body, a { margin: 0; padding: 0; text-decoration: none; } .dan { font-size:3rem; font-weight:bold; color:red; } .limit { font-size:1.8rem; font-weight:bold; } javascript console.clear(); // 예제 3-1개 //var $test = $('.test'); //$test.append('안녕하세요'); var dan = function(dan) { var $dan = $('.dan'); $dan.append('구구단 ' + dan + '단'); } var limit = function(limit) { var num = 8; dan(num); var ..

javascript 2020.10.13
728x90
반응형
LIST