javascript (47) 썸네일형 리스트형 제이쿼리(jQuery) 기초 문법 - 애니메이션 메소드 및 효과 제이쿼리(jQuery) 기초 문법 애니메이션 메소드 및 효과 문서 객체를 보이게 했다가 안보이게 하려면 스타일(CSS)의 display 속성을 이용해야 한다. 단, 스타일을 이용하는 방법은 객체를 단순하게 조절하는 정도의 효과만 기대할 수 있다. 하지만 효과(Effect)메소드를 이용하면 스타일(CSS)를 이용하는 것보다 좀 더 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보이게 할 수 있다. 효과 메소드 효과(Effect)메소드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메소드가 있다. 효과 메소드 종류 구분 종류 설명 숨김 hide() 요소를 숨긴다. fadeOut() 요소가 점점 투명해지면서 사라진다. slideUp() 요소가 위로 접히며 숨겨진다. 노출 show() 숨.. 제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (3) 제이쿼리(jQuery) 기초 문법 제이쿼리 이벤트 이벤트가 발생한 요소 추적하기 사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해오는 방법에대해 알아보자. 이벤트가 발생한 요소를 선택해 오는 선택자 $(this)의 사용법과 이벤트가 발생한 요소의 인덱스 값을 반환하는 index() 인덱스 반환 메소드도 알아보자. $(this)선택자 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있다. 메뉴1 메뉴2 메뉴3 id 속성값이 'menu'인 요소의 요소를 선택하여 click 이벤트를 등록하는 코드이다. 만약 메뉴1을 클릭하면 이벤트 핸들러에 사용된 $(this)는 이벤트가 발생한 메뉴1를 선택한다. index() 인덱스 반환 메소드 index().. 제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (2) 제이쿼리(jQuery) 기초 문법 제이쿼리 이벤트 강제로 이벤트 발생 시키기 이벤트가 강제로 발생했다는 말은 사용자에 의해 이벤트가 발생한게 아니라 핸들러에 의해 자동으로 이벤트가 발생했음을 의미한다. 이벤트 제거 메소드 이벤트를 제거하는 메소드로 off()가 있다. 이벤트 객체와 종류 사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메소드가 포함되어 있다. 이벤트 객체의 속성 종류 구분 종류 설명 마우스 이벤트 clientX(Y) 마우스 포인터의 X(Y) 좌표값 반환(스크롤 이동 거리 무시) pageX(Y) 스크롤 X(Y)축의 이동한 거리를 계산하여 마우스 포인터의 X(Y)좌표값을 반환 screen.. 제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (1) 이벤트 등록 메소드 제이쿼리(jQuery) 기초 문법 제이쿼리 이벤트 이벤트 등록 메소드 이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다. 이벤트 등록 메소드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있다. 이벤트 등록 메소드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메소드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메소드가 있다. 버튼 여기서 $("#btn")은 이벤트 대상이고, click()은 이벤트 등록 메소드, function(){...}는 이벤트 핸들러이다. 단독 이벤트 등록 메소드는 로딩이벤트, 마우스이벤트, 포커스이벤트, 키보드이벤트, 기타이벤트로 나눌 수 있다... 제이쿼리(jQuery) 기초 문법 - 배열 관련 메소드 제이쿼리(jQuery) 기초 문법 배열 관련 메소드 제이쿼리에는 배열 관련 메소드도 있다. 배열 관련 메소드의 종류 종류 사용법 설명 each() / $.each() $("요소 선택").each(function) $.each($("요소선택").function) 배열에 저장된 문서 객체만큼 메소드가 반복 실행된다. 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다. $.map() $.map(Array.function) 배열에 저장된 데이터 수만큼 메소드가 반복 실행된다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장된다. 새로 저장된 배열 객체를 반환한다. $.grep() $.grep(Array.function) 배열에 저장된 데이터 수만큼 메소드가 반복 실행된다. .. 제이쿼리(jQuery) 기초 문법 - 선택자 (5) 콘텐츠 탐색 선택자 제이쿼리(jQuery) 기초 문법 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 서택할 수 있다. 대표적인 탐색 선택자에는 배열의 인덱스(index)를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다. 콘텐츠 탐색 선택자 콘텐츠 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:contains(텍스트)") $("li:contains('내용')") 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택한다. $("요소 선택").contents() $("p").contents() 선택한 p 요소의 하위 요소 중 가장 가까운 하위 요소를 선택한다. $("요소 선택:ha.. 제이쿼리(jQuery) 기초 문법 - 선택자 (4) 위치 탐색 선택자, 속성 탐색 선택자 제이쿼리(jQuery) 기초 문법 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 서택할 수 있다. 대표적인 탐색 선택자에는 배열의 인덱스(index)를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다. 위치 탐색 선택자 기본 선택자로 선택한 요소는 배열에 담긴다. 이 때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다. 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first( ) $("li:first") $("li").first( ) 전체 요소 중 첫 번째 요소만 선택 $("요소 선택:last").. 제이쿼리(jQuery) 기초 문법 - 선택자 (3) 인접 관계 선택자 제이쿼리(jQuery) 기초 문법 선택자 선택자는 HTML요소를 선택하여 가져온다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일을 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)는 정적이다라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 동적으로 스타일을 적용할 수 있다. 기본 선택자 영역에 있는 문서 객체를 선택할 수 있는 선택자를 알아보자. 제이쿼리의 기본 선택자는 다음과 같이 직접 선택자와 인접 관계 선택자로 나눌 수 있다. 인접 관계 선택자 인접 관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는(이전과 다음 요소)요소를 선택할 때 사용.. 이전 1 2 3 4 5 6 다음