초보자의 하루 초보자의 하루

목차효과 메서드 애니메이션 메서드 애니메이션 효과 제어 메서드 애니메이션 적용 원리와 큐의 개념 stop() / delay() delay()메서드 queue() / dequeue() clearQueue()메서드  효과 메서드효과 메서드를 이용하면 css스타일을 이용하는것 보다 쉽고 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보이게 만들 수 있습니다.또한 애니메이션 메서드까지 사용하면 다양한 동작(Motion)까지 적용할 수 있습니다.(종류)- hide() : display:none과 같이 요소를 숨깁니다.- fadeOut() : 요소가 점점 투명해지면서 숨겨집니다.- slideUp() : 요소가 위로 접히면서 숨겨집니다.- show() : display:block과 같이 요소를 나타냅..

목차 그룹 이벤트 등록 메서드의 종류 라이브 이벤트 등록 메서드 이벤트 제거 메서드  그룹 이벤트 등록 메서드의 종류그룹 이벤트 등록 메서드는 한번에 2개 이상의 이벤트를 등록할때 사용합니다.그룹 이벤트는 다양한 종류가 있습니다.1. on()★: 이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다.사용 방식에 따라 이벤트를 등록한 이후에 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다.(일반 이벤트 기본형)$("이벤트 대상 요소").on("이벤트명", function(){이벤트 핸들러}) (라이브 이벤트 기본형)$("document 또는 이벤트 대상의 상위 요소").on("이벤트 종류", "이벤트 대상", function(){이벤트 핸들러;})2. bind(): 이벤트 대상 요소에 2개 이상의 이..

목차포커스 이벤트 focus()★ / blur()★ / focusin() / focusout() change()이벤트★ 키보드 이벤트 keyup() / keydown() / keypress() 이벤트가 발생한 요소 추적하기 $(this)선택자 index()메서드  포커스 이벤트포커스는 마우스로 a또는 input태그를 클릭하거나 tap키를 누르면 생성됩니다.앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없습니다.마우스가 없는 상황에서는 키보드를 이용하여 사이트를 이용해야 하는데 이때 키보드만으로 사이트를 이용했을 때 불편하지 않도록 만들어 주는것을 '키보드 접근성'이라고 합니다.키보드 접근성을 높이려면 마우스 이벤트를 등록할때 키보드 이벤트도 함께 등록해 주어야 합니다.마우스 이벤트에 ..

목차 mouseover() / mouseout() / hover() mouseenter() / mouseleave() mousemove() 이벤트 객체 scroll() 이벤트 마우스 휠 이벤트  mouseover() / mouseout() / hover()mouseover()는 선택한 요소 위에 마우스 커서가 올라가면 이벤트가 발생하고mouseout()는 선택한 요소에서 마우스 커서가 벗어나면 이벤트가 발생합니다.hover()는 선택한 요소에서 마우스가 올라갔을때와 벗어났을때 각각 이벤트를 발생시킬 수 있습니다.(기본형)mouseout()은 이벤트명만 다르고 기본형은 모두 동일합니다.$("요소선택").mouseover(function(){코드...}) ← 단독$("요소선택").on("이벤트명", ..

목차 제이쿼리 이벤트 등록 메서드 이벤트 등록 방식 1. 단독 이벤트 등록 방식 2. 그룹 이벤트 등록 방식 강제 이벤트 이벤트 제거 메서드 로딩 이벤트 마우스 이벤트 click() / dblclick() ,요소 클릭 시 기본 이벤트 차단하기  제이쿼리 이벤트 등록 메서드이벤트란 사이트에서 방문자가 취하는 모든 행위를 뜻하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 의미합니다.이벤트 등록메서드에는 하나의 이벤트만 등록할 수 있는 '단독 이벤트 등록 메서드'와 여러 이벤트를 등록할 수 있는 '그룹 이벤트 등록 메서드'가 있습니다.(이벤트의 기본형)$('이벤트 대상').이벤트명(function(){자바스크립트 코드;})[이벤트 종류]1. 로딩이벤트- load() : 선택한 이미..

목차 스크롤바 위치 메서드 객체 편집 메서드★★★★ 1. before() / inserBefore() / after() / insertAfter() 메서드 2. append() / appendTo() / prepend() / prependTo() 메서드 3. replaceAll() / replaceWith() 메서드 4. unwrap() / wrap() / wrapAll() / wrapInner() 메서드  스크롤바 위치 메서드scrollTop()메서드는 브라우저의 스크롤바가 수직으로 이동한 위칫값을 불러오거나 변경할 때 사용합니다.scrollLeft()메서드도 브라우저의 스크롤바가 수평으로 이동한 위칫값을 불러오거나 변경할 때 사용합니다.(기본형)$(window).scrollTop();$(win..

목차수치 조작 메서드 요소 위치 메서드  수치 조작 메서드수치 조작 메서드는 요소의 속성을 조작할때 사용하는 메서드로 요소의 넓이 높이나 여백영역을 조작하거나 위치를 바꿀때 사용합니다.(기본형)1. $("요소선택").width() 또는 $("요소선택").width(숫자): 선택한 요소의 순수한 컨텐츠 영역(padding, margin, border 제외)의 width값을 반환하거나 바꿉니다.2. $("요소선택").height() 또는 $("요소선택").height(숫자): 선택한 요소의 순수한 컨텐츠 영역(padding, margin, border 제외)의 높이값을 반환하거나 바꿉니다.3. $("요소선택").innerWidth() 또는 $("요소선택").innerWidth(숫자): padding영역까지를..

목차객체 조작 메서드★★★ 속성 조작 메서드★★★ 1. html() / text() 메서드 2. attr() / removeAttr() 메서드 3. addClass() / removeClass() / toggleClass() / hasClass() 메서드4. val() 메서드 5. prop() 메서드  객체 조작 메서드★★★객체 조작 메서드는 객체를 생성, 삭제, 복제, 속성 변환하는 메서드 입니다.객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눠집니다.속성 조작 메서드는 요소의 속성을 바꿀때 사용하고, 수치 조작 메서드는 요소의 넓이, 높이나 위치 등을 조작할 때 사용하고, 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할때 사용합니다. 속성 조작 메서드★..