jQuery Basic 사용방법

8563 단어 jqueryjquery

📌 1. jQuery란?

📎 jQuery란?

jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리이다.

📎 jQuery 기본 특징

👉 DOM과 관련된 처리를 쉽게 구현 할 수 있다.
👉 규칙성을 가지고 이벤트를 처리 할 수 있다.
👉 애니메이션 효과를 쉽게 만들 수 있다.
👉 Ajax 처리 방식을 편리하게 사용할 수 있다.
👉 호환성이 좋아 거의 모든 웹브라우저에 대응이 가능하다.
👉 관련 플러그인의 종류가 매우 많고 플러그인을 직접 구현하거나 확장이 가능하다.

📎 jQuery 중요 특징

👉 javascript에 비해 현저하게 코드 양이 적다.
👉 중간에 html이라는 메소드가 껴있어도, 뒤에다 점을 붙여 css를 사용할 수 있다.
👉 jQuery가 제공하는 모든 메소드들은 그 메소드가 리턴될 때, 그 메소드가 제어했던 대상을 리턴해준다.
👉 꼬리에 꼬리를 물면서 계속 뒤에다 여러가지 메소드를 붙여넣을 수 있다. 사슬처럼 얽혀있어서 체인(chain)이라고 한다.

📎 주어와 서술어

  1. 주어는 제어하는 대상 $로 시작해서 그 인자로 제어 대상을 전달한다.
  2. 거기에는 css 셀렉터로 해당되는 문자열이 들어올 수도 있다.
  3. .을 찍고 method1()을 입력하게 되면, 이 제어 대상의 method1()의 어떤 명령을 한꺼번에 내릴 수가 있다.
$(제어대상).method1().method2()
주어서술어



📌 2. jQuery 사용 방법

📎 jQuery 사용방법1

👉 jQuery 라이브러리를 https://jquery.com/download/ 사이트에서 다운로드 한 뒤 참조하여 사용할 수 있다.

  • 다운로드시 참고
    • uncompressed: 기본 파일
    • compressed: 압축형 (일반적으로 압축형 사용)

👉 <script src="jQuery파일 경로"></script> 문법을 통하여서 jQuery를 참조하여 사용한다.
👉 jQuery파일 접근 경로는 일반 파일의 접근 경로와 같다.

📎 jQuery 사용방법1 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery 사용방법1</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
	
	$(document).ready(function(){
		
		$("body").css("background" , "cyan");
		
	});

</script>
</head>
<body>

</body>
</html>

📎 jQuery 사용방법2

👉 jQuery라이브러리를 다운로드 받지 않고 사이트에서 직접 참조하여 사용할 수 있다.

  • 다운로드시 참고
    • uncompressed: 기본 파일
    • compressed: 압축형 (일반적으로 압축형 사용)

👉 <script src="연결url"></script> 문법을 통하여서 jQuery를 참조하여 사용한다.
👉 https://code.jquery.com/jquery/ 에서 참조 url을 확인 할 수 있으며 인터넷 접속 불가시 사용이 불가하다.

📎 jQuery 사용방법2 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery 사용방법2</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

	$().ready(function(){
		$("body").css("background","red");
	});

</script>
</head>
<body>

</body>
</html>



📖 참조

Eslint와 Prettier
AVA 2일차 - 20210112

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage