Skip to content

P
Python-100-Days
Commit 7275b755 authored by jackfrued's avatar jackfrued
Browse files
Options

更新了前端文档和代码目录结构

parent 92cd26bd
Expand all Show whitespace changes
Inline Side-by-side
Showing with 101 additions and 2140 deletions
Day21-30/Web前端概述.md
View file @ 7275b755
......@@ -270,7 +270,8 @@
#### JavaScript API
- HTML5中的API：geolocation / localStorage / sessionStorage / history
- localStorage和sessionStorage
- geolocation和定位问题
### 使用jQuery
......@@ -623,6 +624,10 @@ Vue为商业项目开发提供了非常便捷的脚手架工具vue-cli，通过
#### 报表框架 - [ECharts](<https://echarts.baidu.com>)
#### 响应式布局框架 - [Bootstrap](<http://www.bootcss.com/>)
#### 特点
......
Day21-30/code/demo01/jquery3.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 20px auto;
}
#cart {
margin: 0 auto;
width: 850px;
}
#cart-header {
height: 40px;
background-color: lightgray;
margin-bottom: 20px;
}
#cart-header div {
line-height: 40px;
}
.left {
float: left;
}
.right {
float: right;
}
.w110 {
width: 100px;
}
.ml10 {
margin-left: 10px;
}
.w120 {
width: 120px;
}
.w250 {
width: 250px;
}
.center {
text-align: center;
}
.w20 {
width: 20px;
}
.w90 {
width: 90px;
}
.clear {
clear: both;
}
#cart-items>div {
height: 100px;
}
#cart-items>div>div {
line-height: 100px;
}
.w250 span {
display: inline-block;
font-size: 12px;
line-height: 16px !important;
}
.single-item {
border-bottom: 1px solid gray;
}
.small-button {
display: inline-block;
width: 20px;
height: 20px;
border: none;
}
.big-button {
color: white;
background-color: red;
display: inline-block;
width: 120px;
height: 40px;
border: none;
font-size: 22px;
}
#totalCount, #totalPrice {
color: red;
}
#totalPrice {
font: bolder 20px Arial;
display: inline-block;
width: 150px;
}
#cart a {
text-decoration: none;
}
#cart a:link, #cart a:visited, #cart a:active {
color: gray;
}
</style>
</head>
<body>
<div id="cart">
<div id="cart-header">
<div class="left w110 ml10">
<input id="selectAll" type="checkbox">
<label for="selectAll">全选</label>
</div>
<div class="left w250">商品</div>
<div class="left w120 center">单价</div>
<div class="left w120 center">数量</div>
<div class="left w120 center">小计</div>
<div class="left w120 center">操作</div>
</div>
<div id="cart-items">
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a1.jpg">
</a>
</div>
<div class="left w250">
<span>
海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
</span>
</div>
<div class="left w120 center">&yen;<span class="price">138.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">&yen;<span>138.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a2.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
</span>
</div>
<div class="left w120 center">&yen;<span class="price">128.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">&yen;<span>128.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a3.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
</span>
</div>
<div class="left w120 center">&yen;<span class="price">99.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">&yen;99.00</div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
</div>
<div id="cart-footer">
<div class="clear left">
<a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
</div>
<div class="right">
<span>总共选中了<span id="totalCount">0</span>件商品</span>
<span>总计: <span id="totalPrice">&yen;0.00</span></span>
<button id="pay" class="big-button">去结算</button>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
// jQuery中的$函数(jQuery)的作用
// 1. 如果$函数的参数是一个函数那么该函数绑定文档加载完成后要执行的回调函数
// 2. 如果$函数的参数是一个选择器字符串那么$函数会返回对应的元素(jQuery对象)
// 3. 如果$函数的参数是一个标签字符串那么$函数会创建该元素并返回(jQuery对象)
// 4. 如果$函数的参数是一个原生的JS元素对象那么$函数会将它转变成jQuery对象
$(function() {
// this到底是什么要看具体的上下文环境
// 简单的说函数中的this指的是谁调用了这个函数或者谁引发了这个函数的执行
$('#selectAll').on('change', function(evt) {
// 获取事件源的两种方式: evt.target或者this
// 这里拿到的是原生的JavaScript对象
if ($(this).prop('checked')) {
$('.single-item input[type="checkbox"]').prop('checked', true);
calcTotal();
} else {
$('.single-item input[type="checkbox"]').prop('checked', false);
$('#totalCount').text('0');
$('#totalPrice').html('&yen;0.00');
}
});
// 为单个商品项的复选框绑定改变事件
$('input[name="selectOne"]').on('change', function() {
if (!$(this).prop('checked')) {
$('#selectAll').prop('checked', false);
}
calcTotal();
});
// 为删除选中商品超链接绑定事件回调
$('#clearSelected').on('click', function() {
if (confirm('确定要删除所选商品吗?')) {
$('.single-item').each(function() {
if ($(this).find('input[name="selectOne"]').prop('checked')) {
$(this).remove();
}
});
calcTotal();
}
});
// 为减少和添加商品数量的按钮绑定事件回调
$('.single-item button').on('click', function(evt) {
$(this).parent().parent().find('input[name="selectOne"]').prop('checked', true);
if ($(this).text() == '-') {
var count = parseInt($(this).next().val());
if (count > 1) {
count -= 1;
$(this).next().val(count);
} else {
alert('商品数量最少为1');
}
} else {
var count = parseInt($(this).prev().val());
if (count < 200) {
count += 1;
$(this).prev().val(count);
} else {
alert('商品数量最多为200');
}
}
var price = parseFloat($(this).parent().prev().find('span').text());
$(this).parent().next().html('&yen;' + (price * count).toFixed(2));
calcTotal();
});
// 为单个商品项删除超链接绑定事件回调
$('.single-item a').on('click', function() {
if (window.confirm('确定要删除该项吗?')) {
$(this).parent().parent().remove();
calcTotal();
}
});
// 为商品数量文本框绑定改变事件回调
$('.single-item input[type="text"]').on('change', function() {
$(this).parent().parent().find('input[name="selectOne"]').prop('checked', true);
var count = parseInt($(this).val());
// 12 == "12"
// "12abc" == 12
// "xyz" == NaN
if (count != $(this).val() || count < 1 || count > 200) {
alert('无效的商品数量值');
count = 1;
$(this).val(count);
}
var price = parseFloat($(this).parent().prev().find('span').text());
$(this).parent().next().html('&yen;' + (price * count).toFixed(2));
calcTotal();
});
// 计算总计
function calcTotal() {
var checkBoxes = $('input[name="selectOne"]');
var priceSpans = $('.single-item .price');
var countInputs = $('.single-item .count');
var totalCount = 0;
var totalPrice = 0;
for (var i = 0; i < priceSpans.length; i += 1) {
// 复选框被勾中的购物车项才进行计算
if ($(checkBoxes[i]).prop('checked')) {
// 强调: jQuery对象使用下标运算或get方法会还原成原生的JavaScript对象
var price = parseFloat($(priceSpans[i]).text());
var count = parseInt($(countInputs[i]).val());
totalCount += count;
totalPrice += price * count;
}
}
$('#totalCount').text(totalCount);
$('#totalPrice').html('&yen;' + totalPrice.toFixed(2));
}
});
</script>
</body>
</html>
Day21-30/code/demo01/js/jquery.min.js deleted 100644 → 0
View file @ 92cd26bd
This diff is collapsed.
Day21-30/code/demo02/css/jquery-ui.min.css deleted 100644 → 0
View file @ 92cd26bd
This diff is collapsed.
Day21-30/code/demo02/example01.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3><span id="counter">5</span>秒以后自动跳转到百度</h3>
<script>
var span = document.getElementById('counter');
var num = 5;
setTimeout(function() {
num -= 1;
if (num > 0) {
span.textContent = num;
setTimeout(arguments.callee, 1000);
} else {
location.href = 'http://www.baidu.com';
}
}, 1000);
</script>
</body>
</html>
Day21-30/code/demo02/example02.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
+function(n) {
for (var i = 0; i < n; i += 1) {
alert('OK');
}
}(3);
// n! = n * (n - 1)!
function f(n) {
if (n == 0 || n == 1)
return 1;
return n * arguments.callee(n - 1);
}
alert(f(5));
function foo() {
alert(arguments.callee);
alert(arguments.callee.caller);
return arguments[0] + arguments[1];
}
alert(foo(1, 2));
</script>
</body>
</html>
Day21-30/code/demo02/example03.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#timer {
float: right;
}
</style>
</head>
<body>
<div id="timer"></div>
<script>
var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
var div = document.getElementById('timer');
setInterval(function() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var weekday = weekdays[date.getDay()];
var fullStr = year + '年' +
(month < 10 ? '0' + month : month) + '月' +
(day < 10 ? '0' + day : day) + '日&nbsp;&nbsp;' +
(hour < 10 ? '0' + hour : hour) + ':' +
(minute < 10 ? '0' + minute : minute) + ':' +
(second < 10 ? '0' + second : second) + '&nbsp;&nbsp;' +
'星期' + weekday;
div.innerHTML = fullStr;
}, 1000);
</script>
</body>
</html>
Day21-30/code/demo02/example04.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 940px;
height: 430px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 绑定事件除了用标签属性之外还有哪些更好的做法 -->
<div id="container" onmouseover="stopChange()" onmouseout="resumeChange()">
<img id="adv" src="img/slide-1.jpg">
</div>
<script>
// 除了getElementById还有哪些获取元素的方法
// - getElementsByTagName()
// - getElementsByClassName()
// - querySelector()
// - querySelectorAll()
var img = document.getElementById('adv');
var currentIndex = 0;
var timerId = 0;
resumeChange();
function stopChange() {
window.clearInterval(timerId);
}
function resumeChange() {
timerId = setInterval(function() {
currentIndex += 1;
currentIndex %= 4;
img.src = 'img/slide-' + (currentIndex + 1) + '.jpg';
}, 3000);
}
</script>
</body>
</html>
Day21-30/code/demo02/example05.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="foo()">确定</button>
<script>
function foo() {
alert('Hello, world!');
}
</script>
</body>
</html>
Day21-30/code/demo02/example06.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="message">Hello, world!</h1>
<button id="btn">0</button>
<script>
var counter = 0;
var btn = document.getElementById('btn');
var h1 = document.getElementById('message');
function f1() {
alert('按钮被点击了!');
if (btn.removeEventListener) {
btn.removeEventListener('click', f1);
} else {
btn.detachEvent('onclick', f1);
}
}
function f2() {
counter += 1;
btn.textContent = counter;
}
function f3() {
h1.textContent = 'Goodbye, world!';
}
if (btn.addEventListener) {
btn.addEventListener('click', f1);
btn.addEventListener('click', f2);
btn.addEventListener('click', f3);
} else {
// 低版本IE浏览器
btn.attachEvent('onclick', f1);
btn.attachEvent('onclick', f2);
btn.attachEvent('onclick', f3);
}
</script>
</body>
</html>
Day21-30/code/demo02/example07.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#one {
width: 400px;
height: 400px;
background-color: red;
}
#two {
width: 300px;
height: 300px;
background-color: green;
}
#three {
width: 200px;
height: 200px;
background-color: blue;
}
#two, #three {
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
<script>
(function() {
function f1(evt) {
alert('I am one');
}
function f2() {
alert('I am two');
}
function f3(evt) {
alert('I am three');
evt = evt || window.event;
// 阻止事件传播行为(冒泡或捕获)
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
// 要么是全局作用域 要么是函数级作用域
// 事件捕获 - 从外层向内层传递事件的过程
// 事件冒泡 - 从内层向外层传递事件的过程(默认)
// 内嵌的元素在响应事件之后会继续将事件传递到它的父元素
var fs = [f1, f2, f3];
var ids = ['one', 'two', 'three'];
for (var i = 0; i < ids.length; i += 1) {
var div = document.getElementById(ids[i]);
if (div.addEventListener) {
// 如果需要使用事件捕获可以传入第三个参数并赋值为true
div.addEventListener('click', fs[i]);
} else {
div.attachEvent('onclick', fs[i]);
}
}
})();
</script>
</body>
</html>
Day21-30/code/demo02/example08.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="foo" href="http://www.baidu.com">百度一下</a>
<script>
var aList = document.getElementsByName('foo');
aList[0].addEventListener('click', function(evt) {
evt = evt || window.event;
if (!confirm('真的要去百度吗?')) {
// 阻止事件的默认行为
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
});
</script>
</body>
</html>
Day21-30/code/demo02/example09.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em>&nbsp;<em>figs</em></li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<script src="js/list.js"></script>
</div>
<script>
var elems = document.querySelectorAll('#page .hot');
for (var i = 0; i < elems.length; i += 1) {
alert(elems[i].textContent);
}
var em = document.querySelector('#one>em');
alert(em.textContent);
</script>
</body>
</html>
Day21-30/code/demo02/example10.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label>你的爱好:&nbsp;</label>
<input type="checkbox" name="fav">旅游
<input type="checkbox" name="fav">游戏
<input type="checkbox" name="fav">美食
<input type="checkbox" name="fav">阅读
<input type="checkbox" name="fav">睡觉
<input type="checkbox" name="fav">其他
<a href="javascript:void(0);">全选</a>
<a href="javascript:void(0);">取消</a>
<a href="javascript:void(0);">反选</a>
</form>
<script>
(function() {
var allAnchors = document.querySelectorAll('form a');
var favList = document.querySelectorAll('input[name=fav]');
allAnchors[0].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
// favList[i].setAttribute('checked', '');
favList[i].checked = true;
}
});
allAnchors[1].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
// favList[i].removeAttribute('checked');
favList[i].checked = false;
}
});
allAnchors[2].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
favList[i].checked = !favList[i].checked;
}
});
})();
</script>
</body>
</html>
Day21-30/code/demo02/example11.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
width: 450px;
margin: 0 auto;
}
#num {
text-align: center;
display: inline-block;
width: 180px;
height: 30px;
border: none;
border-bottom: 1px solid darkgray;
font-size: 18px;
outline: none;
}
#ok, #reset {
background-color: red;
color: white;
width: 120px;
height: 30px;
font-size: 18px;
border: none;
cursor: pointer;
outline: none;
}
#hint {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<input id="num" type="text" placeholder="请输入你猜的数字">
<button id="ok">确定</button>
<button id="reset">重新开始</button>
<div id="hint"></div>
</div>
<script src="js/mylib.js"></script>
<script>
(function() {
function guess() {
total += 1;
var numStr = $('num').value;
var num = parseInt(numStr);
if (num == numStr) {
var hint = '你猜的是' + num + ', ';
if (num < answer) {
hint += '大一点!';
} else if (num > answer) {
hint += '小一点!';
} else {
hint += '恭喜你猜对了!';
$('ok').disabled = true;
$('num').disabled = true;
if (total > 7) {
hint += '<br>智商捉急!!!';
}
}
$('hint').innerHTML += '<p>' + hint + '</p>';
} else {
alert('输入错误, 请重新输入!');
}
$('num').value = '';
$('num').focus();
}
var answer = parseInt(Math.random() * 100 + 1);
var total = 0;
bind($('num'), 'keypress', function(evt) {
evt = evt || window.event;
if (evt.keyCode == 13) {
guess();
} else if (evt.keyCode < 48 || evt.keyCode > 57) {
preventDefault(evt);
}
});
bind($('ok'), 'click', guess);
bind($('reset'), 'click', function() {
answer = parseInt(Math.random() * 100 + 1);
total = 0;
$('hint').innerHTML = '';
$('num').disabled = false;
$('ok').disabled = false;
});
})();
</script>
</body>
</html>
Day21-30/code/demo02/example12.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#fruits li {
width: 150px;
height: 30px;
background-color: darkolivegreen;
color: white;
list-style: none;
border-bottom: 1px solid lightgray;
text-align: center;
font: 18px/30px "微软雅黑";
}
#fruits li a {
text-decoration: none;
margin-left: 30px;
}
#fruits li a:link, #fruits li a:visited {
color: white;
}
</style>
</head>
<body>
<h1>水果列表</h1>
<hr>
<ul id="fruits">
<li>苹果<a href="javascript:void(0);">x</a></li>
<li>香蕉<a href="javascript:void(0);">x</a></li>
<li>草莓<a href="javascript:void(0);">x</a></li>
</ul>
<input id="fruit" type="text">
<button id="ok">确定</button>
<script src="js/mylib.js"></script>
<script>
function removeItem(evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
$('fruits').removeChild(target.parentNode);
}
+function() {
var aList = document.querySelectorAll('#fruits li a');
for (var i = 0; i < aList.length; i += 1) {
bind(aList[i], 'click', removeItem);
}
bind($('ok'), 'click', function() {
var fruit = $('fruit').value;
if (fruit.trim().length > 0) {
var li = document.createElement('li');
li.textContent = fruit;
var a = document.createElement('a');
a.href = 'javascript:void(0);';
a.textContent = 'x';
bind(a, 'click', removeItem);
li.appendChild(a);
li.style.backgroundColor = 'coral';
li.style.fontFamily = '楷体';
$('fruits').insertBefore(li, $('fruits').firstChild);
$('fruit').value = '';
}
});
}();
</script>
</body>
</html>
Day21-30/code/demo02/example13.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- Ajax (Asynchronous JavaScript and XML) -->
<!-- JSON (JavaScript Object Notation) -->
<script>
var stu = {
"name": "骆昊",
"age": 15,
"study": function(courseName) {
alert(this.name + "正在学习" + courseName);
},
"watchAV": function() {
if (this.age < 18) {
alert(this.name + '只能观看《熊出没》.');
} else {
alert(this.name + '可以观看岛国片.');
}
}
};
stu.study('Python');
stu.watchAV();
</script>
</body>
</html>
Day21-30/code/demo02/example14.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="loadBtn">加载</button>
<script src="js/mylib.js"></script>
<script>
+function() {
bind($('loadBtn'), 'click', function() {
// 创建异步请求对象
var xhr = new XMLHttpRequest();
if (xhr) {
var url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10';
// 第一个参数 - 请求的方式get或post
// 第二个参数 - 请求的资源对应的URL(统一资源定位符)
// 第三个参数 - true表示异步请求(不中断用户体验的非阻塞式请求)
xhr.open('get', url, true);
// 绑定事件回调函数(服务器响应完成并成功后要对页面进行局部刷新)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 将服务器返回的数据解析成JSON
var json = JSON.parse(xhr.responseText);
var mmList = json.newslist;
for (var i = 0; i < mmList.length; i += 1) {
var mm = mmList[i];
// 动态创建<img>标签并绑定src属性
var img = document.createElement('img');
img.src = mm.picUrl;
img.width = 300;
document.body.insertBefore(img, $('loadBtn'));
}
}
};
xhr.send();
} else {
alert('你的浏览器是一坨屎!');
}
});
}();
</script>
</body>
</html>
Day21-30/code/demo02/example15.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<p class="foo">疑似地上霜</p>
<p>举头望明月</p>
<p class="foo">低头思故乡</p>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
// $('.foo').hide();
// console.log($('p:contains("故乡")').text())
for (var i = 0; i < 5; i += 1) {
$(document.body).prepend($('p:first').clone());
}
});
</script>
</body>
</html>
Day21-30/code/demo02/example16.html deleted 100644 → 0
View file @ 92cd26bd
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQueryUI选项卡效果</title>
<link rel="stylesheet" href="css/jquery-ui.min.css">
</head>
<body>
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">Nunc tincidunt</a>
</li>
<li>
<a href="#tabs-2">Proin dolor</a>
</li>
<li>
<a href="#tabs-3">Aenean lacinia</a>
</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function() {
$('#tabs').tabs();
});
</script>
</body>
</html>
\ No newline at end of file
Day21-30/code/demo02/example17.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="login" action="" method="post">
<p>
<input type="text" name="username" placeholder="请输入用户名">
<span style="color: red; font-size: 12px"></span>
</p>
<p>
<input type="password" name="password" placeholder="请输入口令">
</p>
<p>
<input type="submit" value="登录">
</p>
</form>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('input:first').val(localStorage.uid);
$('#login').on('submit', function(evt) {
evt.preventDefault();
var username = $('input:first').val();
if (/^[a-zA-Z][a-zA-Z0-9_]{5,19}$/.test(username)) {
localStorage.uid = username;
evt.target.submit();
} else {
$('input:first').next().text('请输入有效的用户名');
}
});
});
</script>
</body>
</html>
Day21-30/code/demo02/example18.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-2 column">
<img alt="140x140" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" />
</div>
<div class="col-md-10 column">
<h3>
h3. 这是一套可视化布局系统.
</h3>
<ul class="nav nav-tabs">
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li class="disabled">
<a href="#">信息</a>
</li>
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">操作</a>
</li>
<li>
<a href="#">设置栏目</a>
</li>
<li>
<a href="#">更多设置</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">分割线</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="carousel slide" id="carousel-830515">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-830515">
</li>
<li data-slide-to="1" data-target="#carousel-830515">
</li>
<li data-slide-to="2" data-target="#carousel-830515">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
<div class="carousel-caption">
<h4>
Second Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-830515" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-830515" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
</p>
<table class="table">
<thead>
<tr>
<th>
编号
</th>
<th>
产品
</th>
<th>
交付时间
</th>
<th>
状态
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li>
<a href="#">Prev</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</div>
<div class="col-md-4 column">
<ul>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ul>
<ol>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ol>
</div>
</div>
<div class="row clearfix">
<div class="col-md-4 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
</p>
</div>
<div class="col-md-4 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
</p>
</div>
<div class="col-md-4 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
</p>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
</body>
</html>
\ No newline at end of file
Day21-30/code/demo02/homework01.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#tel {
width: 500px;
height: 100px;
text-align: center;
font: bolder 72px/100px Arial;
margin: 50px auto;
background-color: blue;
color: yellow;
}
#buttons {
width: 500px;
margin: 0 auto;
text-align: center;
}
#buttons > button {
width: 120px;
height: 40px;
background-color: red;
color: white;
font: 28px/40px "微软雅黑";
border: none;
margin: 0 10px;
}
</style>
</head>
<body>
<!-- 高内聚 低耦合 (high cohesion low coupling)-->
<div id="tel">13012345678</div>
<div id="buttons">
<button id="startButton">开始</button>
<button id="stopButton">停止</button>
</div>
<script>
// window - BOM
// - setTimeout / clearTimeout
// - setInterval / clearInterval
// - alert / prompt / confirm
// - document / location / history / screen / navigator
var tels = [];
for (var i = 0; i < 100; i += 1) {
tel = '13';
for (var j = 0; j < 9; j += 1) {
tel += parseInt(Math.random() * 10);
}
tels[i] = tel;
}
var startButton = document.getElementById('startButton');
var stopButton = document.getElementById('stopButton');
// 给标签绑定事件回调(callback)函数
// 我们知识事件发生时要做什么但我们不知道事件什么时候发生
// 在这种场景我们就需要提供一个回调函数(不是自己调用而是留给他人调用)
var timerId = 0;
var luckyTel = '';
startButton.onclick = function() {
duration = parseInt(Math.random() * 950 + 50);
timerId = setTimeout(function() {
var index = parseInt(Math.random() * tels.length);
luckyTel = tels[index];
displayTel = luckyTel.substring(0, 3) + '****' +
luckyTel.substring(7, 11)
document.getElementById('tel').textContent = displayTel;
duration = parseInt(Math.random() * 950 + 50);
timerId = setTimeout(arguments.callee, duration);
}, duration);
};
stopButton.onclick = function() {
clearInterval(timerId);
alert('被抽中的幸运号码是: ' + luckyTel);
};
</script>
</body>
</html>
Day21-30/code/demo02/homework02.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#adv {
width: 200px;
height: 200px;
background-color: blue;
color: yellow;
position: fixed;
right: 50px;
top: 50px;
}
#adv button {
float: right;
}
</style>
</head>
<body>
<div id="adv">
<button>关闭</button>
</div>
<script src="js/mylib.js"></script>
<script>
+function() {
var urls = ['https://www.baidu.com', 'https://www.360.cn/'];
var btn = document.querySelector('#adv button');
var numberOfHits = 0;
bind(btn, 'click', function() {
if (numberOfHits < 2) {
window.open(urls[numberOfHits]);
// $('adv').style.backgroundColor = 'rgba(120, 50, 80, 0.5)';
} else {
$('adv').style.visibility = 'hidden';
}
numberOfHits += 1;
});
}();
</script>
</body>
</html>
Day21-30/code/demo02/homework03.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
width: 800px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
#panel {
width: 800px;
margin: 10px auto;
text-align: center;
}
.piece {
width: 80px;
height: 80px;
float: left;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel">
<button id="addBtn">添加</button>
<button id="flaBtn">闪烁</button>
</div>
<script src="js/mylib.js"></script>
<script>
function randomColor() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b +')';
}
(function() {
var counter = 0;
bind($('addBtn'), 'click', function() {
if (counter < 50) {
counter += 1;
var div = document.createElement('div');
div.className = 'piece';
div.style.backgroundColor = randomColor();
$('container').appendChild(div);
}
});
var timer = 0;
bind($('flaBtn'), 'click', function() {
if (!timer) {
timer = setInterval(function() {
var allPieces = $('container').children;
for (var i = 0; i < allPieces.length; i += 1) {
allPieces[i].style.backgroundColor = randomColor();
}
}, 200);
}
});
}());
</script>
</body>
</html>
Day21-30/code/demo02/index.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="">
<style></style>
</head>
<body>
<!-- BOM(浏览器对象模型) -->
<script>
var name = window.prompt('请输入你的名字: ');
var msg = name != 'null' && name.trim() != '' ?
'你好, ' + name + '!' : '大家好!';
window.alert(msg);
if (window.confirm('确定要退出吗?')) {
window.close();
} else {
// window.open('http://www.baidu.com', '百度一下')
// window.moveTo(500, 500);
window.print();
}
</script>
</body>
</html>
Day21-30/code/demo02/jd_cart.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 20px auto;
}
#cart {
margin: 0 auto;
width: 850px;
}
#cart-header {
height: 40px;
background-color: lightgray;
margin-bottom: 20px;
}
#cart-header div {
line-height: 40px;
}
.left {
float: left;
}
.right {
float: right;
}
.w110 {
width: 100px;
}
.ml10 {
margin-left: 10px;
}
.w120 {
width: 120px;
}
.w250 {
width: 250px;
}
.center {
text-align: center;
}
.w20 {
width: 20px;
}
.w90 {
width: 90px;
}
.clear {
clear: both;
}
#cart-items>div {
height: 100px;
}
#cart-items>div>div {
line-height: 100px;
}
.w250 span {
display: inline-block;
font-size: 12px;
line-height: 16px !important;
}
.single-item {
border-bottom: 1px solid gray;
}
.small-button {
display: inline-block;
width: 20px;
height: 20px;
border: none;
}
.big-button {
color: white;
background-color: red;
display: inline-block;
width: 120px;
height: 40px;
border: none;
font-size: 22px;
}
#totalCount, #totalPrice {
color: red;
}
#totalPrice {
font: bolder 20px Arial;
display: inline-block;
width: 150px;
}
#cart a {
text-decoration: none;
}
#cart a:link, #cart a:visited, #cart a:active {
color: gray;
}
</style>
</head>
<body>
<div id="cart">
<div id="cart-header">
<div class="left w110 ml10">
<input id="selectAll" type="checkbox">
<label for="selectAll">全选</label>
</div>
<div class="left w250">商品</div>
<div class="left w120 center">单价</div>
<div class="left w120 center">数量</div>
<div class="left w120 center">小计</div>
<div class="left w120 center">操作</div>
</div>
<div id="cart-items">
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a1.jpg">
</a>
</div>
<div class="left w250">
<span>
海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
</span>
</div>
<div class="left w120 center">￥<span class="price">138.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" readonly type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">￥<span>138.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a2.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
</span>
</div>
<div class="left w120 center">￥<span class="price">128.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" readonly type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">￥<span>128.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a3.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
</span>
</div>
<div class="left w120 center">￥<span class="price">99.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" readonly type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">￥<span>99.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
</div>
<div id="cart-footer">
<div class="clear left">
<a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
</div>
<div class="right">
<span>总共选中了<span id="totalCount">0</span>件商品</span>
<span>总计: <span id="totalPrice">￥0.00</span></span>
<button id="pay" class="big-button">去结算</button>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
function calcTotal() {
var amountsInput = $('.single-item input[type=text]');
var pricesSpan = $('.single-item .price');
var checkboxes = $('.single-item input[type=checkbox]');
var totalAmount = 0;
var totalPrice = 0;
amountsInput.each(function(index) {
if (checkboxes[index].checked) {
var amount = parseInt($(this).val());
totalAmount += amount;
var price = parseFloat($(pricesSpan[index]).text());
var currentPrice = (price * amount).toFixed(2);
$(this).parent().next().find('span').text(currentPrice);
totalPrice += parseFloat(currentPrice);
}
});
$('#totalCount').text(totalAmount);
$('#totalPrice').text('￥' + totalPrice.toFixed(2));
}
$('#selectAll').on('click', function(evt) {
$('.single-item input[type=checkbox]').prop('checked', evt.target.checked);
calcTotal();
});
$('.single-item button').on('click', function(evt) {
var op = $(evt.target).text();
if (op == '-') {
var numInput = $(evt.target).next();
var num = parseInt(numInput.val());
if (num > 1) {
numInput.val(num - 1);
}
} else {
var numInput = $(evt.target).prev();
var num = parseInt(numInput.val());
if (num < 200) {
numInput.val(num + 1);
}
}
$(evt.target).parent().parent().find('input[type=checkbox]').prop('checked', true);
calcTotal();
});
$('.single-item input[type=checkbox]').on('click', function() {
calcTotal();
});
$('.single-item a').on('click', function(evt) {
if (confirm('确定要删除该商品吗?')) {
$(evt.target).parent().parent().remove();
calcTotal();
}
});
$('#clearSelected').on('click', function() {
if (confirm('确定要删除选中的商品吗?')) {
$('.single-item').each(function() {
if ($(this).find('input:checkbox').prop('checked')) {
$(this).remove();
}
});
calcTotal();
}
});
});
</script>
</body>
</html>
Day21-30/code/demo02/jquery01.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#page ul li {
list-style: none;
width: 240px;
height: 40px;
text-align: center;
border-bottom: 1px solid darkgray;
background-color: darkcyan;
color: white;
font: 18px/40px Arial;
}
#data {
border-collapse: collapse;
}
#data td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em>&nbsp;<em>figs</em></li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot"><span>honey</span></li>
<li id="four">balsamic vinegar</li>
</ul>
<table id="data">
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
</table>
<button id="clearBtn">清空表格</button>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#page li:gt(0)').on('click', function(evt) {
$(evt.target).remove();
});
$('#page li:even').css({
'background-color': 'coral',
'font-size': '36px'
});
$('#page li:odd').css('background-color', 'pink');
$('#clearBtn').on('click', function() {
$('#data').empty();
});
});
</script>
</body>
</html>
Day21-30/code/demo02/jquery02.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
width: 350px;
height: 70px;
margin: 0 auto;
margin-top: 10px;
background-color: black;
color: white;
font: 36px/70px Arial;
}
#fruits {
width: 350px;
margin: 0 auto;
}
#fruits li {
width: 350px;
height: 75px;
background-color: darkolivegreen;
color: white;
list-style: none;
border-bottom: 1px solid lightgray;
text-align: center;
font: 32px/75px "微软雅黑";
}
#fruits li img {
float: right;
}
#fruits li a:link, #fruits li a:visited {
color: white;
}
#fruits li button {
float: right;
width: 75px;
height: 75px;
border: none;
outline: none;
background-color: coral;
color: white;
}
#fruits li input {
width: 240px;
height: 30px;
text-align: center;
font-size: 22px;
line-height: 30px;
}
#fruits li span {
color: lightgoldenrodyellow;
font-size: 14px;
}
</style>
</head>
<body>
<h1>水果列表</h1>
<ul id="fruits">
<li id="fruit1">苹果<img src="img/icon-trash.png"></li>
<li id="fruit2">香蕉<img src="img/icon-trash.png"></li>
<li id="fruit3">草莓<img src="img/icon-trash.png"></li>
<li>
<input type="text" placeholder="输入水果名称">
<button id="ok">添加</button>
</li>
</ul>
<script src="js/jquery.min.js"></script>
<script>
// jQuery的$函数的用法:
// 1. 如果$函数的参数是一个函数那么这个函数是文档加载完成之后要执行的回调函数
// 2. 如果$函数的参数是选择器字符串那么$函数会返回代表对应的标签的jQuery对象
// 3. 如果$函数的参数是一个原生JavaScript对象那么$函数会返回与之对应的jQuery对象
// 4. 如果$函数的参数一个标签字符串那么$函数会创建对应的元素而且返回jQuery对象
// 原生的JS对象和jQuery对象如何实现转换?
// $(原生JS对象) ---> jQuery对象
// jQuery对象.get(index) / jQuery对象[index] ---> JS对象
// 注: jQuery对象的本质是一个数组
$(function() {
function removeItem(evt) {
$(evt.target).parent()
.css('position', 'relative')
.animate(
{'left': '-350px', 'height': '0'},
360,
'linear',
function() {
$(this).remove();
}
);
}
$('#fruits li').hide().each(function(index) {
$(this).delay(600 * index).fadeIn(600);
});
$('#fruits li img').on('click', removeItem);
$('#fruits li:lt(3)').one('click', function(evt) {
var target = $(evt.target);
target.append($('<span>').text(target.attr('id')));
})
var index = 4;
$('#ok').on('click', function() {
var fruit = $('#fruits li input').val().trim();
if (fruit.length > 0) {
$('<li>').text(fruit).attr('id', 'fruit' + index)
.append(
$('<img>').attr('src', 'img/icon-trash.png')
.on('click', removeItem)
)
.one('click', function(evt) {
var target = $(evt.target);
target.append('<span>' + target.attr('id') + '</span>');
})
.insertBefore($('#fruits li:last'))
.hide().fadeIn(600);
$('#fruits li input').val('').focus();
index += 1;
}
});
});
</script>
</body>
</html>
Day21-30/code/demo02/jquery03.html deleted 100644 → 0
View file @ 92cd26bd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="loadBtn">加载</button>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#loadBtn').on('click', function() {
$.ajax({
type: 'get',
url: 'http://api.tianapi.com/meinv/',
data: {
key: '772a81a51ae5c780251b1f98ea431b84',
num: 10
},
dataType: 'json',
success: function(json) {
for (var i = 0; i < json.newslist.length; i += 1) {
var mm = json.newslist[i];
// $('<img>').attr('src', mm.picUrl).attr('width', 300)
// .insertBefore($('#loadBtn'));
$('<p>').append($('<a>')
.attr('href', mm.picUrl)
.attr('target', '_blank')
.text(mm.title)
).insertBefore($('#loadBtn'));
}
},
error: function() {}
});
// $.getJSON(url, function(json) {
// for (var i = 0; i < json.newslist.length; i += 1) {
// var mm = json.newslist[i];
// $('<img>').attr('src', mm.picUrl).attr('width', 300)
// .insertBefore($('#loadBtn'));
// }
// });
});
});
</script>
</body>
</html>
Day21-30/code/demo02/js/jquery-ui.min.js deleted 100644 → 0
View file @ 92cd26bd
This source diff could not be displayed because it is too large. You can view the blob instead.
Day21-30/code/demo02/js/jquery.min.js deleted 100644 → 0
View file @ 92cd26bd
This diff is collapsed.
Day21-30/code/demo02/js/mylib.js deleted 100644 → 0
View file @ 92cd26bd
function $(id) {
return document.getElementById(id);
}
function bind(elem, en, fn) {
if (elem.addEventListener) {
elem.addEventListener(en, fn);
} else {
elem.attachEvent('on' + en, fn);
}
}
function unbind(elem, en, fn) {
if (elem.removeEventListener) {
elem.removeEventListener(en, fn);
} else {
elem.detachEvent('on' + en, fn);
}
}
function preventDefault(evt) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
Day21-30/code/web1807/example09.html → Day21-30/code/javascript/example09.html
View file @ 7275b755
......@@ -85,28 +85,9 @@
<!-- 下面的方式适合商业项目通过CDN服务器来加速获取jQuery的JS文件 -->
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
<script>
// JavaScript Object Notation == JSON
var stu = {
'id': 1001,
'name': '骆昊',
'age': 15,
'study': function(course) {
alert(this.name + '正在学习' + course);
},
'watchAv': function() {
if (this.age >= 18) {
alert(this.name + '正在观看岛国动作片');
} else {
alert(this.name + '只能观看《熊出没》');
}
}
};
stu.study('Python');
stu.watchAv();
$(function() {
$('#hide').on('click', function() {
// 根据样式表选择器获取元素 获取到的不是原生的JS对象
// 根据样式表选择器获取元素获取到的不是原生的JS对象
// 而是经过jQuery封装过后的对象（有更多的方法方便操作）
$('#data').fadeOut(2000);
});
......
Day21-30/code/web1807/example11.html → Day21-30/code/javascript/example11.html
View file @ 7275b755
......@@ -17,13 +17,16 @@
<!-- 获得数据后可以通过DOM操作对页面进行局部刷新加载服务器返回的数据 -->
<script>
(function() {
var page = 0;
var div = document.getElementById('container');
var button = document.getElementById('ok');
button.addEventListener('click', function() {
// 1. 创建异步请求对象
var xhr = new XMLHttpRequest();
if (xhr) {
var url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10';
page += 1
var url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10&page=' + page;
// 2. 配置异步请求
xhr.open('get', url, true);
// 3. 绑定事件回调函数（服务器成功响应后要干什么）
......
Day21-30/code/web1807/example12.html → Day21-30/code/javascript/example12.html
View file @ 7275b755
......@@ -10,13 +10,16 @@
<script src="js/jquery.min.js"></script>
<script>
$(function() {
var page = 0;
$('#ok').on('click', function() {
page += 1;
$.ajax({
'url': 'http://api.tianapi.com/meinv/',
'type': 'get',
'data': {
'key': '772a81a51ae5c780251b1f98ea431b84',
'num': 12
'num': 12,
'page': page
},
'dataType': 'json',
'success': function(jsonObj) {
......
Day21-30/code/demo01/form.html → Day21-30/code/javascript/homework08.html
View file @ 7275b755
......@@ -80,98 +80,6 @@
<span class="hint">我同意<a href="#">《XYZ服务协议》</a></span>
</div>
</form>
<script src="js/mylib.js" ></script>
<script>
(function() {
// 使用正则表达式的字面量语法创建正则表达式对象
var uidRegEx = /^\w{6,20}$/;
var pwdRegEx = /^.{8,20}$/;
var telRegEx = /^1[345789]\d{9}$/;
var uid = $('username');
function checkUsername() {
var uidHint = $('uidHint');
var username = uid.value.trim();
if (uidRegEx.test(username)) {
uidHint.textContent = '√';
uidHint.className = 'hint correct';
return true;
} else {
uidHint.textContent = '用户名由字母数字下划线构成且长度为6-20个字符';
uidHint.className = 'hint incorrect';
return false;
}
}
handleEvent(uid, 'blur', checkUsername);
var pwd = $('password');
function checkPassword() {
var pwdHint = $('pwdHint');
var password = pwd.value;
if (pwdRegEx.test(password)) {
pwdHint.textContent = '√';
pwdHint.className = 'hint correct';
return true;
} else {
pwdHint.textContent = '密码长度为8-20个字符';
pwdHint.className = 'hint incorrect';
return false;
}
}
handleEvent(pwd, 'blur', checkPassword);
var rePwd = $('repassword');
function checkRepassword() {
var rePwdHint = $('rePwdHint');
var password = pwd.value;
var repassword = rePwd.value;
if (repassword.length == 0) {
rePwdHint.textContent = '确认密码不能为空';
rePwdHint.className = 'hint incorrect';
return false;
}
if (repassword == password) {
rePwdHint.textContent = '√';
rePwdHint.className = 'hint correct';
return true;
} else {
rePwdHint.textContent = '密码和确认密码不一致';
rePwdHint.className = 'hint incorrect';
return false;
}
}
handleEvent(rePwd, 'blur', checkRepassword);
var telInput = $('tel');
function checkTel() {
var telHint = $('telHint');
var tel = telInput.value;
if (telRegEx.test(tel)) {
telHint.textContent = '√';
telHint.className = 'hint correct';
return true;
} else {
telHint.textContent = '请输入有效的手机号';
telHint.className = 'hint incorrect';
return false;
}
}
handleEvent(telInput, 'blur', checkTel);
var form = $('login') || document.forms[0];
// 给表单对象绑定表单提交事件
handleEvent(form, 'submit', function(evt) {
evt = evt || window.event;
// 阻止表单提交等到验证通过了之后手动提交表单
evt.preventDefault();
if (!$('agreement').checked) {
alert('请先选中同意《XYZ服务协议》');
return ;
}
// 请注意&&和&之间区别 前者有短路效果后者没有
if (checkUsername() & checkPassword() &
checkRepassword() & checkTel()) {
var target = evt.target || evt.srcElement;
// 如果所有表单数据验证都通过了就提交表单
target.submit();
}
});
}());
</script>
<script src="js/jquery.min.js" ></script>
</body>
</html>
Day21-30/code/web1807/index.html → Day21-30/code/javascript/index.html
View file @ 7275b755
......@@ -51,6 +51,7 @@
<li><a href="homework05.html">练习5：购物车效果（仿京东）</a></li>
<li><a href="homework06.html">练习6：可拖拽的元素</a></li>
<li><a href="homework07.html">练习7：周公解梦（Ajax）</a></li>
<li><a href="homework08.html">练习7：表单验证（正则表达式）</a></li>
</ol>
</body>
</html>
Day21-30/code/web1807/img/thumb-3.jpg deleted 100644 → 0
View file @ 92cd26bd
This diff is collapsed.
Day21-30/res/browser-joke-1.jpeg deleted 100644 → 0
View file @ 92cd26bd
This diff is collapsed.
Day21-30/res/browser-joke-1.png 0 → 100644
View file @ 7275b755
This diff is collapsed.
Day21-30/res/browser-joke-2.jpg deleted 100644 → 0
View file @ 92cd26bd
This diff is collapsed.
Day21-30/res/browser-joke-2.png 0 → 100644
View file @ 7275b755
This diff is collapsed.
Day21-30/res/browser-joke-3.jpg deleted 100644 → 0
View file @ 92cd26bd
This diff is collapsed.
Day21-30/res/browser-joke-3.png 0 → 100644
View file @ 7275b755
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment