반응형
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous">
</script>
<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>
table {
width:300px;
}
table, td {
border:1px solid #ccc;
border-collapse: collapse;
}
td {
padding:10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
<button>출력</button>
</body>
</html>
<script>
// 버튼을 클릭하면, 홀수 줄에 배경색 회색, 짝수 줄에 글씨 키우기
$(function(){
$("button").on("click",function(){
$("tr:odd").css("backgroundColor","#ccc");
$("tr:even").css("fontSize","30px");
});
});
</script>--2번째 실습
<body>
<input type="checkbox" name="lec" value="java"> <span>자바</span> <br>
<input type="checkbox" name="lec" value="db"> <span>데이터베이스</span> <br>
<input type="checkbox" name="lec" value="html"> <span>HTML</span> <br>
<input type="checkbox" name="lec" value="script"> <span>자바스크립트</span><br>
<input type="text" value="haha" disabled><br>
<input type="password" disabled><br>
<input type="file"><br>
<button>click</button>
<!-- * disabled 비활성화 / enabled 활성화 -->
</body>
</html>
<script>
// : => 전체
// 체크박스에 체크된 요소를 모두 가져와서 순차적으로 접근하여, 색깔을 파랑으로 변경
$(function() {
$("button").on("click", function(){
// console.log($(":checked").next());
$(":checked").next().css("color","blue");
})
})
// :text :password :file
$(function() {
$("button").on("click", function(){
console.log($(":disabled"));
})
})
</script>--3번째 실습
<body>
<ul id="list">
<li>java</li>
<li>database</li>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li>jQuery</li>
<li>JSP</li>
</ul>
<button>click</button>
<div id="text"></div>
</body>
</html>
<script>
// find : 특정 요소 밑의 자식 요소를 찾기
// 메소드 체이닝 메소드 뒤에 메소드...
// text & html
$(function(){
$("button").on("click",function(){
console.log($("#list").find("li").eq(1).html());
// html() ()괄호 안에 텍스트를 "넣지 않으면" => get 의 역할
$("#list").find("li").eq(1).html("데이터" + "<br>" + "베이스");
// html() ()괄호 안에 텍스트를 "넣으면" => set 의 역할
})
});
</script>--4번째 실습
html 의 getter, setter 역할
<body>
<h1>안녕하세요~~</h1>
<button>출력</button>
<div></div>
</body>
</html>
<script>
// 버튼을 클릭할 때, h1 안에 글자를 가져와서 div 태그 안에 넣기
$(function(){
$("button").on("click",function(){
let nextText = $("h1").html(); // getter
$("div").html(nextText); // setter
})
});
</script>반응형
'Java Script > JQuery' 카테고리의 다른 글
| [JQuery] each, toggleClass #0418수업 #4교시 (0) | 2023.04.18 |
|---|---|
| [JQuery] 부모자식 요소 #0418수업 #4교시 (0) | 2023.04.18 |
| [JQuery] 복사, 대체 #0418수업 #3교시 (0) | 2023.04.18 |
| [JQuery] 기본문법 #0414수업 #4교시 (0) | 2023.04.14 |
| [JQuery] $function(){} 기본문법 #0414 수업 #2교시 (0) | 2023.04.14 |