VScode/JQuery
-
[JQuery] imageVScode/JQuery 2022. 9. 9. 15:01
*사용된 이미지 1. 이미지 위에 마우스 올리면 이미지 변경 2. prompt로 이용해 숫자를 입력받아 이미지 변경 3. 이미지 슬라이드 4. 이미지 슬라이드 중 이미지 위에 마우스를 올리면 이미지 멈춤 5. view 안에 이미지를 나열한 후 left를 이용해 슬라이드 제작 6. 버튼에 번호를 부여해 이미지 이동하기 -리모트 버튼을 css를 이용해서 아래쪽 가운데 위치 해 각 버튼들 가로방향으로 나란히 위치 시킴 -버튼을 클릭하면 해당이미지의 위치로 animate를 이용해서 imgs를 이동시킴 1234 5678 7. 좌우버튼 생성해 이미지 이동하기 8. 재생 버튼 생성해 이미지 자동 이동하기 -해당되는 이미지 순서 우측 위쪽에 만들기 -버튼 클릭하면 해당되는 버튼 색상 변경하기 1234 5678 ▶
-
[JQuery] button, effectVScode/JQuery 2022. 9. 9. 14:54
show() -화면에 보여지게 하는 함수. -display:block을 쓰지 않고 show 함수를 써서 화면에 보이게 함. -각종 옵션으로 화면에 나타나는 변화에 또다른 효과를 줄 수도 있고 당연히 display:block의 내용 포함되어 실행됨 -show와 함께 다른 동작을 추가하고 싶다면 .show(function(){})처럼 show()안에 function(){}을 넣어서 실행시킴 -.show()에 익명함수를 넣으면 함수 동작 시간에 약간의 동작시간지연이 포함됨 show it hide it hi show it slow hide it slow hello toggle() 1) 태그 번호 지정하여 사용 show it / hide it hi show it slow / hide it slow hello 2)..
-
[JQuery] eventVScode/JQuery 2022. 9. 9. 14:50
1. 이벤트 연결 -기존 (자바스크립)의 이벤트 연결은 태그 안의 onclick 등의 속성을 넣고 자바스크립트 함수를 연결해서 실행되게 하는 방식이라면 제이쿼리는 직접선택자와 이벤트 이름을 연결하고 익명함수로 동작을 정의해서 실행되게 함 -on() -사용 형태 1) $(selector).on(eventName,function(event){}); -selctor에 eventName이 발생하면 function(event){} 함수 실행 -$(function(){//h1에 'click'이 발생하면 function(event){} 실행 header-0 header-1 header-2 2) $(selector).on(object); -두가지 이상의 이벤트와 그에 따른 실행 함수 지정 $(function(){ $(..
-
[JQuery] DOMVScode/JQuery 2022. 9. 9. 14:46
-DOM은 자바스크립트보다 제이쿼리에서 훨씬 활용도 높음 1. 기본 필터링 메서드 filter() -$(selector).filter(selector); -$(selector).filter(function(index){}); Header - 0 Header - 1 Header - 2 Header - 3 Header - 4 Header - 5 2. 문서 객체 탐색 chaining과 종료 -chaining을 사용해 한 줄로 서로 다른 문서 객체에 스타일 적용 가능 -관련 셀렉터들로 필터링한 후 chaining과 filter를 사용함. Header - 0 Header - 1 Header - 2 Header - 3 Header - 4 Header - 5 위의 체이닝 방식으로 실행하기 곤란한 상황일 때 *위 코드..
-
[JQuery] 속성/필터선택자, 배열VScode/JQuery 2022. 9. 9. 14:35
속성 선택자 -기본 선택자 뒤에 붙여 사용 -입력 양식과 관련된 태그를 선택할 때 많이 사용 선택1 선택2 필터 선택자 1. 입력 양식 필터 선택자(상태에 의한) -input: button -input: checkbox -input: radio -input: file -input: image -> : submit 버튼을 이미지로 대신할 때 사용. submit 버튼을 대신하는 이미지이기 때문에 경로에 그림이 없으면 '액박'이 표시되고 옆에 '제출'이라는 말이 같이 표시됨 -input: password -input: text -input: submit -input: reset -요소: checked -요소: disabled -요소: enabled -요소: focus -요소: selected Apple B..
-
[JQuery] 인접관계선택자VScode/JQuery 2022. 9. 9. 14:28
1. 자식(손) 선택자와 후손 선택자 -$("요소선택자 하위요소"): 요소선택자의 지정하위요소 모두를 선택함 -$("요소선택자>자식요소"): 요소선택자의 1단계 자식에 있는 자식요소만 선택 -$("요소선택자+하위요소"): 요소선택자의 바로 다음에 나오는 지정하위요소를 선택함 -$("요소선택자~하위요소"): 요소선택자의 뒤로 나오는 지정하위요소를 선택함 1) 선택자1과 선택자2 사이 공백('선택자1 선택자2'): 선택자1의 자손 중 선택자2 모두(자손의 자손도 포함) 자식(손) 선택자와 후손 선택자 Apple Bag Cat Dog 자식(손) 선택자와 후손 선택자 2) 선택자1> 선택자2: 선택자1의 바로 아래 자손들 중 선택자2 모두(자손의 자손은 미포함) $(function(){ $('div>h1')..
-
[JQuery] selectorVScode/JQuery 2022. 9. 9. 14:22
-모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리 -제작 이유: DOM과 관련된 처리를 쉽게 구현, 일관된 이벤트 연결을 쉽게 구현, 시각적 효과를 쉽게 구현, ajax 애플리케이션 쉽게 구현 -사용법: 직접 다운받아 사용(http://jquery.com)하거나 CDN 호스트 사용 -CDN(content delivery network ): 사용자에게 간편하게 콘텐츠를 제공하는 방식을 의미하며 구글, 마이크로소프트, jquery 측에서 사용자가 jquery를 사용하기 편하게 콘텐츠 제공 라이브러리 다운받아 포함하는 방법 1. 링크 연결 2. 직접 다운로드하여 저장하고 script 태그에 위치를 지정 제이쿼리를 사용한 웹페이지 형식 -제이쿼리는 자바스크립트의 확장판이기 때문에 작성영역이 ..