// 라이브러리, 프레임워크
- 라이브러리 : 프로그램에 필요한 부품이 되는 소프트웨어가 정리되어 있는 것
> 필요한 부분을 가져와서 사용
~ Query
~ React
- 프레임워크 : 만들고자 하는 프로그램의 종류에 따라서 공통적인 부분을 미리 만들어두는 것
> 필요한 부분을 직접 수정해서 사용
~ Angular
~ Vue
// jQuery
- Javascript의 대표적인 라이브러리
1. jQuery 다운로드
https://jquery.com/download/
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
다운로드 받은 파일을 불러오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="text" name="txt1" id="txt1">
<script src="js/jquery-3.6.4.js"></script>
<script>
//3. jQuery
jQuery('#txt1').val('jQuery'); // > querySelector
</script>
</body>
</html>
2. CDN 사용하여 코드 추가하기(Google CDN 이용)
https://developers.google.com/speed/libraries#jquery
호스팅된 라이브러리 | Hosted Libraries | Google Developers
가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다.
developers.google.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>- 위 코드를 복사하여 원하는 js 파일 태그 위에 붙여 넣어주고, 아래 코드를 js 파일에 추가한다.
$('태그명').css("속성명","값");
$('a').css("color","powderblue");
3. Node.js > NPM 설치
https://nodejs.org/ko
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
* 터미널로 jquery 설치
C:\OneDrive\class\code\client\ClientTest\src\main\webapp>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (webapp)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\OneDrive\class\code\client\ClientTest\src\main\webapp\package.json:
{
"name": "webapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.6.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.5
npm notice Run npm install -g npm@9.6.5 to update!
npm notice
C:\OneDrive\class\code\client\ClientTest\src\main\webapp>npm install jquery
added 1 package, and audited 2 packages in 560ms
found 0 vulnerabilities
C:\OneDrive\class\code\client\ClientTest\src\main\webapp>npm list
webapp@1.0.0 C:\OneDrive\class\code\client\ClientTest\src\main\webapp
`-- jquery@3.6.4
* 설치한 jquery 불러오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="text" name="txt1" id="txt1">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
//3. jQuery
jQuery('#txt1').val('jQuery'); // > querySelector
</script>
</body>
</html>// jQuery 함수
- jQuery 함수 반환값 > jQuery 객체
- jQuery 함수 형태 > getter, setter를 하나로 구현
1. 전용 함수
a. obj.test() : getter > 읽기
b. obj.test(param) : setter > 쓰기
2. 범용 함수
a. obj.test(param) : getter > 읽기
b. obj.test(param, param) : setter > 쓰기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<h1>jQuery Event</h1>
<input type="button" value="버튼1" id="btn1" class="btn">
<input type="button" value="버튼2" id="btn2" class="btn">
<input type="button" value="버튼3" id="btn3" class="btn">
<input type="button" value="버튼4" id="btn4" class="btn">
<input type="button" value="버튼5" id="btn5" class="btn">
<input type="button" value="버튼6" id="btn6" class="btn">
<script src="js/jquery-3.6.4.js"></script>
<script>
//1. BOM
document.getElementById('btn1').onclick = function () {
alert('BOM');
};
//2. DOM
document.getElementById('btn2').addEventListener('click', function () {
alert('DOM');
});
//3. jQuery
// a. 이벤트 전용 함수
// b. 이벤트 범용 함수
jQuery('#btn3').mouseover(function () {
event.target.style.backgroundColor = 'gold';
});
jQuery('#btn3').mouseout(function () {
event.target.style.backgroundColor = 'white';
});
const obj = {
mouseover: function () {
event.target.style.backgroundColor = 'tomato';
}
};
jQuery('#btn4').on({
mouseover: function () {
event.target.style.backgroundColor = 'tomato';
},
mouseout: function() {
event.target.style.backgroundColor = 'white';
}
});
jQuery('#tbn4').off('mouseout');
jQuery('#btn5').click(function() {
//이벤트 주체
// alert(event.target.value);
// alert(event.srcElement.value);
// alert(this.value);
//DOM 문법
jQuery(this).css('backgroung-color', 'gold');
jQuery(document.body).css('background-color','orange');
});
//메서드 체이닝
jQuery('#btn6').mouseover(function() {
$(this).css('background-color', 'gold');
}).mouseout(function() {
$(this).css('backgroundColor', 'white');
});
</script>
</body>
</html>// jQuery Effection function
1. hide([time]), show([time]), toggle([time])
2. fadeOut([time]), fadeIn([time]), fadeToggle([time])
3. slideUp([time]), sildeDown([time]), slideToggle([time])
4. animate() > 사용자 정의
- hide(), show(), toggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<h1>jQuery Effect</h1>
<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<input type="button" value="버튼4" id="btn4">
<input type="button" value="버튼5" id="btn5">
<hr class="">
<div id="box" class="box bg-yellow">상자</div>
<script src="js/jquery-3.6.4.js"></script>
<script>
//jQuery Alias > $
//jQuery('#btn1')
$('#btn1').click(() => {
$('#box').hide();
});
$('#btn2').click(() => {
$('#box').show(1000);
});
$('#btn3').click(() => {
$('#box').toggle(1000);
});
</script>
</body>
</html>- fadeOut(), fadeIn(), fadeToggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<h1>jQuery Effect</h1>
<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<input type="button" value="버튼4" id="btn4">
<input type="button" value="버튼5" id="btn5">
<hr class="">
<div id="box" class="box bg-yellow">상자</div>
<script src="js/jquery-3.6.4.js"></script>
<script>
//jQuery Alias > $
//jQuery('#btn1')
$('#btn1').click(() => {
$('#box').fadeOut(1000);
});
$('#btn2').click(() => {
$('#box').fadeIn(1000);
});
});
$('#btn3').click(() => {
$('#box').fadeToggle();
});
</script>
</body>
</html>- slideUp(), slideDown(), slideToggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<h1>jQuery Effect</h1>
<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<input type="button" value="버튼4" id="btn4">
<input type="button" value="버튼5" id="btn5">
<hr class="">
<div id="box" class="box bg-yellow">상자</div>
<script src="js/jquery-3.6.4.js"></script>
<script>
//jQuery Alias > $
//jQuery('#btn1')
$('#btn1').click(() => {
$('#box').slideUp(1000);
});
$('#btn2').click(() => {
$('#box').slideDown(1000);
});
$('#btn3').click(() => {
$('#box').slideToggle();
});
});
</script>
</body>
</html>- animate()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<h1>jQuery Effect</h1>
<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<input type="button" value="버튼4" id="btn4">
<input type="button" value="버튼5" id="btn5">
<hr class="">
<div id="box" class="box bg-yellow">상자</div>
<script src="js/jquery-3.6.4.js"></script>
<script>
//jQuery Alias > $
//jQuery('#btn1')
$('#btn1').click(() => {
$('#box').animate( {
width: '400px',
height: '400px'
});
});
$('#btn2').click(() => {
$('#box').animate({
width: 200,
height: 200,
});
});
$('#btn3').click(() => {
$('#box').animate({
//box.style.width = parseInt(box.style.width) + 100 + 'px'
width: '+=100',
height: '+=50px',
'margin-left': '+=50px',
marginTop: '+=50px'
});
});
</script>
</body>
</html>// jQuery CSS 조작
- css('속성') > getter
- css('속성', 값) > setter
~ $().addClass : class 선택자 추가
~ $().removeClass : class 선택자 제거
- 너비/높이
~ width / height : 수치(px)
~ innerWidth / innerHeight : width / height + padding
~ outerWidth / outerHeight : width/height + padding + border
~ outerWidth(true) / outerHeight(true) : width/height + padding + border + margin
- addClass, removeClass
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
.box.one {
background-color: darkgoldenrod;
}
.box.two {
font-size: 5rem;
}
</style>
</head>
<body>
<h1>jQuery + CSS</h1>
<input type="button" value="확인" id="btn">
<hr>
<div id="box" class="box bg-yellow">상자</div>
<script src="js/jquery-3.6.4.js"></script>
<script>
$('#btn').click(function() {
$('#box').css({
color: 'tomato',
'background-color': 'cornflowerblue',
width: 100,
height: 300
});
$('#box').addClass('one');
$('#box').removeClass('one');
$('#box').toggleClass('two');
});
</script>
</body>
</html>- 너비/높이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
#box {
padding: 20px;
margin: 30px;
border-width: 10px;
/* box-sizing: content-box; */
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>jQuery + Box Model</h1>
<input type="button" value="확인" id="btn">
<hr>
<div id="box" class="box bg-orange"></div>
<script src="js/jquery-3.6.4.js"></script>
<script>
$('#btn').click(function() {
//1. CSS
console.log('width', $('#box').css('width'));
console.log('height', $('#box').css('height'));
// $('#box').css('width', '500px');
//2.
console.log('width', $('#box').width()); //수치(px)
console.log('height', $('#box').height());
// $('#box').width(300);
//3. width/height + padding = orange 영역
console.log('innerWidth', $('#box').innerWidth());
console.log('innerHeight', $('#box').innerHeight());
//4. width/height + padding + border = 실제 사각형 영역
console.log('outerWidth', $('#box').outerWidth());
console.log('outerHeight', $('#box').outerHeight());
//5. width/height + padding + border + margin = 실제 사각형 영역 + margin
console.log('outerWidth(true)', $('#box').outerWidth(true));
console.log('outerHeight(true)', $('#box').outerHeight(true));
});
</script>
</body>
</html>// HTML 조작
1. 콘텐츠 조작
~ text() : innerText, textContent
~ html() : innerHTML
~ val() : value
2. 속성 조작
- HTML 속성을 조작하는 메서드
~ obj.attr('name')
~ obj.attr('name', value)
- JavaScript 프로퍼티를 조작하는 메서드(HTML 속성에는 없고, JavaScript에만 있는 프로퍼티)
~ obj.prop('name')
~ obj.prop('name', value)
3. 태그 생성
~ 부모.append(자식)
~ 부모.prepend(자식)
~ 자식.appendTo(부모)
~ 자식.prependTo(부모)
- 콘텐츠 조작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<h1>jQuery 태그 조작</h1>
<input type="button" value="확인" id="btn">
<hr>
<div id="box" class="box bg-yellow"></div>
<hr>
<input type="text" id="txt1">
<script src="js/jquery-3.6.4.js"></script>
<script>
$('#btn').click(function () {
//1. 콘텐츠 조작
$('#box').text('홍길동');
$('#txt1').val('값을 대입합니다.');
});
</script>
</body>
</html>- 속성 조작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<h1>jQuery 태그 조작</h1>
<input type="button" value="확인" id="btn">
<hr>
<div id="box" class="box bg-yellow"></div>
<hr>
<input type="text" id="txt1" style="size: 50px">
<script src="js/jquery-3.6.4.js"></script>
<script>
$('#btn').click(function () {
//2. 속성 조작
$('#txt1').attr({
size: 100,
maxlength: 10
});
</script>
</body>
</html>- 태그 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<h1>jQuery 태그 조작</h1>
<input type="button" value="확인" id="btn">
<hr>
<div id="box" class="box bg-yellow"></div>
<hr>
<input type="text" id="txt1" style="size: 50px">
<script src="js/jquery-3.6.4.js"></script>
<script>
$('#btn').click(function () {
//3. 태그 생성
$(`<img src="images/catty0${n}.png">`)
.css('border', '5px solid black')
.click(function() {
// alert(this.src);
$(this).remove();
})
.appendTo($('#box'));
n++;
});
let n = 1;
</script>
</body>
</html>- Axis(자식)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div class="item">막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div class="item">
작은아버지
<div>사촌</div>
</div>
</div>
<hr>
<table id="tbl" class="table wide">
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>
<script src="js/jquery-3.6.4.js"></script>
<script>
$('#btn').click(function () {
//자식 탐색
// - childNodes, childern[index]
$('#me').children().addClass('check')
.css('border', '10px solid blue')
.click(function () {
alert($(this).text())
});
// - firstChild, firstElementChild
// $('#me').children().first().addClass('check');
// $('#me').children().last().addClass('check');
// $('#me').children().eq(0).addClass('check'); //첫째
// $('#me').children().eq(1).addClass('check');
// $('#me').children().eq(-3).addClass('check');//첫째
// $('#me').children().children().addClass('check'); //손자
//find() : 특정 태그를 기점으로 하위 태그를 검색 > 지역 검색
// $('#me').find('CSS 선택자')
// $('.item').addClass('check');
// $('#me').find('.item').addClass('check');
});
</script>
</body>
</html>- Axis(조상)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div class="item">막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div class="item">
작은아버지
<div>사촌</div>
</div>
</div>
<hr>
<table id="tbl" class="table wide">
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>
<script src="js/jquery-3.6.4.js"></script>
<script>
$('#btn').click(function () {
//조상 탐색
// - parentNode, parentElement
// $('#me').parent().css('border', '10px solid orange');
// $('#me').parents().css('border', '10px solid orange');
$('#me').parentsUntil('body').css('border', '10px solid orange');
});
</script>
</body>
</html>- Axis(형제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div class="item">막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div class="item">
작은아버지
<div>사촌</div>
</div>
</div>
<hr>
<table id="tbl" class="table wide">
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>
<script src="js/jquery-3.6.4.js"></script>
<script>
$('#btn').click(function () {
//형제 탐색
// - previousSibling, nextSibling
// $('#me').prev().addClass('check');
// $('#me').next().addClass('check');
// $('#me').prev().prev().addClass('check');
// $('#me').prevAll().addClass('check');
// $('#me').nextAll().addClass('check');
// $('#me').prevUntil('조건').addClass('check');
$('#me').siblings().addClass('check');
});
</script>
</body>
</html>
'클라이언트 > JavaScript' 카테고리의 다른 글
| JSON (0) | 2023.05.04 |
|---|---|
| jQuery UI (0) | 2023.05.02 |
| CSS 조작 (0) | 2023.04.27 |
| [자바스크립트(JavaScript)] 클로저 (0) | 2023.04.27 |
| [자바스크립트(JavaScript)] Axis (0) | 2023.04.26 |
