250x250
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 프론트엔드
- jQuery
- 풀스택
- hover
- Animation
- php
- effect
- 비전공 개발자
- MAC
- 비전공자
- react
- image
- keyframes
- button
- 백엔드
- iOS 개발자
- SWIFT
- 애니메이션
- 자바스크립트
- javascript
- 개발자
- front-end
- xcode
- css3
- iPhone
- html5
- CSS
- ipad
- HTML
- IOS
Archives
- Today
- Total
비전공자 개발일기
JQuery5 본문
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<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>JQuery Element Access</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
table, tr, td, th {
border: 1px solid;
border-collapse: collapse;
}
th {
background-color: #129dba;
color: #fff;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h1>METHOD</h1>
<p>아래의 버튼을 누르면 다음 단락에 새로운 텍스트를 설정할 수 있음!</p>
<button class="text_btn">New Text</button>
<p id="text"></p>
<script>
$(function () {
$("button.text_btn").on("click", function () {
var newText = $("h1").html();
$("#text").html(newText);
});
});
</script>
<h2>메소드 체이닝</h2>
<ul id="list">
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
<li>네 번째</li>
<li>다섯 번째</li>
</ul>
<button class="list_btn">선택</button>
<script>
$(function () {
$("button.list_btn").on("click", function () {
$("#list").find("li").eq(1).html("두 번째 선택!");
$("#list").find("li").eq(3).html("네 번째 선택!");
});
});
</script>
<ul id="list2">
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
<li>네 번째</li>
<li>다섯 번째</li>
</ul>
<button class="list_btn2">선택</button>
<script>
$(function () {
$("button.list_btn2").on("click", function () {
$("#list2")
.find("li")
.eq(1).html("두 번째 선택!")
.end()
.eq(3).html("네 번째도 선택!")
});
});
</script>
<script>
$(function () {
$("#getter").on("click", function () {
var size = "너비는 " + $("#box").width() + "px이고, 높이는 " + $("#box").height() + "px입니다.<br>"
$("#text2").html(size);
});
$("#setter").on("click", function () {
w = $("#box").width();
h = $("#box").height();
$("#box").width(w/2).height(h/2);
var size = "너비는 " + $("#box").width() + "px이고, 높이는 " + $("#box").height() + "px로 변경되었습니다.<br>";
$("#text2").html(size);
});
});
</script>
<h2>width(), height()</h2>
<p>아래의 버튼을 누르면 다음 div 요소의 크기를 읽어오거나 줄일 수 있음!</p>
<button id="getter">크기 읽어오기!</button>
<button id="setter">크기 줄이기!</button><br><br>
<div id="box" style="width: 400px; height: 200px; background-color: #129dba;"></div>
<p id="text2"></p>
<h2>attr()</h2>
<p>아래의 버튼을 누르면 다음 이미지 변경 가능!</p>
<button id="img_btn">속성 변경</button><br><br>
<img class="change_img" src="./rabbit.jpg" alt="rabbit" style="width: 320px; height: 214px; border: 1px solid;">
<script>
$(function() {
$("button#img_btn").on("click", function() {
var imgSrc = $("img.change_img").attr("src");
$("img.change_img").attr("src", "./fox.jpg").attr("alt", "Fox");
});
});
</script>
<table>
<caption>대표적인 getter 메소드와 setter 메소드</caption>
<colgroup>
<col width="20%">
<col width="80%">
</colgroup>
<thead>
<tr>
<th>메소드</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>.html()</td>
<td>해당 요소의 HTML 콘텐츠를 반환하거나 설정</td>
</tr>
<tr>
<td>.text()</td>
<td>해당 요소의 텍스트 콘텐츠를 반환하거나 설정</td>
</tr>
<tr>
<td>.width()</td>
<td>선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정</td>
</tr>
<tr>
<td>.height()</td>
<td>선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정</td>
</tr>
<tr>
<td>.attr()</td>
<td>해당 요소의 명시된 속성의 속성값을 반환하거나 설정</td>
</tr>
<tr>
<td>.position()</td>
<td>선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환(getter 메소드)</td>
</tr>
<tr>
<td>.val()</td>
<td>>form<요소의 값을 반환하거나 설정</td>
</tr>
</tbody>
</table>
</body>
</html>728x90
LIST