JQuery CDN 웹 주소:
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>헤더 부분에 작성해주면 된다.
실습1
<!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>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
</style>
<style>
.center {
text-align: center;
}
.invisible {
display: none;
}
.visible {
display: block;
}
</style>
<div class="center">
<h1 id="text"></h1>
<div id="buttons" class="invisible">
<button onclick="changeColor('red')">빨강</button>
<button onclick="changeColor('blue')">파랑</button>
<button onclick="changeColor('green')">초록</button>
</div>
</div>
<script>
let text = prompt('텍스트 값을 입력해 주세요');
if (text === '') {
text = prompt('입력해주세요');
}
let $text = $('#text');
$text.innerText = text;
$text.text (text);
let $buttons = $('#buttons');
$buttons.attr('class','visible');
function changeColor(color) {
alert(`${color}색으로 변경됩니다.`);
$text.css('color',color)
}
</script>
</body>
</html>결과 출력
실습2
<!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>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<style>
.title{
width: 200px;
background-color: #455C9F;
color: white;
padding: 10px;
}
.container{
width: 200px;
background-color: #E6e7ea;
padding: 10px;
}
.comment{
background-color: white;
margin: 10px;
padding: 5px;
}
</style>
<div class="title">기사 등록하기</div>
<div class="container">
<div class="comment"><b>박지성</b> SBS에서 월드컵보세요!</div>
<div class="comment"><b>안정환</b> MBC죠...</div>
<div class="comment"><b>이영표</b> KBS는 수신료의 가치를..</div>
<div id="text" class="comment1"> </div>
</div>
<button id = "button"> 등록하기 </button>
<script>
$('#button').click(function(){
let text = prompt('기사를 등록해주세요.');
$('.comment1').append(`<div class="comment">${text}</div>`);
});
</script>
</body>
</html>결과 출력
실습3
<!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>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<style>
div {
display: inline-block;
border: 1;
width: 150px;
height: 70px;
text-align: center;
line-height: 70px;
border: 1px solid black;
}
</style>
<div id="box1" class="box">html</div>
<div id="box2" class="box">css</div>
<div id="box3" class="box">javascript</div>
<script>
$(function () {
$('#box1').css('color','black');
$('#box1').css('background-color',' rgb(255, 217, 92)');
$('#box2').css('color','black');
$('#box2').css('background-color',' rgb(255, 217, 92)');
$('#box3').css('color','black');
$('#box3').css('background-color',' rgb(255, 217, 92)');
$('#box1').click(function(){
$(this).css('color','black');
$(this).css('background-color','white');
$('#box2').css('color','black');
$('#box2').css('background-color',' rgb(255, 217, 92)');
$('#box3').css('color','black');
$('#box3').css('background-color',' rgb(255, 217, 92)');
});
$('#box2').click(function(){
$(this).css('color','black');
$(this).css('background-color','white');
$('#box1').css('color','black');
$('#box1').css('background-color',' rgb(255, 217, 92)');
$('#box3').css('color','black');
$('#box3').css('background-color',' rgb(255, 217, 92)');
});
$('#box3').click(function(){
$(this).css('color','black');
$(this).css('background-color','white');
$('#box2').css('color','black');
$('#box2').css('background-color',' rgb(255, 217, 92)');
$('#box1').css('color','black');
$('#box1').css('background-color',' rgb(255, 217, 92)');
});
});
</script>
</body>
</html> 결과 출력
실습4
<!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>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body link="black">
<style>
table {
width: 400px;
margin-left: auto;
margin-right: auto;
}
</style>
<h1>정보입력</h1>
<form>
<!-- 개인정보 -->
<table>
<tr><td id="idid" style="width: 100px;">아이디</td><td><input type="email" style="width:300px" required></td></tr>
<tr><td>비밀번호</td><td><input name="passwd" style="width:300px" type="password" required></th></tr>
</table>
<!-- 성별 -->
<table id="id_gender">
<tr>
<td style="width: 100px;">성별</td>
<td style="width: 100px;"><input name="gender" type="radio" value="man">남자</td>
<td style="width: 100px;"><input name="gender" type="radio" value="woman">여자</td>
</tr>
</table>
<!-- 직업 -->
<table>
<tr>
<td style="width: 100px;">직업</td>
<td style="width: 200px;"><select name="jobs" style="width: 200px;" name="jobs" id="">
<option value=""></option>
<option class="job" value="피카츄">피카츄</option>
<option class="job" value="파이리">파이리</option>
<option class="job" value="꼬부기">꼬부기</option>
<option class="job" value="이상해씨">이상해씨</option>
</select></td>
<td style="width: 100px;"></td>
</tr>
</table>
<!-- 취미 -->
<table id="id_hobby">
<tr>
<td rowspan="2" style="width: 100px;">취미</td>
<td style="width: 100px;"><input name="hobby" type="checkbox">개발</td>
<td style="width: 100px;"><input name="hobby" type="checkbox">게임</td>
<td style="width: 100px;"><input name="hobby" type="checkbox">낚시</td>
</tr>
<tr>
<td style="width: 100px;"><input name="hobby" type="checkbox">운동</td>
<td style="width: 100px;"><input name="hobby" type="checkbox">독서</td>
<td style="width: 100px;"><input name="hobby" type="checkbox">음악감상</td>
</tr>
</table>
<br>
<table>
<tr>
<th><input id="cancel_button" type="reset" style="width: 100px; height: 30px;" name="cancel" value="취소"></th>
<td style="width: 30px;"></td>
<th><input id="submit_button" type="submit" style="width: 100px; height: 30px;" name="acc" value="회원가입"></th>
</tr>
</table>
</form>
<!-- 인증방식 -->
<script>
let job1 = 0;
let gender1= 0;
let hobby1 = 0;
let passwd1 = 0;
$('#submit_button').click(function() {
// input tag 중에서 checkbox 타입 중에 name 이 chk 인 것만 고르기
// 비밀번호
if($('input[name=passwd]').val().length<5){
alert("최소 비밀번호는 5이상입니다.");
return;
}else{
passwd1++;
}
// 성별
if($('input:radio[name=gender]:checked').length<1){
alert("성별을 선택하세요.");
return;
}else{
gender1++;
}
// 직업
if($("select[name=jobs]").val().length == 0) {
alert("직업을 선택하세요.");
return;
} else {
job1++;
}
// 취미
if($('input:checkbox[name=hobby]:checked').length < 3) {
alert("취미를 세 개 이상 고르시오");
return;
} else {
hobby1++;
};
if (job1 !=0 && gender1 != 0 && hobby1 !=0 && passwd1 != 0){
alert("가입되었습니다.");
}
});
</script>
</body>
</html>결과 출력
실습5
<!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>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<style>
table,tr,th,td{
border: 1px black solid;
}
table{
width: 600px;
}
</style>
<table>
<tr>
<th><input type="checkbox" name="all" id="all">확인</th>
<th>제목</th>
<th>글쓴시간</th>
</tr>
<tr>
<td><input type="checkbox" name="chk"></td>
<td >1111</td>
<td>11:11</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"></td>
<td>222222</td>
<td>11:11</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"></td>
<td>3333</td>
<td>11:11</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"></td>
<td >44444</td>
<td>11:11</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"></td>
<td>55555</td>
<td>11:11</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" checked></td>
<td>666666666</td>
<td>11:11</td>
</tr>
</table>
<div>
<input id="log_button" type="button" value="로그">
</div>
<script>
$('#all').click(function () {
if($(this).prop('checked')){
$("input[name=chk]").prop("checked", true);
} else {
$("input[name=chk]").prop("checked", false);
}
});
//체크된 row값 가져오기
$('#log_button').click(function () {
var rowData = new Array();
var tdArr = new Array();
var checkbox = $("input[name=chk]:checked");
if($('input[name=chk]:checkbox:checked').length > 0){
//체크된 체크박스 값을 가져온다.
checkbox.each(function(i) {
// checkbox.parent() : checkbox의 부모는 <td>이다.
// checkbox.parent().parent() : <td>의 부모이므로 <tr>이다.
var tr = checkbox.parent().parent().eq(i);
var td = tr.children();
// 체크된 row의 모든 값을 배열에 담는다.
rowData.push(tr.text());
// td.eq(0)은 체크박스 이므로 td.eq(1)의 값부터 가져온다.
var name = td.eq(1).text()
tdArr.push(name);
console.log("제목 : " + name);
});
}else {
console.log('선택된 제목이 없습니다.');
}
});
</script>
</body>
</html>결과 출력
Yoon_ministop