분류 전체보기
-
[제이쿼리] jQuery 에이작스 (Ajax) 사용하기Front/jquery 2020. 4. 7. 07:07
제이쿼리 (jQuery) 에이작스 (Ajax) 사용하기 안녕하세요? 장장스입니다. 오늘은 제이쿼리의 꽃(?) 같은 Ajax 입니다. Ajax란? Ajax(Asynchronous JavaScript and XML)란 비동기 방식의 Javascript와 XML을 가리킵니다. 동기 방식 비동기 방식 서버에 신호를 보냈을 떄 응답이 돌아와야 다음 동작을 수행한다. 서버에 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. Ajax? Ajax를 이용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버간에 XML, JSON(JavaScript Object Notation), 텍스트, HTML 등의 정보를 교하기 위해서입니다. Ajax가 등장하기 전에는 반드시 서버를 거쳐야만 자료를 요청할..
-
[제이쿼리] jQuery 애니메이션 효과 제어 메서드Front/jquery 2020. 4. 5. 15:15
jQuery 애니메이션 효과 제어 메서드 안녕하세요? 장장스입니다. 애니메이션과 효과를 제어하는 메서드 포스팅입니다. 애니메이션 효과 제어 메서드 '효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메서드 입니다. 애니메이션 효과 제어 메서드에 대해 살펴보기 전에 애니메이션 메서드가 어떻게 적용되는지 알아 보겠습니다! 참고자료! https://d2.naver.com/helloworld/0265052 불러오는 중입니다... 애니메이션 효과 제어 메서드의 종류 종류 설명 stop() 현재 실행 중인 효과를 모두 정지시킵니다. delay() 지정한 시간만큼 지연했다가 애니메이션을 진행합니다. queue() 큐에 사용자 정의 함수를 추가하거나 큐에 대기 중인 함수를 배열에 담아 반환합니다. 그리고 qu..
-
[제이쿼리] jQuery 애니메이션 메서드 animate()Front/jquery 2020. 4. 5. 07:07
제이쿼리(jQuery) 애니메이션 메서드 안녕하세요? 장장스입니다. 오늘은 제이쿼리 애니메이션 메서드를 포스팅해보겠습니다. 애니메이션 메서드를 이용하면 HTML에 적용된 CSS를 조절할 수 있습니다. animate() 메서드 선택한 요소에 다양한 동작(Motion) 효과를 적용할 수 있습니다. 예를 들어 요소를 앞으로 이동시키거나 점차 커지게 하는 등 다양한 동작을 적용할 수 있습니다. animate() 메서드의 기본형입니다. $("요소 선택").animate({ 스타일 속성 }, 적용 시간, 가속도, 콜백 함수); 실습 ▼javascript $(function(){ $(".btn1").on("click", function( ) { $(".txt1").animate({ marginLeft:"500px",..
-
[제이쿼리] jQuery 효과 메서드Front/jquery 2020. 4. 5. 03:03
제이쿼리(jQuery) 효과 메서드 안녕하세요? 장장스입니다. 이번 포스팅은 제이쿼리 효과 메서드입니다. 파워포인트를 사용해보신 분이라면 글자가 슝~ 그림이 샤샥하고 등장하는 효과를 내보신적이 있으실 겁니다. 제이쿼리 효과 메서드를 이용하면 비슷한(?) 효과를 낼수 있습니다. 효과 메서드 효과(Effect) 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드가 있습니다. ●숨김 효과 종류 설명 hide() 요소를 숨깁니다. fadeOut() 요소가 점점 투명해지면서 사라집니다. slideUp() 요소가 위로 접히며 숨겨집니다. ●노출 효과 종류 설명 show() 숨겨진 요소가 노출됩니다. fadeIn() 숨겨진 요소가 점점 선명해집니다. slideDown() 숨겨진 요소가 아래..
-
[제이쿼리] jQuery 이벤트 종류와 사용방법Front/jquery 2020. 4. 3. 09:00
제이쿼리(jQuery) 이벤트 안녕하세요? 장장스입니다. 오늘은 제이쿼리 이벤트 메서드를 포스팅해보겠습니다. 이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 헨들러는 이벤트가 발생했을 떄 실행되는 코드를 말합니다. 이벤트 등록 메서드 이벤트 등록 메서드란? 이 메서드를 이용하면 방문자가 작성한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있습니다. 이벤트 등록 메서드에는 하나의 이벤트만 등할 수 있는 단독 이벤트 등록 메서드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메서드가 있습니다. 단독 이벤트 메서드는 한 동작에 대한 이벤트를 등록할 떄 사용하는 메서드입니다. 예를 들어, '요소를 클릭했을 떄, '요소를 더블클릭했을 때', 요소에 마우스 포인터를..
-
[제이쿼리] jQuery 객체편집 메서드Front/jquery 2020. 4. 2. 04:38
제이쿼리(jQuery) 객체편집 메서드 객체 편집 메서드 포스팅입니다. 객체 편집 메서드는 선택한 요소를 복제하거나 새 요소를 생성하는 메서드와 복제하거나 새로 생성한 요소를 의도한 위치에 삽입하고 선택한 요소를 삭제하는 기능이 있습니다. 아래에서 자세히 살펴보겠습니다. before()/insertBefore()/after()/insertAfter() 메서드 종류 설명 $("요소 선택").before("새 요소"); $("요소 선택")insertBefore("요소 선택"); 선택한 요소의 이전 위치에 새 요소를 추가합니다. $("요소 선택").after("새 요소"); $("새 요소").before("요소 선택"); 선택한 요소의 다음 위치에 새 요소를 추가합니다. append()/appendTo()/p..
-
[제이쿼리] jQuery 수치조작 메서드Front/jquery 2020. 4. 1. 22:34
제이쿼리(jQuery) 수치조작 메서드 제이쿼리 객체조작 메서드중 하나인 수치조작 메서드입니다. 수치 조작 메서드 수치 조작 메서드는 요소의 속성을 조작할 때 사용하는 메서드입니다. HTML을 조금 공부해보신 분이라면 다음과 같은 BOX 모델사진을 본 적이 많을 것으로 생각됩니다. 제이쿼리 수치 조작 메서드는 BOX 모델의 수치를 조작하는 것이라고 생각하면 쉽게 이해가 됩니다. 요소의 높이 / 너비 메서드 height와 width() 메서드는 여백 및 선 두께를 제외한 순수 요소의 높잇값과 너빗값을 계산합니다. innerHeight() 와 innerWidth() 메서드는 여백을 포함한 너빗값을 계산하고, outerHeight()와 outerWidth() 메서드는 여백 및 선을 포함한 요소의 높잇값과 너빗..
-
[제이쿼리] jQuery 속성조작 메서드Front/jquery 2020. 4. 1. 09:28
제이쿼리(jQuery) 속성 조작 메서드 안녕하세요? 장장스입니다. 제이쿼리 객체조작 메서드를 포스팅하려고 합니다. 객체 조작 메서드는 객체를 생성하거나 조작, 복제할 수 있습니다. 이번 포스팅은 그 중 하나인 속성 조작 메서드를 포스팅하겠습니다. 속성조작 메서드 속성 조작 메서드는 말그대로 속성 조작 메서드는 요소의 속성을 바꿀 때 사용합니다. 수치를 바꿀 땐 수치 조작 메서드, 객체를 생성하거나 삭제 또는 복제할 때 사용하는 객체 조작 메서드가 있습니다. html( ) /text( ) 메서드 종류 설명 $("요소 선택").html(); 선택한 요소의 하위 요소를 가져와 문자열로 반환합니다. $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소를 생성합니..
-
[제이쿼리] jQuery 배열(array) 메서드Front/jquery 2020. 3. 31. 09:34
제이쿼리 배열 메서드 jQuery Array 안녕하세요? 장장스입니다. 제이쿼리 배열 메스드입니다. ○each()/ $.each 메서드 each()/ $.each 메서드는 배열에 저장된 요소를 하나씩 순서대로 선택하면서 인덱스와 값을 가져옵니다. ▼javascript $(function(){ var fruit = [ {"fruit":"사과"}, {"fruit":"포도"}, {"fruit":"딸기"} ]; $(fruit).each(function(index, obj){ console.log(index + ":", obj); }); console.log("==== The End 1 ===="); $.each($("#menu02 li"), function(index, obj){ console.log(index..
-
[제이쿼리] jQuery 콘텐츠 탐색 선택자(selector)Front/jquery 2020. 3. 29. 06:14
제이쿼리(jQuery) 콘텐츠 탐색 선택자(selector) 안녕하세요? 장장스입니다. 콘텐츠 탐색 선택자에 대한 포스팅입니다. 콘텐츠 탐색 선택자(1) 종류 설명 $("요소 선택:contains(텍스트)") 지정한 텍스트를 포함하는 요소만 선택한다. $("요소 선택").contents() 선택한 요소의 하위 요소 중 1 깊이의 텍스트와 태그 노드를 선택한다. $("요소 선택:has(요소명)") $("요소 선택").has("요소명") 선택한 요소 중 지정한 태그를 포함하는 요소만 선택한다. $("요소 선택:not(요소명)") $("요소 선택").not(제외할 요소 선택) 선택한 요소 중 지정한 요소만 제외한 채 선택한다. $("요소 선택").탐색 선택자().end() 필터링되기 이전의 선택자가 적용 되도..