jQuery 1

📌학습 내용

📖 라이브러리

• 브라우저의 기능들을 더 쉽게 사용할 수 있도록 도와줌
• 같은 작업을 더 적은 양의 코드로 만들고 브라우저 간 버그를 해결하도록 함
• 특정한 부분 기능만을 수행하도록 컴파일되어 기계어의 형태로 (또는 대상 플랫폼에 따라서는 바이트코드로) 존재함
• 현재까지 가장 유명한 라이브러리가 jQuery

📖 jQuery

https://jquery.com/
API Documentation을 자주 보고 익히는 것이 중요함

💡 사용 방법

(1) 공식 홈페이지에서 파일 다운로드 후 일반 js 파일과 같은 방식으로 연동해줌

주의
라이브러리를 먼저 연동해줘야 함
순서가 뒤바뀌면 연동되지 않음

(2) $(function() { }) 안에 모든 제이쿼리 코드를 입력함

참고(1)
과거 버전에서는 사용 코드가 보다 복잡했음
$(document).ready(function() { })

참고(2)
경우에 따라 $(function() { })를 입력하지 않고 바로 코드를 작성해도 되지만, 입문 단계이므로 정석적인 접근을 권함

💡 선택자 지정

기본 선택

변수를 선언할 때는, 제이쿼리에 의해 할당된 값이 초기화 되어있다는 것을 나타내기 위해 변수 이름의 앞에 $를 붙여준다.

특정 요소 선택

선택하고자 하는 요소가 없을 때는 오류 메시지가 아니라 값이 없음을 반환함

💡 이벤트 적용하기

$('선택자1111').이벤트A(function() {
		$('선택자1111').css('이벤트 속성A');
	})
    
$('선택자1111').이벤트B(function() {
		$('선택자1111').css('이벤트 속성B');
	})

this를 활용해 간소화하기

$('선택자1111').이벤트A(function() {
		$('this').css('이벤트 속성A');
	})
    
$('선택자1111').이벤트B(function() {
		$('this').css('이벤트 속성B');
	})

.on: 하나의 선택자에 여러 메소드 활용

$('선택자').on({
	이벤트A: (function() {
		$('this').css('이벤트 속성A');
	},
	이벤트B: (function() {
		$('this').css('이벤트 속성B');
	}
    )

💡 이벤트

mouseenter mouseleave

click

💡 메서드

fadeTo
Style의 Opacity 조절

https://api.jquery.com/fadeto/

hide
display: none; 처리

show
display: none;을 제거하는 개념

toggle
hide와 show 중 요소의 원래 상태와 반대 되는 명령을 수행하여 자연히 반복 효과를 줄 수 있음

slideDown
아래로 슬라이드 되는 효과

slideToggle

fadeIn fadeOut

💡 Class 제어

addClass removeClass

toggleClass

📌어려운 점

🤍

📌해결방법

🤍

📌느낀 점

와 라이브러리 너무 편하네...?????!!!!!!
그래도 제이쿼리에 너무 익숙해지려 하지 말고 JS 순수 코딩을 많이 익혀두자.