728x90
반응형

jQuery 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로 특정 클래스를 가진 요소를 한번에 여러개를 찾아서 클래스를 변경하는 방법

프론트 작업을 하다가 특정 클래스를 많은 요소에 심어두고 한번에 제거해서 다른 클래스를 추가하고 싶은 상황이 생겼다. 어떻게 할 수 있을까 생각을 하다가 foreach, each 다른것도 약하지만 프론트에 한없이 약하기에(본인은 굉장한 노력파) 또 열심히 찾아본 결과 나름 나쁘지 않은 해답을 찾았다. 본인은 요소들을 찾아서 값을 변경하거나 하는 등의 중요한 작업을 하는게 아닌 A클래스를 가진 요소를 찾아서 A클래스를 제거하고 B클래스로 변경해주고 싶었다. 이런 경우 아래와 같이 처리하면 아주 간단히 처리할 수 있다. // 특정 클래스를 가진 요소 선택 var elements = $(".특정클래스"); // 선택한 요소의 클래스 변경 elements.removeClass("기존클래스").addClass("..

javascript 2023.05.17

jquery로 쿠키 생성/수정/삭제하는 방법

우선 쿠키란 무엇인지 간략하게 알아보자 쿠키는 웹 사이트에서 사용자의 컴퓨터에 저장되는 작은 데이터 조각이다. 쿠키는 사용자와 웹 사이트 간의 상호작용을 기록하고 유지하는 데 사용된다. 쿠키는 웹 사이트가 클라이언트를 식별하고 상태를 추적하는 데 사용되며 클라이언트가 웹 사이트에 방문하면 서버에서 쿠키를 생성하고, 그 후 클라이언트의 브라우저에 저장된다. 클라이언트가 같은 웹 사이트를 방문할 때마다 해당 쿠키가 서버로 전송되어 서버는 클라이언트를 식별하고 상태를 추적할 수 있다. 쿠키에는 이름, 값, 만료일, 도메인 등의 정보가 포함되어 브라우저에 저장된다. 필요한 script 모음 cookie 생성 $.cookie('name', 'value', { expires: 1, path: '/' }); 'nam..

javascript 2023.05.17

[ 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
728x90
반응형
LIST