JQuery
JQuery는 js를 쉽게 사용할 수 있도록 해주는 라이브러리이다. DOM 조작 기능을 제공하며 이벤트 처리에 용이하다.
js로 dom을 제어해 html의 요소를 가져와 활용할 수 있다.
JQuery를 이용하면 간결한 코드로 작성이 가능해진다.
장점
- 간결한 문법
- 편리한 api
- 크로스 브라우저(모든 브라우저, 모든 버전에서 작동됨)
jquery 사용방법
code.jquery.com -> minified -> 코드복사 -> 내 코드의 html상에 복사
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>이 코드 아래의 js부터 jquery 문법 사용 가능해짐
기본 문법
$(선택자).행위;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 기초</title>
</head>
<body>
<h1>jQuery 기초</h1>
<textarea id="content">jQuery를 배워보자</textarea>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script>
//code.jquery.com
//$(선택자).val();
console.log($('#content').val());
</script>
</body>
</html>event
$('#click').click(hello);
원래 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 이벤트</title>
</head>
<body>
<h1>jQuery 이벤트</h1>
<button id="click" onclick="hello();">클릭</button>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
function hello() {
console.log('hello');
}
</script>
</body>
</html>jquery로 바꾼 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 이벤트</title>
</head>
<body>
<h1>jQuery 이벤트</h1>
<button id="click">클릭</button>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
function hello() {
console.log('hello');
}
//.click()
$('#click').click(hello);
</script>
</body>
</html>결과(동일)
익명함수
$('#click').click(function(){
함수 내용
});
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 이벤트</title>
</head>
<body>
<h1>익명 함수</h1>
<button id="click">클릭</button>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
// 익명함수
$('#click').click(function(){
console.log('hello');
});
</script>
</body>
</html>내장 함수
공식문서 참고 : jquery.com api documentation
https://api.jquery.com/
-
.fadeIn([duration], [complete])
-
.animate(properties, [duration], [easing], [complete])
-
.fadeOut([duration], [complete])
-
.css(propertyName)
callback complete
파인애플 좋아하세요?