일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 form
- CSS기초
- JS 타이머기능
- JS 숫자
- HTML기초
- JS append
- JS setTimeout
- JS value속성
- JS redirection
- git 협업셋팅
- JS 삼항연산
- JS preventDefault
- JS 화살표함수
- JS 연산
- JS 데이터타입
- JS classList
- JS 형변환
- JS typeof연산자
- JS appendChild
- JS 스코프
- CSS속성정리
- JS 기초
- JS clearInterval
- JS localStorage
- JS setInterval
- js 변수
- JS 함수
- JS form action
- JS null undefined
- JS prompt
목록💡깨달음💡/jQuery (8)
공부기록용
🔴이펙트 효과 관련 메서드 🔻요소의 표시와 숨김 🔻fade 효과 🔻slide 효과 🔻이펙트 제어 🔻사용자 정의 이펙트_.animate() 이펙트(effect) 효과 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate() 메소드를 통해 설정을 변경해서 사용할 수도 있다. 요소의 표시와 숨김 .show() 선택 요소 보이기, 표시하기 .hide() 선택 요소 감추기 .toggle() 선택 요소 표시하기/감추기 ✔️ ( )안에는 지속시간을 넣어주면 된다. 작성하지 않을 경우 기본 값이 자동으로 설정되어 효과에 반영되어 진다. ' ' 안에 작성하면 되고 'fast', 'slow'처럼 문자로 작성하거나 '3s'로 작성하면 된다. 5000, 2000 처럼 숫자를 작성할 경우 ' '는 필요없다. fa..
🔴요소의 크기 🔴요소의 위치 🔴프로퍼티 설정 🔴클래스 설정 요소의 크기 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공한다. .width() 선택한 요소 집합의 첫 번째 요소의 너비를 반환하거나, 선택된 요소의 너비를 인수로 전달받은 값으로 설정함. .height() 선택한 요소 집합의 첫 번째 요소의 높이를 반환하거나, 선택된 요소의 높이를 인수로 전달받은 값으로 설정함. .innerWidth() 선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역을 포함한 너비를 반환함. .innerHeight() 선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역을 포함한 높이를 반환함. .outerWidth() 선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역과 테..
🔴요소의 탐색 🔻조상 요소 🔻형제 요소 🔻자식 요소 🔻기타 탐색 🔻필터링 조상 요소의 탐색 .parent() 선택한 요소의 부모(parent) 요소를 선택함. 이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있다. .parents() 선택한 요소의 조상(ancestor) 요소를 모두 선택함. 이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 조상 요소만을 선택할 수도 있다. .parentsUntil() 선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. 이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택한다. .closest() 선택한 요소를 포함한 조상..
🔴선택된 요소에 접근하는 메서드 🔴요소를 추가하는 메서드 🔻기존 요소의 내부에 추가 🔻기존 요소의 외부에 추가 🔻기존 요소를 포함하는 요소의 추가 🔴요소의 복사, 대체,삭제 선택된 요소에 접근하는 메서드 선택자에 의해 선택된 요소의 값을 읽어 가져오거나 원하는 값으로 설정하기 위해서는 해당 메서드들을 통해 값을 원하는 요소에 접근할 수 있다. 이러한 메서드를 getter, setter메서드라고 한다. getter 메서드: 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드로 이러한 getter 메소드는 아무런 인수를 전달하지 않고 호출한다. setter 메서드: 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드로 이러한 setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출한다. .html..
jQuery' 메서드 jQuery 라이브러리가 제공하는 함수로, HTML요소를 선택하고 조작하는 함수를 의미한다. 일반적으로 선택된 요소의 스타일을 변경하거나 DOM구조를 조작하는데 사용된다. jQuery' 이벤트 웹 페이지에서 발생하는 사용자와의 상호작용(클릭, 마우스 오버, 키 입력 등)에 반응하는 동작을 의미한다. 이벤트 핸들러를 등록하여 특정 이벤트가 발생했을 때 원하는 동작을 수행할 수 있다. 이벤트 처리를 위해 제이쿼리에서는 .on() 메소드를 사용한다. ✔️제이쿼리 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 연결한다. $(document).ready(function() { $("button").on("click", ..
기본 구문 $기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는 HTML요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다. jQuery를 사용하기 위해서는 먼저 jQuery객체를 생성해야 한다. 생성된 jQuery객체는 다양하나 메소드를 가지고 jQuery를 학습하는 것은 대체로 이 다양한 메소드들의 사용법을 익히는 것이다. ✔️$() 함수 $() 함수는 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성해주는 역할을 한다. $() // jQuery() 함수의 축약형 jQuery()함수는 전달되는 인수의 종류에 따라 다른 동작을 하지만 결국에는 jQuery객체를 반환한다. 제이쿼리는 이렇게 생성된 제이쿼리 객체의 각종 ..