본문 바로가기

분류 전체보기

 (223)
제이쿼리(jQuery) 기초 문법 - Ajax 관련 메소드 (1) 제이쿼리(jQuery) 기초 문법 Ajax 관련 메소드 Ajax(Asynchronous JavaScript and XML)는 클라이언트(사용자 컴퓨터)가 비동기 방식으로 자바 스크립트를 이용하여 화면 전환 없이 서버(서비스를 제공하는 컴퓨터)측에 자료(XML, JSON(JavaScript Object Notation), 텍스트, HTML)를 요청할 때 사용한다. Ajax 관련 메소드는 모두 Ajax 기술을 기반으로 제작된 자료 요청 메소드이다. Ajax 관련 메소드의 종류 종류 설명 load() 외부 콘텐츠를 가져올 때 사용한다. $.ajax() 데이터를 서버에 HTTP POST, GET방식으로 전송할 수 있으며, HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메소드이다...
제이쿼리(jQuery) 기초 문법 - 제이쿼리 비동기 방식 연동 (AJAX) 제이쿼리(jQuery) 기초 문법 제이쿼리 비동기 방식 연동 (AJAX) Ajax(Asynchronous JavaScript and XML)란 비동기 방식의 Javascript와 XML을 가리킨다. 동기 방식 : 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음. 비동기 방식 : 서버에 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있음. Ajax를 이용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버(서비스를 제공하는 컴퓨터)간에 XML, JSON(JavaScript Object Notation), 텍스트, HTML 등의 정보를 교환하기 위해서이다. Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있다. 또..
제이쿼리(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..

티스토리툴바