climb-up-the-stairs climb-up-the-stairs

show()와 hide() : 문서 객체를 크게 하며 보여주거나 작게하며 사라지게 함 show() : ()안에 숫자가 커질수록 천천히 보여진다. hide() : ()안에 숫자가 커질수록 천천히 사라진다. : 작게하여 사라지게 한다. toggle : 왔다갔다하는 실행에 사용 : ex. 집형광등 효과 show()와 hide() 문서 객체를 크게 하며 보여주거나 작게하며 사라지게 함 보이기 숨기기 토글이 slideDown() : 내려서 보여주기 slideUp() : 올려서 숨기기 slideToggle() : 퍼졌다가 다시 접혀서 숨김 slideDown()와 slideUp() 첫 번째 메뉴 내용1 두 번째 메뉴 내용2 세 번째 메뉴 내용3 네 번째 메뉴 내용4 다섯 번째 메뉴 내용5 fadeIn() : 나타내기..

이벤트 관련 속성 : 이벤트 핸들러의 매개인자로 event객체 전달 : 인라인에서 다른 키워드 불가능 매개인자(event) 실행확인 이벤트 연결 종류 on()와 off() on() : 현재 존재하는 문서 객체에 이벤트 연결 off() : on()으로 연결된 이벤트 제거 마우스 올라가고 내려가고 클릭하면 사라지게 만들기. 기본 상태 one() : 이벤트를 한 번만 연결할 때 사용 기본 상태 마우스 이벤트 mouseover() : 마우스를 대면 실행(자식요소까지 발생) mouseout() : 마우스를 떼면 실행(자식요소까지 발생) mouseenter() : 마우스를 대면 실행 mouseleave() : 마우스를 떼면 실행 차이점 : 자식요소한테도 이벤트를 발생시킬것인지 아닌지의 차이 마우스오버와 마우스아웃은..

객체 조작 기본설정 each() : for in문과 비슷한 메소드로 객체나 배열의 요소 검사 $.each(object, function(index, item){}) : 매개변수 지정하여 안에 있는 요소 반복 $(선택자).each(function) : 이미 지정하고 function을 바로 넣어 안에 있는 요소 반복 index : 배열의 인덱스 또는 객체의 키 item : 해당 객체에서 인덱스 또는 키가 가진 값(객체) html() : url을 불러올 수 있는 함수 addClass() : 선택된 요소에 클래스 추가 append : 맨 뒤에 이어붙이기,추가 appendTo() : (추가할 곳 지정)추가가능 prepend : 맨앞에 이어붙이기 추가 ().before : (지정아이디)앞에 추가 이어붙이기 ().a..

객체 탐색 탐색 메소드 sideways메소드 .siblings() : 나랑 동일한 레벨에 있는 요소들의 리턴 .siblings('지정태그') : 지정태그만 지정한다. next() : 뒤에 있는 요소에 설정 nextAll() : 뒤에 있는 모든 요소에 설정 nextUntil('지정태그') : 지정태그까지 지정. 단, 지정태그 제외 prev() : 선택요소의 이전 선택 prevAll() : 선택요소의 이전 모든 형제 요소 선택 prevUntil() : 매개변수가 다 비어있으면 이전 모든 형제요소 반환 prevUntil('p') : p태그를 제외하고 이전 모든 형제들 요소 반환 탐색 메소드 div(parent) p span h4 h5 p 지정 칸을 클릭하면 그 행의 정보가 반환 객체 탐색 탐색 메소드 side..

객체 탐색 Descendants메소드 : 선택한 요소의 하위 요소들을 선택할 수 있는 메소드 .children() : 하위요소 선택 .children().children() : 하위태그의 하위태그인 태그가 선택 .find() : 모든 후손을 한 번에 지정할 수 있다. 객체 탐색 Descendants메소드 선택한 요소의 하위 요소들을 선택할 수 있는 메소드 div (great-grandparent) ul (grandparent) li(direct parent) span1 li(direct parent) span2 div (grandparent) p (direct parent) span

객체탐색 Ancestors메소드 : 선택한 요소의 상위 요소들을 선택할 수 있는 메소드 ('태그').parent() : 태그 바로 상위태그에 적용 ('태그').parents() : 태그 위에 있는 모든 상위클래스들에 적용(body까지) ('태그').parentsUntil('지정태그') : 지정태그를 포함하지 않고 그 전까지 다 가져온다. Ancestors메소드 div (great-grandparent) ul (grandparent) li(direct parent) span div (grandparent) p (direct parent) span

객체 탐색 필터링 메소드 : 필터 메소드를 통해 문서 객체 선택 필터링 메소드 test-a test-b test-c test-d test-e test-f

jQuery장점 : DOM과 관련된 처리를 쉽게 구현할 수 있다. : Ajax통신, 이벤트 처리 등 폭넓게 지원한다. : 별도의 플러그인을 통해 차트, 슬라이드쇼, 테이블 등 간단히 구현이 가능하다. jQuery연결방법 방법1 : jQuery홈페이지에서 js파일을 다운로드 받아 연결 방법2 : CDN(Content Delivery Network)을 통한 연결--> 인터넷이 연결되어 있어야 한다. $사용 = 제이쿼리 # = id $(document).ready(function(){ $('ol-connect').css('background', 'beige'); }); $(document).ready() : 페이지를 로드한 후 ready메소드 실행 = JavaScript의 window.onload() : 자바..