2017-1-WebServiceProgramming / Practice-Materials

Go to a project
Toggle navigation Toggle navigation pinning
신수용
6abcb290 1 parent 88f25d35

11 jquery

Inline Side-by-side
Showing 8 changed files with 386 additions and 0 deletions
<!DOCTYPE html>
<html>
<body>
<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<button onclick="myFunction()">Hide List</button>
<p id="demo"></p>
<script>
function myFunction() {
var divs = document.getElementsByTagName("LI");
for (i=0; i<divs.length;i++) {
divs[i].style.display = 'none';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.section { padding:5px; margin:5px; border:1px solid #eeeeee;}
div#result { border: 1px solid red; background:#EEEEEE;
padding:10px;margin:10px; }
</style>
</head>
<body>
<div class="section">
<ul id="fruits">
<li>Apple</li>
<li>Orange</li>
<li>Melon</li>
</ul>
</div>
<div class="section">
<a href="http://www.google.com">Google</a>
<a href="http://www.apple.com">Apple</a>
<a href="http://www.microsoft.com">Microsoft</a>
<a href="http://www.oracle.com">Oracle</a>
</div>
<div class="section">
<form id="test">
<input type="text" name="id" id="id"><br>
<input type="password" name="pwd" id="pwd"><br>
<select id="channel" name="channel">
<option value="kbs">KBS</option>
<option value="mbc">MBC</option>
<option value="sbs">SBS</option>
</select>
<p>
<input type="checkbox" name="hobby" value="baseball">야구
<input type="checkbox" name="hobby" value="basketball">농구
<input type="checkbox" name="hobby" value="soccer">축구
</p>
<p>
<input type="button" id="btn1" value="버튼1">
<input type="button" id="btn2" value="버튼2">
<input type="button" id="btn3" value="버튼3">
</p>
</form>
</div>
<div id="result">
<h3>RESULT</h3>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
// text / html 읽기
$("#result").append($("#fruits").html() + "<p>");
$("#result").append($("#fruits").text() + "<p>");
// value 읽기
$("#result").append($("#channel").val() + "<p>");
// CSS 읽기
$("#result").append($("a:last").css("margin-top") + "<p>");
// Attribute 읽기
$("a").each(function(idx) {
$("#result").append("a" + idx + ":" + $(this).attr("href")+ "<br>");
});
// value 설정
$("#id").val("아이디");
$("#pwd").val("123");
// Attribute 설정
$("input[type='checkbox']").filter("[value='soccer']")
.attr('checked', 'checked');
// text 설정
$("#fruits").find("li:first").text("사과");
// click event + effect
$("#btn1").val("toggle").click(function() {
$("div.section:first").toggle();
});
$("#btn2").val("slide up").click(function() {
$("div.section:first").slideUp();
});
$("#btn3").val("slide down").click(function() {
$("div.section:first").slideDown();
});
// mouse event
$("div.section").mouseover(function() {
$(this).css("background", "#f8dff5");
});
$("div.section").mouseout(function() {
$(this).css("background", "#ffffff");
});
// change event
$("#channel").change(function() {
alert("You selected '" + $(this).val() + "'");
});
});
</script>
html{
color:#000;
padding:20px 0;
font: 12px/18px "맑은 고딕", "Malgun Gothic";
}
#tab {
border-collapse:collapse;
border-spacing:0;
}
td,th {
border:1px solid #444;
font: 12px/18px "맑은 고딕", "Malgun Gothic";
padding:5px;
}
thead tr, tfoot tr {
background:#888;
color:#fff;
}
tbody tr {
background:#eee;
}
span.price {
display: box;
text-align:right;
width:200px;
font-weight:bold;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="calculator.js"></script>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div>
<table id="tab" border="1">
<thead>
<tr>
<th></th><th>상품명</th><th>단가</th><th>개수</th><th>가격</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th colspan="4">합계</th>
<th><span id="sum" class="price"></span></th>
</tr>
</tfoot>
</table>
<input type="button" value="물품추가" id="add">
<input type="button" value="물품삭제" id="del">
</div>
</body>
</html>
<script id="rowTemplate" type="text/template">
<tr>
<td><input type='checkbox'></td>
<td><input type='text' size='15'></td>
<td><input type='text' size='10' class='unit-price' onchange='recalculate();'></td>
<td>
<select class='qty' onchange='recalculate();'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
<td align="right"><span class='price'></span></td>
</tr>
</script>
<script type="text/javascript">
$(function() {
initCalculator();
});
</script>
function recalculate() {
var sum = 0;
$("#tab tbody tr").each(function(idx, row) {
var $el = $(row);
var unitPrice = parseInt($el.find(".unit-price").val(), 10);
var qty = parseInt($el.find(".qty").val());
if (!isNaN(unitPrice) && !isNaN(qty) ) {
var price = unitPrice * qty;
$el.find(".price").text(price);
sum = sum + price;
}
});
$("#sum").text(sum);
}
function initCalculator() {
$('#add').click(function() {
$("#tab tbody").append($('#rowTemplate').html());
});
$('#del').click(function() {
if (confirm("정말 삭제하시겠습니까?")) {
var $els = $("tr input[type='checkbox']:checked");
$els.each(function(idx, el) {
$(el).parents("tr").empty();
});
recalculate();
}
});
$('#add').click();
}
.tab {
margin: 2em 0;
}
.tab:after, .tab>ul:after, .tab>ul>li:after{
content:"";
display:block;
clear:both;
}
.tab > ul {
list-style: none;
margin: 0;
padding: 0;
}
.tab > ul > li {
float:left;
margin-right:1px;
color: #fff;
border-top-left-radius: 0.4em;
border-top-right-radius: 0.4em;
}
.tab > ul > li > a {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #fff;
}
.tab > ul > li {
background: #4CB1E5;
}
.tab > ul > li:hover {
background: #75a44b;
}
.tab > ul > li.active,
.tab > ul > li.active:hover {
background: #eee;
color: #000;
border: 1px solid #4CB1E5;
border-bottom: 0;
margin-bottom: -1px;
}
.tab > ul > li.active a,
.tab > ul > li.active:hover a {
color: #000;
font-weight: bold;
}
.tab > .content {
border-bottom-left-radius: 0.4em;
border-bottom-right-radius: 0.4em;
border-top-right-radius: 0.4em;
background: #eee;
border: 1px solid #4CB1E5;
}
.tab > .content > div {
padding: 2em;
display: none;
}
.tab > .content > div.selected {
display: block;
}
img.full {
width: 100%;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Tab: jQuery Test</title>
<link rel="stylesheet" href="tab.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="tab">
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">오늘의 뉴스</a></li>
<li><a href="#">오늘의 이미지</a></li>
</ul>
<div class="content">
<div class="section">
<ul>
<li>이런 이런 공지사항</li>
<li>이런 이런 공지사항</li>
<li>이런 이런 공지사항</li>
<li>이런 이런 공지사항</li>
</ul>
</div>
<div class="section">
<p>[연예팀] SBS 수목드라마 '대물'에서 여성 최초 대통령 서혜림 역으로 열연 중인 고현정에 캐릭터 변질에 대해 논란이 일고 있다.
<p>최근 '대물' 시청자 게시판에는 서혜림의 캐릭터가 변질됐다는 의견들이 등장하고 있어 눈길을 끌고 있다.
<p>극 초반 물불 안 가리는 다혈질 성격은 온데간데 없고 국회의원 보궐선거에 나선 후에는 "잘 몰라서요", "잘 부탁드려요"라는 대사를 연발하며 캐릭터 변질에 대한 시청자들의 질타를 받고 있다.
</div>
<div class="section">
<img src="http://musicimg.cyworld.com/ALBUM/015/063/15063659.JPG">
</div>
</div>
</div>
<div class="tab">
<ul>
<li><a href="#">APink</a></li>
<li><a href="#">소녀시대</a></li>
<li><a href="#">걸스데이</a></li>
</ul>
<div class="content">
<div class="section">
<img src="http://0.viki.io/c/28239c/db2d6d4379.jpg?x=b" class="full">
</div>
<div class="section">
<img src="https://pbs.twimg.com/media/CQIYmaYW8AALCCN.jpg" class="full">
</div>
<div class="section">
<img src="http://img.mbn.co.kr/filewww/news/other/2013/07/20/051502002751.jpg" class="full">
</div>
</div>
</div>
</body>
</html>
<script src="tab.js"></script>
$(function($){
$('.tab > ul > li > a').click(function(e) {
var $item = $(e.currentTarget).parent();
var idx = $item.index() + 1;
var $tab = $item.closest(".tab");
$tab.find(">ul>li").removeClass('active');
$tab.find(".section").removeClass('selected');
$item.addClass('active');
$tab.find(".section:nth-child(" + idx + ")").addClass("selected");
});
$(".tab").find(">ul>li>a:first").click();
});