✅ JQuery란?

가장 인기있는 JavaScript 라이브러리
(요즘에는 잘 안쓰지만 오래된 회사에서는 쓰지 않을까?)

☑️ 주요 기능

• CSS 셀렉터를 활용한 태그 접근
• 이벤트 처리
• 특수효과 애니메이션
• Ajax
• JSON 파싱
• 플러그인을 통한 확장성
• 멀티 브라우저 지원

☑️ 개발환경 구성

Eclipse로 진행하며(JAVA를 여기에서 공부한 적이 있음), 브라우저도 chrome으로 진행

1. JDK 설치
2. Apache tomcat 설치
3. Eclipse 설치
4. Eclipse 환경 설정 - 인코딩, 웹 브라우저, 서버

• JDK 설치
  

• Apache tomcat 설치
  

• Eclipse 설치
  
  
  
  
  

• Eclipse 환경 설정 - 인코딩, 웹 브라우저, 서버

Window -> Preferences -> General -> Content Types -> Text -> Default encoding -> UTF-8 작성

Window -> Preferences -> General -> Web Browser

Window -> Preferences -> Server -> Runtime Environment -> Add


→ tomcat 폴더경로로 설정

☑️ 이클립스 사용법

💯 프로젝트 생성(Dynamic Web Project)

File -> New -> Dynamic Web Project

💯 html 파일 생성(실행은 초록색 재생버튼)

• webapp에서 우클릭하여 생성, 파일 이름만 설정하고 finish 클릭

💯 JavaScript vs JQuery

JQuery 최신 CDN

실행 결과물

지금부터 같은 결과지만, 다른 코드를 보여주겠다!

JavaScript

<script>
	function set_h1(){
		var h1 = document.getElementsByTagName("h1");
		var str = h1[0].firstChild;
		str.nodeValue = "JavaScript로 문자열 변경";
	}
	
	function get_li(){
		var li = document.getElementsByTagName("li");
		var result = document.getElementById("result");
		
		for(var idx in li){
			var str = li[idx].firstChild;
			result.innerHTML += str.nodeValue + "<br/>";
		}
	}
</script>

JQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
	function set_h1(){
		$("h1").text("jQuery로 문자열 변경")
	}
	
	function get_li(){
		$("li").each(function(idx, obj){
			var str = $(obj).text();
			$("#result").append(`${str} <br>`);
		});
	}
</script>

이렇게만 보면 확실히 "JQuery" 가 간편해 보인다. 그런데 왜 자바스크립트를 더 선호할까?