728x90
목차
jQuery란
자바스크립트 요소 중 실무에서 가장 많이 사용하는 DOM작업을 좀더 쉽게 도와주는 라이브러리
편리한 애니메이션 기능을 구현 가능하다.
라이브러리 연동 ( CDN 방법 )
1. jQuery 다운로드 사이트 접속하기
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
2. 다운로드 페이지로 이동
3. Download로 시작하는 jQuery 우클릭 후 '링크 주소 복사'하기
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type ="text/javascript">
// jQuery 이곳에 작성
</script>
</head>
<body>
</body>
</html>
사용방법
1. 노드 찾기
var $변수이름 = $('css 선택자');
- $()는 함수이다.
- 선택자 : id, class 등을 $()안에 매개변수 값으로 입력한다.
- var $변수이름 : $() 함수에서 리턴해주는 값을 저장하기 위한 변수
이벤트 등록
$대상.on("이벤트 이름", "이벤트리스너");
$대상.단축이벤트함수("이벤트리스너");
$(document.ready(function(){
$("#btnCheck").on("click", function(){
alert("안녕하세요. ");
});
// 또는
$("#btnCheck").click(function(){
alert("안녕하세요. ");
});
})
CSS 설정
$대상.css("스타일 이름", 값);
//여러개 css입력
$('.calender area content').css({ 'display': 'flex','flex-direction' : 'column','align' : 'center','justify-content' : 'center'});
// 클릭시 실선 4px로 생성
$(document).ready(function(){
$("#btnCheck").on("click", function(){
$("#panel").css("border", "4px solid");
});
})
728x90
반응형
'개발기록 > 자바스크립트 & jQuery' 카테고리의 다른 글
| jQuery 도장깨기, function 종류 (each, css, append, wrap, clone, val) (0) | 2022.04.19 |
|---|---|
| jQuery 도장깨기, 요소탐색 방법 first / last / nth-child (0) | 2022.04.18 |
| Javascript DOM 기능, DOM 객체종류 알아보기 [자바스크립트 도장깨기] (0) | 2022.04.15 |
| Javascript String() 객체와 String 함수 [자바스크립트 도장깨기] (0) | 2022.04.15 |
| Javascript 배열1, Array함수 push( ) / pop() [자바스크립트 도장깨기] (0) | 2022.04.14 |
댓글