[jQuery] jQuery 개발환경 준비
2022. 6. 8. 13:08ㆍJavaScript/jQuery
1. jQuery 소개
- jQuery는 모든 브라우저에서 실행되는 클라이언트 프로그래밍 언어
- jQuery는 JavaScript를 보다 간략하고 보다 강력하게 사용할 수 있도록 설계되었으며 오늘날 가장 인기 있는 JavaScript 라이브러리입니다.
2. jQuery의 주요 기능
- CSS 셀렉터를 활용한 태그 접근
- 이벤트 처리
- 특수 효과 및 애니메이션
- Ajax
- JSON 파싱
- 플러그인을 통한 확장성
- 멀티 브라우저 지원
3. jQuery 종류
- jQuery : jQuery 그룹에서 만든 JavaScript 라이브러리
- jQuery UI : jQuery 기반으로 만들어진 데스크탑 용 웹 애플리케이션 UI 라이브러리
- jQuery Mobile : jQuery 기반으로 만들어진 모바일용 웹 애플리케이션 UI 라이브러리
4. 실습 환경
- JDK 15
- Eclipse IDE
- Apache Tomcat 9.0.56
- Google Chrome
- jQuery 3.6
5. jQuery 개발환경 준비
5.1 New->File->Dynamic Web Project 생성
5.2 test.html 생성
5.3 jQuery 홈페이지 이동 -> jQuery Download
5.4 Using jQuery with a CDN 부분에 https://code.jquery.com 클릭하여 이동
5.5 jQuery 3.x에서 minified 클릭
5.6 <script> 태그 복사하여 test.html의 title 태그 밑에 붙여넣기
5. jQuery 예제 실행
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 맛보기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>h1 태그입니다.</h1>
<button onclick="set_h1()">h1태그 문자열 변경</button>
<br>
<ul>
<li>문자열1</li>
<li>문자열2</li>
<li>문자열3</li>
</ul>
<button onclick="get_li()">li 태그 문자열 가져오기</button>
<div id="result"></div>
<script>
function set_h1(){
/*
const h1 = document.getElementsByTagName("h1");
const str = h1[0].firstChild;
str.nodeValue = "JavaScript로 문자열 변경";
*/
$("h1").text("jQuery로 문자열 변경");
}
function get_li(){
/*
const li = document.getElementsByTagName("li");
const result = document.querySelector("#result");
for(const idx in li){
const str = li[idx].firstChild;
result.innerHTML += str.nodeValue + "<br/>";
}
*/
$("li").each(function(idx, obj){
const str = $(obj).text();
$("#result").append(str+"<br/>");
});
}
</script>
</body>
</html>
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/jQueryBasic/src/main/webapp
jquery : https://jquery.com/
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] 인덱스 필터 선택자 (0) | 2022.06.09 |
|---|---|
| [jQuery] 순서 필터 선택자 (0) | 2022.06.09 |
| [jQuery] 기본 선택자(basic selector) 조합 (0) | 2022.06.08 |
| [jQuery] 기본 선택자(basic selector) (0) | 2022.06.08 |
| [jQuery] jQuery 함수와 Ready (0) | 2022.06.08 |