본문 바로가기

J-Query

 (5)
05. 요소 추가, 요소 삭제, 요소 면적 1. 요소 추가 $(셀렉터).append( "추가 내용" ) 선택한 요소 내 마지막 요소에 추가 $(셀렉터).prepend( "추가 내용" ) 선택한 요소 내 시작점에 추가 $(셀렉터).after( "추가 내용" ) 선택한 요소 바로 뒷 부분에 추가 $(셀렉터).before( "추가 내용" ) 선택한 요소 바로 앞 부분에 추가 List Item 1 append() prepend() after() before() 2. 요소 삭제 $(...).remove() 선택한 요소와 하위 요소도 모두 삭제 $(...).empty() 선택한 요소의 하위 요소만 삭제 (비워냄) Parent Element child Element 1 child Element 2 remove() empty() 3. 요소 면적
04. Animate, Method Chainin 1. Animate Animate 를 활용 하여 기존에 사용할 수 있는 기능들을 Customize 할 수 있다. $(...).animate({params}, speed, easing, callback); - Params : css 에서 정의 할 수 있는 속성들(애니메이션 결과로 나타날 형태를 지정) - Speed : 애니메이션이 시작해서 끝날때 까지 걸릴 시간 - Callback : 애니메이션 종료 후 일어날 기능 $(...).stop(); - 진행 중인 내용을 정지 시킨다. ◀ ▶ ■ ★ step 마우스를 따라다녀요 2. Method Chaining 각 기능들이 연결 된 것처럼 맞물려서 연속적으로 일어남
03. hide & show, Fade effect, Slide Speed : milliseconds, slow, fast Easing : swing(가속), linear(평균) Callback : 효과가 끝나고 실행할 기능 1. hide & show Hide - 해당 요소를 사라지게 하는 기능 (display : none) Show - 해당 요소를 보이게 하는 기능 (display : block) Toggle - 두 기능을 번갈아가며 실행 $(...).hide(speed, callback); $(...).show(speed, callback); $(...).toggle(speed, easing, callback); Speed : milliseconds, slow, fast Easing : swing(가속), linear(평균) Callback : 효과가 끝나고 실행..
02. Event 등록, GET, SET, CSS, AddClass 1. Event 등록 이벤트 등록은 직접 등록과 on 을 통한 등록이 있다. J-Query 에서 사용하는 이벤트는 아래와 같다. expression description click() 클릭 시 발생 dblclick() 더블 클릭 시 발생 mouseenter() 마우스가 특정 영역으로 들어왔을 경우 발생 mouseleave() 마우스가 특정 영역 밖으로 나갔을 경우 발생 mousedown() 마우스 버튼 눌렀을 경우 발생 mouseup() 마우스 버튼 떼었을 경우 발생 hover() 마우스 오버 시 발생 (mouseenter 와 mouseleave 를 결합한 형태) focus() 포커스가 들어왔을 시 발생 blur() 포커스를 잃었을 경우 발생 (웹 접근성 상 사용 금지) 더 알고 싶다면 API 사이트(h..
01. J-Query의 기초 1. J-Query J-Query 는 JavaScript 의 Library 이다. 1-1. J-Query 사용하는 이유 1) 사용의 편리성 2) Cross Browsing Java Script 는 Browser 에서 해석하므로 종류나 버전마다 표현이 안되거나 다르게 되는 경우가 있다. J-Query 에서는 내부적으로 Browser 마다 처리를 해 놓았기 때문에 신경 쓸 필요가 없다. 2) 다양한 Plugin 2. Selector 클래스가 없다. 클래스가 있다. 클래스가 없다. 클래스가 있다. 아이기다 있는 요소 태그만 있는 요소 List 1: HTML CSS J-QUERY List 2: HTML CSS J-QUERY 사이트 링크 A 사이트 링크 B 사이트 링크 C NO 이름 생년월일 1 김길동 2018-..

티스토리툴바