본문 바로가기

프론트엔드22

[JQuery] 제이쿼리 메서드(class search) Class Control 종류 children -> 선택 요소의 자식 요소들 siblings -> 선택 요소의 제외된 요소들 - children MENU-1 SUB-MENU1 SUB-MENU2 SUB-MENU3 SUB-MENU4 MENU-2 SUB-MENU1 SUB-MENU2 SUB-MENU3 SUB-MENU4 $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) .menu{ padding: 0; list-style: 200px; width: 20.. 2023. 11. 2.
[JQuery] 제이쿼리 메서드(class control) Class control 메서드 종류 addClass -> 클래스 넣기 removeClass -> 클래스 지우기 toggleClass -> 넣고 빼기 button $('.button').click(function(){ $('.box').toggleClass('testActive'); }) .box{ background-color: red; width: 100px; height: 100px; } .testActive { background-color: blue; } 처음에는 이전과 같은 결과로 빨간색 박스가 생성이 되어있다. 하지만 버튼을 누르면 파란색으로 변경되는 것을 확인할 수 있었다. 자바스크리트를 확인해 본 결과 버튼을 클릭했을 때, box 태그에 testActive css가 추가된 것을 확인할 수.. 2023. 10. 31.
[JQuery] 제이쿼리 메서드(effect) 메서드 종류 effect fadeIn fadeOut slideUp slideDown show hide button .box{ background-color: red; width: 100px; height: 100px; display: none; } $('.button').click(function(){ $('.box').fadeToggle(3000) }) 최초의 button 아래는 아무것도 없지만, 클릭을 하게 되면 빨간 박스가 생성되는 것을 확인할 수 있다. 그 이유는 자바 스크립트에서 fadeToggle 메서드를 사용했기 때문인데, 전체적으로 해석을 해보자면,. button을 클릭했을 경우. box가 fadeToggle을 3초 이내로 된다는 뜻이다 메서드에 괄호에는 얼마나 빠르게 할 것인지 옵션이 들.. 2023. 10. 31.
[JQuery] 제이쿼리 함수 사용법 기본적인 제이쿼리 함수는 생성자 함수, 메서드로 나눈다. 함수의 활용법은 다음과 같다 테스트 입니다 보이나여?? .test2{ background-color: blue; width: 100px; margin-top: 10px; color: white; text-align: center; display: none; } $('.test').mouseenter(function(){ $('.test2').show() }); $('.test').mouseleave(function(){ $('.test2').hide() }); 예제를 작성했을 때 다음과 같이 아무것도 보이지 않는다 하지만 마우스를 올려보았을 때 test2의 클래스 div가 출력 되는것을 볼 수 있다. 자바스크립트를 보면 test클래스에 마우스를 올.. 2023. 10. 30.
[JQuery] 제이쿼리 기본 규칙 JQuery의 기본 구문은 아래와 같이 선택자, 그리고 함수로 나눈다. 선택자는 기본적으로 html을 말하는 것이고 자바스크립트 코드는 함수 않에 넣는다. $('선택자').함수(function(){ 실행구문; }); 선택자 종류 : 클래스, 아이디, 태그 주로 많이 쓰이는 함수 : click, mouseenter, mouseleave 메소드(실행구문에 들어가는 것) : addClass, children, fadeIn, fadeout, siblings, show, stop, slideUp, slideDown, removeClass, hide 2023. 10. 30.
[퍼블] 가상클래스의 순서 자식 클래스의 순서를 지정하여 디자인해 주는 기능 nth-child nth-of-type nth-child 기능은 태그에 영향을 받지 않고 무조건 순서에 영향을 받는다. test1 test2 .test{ border: 1px solid black; width: 300px; } .test div{ font-size: 30px; } .test div:nth-child(1){ color: blue; } .test div:nth-child(2){ color: red; } css에서 nth-child를 주었을 경우 태그의 구분과 상관없이 위에서부터 순서로 css가 지정된 것을 볼 수 있다. 하지만 nth-of-type을 적용한다면 순서와 타입을 지정하여 할 수 있다. test1 h2 test test2 .test.. 2023. 10. 30.

티스토리툴바