jQuery 스타일 메서드 jQuery 스타일 메서드 attr() 메서드 실행 분류 형식 취득 $("div").attr("width") 생성, 변경 $("div").css("background-color" , "red").css("padding" , "10px"); $("div").css({ background-color : "red" , padding : "10px"}); 콜백함수 $("div").css("width" ,function(index,.w){ //index는 각 div 요소의 index 0,1,2 //w 각 div 요소 width 값 return css 속성 // 각 div 요소의 css 속성을 변경합니다. }); .... 내용 내용 내용 위의 예시를 사용하여 jQuery를 사용해보았습니다. See the Pen j.. 2022. 9. 3. jQuery 속성 메서드 jQuery 속성 메서드 attr() 메서드 실행 분류 형식 취득 $("a").attr("href") 생성, 변경 $("a").attr("href","http://icoxpublish.com").attr("target","_blank") $("a").attr({href : "http://icoxpublish.com" , target : "_blank" }); 콜백함수 $("a").attr("href" ,function(index,h){ //index는 각 a 요소의 index 0,1,2 //h 각 a 요소 href 속성 return attribute 속성 // 각 a 요소의 속성을 생성 및 변경합니다. }); .... 다음 네이버 네이트 위의 예시를 사용하여 jQuery를 사용해보았습니다. See the.. 2022. 9. 3. jQuery 클래스 메서드 jQuery 클래스 메서드 addClass() 메서드 실행 분류 형식 추가 $("div").addClass("클래스명") 콜백 함수 $("div").addClass(function(index,className){ //index는 각 div 요소의 index 0,1,2 //className은 각 div class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 위의 예시를 사용하여 jQuery를 사용해보았습니다. See the Pen Untitled by Packsunhye (@packsunhye) on CodePen. 🐳 jQuery 클래스 메서드의 코드만 보기 $(document).ready(function(){ $("#m1 > d.. 2022. 9. 3. jQuery 탐색 선택자 jQuery 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("div").parents() p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest() p 요소의 부모가 되는 첫번째 div 요소를 선택합니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 모든 요소를 선택합니다. nextUtil() $("div.m").nextUtil("p") div.m 요소의 다음 요.. 2022. 8. 31. jQuery 필터 선택자 jQuery 필터 선택자 선택자 종류 설명 :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요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt()") index가 0보다 큰 li요소들을 선택합니다. :lt() $("li:lt(2)") index가 2보다 작은 li요소들을 선택합니다. :not() $("li:not(.bg)".. 2022. 8. 31. jQuery 속성 선택자 jQuery 속성 선택자 jQuery에서 속성을 선택하는 방식입니다. 선택자 종류 설명 요소[속성] $("span[class"]) span요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc'"]) span요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc'"]) span요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~="값"] $("span[class~='abc'"]) span요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다. 요소[속성*='값.. 2022. 8. 31. jQuery 기본 선택자 jQuery 기본 선택자 jQuery 선택자는 CSS3 파트에서 학습한 CSS 선택자와 의미가 같은 것이 많이 있습니다. 그러므로 차근히 알아가보겠습니다. jQuery 기본 선택자의 형식은 다음과 같습니다. $("선택자") | $("#gnb") 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo 요소를 선택합니다. 자식 선택자 $("#gnb >ul >li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #co.. 2022. 8. 31. jQuery 개념 정리 jQuery 개념 정리 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 01. 사용법 01-1 ) 기존의 style이나 js 링크처럼 GSAP에서 script 링크를 가져와, 선택자등을 쉽게 가져올 수 있게 만들어줍니다. (CDN 방식) //적용방식 01-2 ) 다운로드 방식입니다. 홈페이지로 가 제이쿼리를 다운 받을 수 있습니다. //적용방식 사이트 가기 02. 자바스크립트와 jQuery의 비교 //javascript const sliderInner = document.querySelector(".보여지는_곳") const slider = document.querySelectorAll(".이미지") let currentIndex = 0; sliderInner.style.tran.. 2022. 8. 29. GSAP 개념 정리 GSAP 개념 정리 The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인기반의 애니메이션 자바스크립트 라이브러리입니다. 01. 사용법 기존의 style이나 js 링크처럼 GSAP에서 script 링크를 가져와, 애니메이션을 쉽게 적용할 수 있게 만들어줍니다. 02. 자바스크립트와 GSAP의 비교 //javascript const sliderInner = document.querySelector(".보여지는_곳") const slider = document.querySelectorAll(".이미지") let currentIndex = 0; sliderInner.style.transition = "all 0.8s" se.. 2022. 8. 29. 이전 1 다음
