更新
This commit is contained in:
parent
011d9328b0
commit
c5f18c6051
BIN
csspress/pdfs/5.自适应和响应式.pdf
Normal file
BIN
csspress/pdfs/5.自适应和响应式.pdf
Normal file
Binary file not shown.
@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>{{str}}</div>
|
||||
<div v-html="str"></div>
|
||||
name<input type="text" v-model="name">{{name}}
|
||||
<div v-if="age>=18">欢迎光临</div>
|
||||
<!-- <div v-else-if="sss"></div> -->
|
||||
<div v-else>禁止进入</div>
|
||||
<div v-for="(i,j) in arr" :key="j">
|
||||
{{i}}{{j}}
|
||||
</div>
|
||||
<nava ming="xxx"></nava>
|
||||
<table>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>序号</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in arr" :key="index">
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{index}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -17,20 +19,26 @@
|
||||
// v-on(@)绑定是事件 v-bind(:) 绑定属性
|
||||
// v-html 解析html v-if v-else v-else-if 条件
|
||||
// 循环语句 v-for
|
||||
// npm 命令 npm run serve
|
||||
// npm 命令 npm run serve
|
||||
|
||||
|
||||
// app引用了 nava
|
||||
// nava 被app 引用
|
||||
// 被引用的是子组件 引用的是父组件
|
||||
// 父组件引用子组件
|
||||
|
||||
|
||||
import nav from "./components/nav"
|
||||
export default {
|
||||
name: 'App',
|
||||
data(){
|
||||
return{
|
||||
str:"<p>罗小黑</p>",
|
||||
name:"",
|
||||
age:16,
|
||||
arr:[1,2,3]
|
||||
arr:[{name:"asd"},{name:"小明"},{name:"小红"},{name:"小兰",age:21}]
|
||||
}
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
components:{
|
||||
"nava":nav //组件名字不能和html标签一样
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
36
teaching/jwl/课件/vue/ceshi/src/components/nav.vue
Normal file
36
teaching/jwl/课件/vue/ceshi/src/components/nav.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li>首页</li>
|
||||
<li>关注</li>
|
||||
<li>推荐</li>
|
||||
<li>热点</li>
|
||||
<li>个人中心</li>
|
||||
</ul>
|
||||
{{ming}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"nav",
|
||||
props:{
|
||||
ming:{
|
||||
type:String,
|
||||
default:"" //默认值
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ul{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
li{
|
||||
width:40px;
|
||||
height:30px;
|
||||
}
|
||||
</style>
|
||||
35
teaching/lhj/kejian/js/hanshu.html
Normal file
35
teaching/lhj/kejian/js/hanshu.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!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){
|
||||
// x,y => 形参
|
||||
console.log(x+y)
|
||||
return //return 语句就是函数的结束语句 他后面的语句一定是不执行的
|
||||
console.log("五一过完了")
|
||||
}
|
||||
|
||||
// 函数表达式
|
||||
var add1=function(x,y){
|
||||
console.log(x+y)
|
||||
}
|
||||
|
||||
var result=add1(1,2);
|
||||
// 1，2 实参
|
||||
console.log(result);
|
||||
|
||||
(function(){
|
||||
document.write("lijizhixing")
|
||||
})();
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
265
teaching/lhj/kejian/js/note/this.md
Normal file
265
teaching/lhj/kejian/js/note/this.md
Normal file
@ -0,0 +1,265 @@
|
||||
# 彻底理解js中this的指向，不必硬背。
|
||||
|
||||
首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。
|
||||
|
||||
为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然如果你有兴趣也可以看看，毕竟这是js中必须要掌握的东西。
|
||||
|
||||
|
||||
|
||||
例子1：
|
||||
|
||||
```
|
||||
function a(){
|
||||
var user = "追梦子";
|
||||
console.log(this.user); //undefined
|
||||
console.log(this); //Window
|
||||
}
|
||||
a();
|
||||
```
|
||||
|
||||
|
||||
按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可以证明。
|
||||
|
||||
|
||||
```
|
||||
function a(){
|
||||
var user = "追梦子";
|
||||
console.log(this.user); //undefined
|
||||
console.log(this); //Window
|
||||
}
|
||||
window.a();
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
和上面代码一样吧，其实alert也是window的一个属性，也是window点出来的。
|
||||
|
||||
例子2：
|
||||
|
||||
```
|
||||
var o = {
|
||||
user:"追梦子",
|
||||
fn:function(){
|
||||
console.log(this.user); //追梦子
|
||||
}
|
||||
}
|
||||
o.fn();
|
||||
|
||||
```
|
||||
|
||||
这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。
|
||||
|
||||
|
||||
|
||||
其实例子1和例子2说的并不够准确，下面这个例子就可以推翻上面的理论。
|
||||
|
||||
如果要彻底的搞懂this必须看接下来的几个例子
|
||||
|
||||
|
||||
例子3：
|
||||
|
||||
```
|
||||
var o = {
|
||||
user:"追梦子",
|
||||
fn:function(){
|
||||
console.log(this.user); //追梦子
|
||||
}
|
||||
}
|
||||
window.o.fn();
|
||||
|
||||
```
|
||||
|
||||
这段代码和上面的那段代码几乎是一样的，但是这里的this为什么不是指向window，如果按照上面的理论，最终this指向的是调用它的对象，这里先说个而外话，window是js中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window点o对象。
|
||||
|
||||
这里先不解释为什么上面的那段代码this为什么没有指向window，我们再来看一段代码。
|
||||
|
||||
```
|
||||
var o = {
|
||||
a:10,
|
||||
b:{
|
||||
a:12,
|
||||
fn:function(){
|
||||
console.log(this.a); //12
|
||||
}
|
||||
}
|
||||
}
|
||||
o.b.fn();
|
||||
|
||||
```
|
||||
|
||||
这里同样也是对象o点出来的，但是同样this并没有执行它，那你肯定会说我一开始说的那些不就都是错误的吗？其实也不是，只是一开始说的不准确，接下来我将补充一句话，我相信你就可以彻底的理解this的指向的问题。
|
||||
|
||||
情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。
|
||||
|
||||
情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
|
||||
|
||||
情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，例子3可以证明，如果不相信，那么接下来我们继续看几个例子。
|
||||
|
||||
```
|
||||
var o = {
|
||||
a:10,
|
||||
b:{
|
||||
// a:12,
|
||||
fn:function(){
|
||||
console.log(this.a); //undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
o.b.fn();
|
||||
|
||||
```
|
||||
|
||||
尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。
|
||||
|
||||
还有一种比较特殊的情况，例子4：
|
||||
|
||||
```
|
||||
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指向的是window，是不是有些蒙了？其实是因为你没有理解一句话，这句话同样至关重要。
|
||||
|
||||
this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，例子4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和例子3是不一样的，例子3是直接执行了fn。
|
||||
|
||||
this讲来讲去其实就是那么一回事，只不过在不同的情况下指向的会有些不同，上面的总结每个地方都有些小错误，也不能说是错误，而是在不同环境下情况就会有不同，所以我也没有办法一次解释清楚，只能你慢慢地的去体会。
|
||||
|
||||
|
||||
```
|
||||
构造函数版this：
|
||||
|
||||
|
||||
function Fn(){
|
||||
this.user = "追梦子";
|
||||
}
|
||||
var a = new Fn();
|
||||
console.log(a.user); //追梦子
|
||||
|
||||
```
|
||||
|
||||
这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，为什么我说a是对象，因为用了new关键字就是创建一个对象实例，理解这句话可以想想我们的例子3，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。
|
||||
|
||||
除了上面的这些以外，我们还可以自行改变this的指向，关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章，详细的说明了我们如何手动更改this的指向。
|
||||
|
||||
|
||||
|
||||
更新一个小问题当this碰到return时
|
||||
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
return {};
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a.user); //undefined
|
||||
|
||||
```
|
||||
|
||||
再看一个
|
||||
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
return function(){};
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a.user); //undefined
|
||||
|
||||
```
|
||||
|
||||
再来
|
||||
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
return 1;
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a.user); //追梦子
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
return undefined;
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a.user); //追梦子
|
||||
|
||||
```
|
||||
|
||||
什么意思呢？
|
||||
|
||||
如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。
|
||||
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
return undefined;
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a); //fn {user: "追梦子"}
|
||||
|
||||
```
|
||||
|
||||
还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。
|
||||
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
return null;
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a.user); //追梦子
|
||||
|
||||
```
|
||||
|
||||
知识点补充：
|
||||
|
||||
1.在严格版中的默认的this不再是window，而是undefined。
|
||||
|
||||
2.new操作符会改变函数this的指向问题，虽然我们上面讲解过了，但是并没有深入的讨论这个问题，网上也很少说，所以在这里有必要说一下。
|
||||
|
||||
|
||||
function fn(){
|
||||
this.num = 1;
|
||||
}
|
||||
var a = new fn();
|
||||
console.log(a.num); //1
|
||||
|
||||
|
||||
|
||||
为什么this会指向a？首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。
|
||||
|
||||
|
||||
注意: 当你new一个空对象的时候,js内部的实现并不一定是用的apply方法来改变this指向的,这里我只是打个比方而已.
|
||||
|
||||
if (this === 动态的\可改变的) return true;
|
||||
|
||||
|
||||
总结
|
||||
* 在方法中，this 表示该方法所属的对象。
|
||||
* 如果单独使用，this 表示全局对象。
|
||||
* 在函数中，this 表示全局对象。
|
||||
* 在函数中，在严格模式下，this 是未定义的(undefined)。
|
||||
* 在事件中，this 表示接收事件的元素。
|
||||
* 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
|
||||
112
teaching/lhj/kejian/js/object.html
Normal file
112
teaching/lhj/kejian/js/object.html
Normal file
@ -0,0 +1,112 @@
|
||||
<!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 quchong(arr){
|
||||
// for(var i=0; i < arr.length; i++){
|
||||
// for(var j = i+1;j <arr.length;j++){
|
||||
// if(arr[i] == arr[j]){
|
||||
// arr.splice(j,1);
|
||||
// j--;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return arr;
|
||||
// }
|
||||
// console.log(quchong([1,5,1,4,6,5]));
|
||||
|
||||
// if(true){
|
||||
// var a=1
|
||||
// }
|
||||
// console.log(a)
|
||||
|
||||
// function quanju(){
|
||||
// var c=2
|
||||
// }
|
||||
// quanju()
|
||||
// console.log(c)
|
||||
|
||||
// 面向对象 =》 面向过程
|
||||
// 面向对象 三大特征
|
||||
// 1、封装
|
||||
// 隐藏对象的属性和实现细节，仅对外提供公共访问方式，将变化隔离，便于使用，提高复用性和安全性。
|
||||
// 2、继承
|
||||
// 提高代码复用性；继承是多态的前提。
|
||||
// 3、多态
|
||||
// 父类或接口定义的引用变量可以指向子类或具体实现类的实例对象。提高了程序的拓展性。
|
||||
// 对象 键值对（无序） 数组（有序）
|
||||
// name sex age 这种类似于变量的东西叫属性
|
||||
// sayzao saywan这种对象中的函数 叫方法
|
||||
|
||||
var obj={
|
||||
name:"qwe",
|
||||
sex:"男",
|
||||
age:22,
|
||||
sayzao:function(){
|
||||
alert("早安")
|
||||
|
||||
},
|
||||
saywan:function(){
|
||||
alert("晚安")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 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>
|
||||
</html>
|
||||
73
teaching/lhj/kejian/js/objectcreate.html
Normal file
73
teaching/lhj/kejian/js/objectcreate.html
Normal file
@ -0,0 +1,73 @@
|
||||
<!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:"小明"}
|
||||
// 方法二 工厂模式
|
||||
// obj{
|
||||
// size:100,
|
||||
// height:30,
|
||||
// width:50,
|
||||
// weight:'1t'
|
||||
// }
|
||||
function creator(size,height,width,weight,funname,fun){
|
||||
var newobj={}
|
||||
newobj.size=size;
|
||||
newobj.height=height;
|
||||
newobj.width=width;
|
||||
newobj.weight=weight;
|
||||
newobj.jisuan=function(){
|
||||
var mian=this.width*this.height
|
||||
if(mian==this.size){
|
||||
console.log("success")
|
||||
}else{
|
||||
console.log("error")
|
||||
}
|
||||
};
|
||||
if(funname){
|
||||
newobj[funname]=fun
|
||||
}
|
||||
return newobj
|
||||
}
|
||||
var obj1=creator(100,10,10,"1g","sayhello",function(){
|
||||
console.log("hello")
|
||||
})
|
||||
// console.log(obj1)
|
||||
var obj2=creator(100,30,50,'1t',"fy",123)
|
||||
|
||||
|
||||
|
||||
// 方法三 构造函数
|
||||
function create(uname,pwd){
|
||||
this.username=uname;
|
||||
this.pwd=pwd;
|
||||
this.login=function(){
|
||||
console.log("登录成功")
|
||||
}
|
||||
}
|
||||
|
||||
var player1=new create("刘能","123")
|
||||
var player2=new create("谢广坤","456")
|
||||
|
||||
var objj={
|
||||
like:{
|
||||
name:"aaa",
|
||||
waihao:{
|
||||
name1:"qwe"
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(objj['like']['waihao']['name1']);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
97
teaching/lhj/kejian/js/rem.html
Normal file
97
teaching/lhj/kejian/js/rem.html
Normal file
@ -0,0 +1,97 @@
|
||||
<!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>
|
||||
@media(max-width:900px){
|
||||
body{
|
||||
background-color: aqua;
|
||||
}
|
||||
.box{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-left:33%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@media(max-width:600px){
|
||||
body{
|
||||
background-color: rgb(66, 199, 40);
|
||||
}
|
||||
|
||||
}
|
||||
@media(max-width:300px){
|
||||
body{
|
||||
background-color: rgb(174, 199, 199);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
70
teaching/lhj/kejian/js/shuzu.html
Normal file
70
teaching/lhj/kejian/js/shuzu.html
Normal file
@ -0,0 +1,70 @@
|
||||
<!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=[3,9,6,4,5]
|
||||
var arr1=[1,'a','p']
|
||||
console.log(arr1)
|
||||
console.log(arr1[2])
|
||||
// 访问数组的时候需要加上数组下标
|
||||
// 数组下标从0开始
|
||||
|
||||
|
||||
// 数组遍历 （用循环输出数组的每一项）
|
||||
// for循环
|
||||
// for in
|
||||
// for(let i=0;i<arr.length;i++){
|
||||
// console.log(arr[i])
|
||||
// }
|
||||
|
||||
// for(let i in arr1){
|
||||
// console.log(arr1[i],i)
|
||||
// }
|
||||
|
||||
// 数组的操作
|
||||
// 增删改查
|
||||
// 增
|
||||
var arr2=[1,2,3,4]
|
||||
arr2.push('z') //添加一个元素
|
||||
// arr2[4]="m"
|
||||
arr2.unshift("qq")
|
||||
// console.log(arr2[4])
|
||||
console.log(arr2,"1234")
|
||||
arr2.splice(4,0,'m')
|
||||
|
||||
|
||||
|
||||
// 修改
|
||||
arr2[3]=5
|
||||
|
||||
arr2.splice(2,1,6)
|
||||
|
||||
|
||||
// 删除
|
||||
arr2.splice(3,1)
|
||||
console.log(arr.pop(),"zaza")
|
||||
console.log(arr.shift(),"zaza")
|
||||
console.log(arr2)
|
||||
|
||||
// 排序
|
||||
arr.sort()
|
||||
console.log(arr)
|
||||
arr.reverse()
|
||||
console.log(arr)
|
||||
|
||||
// 转换
|
||||
var str=arr.toString()
|
||||
// join(',')
|
||||
console.log(str)
|
||||
console.log(str.split(','))
|
||||
|
||||
|
||||
</script>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
teaching/lhj/kejian/js/shuzu.md
Normal file
48
teaching/lhj/kejian/js/shuzu.md
Normal file
@ -0,0 +1,48 @@
|
||||
# 数组
|
||||
## 复习
|
||||
运算符
|
||||
js 简介
|
||||
数据类型
|
||||
|
||||
### js 简介
|
||||
ECMAScript(核心 规定js的基本语法...) dom(文档对象模型 操作dom节点 在页面上的动画效果) bom（浏览器对象模型 记录浏览器信息）
|
||||
|
||||
bom
|
||||
window //全局对象
|
||||
location url信息
|
||||
navigator 浏览器信息
|
||||
screen 屏幕信息
|
||||
history 读取浏览器历史记录
|
||||
|
||||
### 数据类型
|
||||
简单数据类型：String Number Boolean null undefined
|
||||
复杂数据类型 object (function array都是object的实例 )
|
||||
var arr=[]
|
||||
var arr= new Array()
|
||||
|
||||
区别
|
||||
|
||||
检测数据类型
|
||||
instanceof
|
||||
typeof
|
||||
<!-- object.prototype.string.call -->
|
||||
instanceof 返回的是true false
|
||||
typeof 返回的是数据类型
|
||||
|
||||
变量 命名规则
|
||||
|
||||
运算符 优先级
|
||||
括号〉一元运算〉乘除取余〉加减运算〉相等〉与或非〉赋值〉逗号
|
||||
var a=1，b=2,c=3
|
||||
|
||||
# 数组（array）
|
||||
一组数据的集合
|
||||
数组内的元素包含在[]内部，以键值对存储
|
||||
[1,2,3,4]
|
||||
[
|
||||
0 => 1
|
||||
1 => 2
|
||||
2 => 3
|
||||
3 => 4
|
||||
]
|
||||
|
||||
35
teaching/lhj/kejian/js/yunsuanfu.html
Normal file
35
teaching/lhj/kejian/js/yunsuanfu.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!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 test(){
|
||||
// alert(a) //undefined
|
||||
// var a=2
|
||||
// alert(a) //2
|
||||
// }
|
||||
// test()
|
||||
// alert(a) // 1
|
||||
// undefined 2 1
|
||||
|
||||
// alert(Boolean("non-empty string")) //true
|
||||
// alert(Boolean(null)) //false
|
||||
alert(alert(1)||2||alert(3)) //1
|
||||
// alert(alert(1)&& alert(0)) //1
|
||||
|
||||
// &&如果第一个是false就不走第二个。
|
||||
// alert没有返回值，所以布尔值是false
|
||||
// ||是第一个true不走第二个
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
56
teaching/wanzhaoyi/biaodan.html
Normal file
56
teaching/wanzhaoyi/biaodan.html
Normal file
@ -0,0 +1,56 @@
|
||||
<!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 login(){
|
||||
var account=document.getElementById("account").value
|
||||
var pwd = document.getElementById("pwd").value
|
||||
document.write(account+"的密码是："+pwd)
|
||||
console.log(account)
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
前后台分离
|
||||
前台 后台(数据库 存储数据)
|
||||
前台和后台通过 api（接口） 来联系
|
||||
api 返回的格式
|
||||
code 接口请求状态
|
||||
data
|
||||
msg 提示信息
|
||||
form
|
||||
表单 前台输入的信息 收集起来 （）传到后台 后台把信息存起来
|
||||
action
|
||||
-->
|
||||
<!-- <form action="" method=""> -->
|
||||
用户名 <input type="text" value="张三"><br />
|
||||
密码 <input type="password" value="123"><br />
|
||||
性别 <input type="radio" id="man" name="sex" checked="checked"> <label for="man">男</label>
|
||||
<input type="radio" id="woman" name="sex" > <label for="woman">女</label> <br />
|
||||
爱好 <input type="checkbox" id="mov"><label for="mov"> 看电影</label>
|
||||
<input type="checkbox" id="game" checked="checked" > <label for="game">打游戏</label>
|
||||
<input type="checkbox" id="music" checked="checked"><label for="music">听音乐</lable><br />
|
||||
地址 <select name="" id="">
|
||||
<option value="">济南</option>
|
||||
<option value="" >泰安</option>
|
||||
<option value="" >济宁</option>
|
||||
<option value="">淄博</option>
|
||||
<option value="">德州</option>
|
||||
<option value="" selected="selected">西安</option>
|
||||
</select><br />
|
||||
<button onclick="alert('注册成功')">提交</button>
|
||||
<!-- </form> -->
|
||||
|
||||
|
||||
<div>
|
||||
qq号：<input type="text" id="account" value=""> <br/>
|
||||
密码： <input type="password" id="pwd" value=""><br/>
|
||||
<button onclick="login()">登录</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
62
teaching/wanzhaoyi/css.html
Normal file
62
teaching/wanzhaoyi/css.html
Normal 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>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.list,.list1{
|
||||
list-style: none;
|
||||
}
|
||||
.list li{
|
||||
width: 150px;
|
||||
/* height: 70px; */
|
||||
background: black;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 1px solid white;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
}
|
||||
.list1 li{
|
||||
background: gray;
|
||||
margin-left: 70px;
|
||||
|
||||
}
|
||||
.bg{
|
||||
background: white!important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
网页三剑客 html(结构) css（样式） js（交互）
|
||||
css 层叠样式表
|
||||
css 引入
|
||||
link 外部样式
|
||||
head 内部样式 里写 style标签 从style里面写 css 样式
|
||||
行内样式 html标签 写style属性 值是字符串 字符串里面就是css样式
|
||||
|
||||
选择器 id选择器 类选择器 标签选择器 通配符（*） 属性选择器[]
|
||||
优先级 !important > 行内样式 >id选择器 >类选择器 > 标签 > 通配符
|
||||
-->
|
||||
|
||||
<ul class="list">
|
||||
<li>家电</li>
|
||||
<li class="bg">
|
||||
<ul class="list1">
|
||||
<li>冰箱</li>
|
||||
<li>洗衣机</li>
|
||||
<li>空调</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>洗护</li>
|
||||
<li>衣物</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
60
teaching/wanzhaoyi/flex.html
Normal file
60
teaching/wanzhaoyi/flex.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!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{
|
||||
border: 1px solid blue;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
/* justify-content: space-around; 跟父元素边缘有距离*/
|
||||
justify-content: space-between; /* 跟父元素边缘没有距离*/
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
.item{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background:blue;
|
||||
}
|
||||
.item2{
|
||||
background: red;
|
||||
}
|
||||
.item3{
|
||||
background:pink;
|
||||
}
|
||||
.item4{
|
||||
background: greenyellow;
|
||||
}
|
||||
.yuan{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: aqua;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item"></div>
|
||||
<div class="item item2"></div>
|
||||
<div class="item item3"></div>
|
||||
<div class="item item4"></div>
|
||||
<div class="item item2"></div>
|
||||
<div class="item item3"></div>
|
||||
<div class="item item4"></div>
|
||||
<div class="item item2"></div>
|
||||
<div class="item item3"></div>
|
||||
<div class="item item4"></div>
|
||||
</div>
|
||||
<div class="yuan"></div>
|
||||
</body>
|
||||
</html>
|
||||
73
teaching/wanzhaoyi/float.html
Normal file
73
teaching/wanzhaoyi/float.html
Normal file
@ -0,0 +1,73 @@
|
||||
<!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;
|
||||
}
|
||||
/*
|
||||
display block --> 块级元素
|
||||
inline --> 内联元素
|
||||
inline-block 既不独占一行 又能设置宽高
|
||||
*/
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: red;
|
||||
float: left;
|
||||
}
|
||||
.box2{
|
||||
width:600px;
|
||||
height: 30px;
|
||||
background-color: blue;
|
||||
clear: both;
|
||||
}
|
||||
/* .box1::after{
|
||||
content: '.'; height: 0; display: block; clear: both;
|
||||
} */
|
||||
/* .box1:hover{} */
|
||||
/* .bo{
|
||||
overflow: auto;
|
||||
/* //auto 默认 */
|
||||
/* scroll 滚动 */
|
||||
/* hidden 隐藏 */
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
默认浏览器布局：
|
||||
块级元素 p h1-h5 ul-li ol-li div
|
||||
内联元素 span a input (text password button radio checkbox) textarea
|
||||
|
||||
区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高
|
||||
|
||||
特性1. 父元素高度塌陷
|
||||
清除浮动 clear:left/right/both
|
||||
-->
|
||||
<div class="bo">
|
||||
<div class="box"></div>
|
||||
|
||||
|
||||
<!-- <div style="clear: both;"></div> -->
|
||||
<p>区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高</p>
|
||||
<div class="box1"></div>
|
||||
</div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
135
teaching/wanzhaoyi/pro.html
Normal file
135
teaching/wanzhaoyi/pro.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!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{
|
||||
border: 1px solid #f5f5f5;
|
||||
width: 1150px;
|
||||
height: 240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.item{
|
||||
width: 136px;
|
||||
float:left;
|
||||
margin-left: 50px;
|
||||
/* padding-top: 30px; */
|
||||
margin-top: 30px;
|
||||
border-right: 1px solid #f5f5f5;
|
||||
padding-right:30px;
|
||||
}
|
||||
.list{
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
padding-top: 15px;
|
||||
|
||||
}
|
||||
.list li{
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.left{
|
||||
float: left;
|
||||
}
|
||||
.right{
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item">
|
||||
<h5>特色购物</h5>
|
||||
<ul class="list left">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
<ul class="list right">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5>特色购物</h5>
|
||||
<ul class="list left">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
<ul class="list right">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5>特色购物</h5>
|
||||
<ul class="list left">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
<ul class="list right">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5>特色购物</h5>
|
||||
<ul class="list left">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
<ul class="list right">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5>特色购物</h5>
|
||||
<ul class="list left">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
<ul class="list right">
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
<li>主题频道</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
92
zuoye/js/a (2).html
Normal file
92
zuoye/js/a (2).html
Normal file
@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script>
|
||||
var a = 2
|
||||
// var obj1 = {
|
||||
// a: 1,
|
||||
// fn1: (function (a) {
|
||||
// this.a = a
|
||||
// a++
|
||||
// return function () {
|
||||
// this.a = a++
|
||||
// console.log(this)
|
||||
// console.log(a)
|
||||
// }
|
||||
|
||||
// })(a)
|
||||
|
||||
// }
|
||||
// var fn1 = obj1.fn1
|
||||
// var fn1=function () {
|
||||
// this.a = a++
|
||||
// console.log(this)
|
||||
// console.log(a)
|
||||
// }
|
||||
|
||||
// console.log(fn1.toString())
|
||||
// fn1()
|
||||
|
||||
// console.log(getA)
|
||||
// if ('a' in window) {
|
||||
// var a = ''
|
||||
// function getA(a) {
|
||||
// a = a || this.a
|
||||
// console.log(this.a)
|
||||
// }
|
||||
// getA(a)
|
||||
// }
|
||||
|
||||
|
||||
|
||||
var c = 3
|
||||
function getC() {
|
||||
this.c++
|
||||
console.log(this,'kkkk')
|
||||
return function () {
|
||||
c = this.c * 2
|
||||
console.log(c)
|
||||
}
|
||||
}
|
||||
var obj3 = {
|
||||
c: 2,
|
||||
getC: (function () {
|
||||
this.c -= 1 //win.c-1 win.c=2
|
||||
console.log(this.c, this,'sss')
|
||||
return this.getC //obj3.getc=win.getc
|
||||
})()
|
||||
|
||||
}
|
||||
// var a=obj3.getC()
|
||||
// a()
|
||||
// obj3.getC()()
|
||||
|
||||
getC() //win.c++ =>win.c=3
|
||||
|
||||
console.log(obj3.getC.toString(),"aaaaaaa")
|
||||
obj3.getC()
|
||||
// console.log(obj3.c,window.c)
|
||||
var f3=obj3.getC;
|
||||
f3()
|
||||
// console.log(window.c)
|
||||
// console.log(obj3.c)
|
||||
|
||||
//step1 立即执行函数 => this 指向window win.c-1 -> win.c=2
|
||||
//step2 getC() this.c -=> win.c++ =>2+1 =>3
|
||||
//step3 obj3.getC() step1中 obj3.getc= win.getc 所以就是执行win.getc
|
||||
// 即 winc++ win.c=3
|
||||
//obj3.getc时 this指向的是obj3，this.c操作的是obj3.c , 所以obj3.c 也+1等于3
|
||||
//step4 f3本身等于win.getc函数， 执行f3() 即执行 win.getc() =>win.c++ win.c=4
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
97
zuoye/js/callapply.md
Normal file
97
zuoye/js/callapply.md
Normal file
@ -0,0 +1,97 @@
|
||||
1.
|
||||
window.color = 'red';
|
||||
document.color = 'yellow';
|
||||
|
||||
var s1 = {color: 'blue' };
|
||||
function changeColor(){
|
||||
console.log(this.color);
|
||||
}
|
||||
|
||||
changeColor.call(); //red (默认传递参数)
|
||||
changeColor.call(window); //red
|
||||
changeColor.call(document); //yellow
|
||||
changeColor.call(this); //red
|
||||
changeColor.call(s1); //blue
|
||||
|
||||
2
|
||||
var Pet = {
|
||||
words : '...',
|
||||
speak : function (say) {
|
||||
console.log(say + ''+ this.words)
|
||||
}
|
||||
}
|
||||
Pet.speak('Speak'); // 结果：Speak...
|
||||
|
||||
var Dog = {
|
||||
words:'Wang'
|
||||
}
|
||||
|
||||
//将this的指向改变成了Dog
|
||||
Pet.speak.call(Dog, 'Speak'); //结果： SpeakWang
|
||||
|
||||
3
|
||||
用 apply重写上面两个函数
|
||||
|
||||
4
|
||||
function add(c,d){
|
||||
return this.a + this.b + c + d;
|
||||
}
|
||||
|
||||
var s = {a:1, b:2};
|
||||
console.log(add.call(s,3,4)); // 1+2+3+4 = 10
|
||||
console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14
|
||||
|
||||
5.画出原型链
|
||||
//游戏--->王者---->小乔---->花嫁
|
||||
|
||||
6
|
||||
function C1(name) {
|
||||
if (name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
function C2(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
function C3(name) {
|
||||
this.name = name || 'join';
|
||||
}
|
||||
C1.prototype.name = 'Tom';
|
||||
C2.prototype.name = 'Tom';
|
||||
C3.prototype.name = 'Tom';
|
||||
alert((new C1().name) + (new C2().name) + (new C3().name));
|
||||
|
||||
7
|
||||
function Fn(num) {
|
||||
this.x = this.y = num;
|
||||
}
|
||||
Fn.prototype = {
|
||||
x: 20,
|
||||
sum: function () {
|
||||
console.log(this.x + this.y);
|
||||
}
|
||||
};
|
||||
let f = new Fn(10);
|
||||
console.log(f.sum === Fn.prototype.sum);
|
||||
f.sum();
|
||||
Fn.prototype.sum();
|
||||
console.log(f.constructor);
|
||||
|
||||
8
|
||||
var print=function(){alert(1);}
|
||||
function Fn() {
|
||||
print=function(){alert(2);}
|
||||
return this;
|
||||
}
|
||||
function print(){alert(3);}
|
||||
Fn.prototype.print=function(){alert(4);}
|
||||
Fn.print=function(){alert(5);}
|
||||
|
||||
print();
|
||||
Fn.print();
|
||||
Fn().print();
|
||||
new Fn.print();
|
||||
new Fn().print();
|
||||
|
||||
BIN
zuoye/js/js/函数.pdf
Normal file
BIN
zuoye/js/js/函数.pdf
Normal file
Binary file not shown.
BIN
zuoye/js/js/对象1.pdf
Normal file
BIN
zuoye/js/js/对象1.pdf
Normal file
Binary file not shown.
BIN
zuoye/js/js/语句.pdf
Normal file
BIN
zuoye/js/js/语句.pdf
Normal file
Binary file not shown.
BIN
zuoye/js/js/运算符.pdf
Normal file
BIN
zuoye/js/js/运算符.pdf
Normal file
Binary file not shown.
BIN
zuoye/js/js/递归.pdf
Normal file
BIN
zuoye/js/js/递归.pdf
Normal file
Binary file not shown.
120
zuoye/js/jsthis.md
Normal file
120
zuoye/js/jsthis.md
Normal file
@ -0,0 +1,120 @@
|
||||
# this
|
||||
1
|
||||
|
||||
function fn2(){
|
||||
console.log(this.n)
|
||||
var n='n'
|
||||
this.n=10
|
||||
console.log(n)
|
||||
}
|
||||
var obj={fn2:fn2, n:1}
|
||||
fn2()
|
||||
obj.fn2()
|
||||
console.log(obj.n, window.n)
|
||||
|
||||
//undefined 'n'
|
||||
//1 'n'
|
||||
//10 10
|
||||
|
||||
2
|
||||
|
||||
function f(){console.log(this)}
|
||||
|
||||
var obj={
|
||||
fn: (function(){
|
||||
return this.f
|
||||
})(),
|
||||
f: function(){console.log(this)}
|
||||
}
|
||||
f()
|
||||
obj.f()
|
||||
obj.fn()
|
||||
// window obj obj
|
||||
|
||||
3
|
||||
|
||||
var n = 10
|
||||
var obj1={
|
||||
n:1,
|
||||
f:function(){this.n++; n=this.n++}
|
||||
}
|
||||
|
||||
obj1.f()
|
||||
console.log(n) // 2
|
||||
console.log(obj1.n) // 2
|
||||
window.setTimeout(obj1.f, 1000)
|
||||
|
||||
//2
|
||||
//3
|
||||
|
||||
4
|
||||
|
||||
console.log(getA)
|
||||
if('a' in window){
|
||||
var a = ''
|
||||
function getA(a){
|
||||
a = a||this.a
|
||||
console.log(this.a)
|
||||
}
|
||||
getA(a)
|
||||
}
|
||||
|
||||
5
|
||||
|
||||
var a=2
|
||||
var obj1 = {
|
||||
a:1,
|
||||
fn1: (function(a){
|
||||
this.a = a
|
||||
a++
|
||||
return function(){
|
||||
this.a = a++
|
||||
console.log(a)
|
||||
}
|
||||
|
||||
})(a)
|
||||
}
|
||||
obj1.fn1() // 4
|
||||
var fn1 = obj1.fn1
|
||||
fn1() // window.a = 4,a=5
|
||||
|
||||
6
|
||||
|
||||
var c=3
|
||||
function getC(){
|
||||
this.c++
|
||||
return function (){
|
||||
c=this.c*2
|
||||
console.log(c)
|
||||
}
|
||||
}
|
||||
var obj3={
|
||||
c: 2,
|
||||
getC:(function(){
|
||||
this.c -= 1
|
||||
return this.getC
|
||||
})()
|
||||
}
|
||||
getC() // window.c = 3
|
||||
obj3.getC() // obj3.c=3
|
||||
var f3=obj3.getC
|
||||
f3() // window.c=4
|
||||
console.log(window.c) // 4
|
||||
console.log(obj3.c) // 3
|
||||
|
||||
|
||||
for (var i = 1; i <= 5; i++) {
|
||||
|
||||
setTimeout( function timer() {
|
||||
|
||||
console.log(i);
|
||||
|
||||
}, 1000 );
|
||||
|
||||
}
|
||||
|
||||
上面的代码会输出什么？怎么改动上述代码，使其依次输出1、2、3、4、5 并说明原因
|
||||
|
||||
|
||||
理论题：
|
||||
谈谈什么是闭包
|
||||
Binary file not shown.
Binary file not shown.
BIN
zuoye/js/pdfs/数组.pdf
Normal file
BIN
zuoye/js/pdfs/数组.pdf
Normal file
Binary file not shown.
120
zuoye/js/this.md
Normal file
120
zuoye/js/this.md
Normal file
@ -0,0 +1,120 @@
|
||||
# this
|
||||
1
|
||||
|
||||
function fn2(){
|
||||
console.log(this.n)
|
||||
var n='n'
|
||||
this.n=10
|
||||
console.log(n)
|
||||
}
|
||||
var obj={fn2:fn2, n:1}
|
||||
fn2()
|
||||
obj.fn2()
|
||||
console.log(obj.n, window.n)
|
||||
|
||||
|
||||
|
||||
2
|
||||
|
||||
function f(){console.log(this)}
|
||||
|
||||
var obj={
|
||||
fn: (function(){
|
||||
return this.f
|
||||
})(),
|
||||
f: function(){console.log(this)}
|
||||
}
|
||||
f()
|
||||
obj.f()
|
||||
obj.fn()
|
||||
|
||||
3
|
||||
|
||||
var n = 10
|
||||
var obj1={
|
||||
n:1,
|
||||
f:function(){this.n++; n=this.n++}
|
||||
}
|
||||
|
||||
obj1.f()
|
||||
console.log(n)
|
||||
console.log(obj1.n)
|
||||
window.setTimeout(obj1.f, 1000)
|
||||
|
||||
|
||||
4
|
||||
|
||||
console.log(getA)
|
||||
if('a' in window){
|
||||
var a = ''
|
||||
function getA(a){
|
||||
a = a||this.a
|
||||
console.log(this.a)
|
||||
}
|
||||
getA(a)
|
||||
}
|
||||
|
||||
5
|
||||
|
||||
var a=2
|
||||
var obj1 = {
|
||||
a:1,
|
||||
fn1: (function(a){
|
||||
this.a = a
|
||||
a++
|
||||
return function(){
|
||||
this.a = a++
|
||||
console.log(a)
|
||||
}
|
||||
|
||||
})(a)
|
||||
|
||||
}
|
||||
obj1.fn1()
|
||||
var fn1 = obj1.fn1
|
||||
fn1() // window.a = 4,a=5
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6
|
||||
|
||||
var c=3
|
||||
function getC(){
|
||||
this.c++
|
||||
return function (){
|
||||
c=this.c*2
|
||||
console.log(c)
|
||||
}
|
||||
}
|
||||
var obj3={
|
||||
c: 2,
|
||||
getC:(function(){
|
||||
this.c -= 1
|
||||
return this.getC
|
||||
})()
|
||||
}
|
||||
getC()
|
||||
obj3.getC()
|
||||
var f3=obj3.getC
|
||||
f3()
|
||||
console.log(window.c)
|
||||
console.log(obj3.c)
|
||||
|
||||
|
||||
for (var i = 1; i <= 5; i++) {
|
||||
|
||||
setTimeout( function timer() {
|
||||
|
||||
console.log(i);
|
||||
|
||||
}, 1000 );
|
||||
|
||||
}
|
||||
|
||||
上面的代码会输出什么？怎么改动上述代码，使其依次输出1、2、3、4、5 并说明原因
|
||||
|
||||
|
||||
理论题：
|
||||
谈谈什么是闭包
|
||||
148
zuoye/js/thislx.md
Normal file
148
zuoye/js/thislx.md
Normal file
@ -0,0 +1,148 @@
|
||||
# this练习
|
||||
注：document.write的题目 需要写出在页面上打印的结果
|
||||
1. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
var person = {
|
||||
firstName: "John",
|
||||
lastName : "Doe",
|
||||
id : 5566,
|
||||
fullName : function() {
|
||||
return this.firstName + " " + this.lastName;
|
||||
}
|
||||
};
|
||||
|
||||
// 显示对象的数据
|
||||
document.getElementById("demo").innerHTML = person.fullName();
|
||||
|
||||
```
|
||||
|
||||
2. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
var x = this;
|
||||
document.getElementById("demo").innerHTML = x;
|
||||
|
||||
```
|
||||
|
||||
3. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
"use strict";
|
||||
var x = this;
|
||||
document.getElementById("demo").innerHTML = x;
|
||||
|
||||
```
|
||||
|
||||
4. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
document.getElementById("demo").innerHTML = myFunction();
|
||||
function myFunction() {
|
||||
return this;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
5. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
"use strict";
|
||||
document.getElementById("demo").innerHTML = myFunction();
|
||||
function myFunction() {
|
||||
return this;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
6. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
<body>
|
||||
|
||||
<h2>JavaScript <b>this</b> 关键字</h2>
|
||||
|
||||
<button onclick="this.style.display='none'">点我后我就消失了</button>
|
||||
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
|
||||
7. 下面代码执行结果是什么 为什么
|
||||
```
|
||||
var person = {
|
||||
firstName : "John",
|
||||
lastName : "Doe",
|
||||
id : 5566,
|
||||
myFunction : function() {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
// 显示表单数据
|
||||
document.getElementById("demo").innerHTML = person.myFunction();
|
||||
|
||||
```
|
||||
8. 把第7题的对象中的属性和方法挨个打印在页面上
|
||||
9. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
var person = {
|
||||
firstName: "John",
|
||||
lastName : "Doe",
|
||||
id : 5566,
|
||||
fullName : function() {
|
||||
return this.firstName + " " + this.lastName;
|
||||
}
|
||||
};
|
||||
|
||||
// 显示对象的数据
|
||||
document.getElementById("demo").innerHTML = person.fullName();
|
||||
|
||||
```
|
||||
|
||||
10. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
var person1 = {
|
||||
fullName: function() {
|
||||
return this.firstName + " " + this.lastName;
|
||||
}
|
||||
}
|
||||
var person2 = {
|
||||
firstName:"John",
|
||||
lastName: "Doe",
|
||||
}
|
||||
person1.fullName.call(person2);
|
||||
|
||||
```
|
||||
|
||||
11. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function speak(){
|
||||
var name = this.name
|
||||
console.log(`Hello I am ${name}`)
|
||||
}
|
||||
var me = {
|
||||
name: 'a',
|
||||
speak: speak
|
||||
}
|
||||
var you = {
|
||||
name: 'b',
|
||||
speak: speak
|
||||
}
|
||||
me.speak()
|
||||
you.speak()
|
||||
|
||||
```
|
||||
|
||||
12. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function fn(){
|
||||
console.log(this.name)
|
||||
}
|
||||
fn.name = 'xxx'
|
||||
fn()
|
||||
```
|
||||
151
zuoye/js/函数.md
151
zuoye/js/函数.md
@ -1,5 +1,154 @@
|
||||
# 函数
|
||||
* jsinfo里的练习
|
||||
* 简介函数语法
|
||||
* 函数名命名规则
|
||||
* 函数包含哪几部分
|
||||
* 函数调用的三种情况
|
||||
* 简述函数返回值
|
||||
* 下面代码的执行结果为
|
||||
```
|
||||
var x = myFunction(7, 8);
|
||||
function myFunction(a, b) {
|
||||
return a * b;
|
||||
}
|
||||
```
|
||||
|
||||
* 为什么要使用函数
|
||||
* 简单介绍局部变量和全局变量
|
||||
* 下面两段代码的执行结果分别是什么 并说明原因
|
||||
```
|
||||
function myFunction() {
|
||||
var carName = "Volvo";
|
||||
}
|
||||
console.log(carName)
|
||||
|
||||
```
|
||||
```
|
||||
function myFunction() {
|
||||
var carName = "Volvo";
|
||||
console.log(carName)
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
* 函数如何返回值，如何接收
|
||||
* 下面代码执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function sum(iNum1, iNum2) {
|
||||
return iNum1 + iNum2;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
* 下面代码执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function sum(iNum1, iNum2) {
|
||||
console.log(iNum1 + iNum2);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
* 下面代码执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function sum(iNum1, iNum2) {
|
||||
console.log(iNum1 + iNum2);
|
||||
}
|
||||
sum()
|
||||
|
||||
```
|
||||
|
||||
* 下面代码执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function sum(iNum1, iNum2) {
|
||||
return iNum1 + iNum2;
|
||||
}
|
||||
var iResult = sum(1,1);
|
||||
alert(iResult);
|
||||
|
||||
```
|
||||
|
||||
* 下面代码执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function sum(iNum1, iNum2) {
|
||||
return iNum1 + iNum2;
|
||||
alert(iNum1 + iNum2);
|
||||
}
|
||||
```
|
||||
|
||||
* 下面代码的执行结果为
|
||||
```
|
||||
function sayHi(sMessage) {
|
||||
if (sMessage == "bye") {
|
||||
return;
|
||||
}
|
||||
|
||||
alert(sMessage);
|
||||
}
|
||||
```
|
||||
|
||||
* 如何检测参数的个数
|
||||
* 下面代码的执行结果是多少
|
||||
```
|
||||
function howManyArgs() {
|
||||
alert(arguments.length);
|
||||
}
|
||||
|
||||
howManyArgs("string", 45);
|
||||
howManyArgs();
|
||||
howManyArgs(12);
|
||||
|
||||
```
|
||||
* 什么是arguments 对象
|
||||
* 下面代码的执行结果
|
||||
```
|
||||
function sayHi() {
|
||||
if (arguments[0] == "bye") {
|
||||
return;
|
||||
}
|
||||
|
||||
alert(arguments[0]);
|
||||
}
|
||||
```
|
||||
|
||||
* 下面代码的执行结果是什么
|
||||
```
|
||||
function howManyArgs() {
|
||||
alert(arguments.length);
|
||||
}
|
||||
|
||||
howManyArgs("string", 45);
|
||||
howManyArgs();
|
||||
howManyArgs(12);
|
||||
|
||||
```
|
||||
* 什么是函数重载
|
||||
* 下面代码的执行结果是什么
|
||||
```
|
||||
function doAdd() {
|
||||
if(arguments.length == 1) {
|
||||
alert(arguments[0] + 5);
|
||||
} else if(arguments.length == 2) {
|
||||
alert(arguments[0] + arguments[1]);
|
||||
}
|
||||
}
|
||||
|
||||
doAdd(10);
|
||||
doAdd(40, 20);
|
||||
```
|
||||
|
||||
* 通过new function() 的系形式重新定义下面的对象
|
||||
```
|
||||
function sayHi(sName, sMessage) {
|
||||
alert("Hello " + sName + sMessage);
|
||||
}
|
||||
|
||||
```
|
||||
* Function对象的属性和方法
|
||||
* 编写一个函数，计算三个数字的大小，按从小到大顺序输出
|
||||
* 编写一个函数，计算任意两个数字之间所能组成的奇数个数，数字必须是个位数
|
||||
比如： 计算0-3之间能组成的奇数个是01、21、03、13、23、31
|
||||
|
||||
@ -1,4 +1,65 @@
|
||||
# 对象练习
|
||||
* 什么是面向对象 什么是面向过程
|
||||
* 分别介绍对象的三大特征
|
||||
* 对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 对呈现。
|
||||
* 定义一个对象 包含下列属性 name age sex addr(居住地) job(职业)
|
||||
包含下列方法
|
||||
eat, sleep, playgame, watchtv ,read
|
||||
函数体内自定义内容 不可为空
|
||||
* 给上面的题里的对象添加 height(身高) weight(体重) 属性并赋值
|
||||
* 给上面题里的对象添加 下列方法
|
||||
meituan(点外卖 参数需要传手机号和居住地址 想吃的东西 返回下单成功)
|
||||
cook(做饭 需要传入时间 判断当前是哪一顿饭)
|
||||
travel(需要传入目的地 返回我去哪里玩啦)
|
||||
listenmusic(传入你喜欢的歌手 控制台打印最喜欢的曲子)
|
||||
work（传入上班时间和下班时间 判断是否为996）
|
||||
|
||||
* 访问上面对象定义的以及添加后的所有属性（两种方式访问 先指明可以通过什么方式访问）
|
||||
格式为 如name字段: 姓名：+name的属性值
|
||||
通过调用不同的方法来制定行程（按照正常顺序调用上面对象的每一个方法）
|
||||
|
||||
* 探索对象创建的其他方式 每种都举例尝试（不得少于三个方法 五个属性）
|
||||
* 探索遍历函数的所有属性
|
||||
* 五大主流浏览器的名字为键 内核为值 创建一个对象
|
||||
* 下面代码的执行结果是：
|
||||
```
|
||||
function person(firstname,lastname,age,eyecolor)
|
||||
{
|
||||
this.firstname=firstname;
|
||||
this.lastname=lastname;
|
||||
this.age=age;
|
||||
this.eyecolor=eyecolor;
|
||||
return [this.firstname,this.lastname,this.age,this.eyecolor,this]
|
||||
}
|
||||
|
||||
var myFather=new person("John","Doe",50,"blue");
|
||||
var myMother=person("Sally","Rally",48,"green");
|
||||
console.log(myFather)
|
||||
console.log(myMother)
|
||||
```
|
||||
* 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
const user = {
|
||||
name: "John"
|
||||
};
|
||||
user.name = "Pete";
|
||||
alert(user.name);
|
||||
```
|
||||
|
||||
* 如何访问下面对象的bird属性
|
||||
对象为：
|
||||
var user={
|
||||
fire:"fox",
|
||||
likes:{
|
||||
type:"animal",
|
||||
bird:"fly"
|
||||
}
|
||||
}
|
||||
给user对象添加一个属性名是name 值是user
|
||||
给user对象添加一个方法 触发后可以删除user对象的likes里面的type
|
||||
|
||||
创建一个对象 属性值为用户输入的自定义字符（最少三个属性）
|
||||
|
||||
* 创建一个对象 包含如下内容
|
||||
* code 值为200
|
||||
* msg 值为"请求成功"
|
||||
|
||||
@ -1,4 +1,46 @@
|
||||
# 数组
|
||||
* 什么是数组
|
||||
|
||||
* 创建一个长度为4的内容为字符串的数组 并把数组中的元素和数组长度打印在页面上
|
||||
|
||||
* 下面这种数组声明方式对嘛？为啥
|
||||
```
|
||||
var cars = [
|
||||
"Saab",
|
||||
"Volvo",
|
||||
"BMW"
|
||||
];
|
||||
|
||||
```
|
||||
|
||||
* 下面这种数组声明方式对嘛？为啥
|
||||
```
|
||||
var cars = [
|
||||
"Saab",
|
||||
"Volvo",
|
||||
"BMW",
|
||||
];
|
||||
|
||||
```
|
||||
|
||||
* 把第1题的数组用new关键字重新声明一遍
|
||||
* 如何访问数组中的元素
|
||||
* 定义一个长度为10的没有空元素的数组（内容正规一点哈 别整敷衍的abcdefg 1234567...这样的）
|
||||
不通过遍历挨个输出每个元素的值（输出的方式随意）
|
||||
|
||||
* 定义个数组里面装着 五大主流浏览器 然后通过 下标把浏览器名字改成对应的内核（不去重）
|
||||
|
||||
* 通过遍历方法对浏览器内核的数组去重
|
||||
* 通过splice方法完成五大主流浏览器题目的效果
|
||||
* typeof 一个数组的返回结果为
|
||||
* 数组中能存储对象嘛？能存储函数嘛? 能存储数组嘛？ 如果能请举例 不能的话说明理由
|
||||
|
||||
* 列举数组相关的方法 并说明作用每个方法附带两个例子
|
||||
* 定义一个长度为5的数组 并访问最后一个元素（用两种方式）
|
||||
* 定义一个长度为 20的数组，用三种方式实现数组的遍历并输出数组中每个元素的值（自己拓充foreach）
|
||||
* 使用4种方式给数组添加新元素
|
||||
* 如何准确的识别是否为数组
|
||||
* 为什么要避免使用new array创建数组
|
||||
* 计算给定数组 arr 中所有元素的总和
|
||||
|
||||
输入 [ 1, 2, 3, 4 ]
|
||||
@ -12,12 +54,3 @@
|
||||
输入： [1, 2, 4, 4, 3, 4, 3], 4
|
||||
输出：3
|
||||
|
||||
* 给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。答案可以按 任意顺序 返回。
|
||||
|
||||
给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。
|
||||
|
||||
|
||||
|
||||
|
||||
输入：digits = "23"
|
||||
输出：["ad","ae","af","bd","be","bf","cd","ce","cf"]
|
||||
Loading…
Reference in New Issue
Block a user