JavaScript131 jQuery : class관련 메서드 class관련 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass(클래스명); 콜백 함수 $("div").addClass(function)index, className){ //index는 각 div 요소의 0, 1, 2 //className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다.)} ..... 내용1 내용2 내용3 예시 See the Pen jquery13 by hmm365 (@hmm365) on CodePen. removeclass()관련 메서드 요소에 class 속성을 제거합니다. 실행 분류 형식 추가 $("div").removeClass(클래스명); 콜백 함수 $("div").remov.. 2022. 9. 5. jQuery : CSS() 메서드 CSS 메서드 CSS() 관련 요소를 컨트롤 할 수 있는 메서드 입니다 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px") $("div").css({background-color: "red", padding: "10px"}) 콜백 함수 $("div").css("width", function(index, .w) { //indexs는 각 div 요소의 index0,1,2 //w는 각 div 요소의 width 값 return css 속성// 각 div 요소의 css 속성을 변경합니다. }); .... 내용 내용 내용 예시 See the Pen jquery10 by hmm365.. 2022. 9. 5. 슬라이드 이펙트 세 번째 이미지 좌우로 움직이기 이번 슬라이더 이펙트는 slider__inner 클래스 div 을 만들어서 img의 width * 갯수 로하여서 전체 width값을 잡아줍니다. 또한 상위 slider__img 를 이용해 overflow: hidden; 을 주어서 넘치는 영역을 안보이게합니다. js를 이용하여 sliderInner.style.transition = "all 0.6s" 을 주어서 애니메이션 효과를 넣고 setInterval 이용하여 slider__inner 의 위치를 img의 width 값에 맞게 변경해줍니다. 그리고 다시 첫번째로 자연스럽게 가기위해서 마지막 이미지를 다시 첫번째로 한 후 setTimeout 을이용하여 자연스럽게 만들어줍니다. 또한 Gasp 와 jquery 를이용하여 만들어봤으니 자.. 2022. 9. 2. 요소 크기 위치 및 크기를 표현하는 속성 및 메서드 속성 및 메서드 설명 element.clientWidth 요소의 가로값(margin, border 미포함) element.clientHeight 요소의 세로값(margin, border 미포함) element.clientTop 요소의 Y축 값(부모 기준) element.clientLeft 요소의 X축 값(부모 기준) element.offsetWidth 요소의 가로값(border, padding 포함) element.offsetHeight 요소의 세로값(border, padding 포함) element.offsetTop 요소의 Y축 값(문서 기준) element.offsetLeft 요소의 X축 값(문서 기준) element.getBoundingClientRect().. 2022. 9. 1. jQuery - 탐색 선택자 탐색 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 기본 탐색 선택자종류 선택자 종류 설명 children() $('div').children() div 요소의 자식 요소를 선택합니다. parent() $('p').parent() p 요소의 부모 요소를 선택합니다. parents() $('p').parents('div') p요소의 부모가 되는 모든 div요소를 선택합니다. closest() $('p').closest('div') p요소의 부모가 되는 첫번째 div요소를 찾습니다. next() $('div.m').next() div.m요소의 다음 요소를 선택합니다. nextAll() $('div.m').nextAll() div.m요소의 다음 요소.. 2022. 9. 1. jQuery - 필터 선택자 필터 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 필터 선택자는 선택자에 ':'이 붙은 선택자를 말합니다. 기본 필터 선택자 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들.. 2022. 9. 1. 이전 1 ··· 10 11 12 13 14 15 16 ··· 22 다음 728x90 반응형
