1. 효과 메서드 효과(effect) 메서드에서는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드들이 있다. - 효과 메서드 종류 1️⃣ 숨김 hide() 요소를 숨긴다. fadeOut() 요소가 점점 투명해지면서 사라진다. slideUp() 요소가 위로 접히며 숨겨진다. 2️⃣ 노출 show() 숨겨진 요소가 나타난다. fadeIn() 숨겨진 요소가 점점 선명해진다. slideDown() 숨겨진 요소가 아래로 펼쳐진다. 3️⃣ 노출, 숨김 toggle() hide(), show() 효과를 적용한다. fadeToggle() fadeIn(), fadeOut() 효과를 적용한다. slideToggle() slideUp(), slideDown() 효과를 적용한다. fadeTo() 지정한 투..

1. 그룹 이벤트 등록 메서드 그룹 이벤트 등록 메서드는 사용하면 한 번에 2개 이상의 이벤트를 등록할 수 있다. on() 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다. bind() 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. delegate() 선택한 요소의 하위 요소에 이벤트를 등록한다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다. one() 이벤트 대상 요소에 1개 이상의 이벤트를 등록한다. 지정한 이벤트가 1회 발생하고 자동으로 해제된다. 1️⃣ on() 메서드 on() 메서드는 선택한 요소에 이벤트를 등록한 이후에도 새롭게 생성되거나 복제된 요소에 이..

1. 이벤트 객체와 종류 사용자가 이벤트를 발생시킬때 마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다. $("이벤트 대상 선택").mousemove(function(매개변수) { 매개변수(이벤트 객체).속성; }); - 이벤트 객체의 속성 종류 1️⃣ 마우스 이벤트 clientX 마우스 포인터 x 좌푯값 반환 (스크롤 이동거리 무시) clientY 마우스 포인터 y 좌푯값 반환 (스크롤 이동거리 무시) pageX 스크롤 x 축의 이동한 거리를 계산하여 마우스 포인터의 x 좌푯값을 반환 pageY 스크롤 y 축의 이동한 거리를 계산하여 마우스 포인터의 y 좌푯값을 반환 screenX 화면 모니터를 기준으로 ..

1. 마우스 이벤트 마우스 이벤트는 사용자가 사이트에서 마우스를 이용해서 취하는 모든 행위를 말한다. 1️⃣ click()/ dbclick() 메서드 click() 이벤트 메서드는 선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용한다. $("이벤트 대상 선택").click(function() { 자바스크립트 코드;}); $("이벤트 대상 선택").on("click", function() {자바스크립트 코드;}); $("이벤트 대상 선택").click(); -> click 이벤트 강제 발생 dblclick() 이벤트 메서드는 선택한 요소를 연속해서 두번 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 더블 클릭 이벤트를 발생시킬 때 사용한다. $(..

1. 이벤트 등록 메서드 이벤트는 사이트에 방문한 사용자가 취하는 모든 행위를 말한다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다. 이벤트 등록 메서드는 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있다. 이벤트 등록 메서드 종류에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메서드가 있다. 2. 이벤트 등록 메서드 종류 1️⃣ 로딩 이벤트 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생한다. ready() 지정한 html 문서 객체의 로딩이 완료된 후 이벤트가 발생한다. error() 이벤트 대상 요소에서 오류가 발생하면 이벤트가 ..

* 연습문제 1 텍스트1 내용2 네이버 내용5 내용6 내용7 내용8 * 연습문제 2 내용1 내용2 내용3 내용4 * 연습문제 3 내용1 내용2 내용3 내용4

https://hyejin.tistory.com/200 [JS + jquery] 객체 조작 메서드 (속성 조작 메서드 html(), text(), attr(), removeAttr(), prop(), val(), css(), addCl 1. 객체 조작 메서드 객체 조작 메서드에는 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눌 수 있다. 속성 조작 메서드는 요소의 속성을 바꿀 때 사용한다. 수치 조작 메서드는 hyejin.tistory.com 객체 조작 메서드 앞편 1. 수치조작 메서드 수치 조작 메서드는 요소의 속성을 조작할 때 사용하는 메서드이다. 1️⃣ 요소의 높이, 너비 메서드 height() 와 weight() 메서드는 여백 및 선 두께를 제외한 순수 요소의 높이값과 너비값을 계..

1. 객체 조작 메서드 객체 조작 메서드에는 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눌 수 있다. 속성 조작 메서드는 요소의 속성을 바꿀 때 사용한다. 수치 조작 메서드는 요소의 너비값 또는 높이값 같은 수치를 바꿀 때 사용한다. 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용한다. 2. 속성 조작 메서드 1️⃣ html() / text() 메서드 html() 메서드는 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용한다. $("요소 선택").html(); $("요소 선택").html("새 요소"); text() 메서드는 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 ..

1. 속성 탐색 선택자 속성 탐색 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자이다. - 속성과 값에 따른 탐색 선택자 $("요소 선택[속성]") 선택한 요소 중 지정한 속성이 포함된 요소만 선택한다. $("요소 선택[속성^=값]") 선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택한다. $("요소 선택[속성$= 값]") 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택한다. $("요소 선택[속성*= 값]") 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택한다. $(":type 속성값") input 요소 중 type 속성값이 일치하는 요소만 선택한다. - 속성 상태에 따른 탐색 연산자 $("요소 선택:[visible | hidden..

1. 제이쿼리 배열 메서드 1️⃣ each()/ $.each() 메서드 선택자로 선택한 요소(문서 객체)는 배열에 순서대로 저장된다. 이때 each()와 $.each() 메서드는 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다. $("요소 선택").each(function(매개변수1, 매개변수2) {}) $.each("요소 선택", function(매개변수1, 매개변수2) {} ) $("요소선택").each(function() { $(this) }) $.each($("요소선택"), function() {$(this) }) 2️⃣ $.map() / $.grep) 메서드 $.map() 메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행한다. 그리고 메서드에서 반환된 데이터는 새 ..

1. 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중에서 원하는 요소를 한번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 탐색 선택자에는 배열의 인덱스를 사용해 선택하는 위치 탐색 선택자와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 속성 탐색 선택자가 있다. 2. 위치 탐색 선택자 1️⃣ first/last 선택자 first 선택자는 선택된 요소 중 첫번 째 요소만 선택한다. last 선택자는 선택된 요소 중 마지막 요소만 선택한다. $("요소 선택:first") or $("요소 선택").first() $("요소 선택:last") or $("요소 선택").last() 2️⃣ even/odd 선택자 even 선택자는 선택한 요소 중 짝수 인덱스(즉 홀수 번째) 요소만 선택 o..

1. 문서 객체 모델 문서 객체 모델 DOM 은 HTML 문서 객체 구조를 말한다. HTML 문서의 최상위에는 이 있고, 하위 객체로 , 가 있다. 가장 상위에 위치하는 이 root 뿌리이고, 뿌리에서 가지처럼 뻗어나가는 모양의 요소를 노드 node라고 부른다. 노드의 종류에는 요소 노드 Element node, 텍스트 노드 Text node, 속성 노드 Attribute node 가 있다. 2. 선택자 선택자 사용하는 가장 기본 유형으로 스타일을 지정하는 것이다. 3. 기본 선택자 종류 - 직접 선택자 직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다. 직접 선택자 종류는 *(전체) #(아이디) .(클래스) 요소명, 그룹선택자가 있다. 1️⃣ 전체 선택자 전체요소를 선택할 때 ..