본문 바로가기

jQuery 5

jQuery 시각효과 & 애니메이션 [jQuery 도장깨기] 목차 시각 효과 메서드 지연시간 : 시각적 효과가 나타기이 위한 시간 메시지 : 메소드 수행 후 나타나는 문장 show(), hide() - show(지연시간, 메시지), 지연시간에 맞게 보여진다. - hide(지연시간, 메시지), 지연시간에 맞게 사라진다. 🔽 감추기 버튼 클릭시 사진이 target1부터 서서히 사라지며, "이미지가 사라진다" 문구 출력 🔽 보이기 버튼 클릭시 사진이 targer1부터 서서이 보여지며, "이미지가 보인다" 문구 출력 toggle() - toggle(지연시간,메시지), 스위치처럼 on/off를 반복한다 🔽 버튼을 누르면 가 보였다가 안보였다를 반복한다. Look at me 안보인다. 토글 fadein() & fadeout() & fadeTo() - fadein(지연시간, .. 2022. 4. 22.
Javascript & jQuery 이벤트란, 이벤트 핸들러 알아보기 목차 이벤트(event) 마우스클릭, 텍스트 박스 작성등 이벤트가 발생하면 웹페이지에서 특정 동작이 발생되어 웹 브라우저에게 알려준다, 이벤트 핸들러(event handler) 특정 요소에서 발생하는 이벤트를 처리하기 위한 함수로 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생시 웹 브라우저는 연결된 이벤트 핸들러를 실행한다. 자바스크립트 이벤트 핸들러(event handler) let test = docuement.getByelementId("id"); test.addEventListener("click", function(){ alert("안녕하세요"); }); 로딩 이벤트 load() 로딩이 완료될 때 발생 - html, css, js, img, iframe이 웹브라우저에 메모리에.. 2022. 4. 20.
jQuery 도장깨기, function 종류 (each, css, append, wrap, clone, val) 목차 each() 일반적인 for문처럼 object와 배열 모두 사용할 수 있는 반복 함수이다. - $.each(object, function(index, item){}); - $('selector').each(function(index,item){}); Lorem ipsum dolor sit amet. Lorem ior sit amet. Lorem ipsum // Lorem ipsum dolor sit amet. // Lorem ior sit amet. // Lorem ipsum. CSS() 선택한 요소의 style 속성을 수정한다. - $('selector').css ('CSS 문법'); $('p').css("color #f00"); html() & text() 선택한 요소안에 내용을 가져오가나 다른.. 2022. 4. 19.
jQuery 도장깨기, 요소탐색 방법 first / last / nth-child 목차 요소 탐색하는 방법 1. 특정요소 찾는 법, 태그명으로 탐색, 부모노드에서 자식노드를 활용한 방법등 탐색 방법은 다양하다. 가장 첫번쨰, 마지막의 요소 찾기 문장 1 문장 2 문장 3 부모노드에서 자식노드를 활용한 방법 문장 1 문장 2 문장 3 특정한 내용이 포함된 요소탐색 문장 1 문장 2 문장 3 2022. 4. 18.