임호준 / 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
1 +<!DOCTYPE html>
2 +<html>
3 +<body>
4 +
5 +<p>An unordered list:</p>
6 +<ul>
7 + <li>Coffee</li>
8 + <li>Tea</li>
9 + <li>Milk</li>
10 +</ul>
11 +
12 +<button onclick="myFunction()">Hide List</button>
13 +
14 +<p id="demo"></p>
15 +
16 +<script>
17 +function myFunction() {
18 + var divs = document.getElementsByTagName("LI");
19 + for (i=0; i<divs.length;i++) {
20 + divs[i].style.display = 'none';
21 + }
22 +
23 +}
24 +</script>
25 +
26 +</body>
27 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="utf-8">
5 + <title>jQuery Test</title>
6 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7 + <style type="text/css">
8 + .section { padding:5px; margin:5px; border:1px solid #eeeeee;}
9 + div#result { border: 1px solid red; background:#EEEEEE;
10 + padding:10px;margin:10px; }
11 + </style>
12 +</head>
13 +<body>
14 +<div class="section">
15 + <ul id="fruits">
16 + <li>Apple</li>
17 + <li>Orange</li>
18 + <li>Melon</li>
19 + </ul>
20 +</div>
21 +<div class="section">
22 + <a href="http://www.google.com">Google</a>
23 + <a href="http://www.apple.com">Apple</a>
24 + <a href="http://www.microsoft.com">Microsoft</a>
25 + <a href="http://www.oracle.com">Oracle</a>
26 +</div>
27 +<div class="section">
28 +<form id="test">
29 + <input type="text" name="id" id="id"><br>
30 + <input type="password" name="pwd" id="pwd"><br>
31 + <select id="channel" name="channel">
32 + <option value="kbs">KBS</option>
33 + <option value="mbc">MBC</option>
34 + <option value="sbs">SBS</option>
35 + </select>
36 + <p>
37 + <input type="checkbox" name="hobby" value="baseball">야구
38 + <input type="checkbox" name="hobby" value="basketball">농구
39 + <input type="checkbox" name="hobby" value="soccer">축구
40 + </p>
41 + <p>
42 + <input type="button" id="btn1" value="버튼1">
43 + <input type="button" id="btn2" value="버튼2">
44 + <input type="button" id="btn3" value="버튼3">
45 + </p>
46 +</form>
47 +</div>
48 +<div id="result">
49 +<h3>RESULT</h3>
50 +</div>
51 +</body>
52 +</html>
53 +<script type="text/javascript">
54 +$(function() {
55 + // text / html 읽기
56 + $("#result").append($("#fruits").html() + "<p>");
57 + $("#result").append($("#fruits").text() + "<p>");
58 +
59 + // value 읽기
60 + $("#result").append($("#channel").val() + "<p>");
61 +
62 + // CSS 읽기
63 + $("#result").append($("a:last").css("margin-top") + "<p>");
64 +
65 + // Attribute 읽기
66 + $("a").each(function(idx) {
67 + $("#result").append("a" + idx + ":" + $(this).attr("href")+ "<br>");
68 + });
69 +
70 + // value 설정
71 + $("#id").val("아이디");
72 + $("#pwd").val("123");
73 +
74 + // Attribute 설정
75 + $("input[type='checkbox']").filter("[value='soccer']")
76 + .attr('checked', 'checked');
77 +
78 + // text 설정
79 + $("#fruits").find("li:first").text("사과");
80 +
81 + // click event + effect
82 + $("#btn1").val("toggle").click(function() {
83 + $("div.section:first").toggle();
84 + });
85 + $("#btn2").val("slide up").click(function() {
86 + $("div.section:first").slideUp();
87 + });
88 + $("#btn3").val("slide down").click(function() {
89 + $("div.section:first").slideDown();
90 + });
91 +
92 + // mouse event
93 + $("div.section").mouseover(function() {
94 + $(this).css("background", "#f8dff5");
95 + });
96 +
97 + $("div.section").mouseout(function() {
98 + $(this).css("background", "#ffffff");
99 + });
100 +
101 + // change event
102 + $("#channel").change(function() {
103 + alert("You selected '" + $(this).val() + "'");
104 + });
105 +});
106 +</script>
1 +html{
2 + color:#000;
3 + padding:20px 0;
4 + font: 12px/18px "맑은 고딕", "Malgun Gothic";
5 +}
6 +#tab {
7 + border-collapse:collapse;
8 + border-spacing:0;
9 +}
10 +td,th {
11 + border:1px solid #444;
12 + font: 12px/18px "맑은 고딕", "Malgun Gothic";
13 + padding:5px;
14 +}
15 +thead tr, tfoot tr {
16 + background:#888;
17 + color:#fff;
18 +}
19 +tbody tr {
20 + background:#eee;
21 +}
22 +span.price {
23 + display: box;
24 + text-align:right;
25 + width:200px;
26 + font-weight:bold;
27 +}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="utf-8">
5 + <title>jQuery Test</title>
6 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7 + <script src="calculator.js"></script>
8 + <link rel="stylesheet" href="calculator.css">
9 +</head>
10 +<body>
11 + <div>
12 + <table id="tab" border="1">
13 + <thead>
14 + <tr>
15 + <th></th><th>상품명</th><th>단가</th><th>개수</th><th>가격</th>
16 + </tr>
17 + </thead>
18 + <tbody></tbody>
19 + <tfoot>
20 + <tr>
21 + <th colspan="4">합계</th>
22 + <th><span id="sum" class="price"></span></th>
23 + </tr>
24 + </tfoot>
25 + </table>
26 + <input type="button" value="물품추가" id="add">
27 + <input type="button" value="물품삭제" id="del">
28 + </div>
29 + </body>
30 +</html>
31 +<script id="rowTemplate" type="text/template">
32 + <tr>
33 + <td><input type='checkbox'></td>
34 + <td><input type='text' size='15'></td>
35 + <td><input type='text' size='10' class='unit-price' onchange='recalculate();'></td>
36 + <td>
37 + <select class='qty' onchange='recalculate();'>
38 + <option>1</option>
39 + <option>2</option>
40 + <option>3</option>
41 + <option>4</option>
42 + <option>5</option>
43 + <option>6</option>
44 + <option>7</option>
45 + <option>8</option>
46 + <option>9</option>
47 + <option>10</option>
48 + </select>
49 + </td>
50 + <td align="right"><span class='price'></span></td>
51 + </tr>
52 +</script>
53 +<script type="text/javascript">
54 +$(function() {
55 + initCalculator();
56 +});
57 +</script>
1 +function recalculate() {
2 + var sum = 0;
3 + $("#tab tbody tr").each(function(idx, row) {
4 + var $el = $(row);
5 + var unitPrice = parseInt($el.find(".unit-price").val(), 10);
6 + var qty = parseInt($el.find(".qty").val());
7 + if (!isNaN(unitPrice) && !isNaN(qty) ) {
8 + var price = unitPrice * qty;
9 + $el.find(".price").text(price);
10 + sum = sum + price;
11 + }
12 + });
13 + $("#sum").text(sum);
14 +}
15 +
16 +function initCalculator() {
17 + $('#add').click(function() {
18 + $("#tab tbody").append($('#rowTemplate').html());
19 + });
20 + $('#del').click(function() {
21 + if (confirm("정말 삭제하시겠습니까?")) {
22 + var $els = $("tr input[type='checkbox']:checked");
23 + $els.each(function(idx, el) {
24 + $(el).parents("tr").empty();
25 + });
26 + recalculate();
27 + }
28 + });
29 + $('#add').click();
30 +}
1 +.tab {
2 + margin: 2em 0;
3 +}
4 +.tab:after, .tab>ul:after, .tab>ul>li:after{
5 + content:"";
6 + display:block;
7 + clear:both;
8 +}
9 +
10 +.tab > ul {
11 + list-style: none;
12 + margin: 0;
13 + padding: 0;
14 +}
15 +
16 +.tab > ul > li {
17 + float:left;
18 + margin-right:1px;
19 + color: #fff;
20 + border-top-left-radius: 0.4em;
21 + border-top-right-radius: 0.4em;
22 +}
23 +
24 +.tab > ul > li > a {
25 + display: inline-block;
26 + padding: 0.5em 1em;
27 + text-decoration: none;
28 + color: #fff;
29 +}
30 +.tab > ul > li {
31 + background: #4CB1E5;
32 +}
33 +
34 +.tab > ul > li:hover {
35 + background: #75a44b;
36 +}
37 +
38 +.tab > ul > li.active,
39 +.tab > ul > li.active:hover {
40 + background: #eee;
41 + color: #000;
42 + border: 1px solid #4CB1E5;
43 + border-bottom: 0;
44 + margin-bottom: -1px;
45 +}
46 +
47 +.tab > ul > li.active a,
48 +.tab > ul > li.active:hover a {
49 + color: #000;
50 + font-weight: bold;
51 +}
52 +.tab > .content {
53 + border-bottom-left-radius: 0.4em;
54 + border-bottom-right-radius: 0.4em;
55 + border-top-right-radius: 0.4em;
56 + background: #eee;
57 + border: 1px solid #4CB1E5;
58 +}
59 +
60 +.tab > .content > div {
61 + padding: 2em;
62 + display: none;
63 +}
64 +
65 +.tab > .content > div.selected {
66 + display: block;
67 +}
68 +
69 +img.full {
70 + width: 100%;
71 +}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="utf-8">
5 + <title>Tab: jQuery Test</title>
6 + <link rel="stylesheet" href="tab.css">
7 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8 +</head>
9 +<body>
10 + <div class="tab">
11 + <ul>
12 + <li><a href="#">공지사항</a></li>
13 + <li><a href="#">오늘의 뉴스</a></li>
14 + <li><a href="#">오늘의 이미지</a></li>
15 + </ul>
16 + <div class="content">
17 + <div class="section">
18 + <ul>
19 + <li>이런 이런 공지사항</li>
20 + <li>이런 이런 공지사항</li>
21 + <li>이런 이런 공지사항</li>
22 + <li>이런 이런 공지사항</li>
23 + </ul>
24 + </div>
25 + <div class="section">
26 + <p>[연예팀] SBS 수목드라마 '대물'에서 여성 최초 대통령 서혜림 역으로 열연 중인 고현정에 캐릭터 변질에 대해 논란이 일고 있다.
27 + <p>최근 '대물' 시청자 게시판에는 서혜림의 캐릭터가 변질됐다는 의견들이 등장하고 있어 눈길을 끌고 있다.
28 + <p>극 초반 물불 안 가리는 다혈질 성격은 온데간데 없고 국회의원 보궐선거에 나선 후에는 "잘 몰라서요", "잘 부탁드려요"라는 대사를 연발하며 캐릭터 변질에 대한 시청자들의 질타를 받고 있다.
29 + </div>
30 + <div class="section">
31 + <img src="http://musicimg.cyworld.com/ALBUM/015/063/15063659.JPG">
32 + </div>
33 + </div>
34 + </div>
35 +
36 + <div class="tab">
37 + <ul>
38 + <li><a href="#">APink</a></li>
39 + <li><a href="#">소녀시대</a></li>
40 + <li><a href="#">걸스데이</a></li>
41 + </ul>
42 + <div class="content">
43 + <div class="section">
44 + <img src="http://0.viki.io/c/28239c/db2d6d4379.jpg?x=b" class="full">
45 + </div>
46 + <div class="section">
47 + <img src="https://pbs.twimg.com/media/CQIYmaYW8AALCCN.jpg" class="full">
48 + </div>
49 + <div class="section">
50 + <img src="http://img.mbn.co.kr/filewww/news/other/2013/07/20/051502002751.jpg" class="full">
51 + </div>
52 + </div>
53 + </div>
54 +</body>
55 +</html>
56 +<script src="tab.js"></script>
1 +$(function($){
2 + $('.tab > ul > li > a').click(function(e) {
3 + var $item = $(e.currentTarget).parent();
4 + var idx = $item.index() + 1;
5 + var $tab = $item.closest(".tab");
6 + $tab.find(">ul>li").removeClass('active');
7 + $tab.find(".section").removeClass('selected');
8 + $item.addClass('active');
9 + $tab.find(".section:nth-child(" + idx + ")").addClass("selected");
10 + });
11 + $(".tab").find(">ul>li>a:first").click();
12 +});