1. jQuery
- 라이브러리
- 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.
- 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여준다. - jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구
- 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리
- 홈페이지 : https://jquery.com
1-1. jQuery 사용방법
https://developers.google.com/speed/libraries#jquery
Hosted Libraries | Google Developers
A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.
developers.google.com
① Google CDN에서 jQuery 3.x snippet 부분을 복사
② 이클립스 html 파일의 <head> 부분에 넣어준다.
1-2. jQuery 예시
[예시 코드 1]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="welcome"></div>
<div class="welcome"></div>
<script type="text/javascript">
$('.welcome').html('hello jQuery!!!');
$('.welcome').css('background-color', 'yellow');
</script>
</body>
</html>
[출력 결과]
[예시 코드 2]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input type="button" id="execute_btn" value="execute">
<script>
$('#execute_btn').click(function(){
$('#list li').text('jQuery Coding!!!');
});
</script>
</body>
</html>
[출력 결과]
2. jQuery 선택자
- jQuery의 모든 기능은 $라는 객체의 하위로 포함되어 있다.
- "$"는 jQuery의 모든 기능을 담고 있는 객체이자 함수이다.
- jQuery -> $
2-1. HTML 요소 획득하기
// id로 선택
// js
document.getElementById("id값");
// jQuery로 변환
$("#id값")
// js
let h1 = document.getElementById("id값");
// jQuery로 변환
let h1 = $("#id값")
// 클래스로 선택
$.(".클래스이름");
// 태그로 선택
$("태그명");
2-2. innerHTML의 간결화
// js
h1.innerHTML = "Hello jQuery";
// jQuery로 변환
h1.html("Hello jQuery");
2-3. function()
// js
window.onload = function(){ .. 기능 .. }
// jQuery로 변환
$(document).ready(function(){ .. 기능 .. });
// 한 번 더 축약
4(function(){ .. 기능 .. });
2-4. 코드 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
.selected{
background-color : tomato;
border : 2px solid red;
}
</style>
</head>
<body>
<ul>
<li id="htmlID">HTML</li>
<li class="selectClass">CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li id="mysqlID">MySql</li>
</ul>
<script>
//id
// $('#htmlID').addClass('selected');
// class
// $('.selectClass').addClass('selected');
// tag
// $('li').addClass('selected');
// 여러 개
$('#htmlID, .selectClass').addClass('selected');
</script>
</body>
</html>id 'htmlID'와 class 'selectClass' 동시에 선택해 'selected'라는 클래스로 묶어주고 거기에 style을 주었다.
[출력 결과]
2-5. index 엘리먼트에 대한 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
.selected{
background-color : tomato;
border : 2px solid red;
}
</style>
</head>
<body>
<ul id="list">
<li id="htmlID">HTML</li>
<li class="selectClass">CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li id="mysqlID">MySql</li>
</ul>
<script>
// list라는 id를 가진 태그 안에 있는 모든 li 태그 선택
$('#list li').addClass('selected'); // 모든 li 태그에 style이 적용된다.
// 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
// 2라는 숫자는 index 값(index는 0부터 시작)
$('#list li:eq(2)').addClass('selected') // JavaSctip에 style이 적용된다.
// 인자보다 인덱스가 큰 엘리먼트를 찾아내는 선택자
// index값이 1을 초과하는 값을 가져온다.
$('#list li:gt(1)').addClass('selected'); // JavaScript, PHP, MySql에 style이 적용된다.
//인자보다 인덱스가 작은 엘리먼트를 찾아내는 선택자
// index값이 2보다 작은 값을 가져온다.
$('#list li:lt(2)').addClass('selected'); // HTML, CSS에 style이 적용된다.
// 첫번째 인덱스 엘리먼트에 대한 선택자
$('#list li:first').addClass('selected'); // HTML에 style이 적용된다.
// 마지막 인덱스 엘리먼트에 대한 선택자
$('#list li:last').addClass('selected'); // MySql에 style이 적용된다.
</script>
</body>
</html>728x90
'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글
| 220519 jQuery 3 (0) | 2022.07.07 |
|---|---|
| 220518 jQuery2 (0) | 2022.07.06 |
| 220517 Javascript 11 (0) | 2022.06.23 |
| 220513~16 Javascript 10 (0) | 2022.06.23 |
| 220513 Javascript 9 (0) | 2022.06.23 |