theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

aaaa

Browse Source
This commit is contained in:
asd
2021-06-03 10:52:41 +08:00
parent c5f18c6051
commit 907511778b
54 changed files with 3540 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
teaching/heshubao/flex.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/*
flex
*/
*{
margin:0;
padding: 0;
}
.item{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid white;
}
.box{
display: flex; /*声明一个弹性盒子*/
/*内联元素display的默认值是 inline 块级元素的display默认值是block */
/* flex-direction: row<shuiping>/column(shuzhi); 定义主轴方向 */
/* justify-content: start; 定义排列方式*/
/* flex-direction: column; */
/* justify-content: center; */
/* align-items:center; */
/* justify-content: space-around; */
justify-content: space-between;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>

48
teaching/heshubao/float.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
overflow: auto;
}
.item {
width: 100px;
height: 100px;
background-color: black;
border-right: 1px solid white;
float: left;
}
.item1 {
width: 100px;
height: 150px;
background-color: red;
border-right: 1px solid white;
/* float: left; */
/* clear:both; */
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- <div style="clear:both"></div> -->
</div>
<div class="item1"></div>
</body>
</html>

58
teaching/heshubao/float1.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.item {
width: 100px;
height: 100px;
background: blue;
border: 1px solid yellow;
/* float: left; */
display:inline-block
}
.box{
width: 500px;
background-color: white;
border: 0;
}
.item1{
width: 200px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<!-- <div class="item"></div> -->
<div class="item"></div>
<div class="item"></div>
<!-- <div class="item1"></div> -->
<p>浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮
</p>
</div>
<!--
form =》 表单
css
width height margin padding float flex position absolute relative
fixed staicy
-->
</body>
</html>

40
teaching/heshubao/form.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--
action 提交地址
method 请求方式 get/post
-->
<form action="">
商品名称 ：<input type="text" value=""> <br/>
商品价格： <input type="text"> <br />
商品数量： <input type="text"> <br/>
活动价： <input type="text"> <br/>
商品简介： <textarea name="" id="" cols="30" rows="10"></textarea> <br/>
是否上架：<input type="radio" name="shangjia" id="on"> <label for="on">是</label> <input type="radio" name="shangjia" id="off"> <label for="off">否</label> <br/>
类别：<input type="checkbox" id="shi"> <label for="shi">食品</label> <input type="checkbox" id="dian"> <label for="dian">电器</label> <input type="checkbox" id="ri"> <label for="ri">日用品</label> <br/>
产地：<select name="" id="">
<option value="">济南</option>
<option value="">青岛</option>
<option value="">潍坊</option>
<option value="">泰安</option>
</select> <br />
<button>提交</button>
<input type="button" value="保存">
<input type="submit" value="err"> <!-- 提交按钮 -->
<input type="reset"> <!-- 重置 -->
</form>
</body>
</html>

21
teaching/heshubao/git.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<!--
git 操作代码仓库的一个工具
代码仓库：github(国外) gitee (码云)
git init 初始化
git remote -v 检测是否已经连接远程库
git remote add origin url 添加远程库
git pull origin master
-->
</body>
</html>

29
teaching/heshubao/login.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!--
html (结构)
css(样式)
js(交互)
-->
<script>
function save(){
var account=document.getElementById("account").value
var pwd=document.getElementById("pwd").value
// document.write(account)
console.log(account)
console.log(pwd)
// alert('hello 贺树宝')
}
</script>
</head>
<body>
帐号：<input type="text" id="account" value="">
密码：<input type="password" id="pwd">
<button onclick="save()">提交</button>
</body>
</html>

39
teaching/heshubao/margin.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width:200px;
height: 200px;
background: blue;
margin-bottom: 100px;
}
.box2{
width:200px;
height: 200px;
background:yellow;
/* margin-top: 50px; */
padding-top: 50px;
}
.box{
/* border-bottom: 1px solid white; */
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>

36
teaching/heshubao/position.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 500px;
background: blue;
margin-top: 50px;
margin-left: 90px;
position:sticky;
}
.item{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>

94
teaching/heshubao/zishiying.html Normal file
View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
; (function (designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function () {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function (e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
/*
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
*/
</script>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background: blue;
}
.box2{
width: 1rem;
height: 1rem;
background: yellow;
}
/*
@media (max-width:1000px) {
body {
background: blue;
}
} */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

48
teaching/lhj/kejian/js/bibao.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
var y=2
function fn(){
var x=1
// console.log(x+y) //3
function fn1(){
x=x+32
console.log(x+y)
}
return fn1
}
function m(){
var p=0
console.log(y)
return y
}
var z=fn()
z()
var w=m() //w=undefined
console.log(fn())
// var z=fn()
// console.log(z.toString())
// z() //从全局访问函数fn中的变量 x =====> 闭包
// 闭包： 有权访问另一个函数作用域中变量的函数
// 闭包形式：函数嵌套函数 并且返回内层的函数体
// 闭包作用：1. 可以读取函数内部的变量
// 2.让这些变量的值始终保持在内存中
// 造成的问题 1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
// 2. 不要随便改变父函数内部变量的值。(闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value）)
</script>
</head>
<body>
</body>
</html>

52
teaching/lhj/kejian/js/digui.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<script>
//递归 : 函数中 自己调用自己
function jiecheng(n){
var jieguo=1
for(var i=n;i>0;i--){
jieguo=jieguo*i
}
return jieguo
}
// console.log(jiecheng(5))
// 阶乘 5 =〉5*4*3*2*1
function jc(m){
if(m<=1){
return 1
}else{
return m*jc(m-1)
}
}
// function jc1(m){
// if(m<=1){
// return 1
// }else{
// return m*jc(m-1)
// }
// }
// 5*jc(4)
// 4*jc(3)
// 3*jc(2)
// 2*jc(1)
// 2*1
// console.log(jc(5))
var jc1=jc
jc=null;
console.log(jc1(5))
</script>
</head>
<body>
</body>
</html>

43
teaching/lhj/kejian/js/dom.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<p id="greet1" class="greet">hello world</p>
<p id="greet2" class="greet">hello world
<span id="yu">asd</span>
</p>
<div id="draw"></div>
<script>
// // 获取元素
// var greet= document.getElementById("greet1") //id
// var greet1=document.getElementsByClassName("greet")
// // var gre=document.getElementsByName("xxx")
// // var gre1=document.getElementsByTagName 标签
// // 除了id之外的获取方式 其他的获取结果都是数组 id的获取方式是单个元素
// console.log(greet1)
// // div.parentsibling
//创建节点
var squeare=document.createElement("div");
squeare.innerHTML="我是div"
squeare.style.color="red"
squeare.setAttribute("name","mydiv") //setattribute 设置属性 第一个参数是属性名 第二个参数是属性值
var draw=document.getElementById("draw")
draw.append(squeare)
console.log(squeare)
var greet2=document.getElementById("greet2")
var span=document.getElementById("yu")
greet2.remove(yu)
// greet2.removeChild(yu) //删除子元素
</script>
</body>
</html>

66
teaching/lhj/kejian/js/domlianxi.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<input type="text" id="name" value="">
<button onclick="add()">添加</button>
<table id="biao">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</table>
<script>
var table1 = document.getElementById("biao");
var info = [{ name: "张三", sex: 1, age: 23 }, { name: "刘亦菲", sex: 2, age: 38 }, { name: "蔡徐坤", sex: 1, age: 24 }]
function show() {
console.log(info.length)
var len=info.length
for (let i = 0; i < info.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = "<td>" + info[i].name + "</td><td>" + info[i].sex + "</td><td>" + info[i].age + "</td><td><button onclick='del("+i+")'>删除</button></td>";
table1.append(tr)
}
// for (let i = 0; i < info.length; i++) {
// var tr = document.createElement("tr");
// tr.innerHTML = "<td>" + info[len-1].name + "</td><td>" + info[len-1].sex + "</td><td>" + info[len-1].age + "</td><td><button onclick='del("+(len-1)+")'>删除</button></td>";
// table1.append(tr)
// }
}
show()
function add() {
table1.innerHTML="<tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr>"
var name=document.getElementById("name").value;
console.log(name)
info.push({name:name,sex:2,age:18})
show()
}
function del(e){
console.log(e)
table1.innerHTML="<tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr>"
info.splice(e+1,1)
// e+1
show()
}
</script>
</body>
</html>

48
teaching/lhj/kejian/js/domshijian.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.btn{
background:blue
}
</style>
</head>
<body>
<button>点我弹窗</button>
<script>
// 绑定事件的方式
// 1. 在html元素里面直接注册事件 <button onclick="tijiao()">提交</button>
// 2. 从js script标签里面 先选中目标元素 然后通过选中元素.事件注册 来完成注册事件：
// btn[0].ondblclick=function (){
// alert("asd")
// }
// 3. 从js script标签里面 先选中目标元素 然后通过选中元素.事件注册 在注册事件的时候直接使用 addeventlistener
window.onload=function(){
console.log("我再加载")
}
var btn=document.getElementsByTagName("button")
// btn[0].ondblclick=function (){
// alert("asd")
// }
btn[0].addEventListener("click",tanchu)
btn[0].style.width="200px"
console.log(btn[0].style.width)
btn[0].className="btn"
console.log(btn[0].style.background)
function tanchu(){
// alert("asd")
console.log(event)
}
// keypress 长按 键盘事件
</script>
</body>
</html>

133
teaching/lhj/kejian/js/note/24-闭包.md Normal file
View File

@@ -0,0 +1,133 @@
## 闭包的引入
我们知道，变量根据作用域的不同分为两种：全局变量和局部变量。
- 函数内部可以访问全局变量和局部变量。
- 函数外部只能访问全局变量，不能访问局部变量。
- 当函数执行完毕，本作用域内的局部变量会销毁。
比如下面这样的代码：
```js
function foo() {
let a = 1;
}
foo();
console.log(a); // 打印报错：Uncaught ReferenceError: a is not defined
```
上方代码中，由于变量 `a` 是函数内的局部变量，所以外部无法访问。
但是，在有些场景下，我们就是想要在函数外部访问函数内的局部变量，那要怎么办呢？这就需要引入闭包的概念。
## 闭包的概念和代码举例
### 闭包的概念
**闭包**（closure）：指有权**访问**另一个函数作用域中**变量**的**函数**。
上面这个概念，出自《JavaScript 高级程序设计（第 3 版）》这本书。上面的概念中指出，闭包是一种函数；当然，你可以**把闭包理解成是一种现象**。具体解释如下。
简单理解就是：如果**这个作用域可以访问另外一个函数内部的局部变量**，那就产生了闭包（此时，你可以把闭包理解成是一种现象）；而另外那个作用域所在的函数称之为**闭包函数**。注意，这里强调的是访问**局部变量**哦。
### 闭包代码举例
代码举例：
```js
function fn1() {
let a = 10;
function fn2() {
console.log(a);
}
fn2();
}
fn1();
```
打印结果：
```
10
```
上方代码中，函数 fn2 的作用域 访问了 fn1 中的局部变量，那么，此时在 fn1 中就产生了闭包，fn1 称之为闭包函数。
### 在 chrome 浏览器控制台中，调试闭包
上面的代码中，要怎么验证，确实产生了闭包呢？我们可以在 chrome 浏览器的控制台中设置断点，当代码执行到 `console.log(a)`这一行的时候，如下图所示：
![](http://img.smyhvae.com/20200703_2055.png)
上图中， Local 指的是局部作用域，Global 指的是 全局作用域；而 Closure 则是**闭包**，fn1 是一个闭包函数。
## 闭包的作用：可以读取函数内部的变量
我们来看看下面这段闭包的代码：
```js
function fn1() {
let a = 20;
function fn2() {
console.log(a);
}
return fn2;
}
const foo = fn1(); // 执行 fn1() 之后，会得到一个返回值。foo 代表的就是 fn2 函数
foo();
```
上方代码中，foo 代表的就是整个 fn2 函数。当执行了 `foo()` 语句之后（相当于执行了 ），fn1 函数内就产生了闭包。
一般来说，在 fn1 函数执行完毕后，它里面的变量 a 会立即销毁。但此时由于产生了闭包，所以 **fn1 函数中的变量 a 不会立即销毁，因为 fn2 函数还要继续调用变量 a**。只有等所有函数把变量 a 调用完了，变量 a 才会销毁。
而且，可以看出， 在执行 `foo()`语句之后，竟然能够打印出 `20`，这就完美通过闭包实现了：全局作用局成功访问到了局部作用域中的变量 a。
因此，我们可以看出，闭包的主要作用就是：延伸了变量的作用范围。
上面的代码也可以简写成：
```js
function fn1() {
let a = 20;
return function () {
console.log(a);
};
}
const foo = fn1(); // 执行 fn1() 之后，会得到一个返回值。这个返回值是函数
foo();
```
## 闭包的作用：让这些变量的值始终保持在内存中，不会在函数调用后被自动清除。
```
function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000
```
解释：
> 在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
> 为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

BIN
teaching/lhj/kejian/js/note/原型链.assets/image-20210513162836369.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
teaching/lhj/kejian/js/note/原型链.assets/image-20210513165237126.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

74
teaching/lhj/kejian/js/note/原型链.md Normal file
View File

@@ -0,0 +1,74 @@
# 原型链和原型继承
在学习原型和原型链之前 我们先来复习一下 通过构造函数来创建对象的方式
### 构造函数
任何函数都可以做为构造函数使用
构造函数和普通函数的区别主要在于 调用的时候的差异
普通函数：
```
function create(){
this.role="admin"
}
create()
```
构造函数：
```
function create(){
this.role="admin"
}
var juese=new create()
```
此处的new 也属于运算符的一种 作用是创建一个用户定义的对象类型或具有构造函数的内置对象的实例
* new 操作符的过程
new 关键字会进行如下的操作：
1. 创建一个空的简单JavaScript对象（即{}）；
2.链接该对象（设置该对象的constructor）到另一个对象 ；
3. 将步骤1新创建的对象作为this的上下文 ；
4. 如果该函数没有返回对象，则返回this。
* 分析 ```new foo() ``` 的执行过程
1. 一个继承自 Foo.prototype 的新对象被创建。
2. 使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
3.由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）
接下来我们把上面创建的对象打印一下看看会出现什么结果
![image-20210513165237126](E:\web\lessons\课件\teaching\lhj\kejian\js\note\原型链.assets\image-20210513165237126.png)
然后我们会发现在我们定义的role属性下面多了一个```__proto__``` 属性 这个```__proto__```属性指的就是我们当前对象的原型
### 原型对象
无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。普通对象没有 prototype，但有``` __proto__``` 属性。
```
function Person() {
}
Person.prototype.name = 'Perty';
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
delete person.name
console.log(person.name) // Perty
```

40
teaching/lhj/kejian/js/object.html
View File

@@ -48,14 +48,13 @@
// 对象 键值对（无序） 数组（有序）
// name sex age 这种类似于变量的东西叫属性
// sayzao saywan这种对象中的函数 叫方法
// 添加属性
var obj={
name:"qwe",
sex:"男",
age:22,
sayzao:function(){
alert("早安")
},
saywan:function(){
alert("晚安")
@@ -65,47 +64,10 @@
// obj.sayzao()
// sayzao()
// 新增属性 obj（对象的名字）.属性名=属性值
// 新增方法 obj(对象名).方法名=匿名函数
console.log(obj.name)
obj.height=185;
obj.face="好看"
obj.zhuangkuang="单身"
obj.xiaozhushou=function(){
alert("多喝岩浆")
}
obj.cooking=function(time){
if(time==7){
alert("我正在做早饭");
}else if(time==11){
alert("我正在做午饭")
}else if(time==18){
alert("我在做晚饭")
}
}
obj.clean=function(){
alert("我在打扫卫生")
}
obj.wash=function(){
alert("我在把衣服扔到洗衣机里")
}
obj.changename=function(){
this.name="张三"
}
// obj.cooking(7)
// obj.sayzao()
// obj.clean()
// obj.xiaozhushou()
// obj.cooking(11)
// obj.wash()
// obj.cooking(18)
delete obj.saywan
console.log(obj)
</script>
</body>

62
teaching/lhj/kejian/js/this.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// "use strict";
// this
// 1. 谁调用 就指向谁 指向目标是一个对象
// 2. 如果没有对象调用他 就指向全局对象（window）
var a=1
// var name;
// console.log(a)
// console.log(window.a)
// console.log(this.a) //1
// var name="华晨宇"
var obj={
name:"asd",
echoname:function(){
console.log(this.name)
}
}
// obj.echoname()
function a(){
var user = "追梦子";
console.log(this.user);
console.log(this); // window
}
// a();
function myFunction() {
"use strict";
console.log(this);
}
// myFunction()
// function fnza(){
// console.log(this.name)
// }
// fnza()
// fnza.name="asd"
// window.name="qwe"
// console.log(fnza.name)
function foo() {
console.log( this.a ,"jkjkjkjkjk");
}
var obj = {
a: 2,
foo: foo
};
var a = "xxxxx"
setTimeout( obj.foo ,100);
</script>
</head>
<body>
</body>
</html>

58
teaching/lhj/kejian/js/yuanxing.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// 构造函数
function create(){
this.role="admin"
}
// create()
var obj= new create()
// new 关键字的操作过程：
// 1. 创建一个空对象
// 2. 构造函数中的this指向这个 空对象
// 3. 执行构造函数中的代码 给新对象添加属性和方法
// 4. 返回这个新对象
// 只要是个函数 都有prototype 属性
// 只要是个对象 都有__proto__ 属性（左右两边都是两个下划线）
// 这两个访问的都是对象的原型
// animal cat
function animal(){
this.run=function(){
console.log("我跑得起来")
}
}
var all=new animal()
function cat(kind,hasmao,food){
this.kind=kind;
this.hasmao=hasmao;
this.food=food;
this.jiao=function(sheng){
console.log(sheng)
}
}
var miao=new cat("哺乳类",1,"鱼")
cat.prototype=all
miao.run()
// 顺序
// 先写父级的构造函数
// 创建父级对象
// 写子级的构造函数
// 指定子级的原型
// 创建子级对象
</script>
</head>
<body>
</body>
</html>

105
teaching/lhj/kejian/this.md Normal file
View File

@@ -0,0 +1,105 @@
# this
　首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上** this的最终指向的是那个调用它的对象 **
例1
```
function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this);　　//Window
}
window.a();
//判断this跟this所处的函数没有关系，结果取决于哪个对象调用的他 最外层的对象是window
```
例2
```
var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn();
// fn外部是对象O，访问的是this.user 即o.user => o.user的值是“追梦子”
```
例3
```
var user="pplok
var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn();
```
例4
```
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();
```
总结：
情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。
　　情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
　　情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
例5
```
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); // undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();
```
判断this时，需要看函数调用的位置，而不是我们定义函数的位置
this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的
this 遇到return 时
```
function fn()
{
this.user = '追梦子';
return
}
var a = new fn;
console.log(a.user); //undefined
```
函数return的值为对象时，this就指向 这个被return的对象

50
teaching/wanzhaoyi/hanshu.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
function jiemi(arr){
var newarr=[]
if(arr.length==4){
for(let i=0;i<arr.length;i++){
arr[i]=parseInt(arr[i])
arr[i]=(arr[i]+5)%10
}
console.log(arr)
newarr[0]=arr[3]
newarr[1]=arr[2]
newarr[3]=arr[0]
newarr[2]=arr[1]
}
console.log(newarr,"new")
}
function check(str){
var arr=str.split('.')
var res;
if(arr.length==4){
for(let i=0;i<arr.length;i++){
if(Number(arr[i])>0 && Number(arr[i])<255){
res=true
}else{
res=false
}
}
if(res){
console.log("是ipv4")
}else{
console.log("不是ipv4")
}
}else{
console.log("不合规")
}
}
</script>
</body>
</html>

58
teaching/wanzhaoyi/js/chuangjianduixiang.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
// 1. 字面量创建对象
var ahuang = {
kind: "dog",
food: "杂食",
kanjia: function () {
console.log("汪汪汪")
},
chaijia: function () {
console.log("二哈的胜利！")
}
}
// 2.工厂模式
function create(kind,food,kanjia,chaijia){
var newobj={}
newobj.kind=kind
newobj.food=food
newobj.kanjia=kanjia
newobj.chaijia=chaijia
return newobj
}
var fugui=create("dog","啥都吃",function(){
console.log("汪汪队立大功")
},function (){
console.log("狗肉店见")
})
console.log(ahuang)
console.log(fugui)
// 3.构造函数
function creator(kind,food,kanjia,chaijia){
this.kind=kind;
this.food=food;
this.kanjia=kanjia;
this.chaijia=chaijia
}
var dali= new creator("dog","杂食",function(){console.log("dali会看家")},function (){console.log("大力不拆家")})
console.log(dali)
</script>
</body>
</html>

39
teaching/wanzhaoyi/js/digui.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// 递归 就是在函数内 调用自身
// 阶乘的函数
// 5的阶乘 = 5*4*3*2*1
// n的阶乘 = n*（n-1）*(n-2)*(n-3)...*1
// n*(n-1)*(n-1-1)*(n-1-1-1)*(n-1-1-1-1)....*1
function jc(n){
if(n==1){
return 1;
}else{
return n*jc(n-1)
}
}
// 4
// 4*jc(4-1) 4*jc(3)
// 4*jc(3) 4*3*jc(3-1)
// 4*3*jc(2)
// 4*3*2*jc(2-1)
// 4*3*2*jc(1)
// 4*3*2*1
var jiecheng=jc
jc=null
var res=jiecheng(5)
console.log(res)
</script>
</head>
<body>
</body>
</html>

42
teaching/wanzhaoyi/js/dom.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<!--
dom
document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName("div")
-->
<div class="box">
<p>hello</p>
<span>aaa</span>
</div>
<script>
var box=document.getElementsByTagName("div")
console.log(box[0].innerText)
console.log(box[0].innerHTML)
// innerHtml => 带着html代码来的 解析html 代码
// box[0].innerText="前端"
console.log(box[0].children)
var zi=document.getElementsByTagName("span")
console.log(zi[0].parentNode)
// 创建节点
var ele=document.createElement("div")
ele.innerHTML="消灭人类暴政，世界属于三体"
console.log(ele)
ele.setAttribute("style","color:red")
box[0].append(ele) //插入元素
zi[0].remove() //删除元素
</script>
</body>
</html>

48
teaching/wanzhaoyi/js/duixiang.htm Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// 对象
var obj={
name:"刘亦菲",
age:28,
sex:"女",
hobby:["看电影","听音乐","做美食"],
waimao:"长头发大眼睛小嘴巴",
zuofan:function(){
console.log("我在做饭")
},
shuawan:function(){
console.log("我在刷碗")
},
xuexi:function(){
console.log("我在学习")
}
}
// 属性：name age sex hobby waimao
// 方法 zuofan shuawan xuexi
obj.kandianying=function(){
console.log("看电影啦")
}
console.log(obj)
obj.name="杨幂"
obj.shuawan=function(){
console.log("你去刷碗")
return 123
}
var t=obj.shuawan()
console.log(t,9990)
delete obj.xuexi
</script>
</head>
<body>
</body>
</html>

40
teaching/wanzhaoyi/js/hanshu.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// 创建一个函数
function add(x,y){
return x+y
}
// 2 函数表达式
// x,y ===> 形参
var add=function (x,y){
console.log(arguments.length) //函数参数的个数
console.log(arguments.callee)
return x+y
}
// add(1,1)
// add // => 函数体
// add(1,2) // => 函数执行 并返回执行结果（返回值）
// 1,2 是add函数的实参
// 立即执行函数
(function (e){
console.log("我是匿名函数啦啦啦啦啦啦")
}(34))
// 立即执行函数 的执行括号加在里面！！！！！
</script>
</head>
<body>
</body>
</html>

22
teaching/wanzhaoyi/js/jisuanqi.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
function add(){
var num=document.getElementsByClassName("num")
console.log(num[0].value,'+',num[1].value)
console.log(Number(num[0].value)+Number(num[1].value))
}
</script>
</head>
<body>
<input type="text" value="" class="num">
<input type="text" value="" class="num"><br/>
<button onclick="add()">加</button>
</body>
</html>

44
teaching/wanzhaoyi/js/jsjichu.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" contrent="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./jsjichu.js"></script> 外部引入-->
<script>
//js代码
// 单行注释
/*
多行注释
hivskj
*/
// js 组成
// ESMAScript(核心)
// DOM(文档对象模型) 操作dom节点
// BOM(浏览器对象模型) 浏览器相关信息
</script>
</head>
<body>
<span>hello</span>
<script>
// alert("这是弹窗")
// 带输入框的弹窗 带确定取消的弹窗
document.write("你好") //打印在页面上
console.log("javascript")
// 变量： 值可以改变 var let
// 常量： 值不能改变 定义的时候需要赋初始值 const
// 变量命名规则
// 1. 只能包含 数字 字母 下划线 $
// 2. 不能用数字开头
// 3. 不能用js关键字保留字
var span=7
console.log(span)
</script>
</body>
</html>

42
teaching/wanzhaoyi/js/shujuleixing.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// js 数据类型
// 基本数据类型 ：number string boolean undefined null
// 复杂数据类型: object
// var arr=new Array()
// var fn=new Function()
// 基本数据类型和复杂数据类型的区别
// 检测数据类型
// 由低到高 typeof instanceof Object.prototype.tostring.call
// typeof instanceof Object.prototype.toString.call
var a=9
var type=Object.prototype.toString.call(a)
console.log(Object.prototype.toString.call([1,2,3,4]))
console.log(Object.prototype.toString.call(9),"mmmn")
console.log(type)
console.log(9 instanceof Number)
console.log(new Number(9) instanceof Number)
console.log([1,2,3,4] instanceof Array)
console.log(function fn(){} instanceof Function)
// instanceof 用法 被检测的值 instanceof 猜测的数据类型
// 返回的是true/false
var key=123
console.log(typeof key)
console.log(typeof null)
console.log(typeof undefined)
console.log(typeof [4,3,1])
console.log(typeof function fm(){})
</script>
</head>
<body>
</body>
</html>

55
teaching/wanzhaoyi/js/shuzu.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// 数组 =》集合
// 创建数组
var arr=[1,2,3,4,5,6] //数组的标志是[]
arr.splice(2,1)
arr.splice(2,0,3)
var arr1=[[11,12,13],[22,23],[[333,444,555]]]
// console.log(arr[0])
// console.log(arr1[0][1])
// 数组访问元素 数组名 +[下标] 下标从0开始 依次递加
// 遍历所有的数组元素
// 1.for循环
// for(var i=0;i<arr.length;i++){
// console.log(arr[i])
// }
// for(var i=0;i<arr1.length;i++){
// console.log(arr1[i] instanceof Array)
// if(arr1[i] instanceof Array){
// for(var m=0;m<arr1[i].length;m++){
// console.log(arr1[i][m])
// if(arr1[i][m] instanceof Array){
// console.log("xia")
// for(var n=0;i<arr1[i][m].length;n++){
// console.log(arr1[i][m][n])
// }
// }
// }
// }
// }
// 2. for in 循环
for(var key in arr){
console.log(key,arr[key])
}
// key 键 0 1 2...
// arr[key]值 1 2 3..
//数组方法
</script>
</head>
<body>
</body>
</html>

45
teaching/wanzhaoyi/js/yuanxinglian.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
function timi(){
this.start=function(){
console.log('timi')
}
}
var tianmei=new timi()
function create(age,name,hobby){
this.age=age;
this.name=name;
this.hobby=hobby
}
create.prototype=tianmei
create.prototype.run=function(){
console.log("我会跑")
}
// create.prototype.timi=new timi();
console.log(create.prototype)
var zhansan = new create("24","zhansan","book")
var xiaoqiao=new create("18","小乔","蹲草")
console.log(zhansan)
zhansan.run()
xiaoqiao.run()
// console.log(zhansan.__proto__)
// 对象访问原型是通过 __proto__ 属性
// 函数访问 原型是通过 prototype属性
</script>
</head>
<body>
</body>
</html>

34
teaching/wanzhaoyi/shijian.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<!-- <div onclick="keyuo()"></div> -->
<script>
var shenti = document.getElementsByTagName("body")[0]
// document.body => 选中body
console.log(shenti);
// document 首字母不大写
var ele = document.createElement("div");
// setattribute
// 不要在html里面用关于样式的属性
ele.setAttribute("style","width:100px;height:100px;background-color:red")
ele.innerHTML="hello"
console.log(ele)
shenti.append(ele)
// ele.onclick=function(){
// alert("world")
// }
ele.addEventListener("click",function(){
alert("world")
})
</script>
</body>
</html>

239
teaching/wanzhaoyi/suning.html Normal file
View File

@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{
margin: 0;
padding:0
}
.nav{
background: #f5f5f5;
height: 35px;
}
.daohang{
width: 1190px;
margin:0 auto;
}
.nav-item{
float: left;
width:85px;
/* height:35px; */
list-style: none;
text-align: center;
cursor:pointer;
line-height: 35px;
color:#666;
font-size: 12px;
/* background: gold; */
}
.nav-item:hover{
background-color: white;
}
.right li{
float:right
}
.nav_bottom{
width:93%;
margin:0 auto;
border: 1px solid #666;
overflow: auto;
display: none;
/* visibility: hidden; //可见还是不可见 */
}
.nav_b_1l{
float: left;
padding-left: 20px;
}
.nav_b_1r{
margin-top: 21px;
float: left;
margin-left:30px;
}
.title{
font-weight: bold;
}
.nav_b_1 dd{
margin-top: 5px;
}
.nav_b_1{
padding-right: 30px;
border-right: 1px solid red;
overflow: auto;
float: left;
font-size: 12px;
}
</style>
<style>
.tab{
width: 450px;
overflow: auto;
/* padding-bottom: 10px; */
border-bottom: 1px solid #666;
}
.tab-item{
float: left;
margin-left: 40px;
cursor: pointer;
padding-bottom: 10px;
border-bottom: 2px solid #666;
}
.selected{
border-bottom: 2px solid red;
}
</style>
<script>
function enter(){
// console.log("enter")
var frame=document.getElementsByClassName("nav_bottom");
console.log(frame)
frame[0].setAttribute("style","display:block")
}
function out(){
// console.log("enter")
var frame=document.getElementsByClassName("nav_bottom");
console.log(frame)
frame[0].setAttribute("style","display:none")
}
function xz(e){
console.log(e)
var tablist=document.getElementsByClassName("tab-item")
for(var i=0;i<tablist.length;i++){
console.log(tablist[i],11)
tablist[i].setAttribute("class","tab-item")
}
tablist[e].setAttribute("class","tab-item selected")
// setAttribute(属性名,属性值) 给选中元素加属性
// 不能用for in 循环 他会把对象多余的属性或者方法都取出来
}
</script>
</head>
<body>
<div class="nav">
<div class="daohang">
<ul class="left">
<li class="nav-item" onmouseover="enter()" onmouseout="out()">网站导航</li>
<li class="nav-item">网站导航</li>
<li class="nav-item">网站导航</li>
</ul>
<ul class="right">
<li class="nav-item ">网站导航6</li>
<li class="nav-item">网站导航5</li>
<li class="nav-item">网站导航4</li>
<li class="nav-item">网站导航3</li>
<li class="nav-item">网站导航2</li>
<li class="nav-item">网站导航1</li>
</ul>
</div>
</div>
<div class="nav_bottom">
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
</div>
<div class="tab">
<p class="tab-item selected" onclick="xz(0)">全部</p>
<p class="tab-item" onclick="xz(1)">待付款</p>
<p class="tab-item" onclick="xz(2)">待发货</p>
<p class="tab-item" onclick="xz(3)">待收货</p>
<p class="tab-item" onclick="xz(4)">待评价</p>
</div>
</body>
</html>

155
teaching/wanzhaoyi/yubianyi.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// var a=1
// function fn(e){
// var b=1
// c=0
// var a="l"
// console.log(window.a)
// }
// fn("a")
// console.log(e)
// console.log(c)
// console.log(b)
// a 全局变量 全局作用域
// b 局部变量（局部作用域）
// GO{
// a:undefined,
// fn:function(){}
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:undefined
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:"a"
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:"a"
// }
// js 运行三部曲：语法分析 预编译 解释执行
// function fn1(){
// console.log(a) //window.a
// var a=1 //window.a
// // console.log(a)
// }
// fn1()
//AO{}
//AO{
// a：undefined==> 1
// }
// GO{
// fn:function
// }
// 预编译
// 1.分为 全局（GO）和局部 (AO)
// 2.发生什么（AO）
// 1. 创建AO对象
// 2. 去找形参 变量声明 =>undefined
// 3. 形参实参相统一
// 4. 找函数声明 值赋予函数体
// function fn(a) {
// console.log(a); function a() { }
// var a = 666;
// console.log(a); 666
// function a() { }
// console.log(a); 666
// var b = function () { };
// console.log(b); function() { }
// function c() { }
// }
// fn(1);
// AO{}
// AO{
// a:undefined,
// b:undefined,
// }
// AO{
// a:1,
// b:undefined,
// }
// AO{
// a:Function,
// b:undefined,
// c:function
// }
var a = 1;
console.log(a);
function test(a) {
console.log(a);
var a = 123;
console.log(a);
function a() { }
console.log(a);
var b = function () { }
console.log(b);
function d() { }
}
var c = function () {
console.log("I at C function");
}
console.log(c);
test(2);
// AO{}
// AO{
// a:undefined,
// b:undefined,
// c:undefined
// }
// AO{
// a:2,
// b:undefined,
// c:undefined
// }
// AO{
// a：function，
// d:function,
// b:undefined,
// c:undefined
// }
</script>
</head>
<body>
</body>
</html>

41
teaching/林锦绣/duixiang.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
var obj={
shopname:"西红柿",
price:1.00,
kucun:"30个",
chandi:"寿光",
eat:function(){
console.log("我可以被生吃")
},
cook:function(){
console.log("可以炒着吃")
},
zhazhi:function(){
console.log("我可以被榨汁")
}
}
console.log(obj)
obj.eat()
obj.cook();
obj.zhazhi();
console.log(obj.shopname);
obj.gaoguang=function(){
console.log("火山下大雪")
}
obj.gaoguang()
obj.shopname="火山"
delete obj.kucun
console.log(obj)
</script>
</body>
</html>

22
teaching/林锦绣/form.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<input type="text" value="">
<script>
// 1.选中目标元素 2. 取出value的值
// 1.选中目标元素 除了通过id来取之外，其他取出来的值都是一些集合（数组）
// id具有唯一性 所以通过id来取的结果 就是单个元素
var info=document.getElementsByTagName("input")
console.log(info)
document.write("值为"+info[0].value)
alert(info[0].value)
prompt("fdgf")
</script>
</body>
</html>

79
teaching/林锦绣/js.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// javascript
// js 组成：ECMAscript BOM DOM
// 数据类型：两种 简单数据类型：
// Number String Boolean null undefined
// 复杂数据类型
// Object
// Array Function
// var arr=new Array()
// var fun=new Function()
// 所以array 和function 都是object的实例
// 检测数据类型
// typeof instanceof object.prototype.tostring.call
var a=0
var s=Object.prototype.toString
console.log(s.call(a))
// 变量
// 命名规则 1. 只能包含字母数字下划线 $ 2. 数字不能开头 3. 不能有关键字 保留字
// 变量用var 声明
// const 常量 常量的值不能改变 所以在声明的时候 就应该给他附初始值
// 交互
// 1. console.log 输在控制台上 document.write 输出在页面上 alert() 弹窗
// 补充： 带着确认取消的弹窗 带着输入框的弹窗
// 运算符
// 分类： 按元来分 能操作几个数就是几元运算符
// 一元运算符： a++ a-- --a ++a 自增自减 !a 逻辑非
// 三元运算符 三目运算 ?:
// 二元运算符：+ - * / % || && ! > < == === >= <= = += -= /= *= %=
// == === 区别 相等的时候 不会比较数据类型 (会发生隐式类型转换) 全等的时候 不会发生隐式类型转换 在比较的时候会比较数据类型
// 运算符优先级
// ()
// .(对象属性访问) [](数组元素访问) new<带参数> ()<函数调用>
// new<不带参数>
// ++(后置 ) --（后置）
// ! +( 一元 正) -（一元 负） ++（前置） --（前置） tyoeof delete
// * / %
// 、 + - （加减）
// > < >= <= in instanceof
// == != === !==
// &&
// ||
// ?: = += -= *= /= %=
// ，
var age=10
console.log(age=="10")
console.log(age==="10")
var str=""
// if (age>18){
// str="欢迎光临"
// }
// else{
// str="拒绝进入"
// }
str=age>18?"欢迎光临":"拒绝进入"
document.write(str)
</script>
</head>
<body>
</body>
</html>

46
teaching/林锦绣/xunhuan.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
// while
// for
// for in
// do while
// 1.while
// var a=0
// while(a<=100){
// console.log(a)
// a++
// }
// 2. do while
// var a=0
// do{
// console.log(a)
// a++
// }while(a<=100)
// 3. for
// for(var a=0;a<=100;a++){
// console.log(a)
// }
// var arr=[1,2,3,4,5]
// for(var i in arr){
// console.log(i,arr[i])
// }
// while(true){
// }
</script>
</body>
</html>