반응형 일상/IT24 제이쿼리]transition 오늘은 제이쿼리의 transition에 대해 공부하려고 합니다. transition명령을 사용하기 위해서는 먼저 구글에서 jquery transit을 검색하여 다운받아줍니다. jquery transit $('선택자').transition({ translate : 'x px, y px', scaleX : , scaleY : , rotate : , 2022. 1. 4. 제이쿼리]data-XX와 each함수 안녕하세요, 오늘은 data-XX와 each함수를 공부하려고 합니다. data-XX란? HTML 5에서 새로나온 속성으로 내가 원하는 값을 태그에 저장하는, 새로운 선택자를 잡는 방법이라고 보면 됩니다. 무슨 말인지 잘모르겠네요,, 일단 작성해볼까요?? #box안에 li 5개 만들어서 한번 보겠습니다. 이렇게 작성하면,, 브라우저에 출력됩니다. data-XX로 li중 하나를 선택해볼까요?? body로 가서 첫번째 li에게 data-a="0"를 지정해줍니다. 첫번째 li에게 data-a="0"을 지정해주고 style에서 첫번째 li의 색상을 변경해주도록 하겠습니다. 이렇게 작성하면 브라우저에서 data-a="0"으로 선택한 li만 색상이 변경되는 것을 볼 수 있습니다. 그렇다면 다른 li들에게도 각각의 다.. 2021. 12. 24. 제이쿼리]addClass/removeClass 1. addClass css에 지정된 클래스(속성이 지정되어 있는)를 추가할 때 사용 $('선택자').addClass('클래스명'); 한번 예제를 통해 보도록 하겠습니다. 먼저 박스를 만들고 원하는 스타일로 꾸며준 후 따로 클래스명을 지정하여 속성을 넣어줍니다. 브라우저에서 확인해면 #box에 active가 클래스명으로 지정되어 있지 않기 때문에 #box에 넣은 스타일만 지정됩니다. 이때 active에 지정한 속성값을 #box에 넣어주고 싶을 때 제이쿼리에서 addClass를 이용합니다. 작성해볼까요?? 이렇게 작성하면 active의 속성이 적용되는 것을 볼 수 있습니다. 추가가 되면 제거도 되겠죠?? 2. removeClass 추가된 클래스나 기존의 클래스를 제거할 때 사용 $('선택자').remove.. 2021. 12. 24. 이전 1 2 3 4 ··· 8 다음 반응형
