일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- JS 기초
- JS clearInterval
- JS null undefined
- JS setTimeout
- JS appendChild
- git 협업셋팅
- JS 데이터타입
- JS 타이머기능
- JS 화살표함수
- JS localStorage
- JS 숫자
- js 변수
- JS prompt
- JS form
- JS setInterval
- CSS속성정리
- JS typeof연산자
- JS 형변환
- HTML기초
- JS 함수
- JS 연산
- JS append
- JS redirection
- JS preventDefault
- JS 삼항연산
- JS value속성
- CSS기초
- JS classList
- JS form action
- JS 스코프
공부기록용
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dUjuIQ/btsEEzi7T7I/CcaNROKeqZtURMMr47SQa1/img.png)
🔴이펙트 효과 관련 메서드 🔻요소의 표시와 숨김 🔻fade 효과 🔻slide 효과 🔻이펙트 제어 🔻사용자 정의 이펙트_.animate() 이펙트(effect) 효과 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate() 메소드를 통해 설정을 변경해서 사용할 수도 있다. 요소의 표시와 숨김 .show() 선택 요소 보이기, 표시하기 .hide() 선택 요소 감추기 .toggle() 선택 요소 표시하기/감추기 ✔️ ( )안에는 지속시간을 넣어주면 된다. 작성하지 않을 경우 기본 값이 자동으로 설정되어 효과에 반영되어 진다. ' ' 안에 작성하면 되고 'fast', 'slow'처럼 문자로 작성하거나 '3s'로 작성하면 된다. 5000, 2000 처럼 숫자를 작성할 경우 ' '는 필요없다. fa..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tydxv/btsEHr4D5tL/kfPhxGKqAmdJN9UjNYjjX0/img.png)
🔴요소의 크기 🔴요소의 위치 🔴프로퍼티 설정 🔴클래스 설정 요소의 크기 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공한다. .width() 선택한 요소 집합의 첫 번째 요소의 너비를 반환하거나, 선택된 요소의 너비를 인수로 전달받은 값으로 설정함. .height() 선택한 요소 집합의 첫 번째 요소의 높이를 반환하거나, 선택된 요소의 높이를 인수로 전달받은 값으로 설정함. .innerWidth() 선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역을 포함한 너비를 반환함. .innerHeight() 선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역을 포함한 높이를 반환함. .outerWidth() 선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역과 테..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kygS9/btsEFeLXZvR/5F7XleMhVK7MhwhMF12mwk/img.png)
🔴요소의 탐색 🔻조상 요소 🔻형제 요소 🔻자식 요소 🔻기타 탐색 🔻필터링 조상 요소의 탐색 .parent() 선택한 요소의 부모(parent) 요소를 선택함. 이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있다. .parents() 선택한 요소의 조상(ancestor) 요소를 모두 선택함. 이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 조상 요소만을 선택할 수도 있다. .parentsUntil() 선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. 이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택한다. .closest() 선택한 요소를 포함한 조상..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cuN6oI/btsEE0G8OHW/2cJOi7SpI93IKZfcnNVyck/img.png)
🔴선택된 요소에 접근하는 메서드 🔴요소를 추가하는 메서드 🔻기존 요소의 내부에 추가 🔻기존 요소의 외부에 추가 🔻기존 요소를 포함하는 요소의 추가 🔴요소의 복사, 대체,삭제 선택된 요소에 접근하는 메서드 선택자에 의해 선택된 요소의 값을 읽어 가져오거나 원하는 값으로 설정하기 위해서는 해당 메서드들을 통해 값을 원하는 요소에 접근할 수 있다. 이러한 메서드를 getter, setter메서드라고 한다. getter 메서드: 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드로 이러한 getter 메소드는 아무런 인수를 전달하지 않고 호출한다. setter 메서드: 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드로 이러한 setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출한다. .html..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/blCxGK/btsEvgb0WWu/hdFL0JsNeHdhL4HKeoQKy1/img.png)
jQuery' 메서드 jQuery 라이브러리가 제공하는 함수로, HTML요소를 선택하고 조작하는 함수를 의미한다. 일반적으로 선택된 요소의 스타일을 변경하거나 DOM구조를 조작하는데 사용된다. jQuery' 이벤트 웹 페이지에서 발생하는 사용자와의 상호작용(클릭, 마우스 오버, 키 입력 등)에 반응하는 동작을 의미한다. 이벤트 핸들러를 등록하여 특정 이벤트가 발생했을 때 원하는 동작을 수행할 수 있다. 이벤트 처리를 위해 제이쿼리에서는 .on() 메소드를 사용한다. ✔️제이쿼리 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 연결한다. $(document).ready(function() { $("button").on("click", ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Qtb8d/btsEoLYpwmh/af9JsPQw6R3IFJONdQzAjK/img.jpg)
❓jQuery선택자 이후 동작함수를 작성할 때 함수와 메서드, 이벤트의 정의가 불분명한 상태였음! 정의?란게 불분명한 느낌 상황에 맞게 잘 선택하고 싶어 차이를 짚고 넘어가고 싶었음 함수(Function)과 메서드(Method)의 차이 함수는 여러 문장들이 하나의 기능을 구현하도록 구성한 것이라고 할 수 있다. 그 함수 중에서 클래스 내부에 정의한 함수를 메서드라고 부른다. 또한 메서드는 객체의 속성을 다루기 위한 행위를 정의한 것이라는 의미도 포함하고 있다. 함수 메서드 특정한 작업을 수행하기 위해 설계되었다. 객체의 기능을 구현하기 위해 클래스 내부에 구현(정의)되는 함수이다. 메서드를 구현하면 객체의 기능을 구현하는 것이다. 자체적으로 존재한다.(독립적) 객체와 연결되어 있다. 클래스 내부에 종속되..