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

好久没更新了

Browse Source
This commit is contained in:
asd
2021-03-23 10:58:10 +08:00
parent eca64f86c0
commit 9bf8e8d020
123 changed files with 24337 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
js/.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@@ -0,0 +1,12 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
<option name="ignoredErrors">
<list>
<option value="N802" />
</list>
</option>
</inspection_tool>
</profile>
</component>

6
js/.idea/inspectionProfiles/profiles_settings.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<settings>
<option name="USE_PROJECT_PROFILE" value="false" />
<version value="1.0" />
</settings>
</component>

8
js/.idea/js.iml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="PYTHON_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
js/.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/js.iml" filepath="$PROJECT_DIR$/.idea/js.iml" />
</modules>
</component>
</project>

6
js/.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>

56
js/.idea/workspace.xml generated Normal file
View File

@@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="03ca334c-40bc-4c12-a388-bb2facf7de9b" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/../csspress/1.css基础.md" beforeDir="false" afterPath="$PROJECT_DIR$/../csspress/1.css基础.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../csspress/2.盒模型.md" beforeDir="false" afterPath="$PROJECT_DIR$/../csspress/2.盒模型.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../csspress/4.flex.md" beforeDir="false" afterPath="$PROJECT_DIR$/../csspress/4.flex.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../csspress/5.自适应和响应式.md" beforeDir="false" afterPath="$PROJECT_DIR$/../csspress/5.自适应和响应式.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../csspress/demo/flex.html" beforeDir="false" afterPath="$PROJECT_DIR$/../csspress/demo/flex.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../csspress/demo/position.html" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../csspress/demo/zishiying1.html" beforeDir="false" afterPath="$PROJECT_DIR$/../csspress/demo/zishiying1.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../csspress/demo/zishiying2.html" beforeDir="false" afterPath="$PROJECT_DIR$/../csspress/demo/zishiying2.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../htmlpress/html基础.md" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../htmlpress/表格.md" beforeDir="false" afterPath="$PROJECT_DIR$/../htmlpress/表格.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/demo/day4.html" beforeDir="false" afterPath="$PROJECT_DIR$/demo/day4.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/kejian/jsinfo - 副本.md" beforeDir="false" afterPath="$PROJECT_DIR$/kejian/jsinfo - 副本.md" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
</component>
<component name="ProjectId" id="1pH7VEJc50BfKDqtzBqB3lhLTmj" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="settings.editor.selected.configurable" value="configurable.group.appearance" />
</component>
<component name="SvnConfiguration">
<configuration />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="03ca334c-40bc-4c12-a388-bb2facf7de9b" name="Default Changelist" comment="" />
<created>1614828184663</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1614828184663</updated>
</task>
<servers />
</component>
<component name="WindowStateProjectService">
<state x="419" y="120" key="FileChooserDialogImpl" timestamp="1616051273471">
<screen x="0" y="0" width="1280" height="760" />
</state>
<state x="419" y="120" key="FileChooserDialogImpl/0.0.1280.760@0.0.1280.760" timestamp="1616051273471" />
</component>
</project>

113
js/demo/bibao.html Normal file
View File

@@ -0,0 +1,113 @@
<!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>
// 目标 ：从全局访问函数内部的变量
// 方法1
// function f1() {
// var n = 999;
// return {
// n:n
// }
// }
// alert(f1().n)
// 方法2：
// function f1() {
// var n = 999;
// function show(){
// return n
// }
// show()
// }
// alert(f1()) //undefined F1函数没有返回值
// alert(show()) // show is not defined show()在函数f1的作用域中
// alert(f1()) //undeined F1函数没有返回值
// 作用域：
//
// window
// f1
// n
// show
// function f1() {
// var n = 999;
// function show(){
// return n
// }
// return show()
// }
// alert(f1())
// 方法三
// function f1(){
// var n=999;
// function show(){
// alert(n)
// }
// show()
// }
// f1()
function f1(){
var n=999;
function add(){
return n++
}
return add() //函数返回值
}
console.log(f1()) //999
var res=f1() //999
console.log(f1()) //999
// GO: f1
// ao: n, add
function f1(){
var n=999;
function add(){
return n++
}
return add //函数体
}
var res=f1() //通过return add 将add赋给res
// console.log(res)
// add 其实就是 全局访问f1中变量的一个桥
console.log(res()) //999
console.log(res()) //1000
// GO: f1,
// res:add
// AO: n
// add
</script>
</head>
<body>
<h3>作用域</h3>
<p>
函数内部的变量叫局部变量 只能再函数体内部访问 外部无法访问。 前提是 声明变量的方式是var
如果变量前面没有修饰，那么它就是 全局变量
</p>
<p>
闭包的形式上是父级函数返回的是子函数的函数体，从全局变量接收后就相当于把子函数塞给go，执行后不会被销毁
</p>
<p>
闭包的用处：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
</p>
</body>
</html>

83
js/demo/buhuo.html Normal file
View File

@@ -0,0 +1,83 @@
<!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>
.box{
width: 500px;
height: 500px;
border: 1px solid black;
}
.box1{
width: 300px;
height: 300px;
background: pink;
}
.box2{
width: 100px;
height: 100px;
background: gold;
}
</style>
</head>
<body>
<div class="box">
<div class="box1" >
<div class="box2"></div>
</div>
</div>
<div>
总结：点击box2时，会接连触发 box() -> box1() -> box2() 整个过程叫做捕获（从外往里）
冒泡和捕获不会同时发生
<p>addEventListener 能给目标元素添加多个事件</p>
<p> 阻止捕获： event.stopImmediatePropagation() event.stopPropagation()</p>
<p>stopImmediatePropagation和stopPropagation 都能阻止捕获，但是同一个元素有多个同类型事件的时候，stopPropagation不能阻止其他事件的发生
stopImmediatePropagation能阻止其他事件发生的 </p>
</div>
<script>
var boxdj=document.getElementsByClassName('box')[0]
boxdj.addEventListener("click", function (){
console.log("box被点击了")
event.stopImmediatePropagation()
},true)
boxdj.addEventListener("click", function (){
console.log("box被点击了2！！！！！")
event.stopImmediatePropagation()
},true)
var box1dj=document.getElementsByClassName('box1')[0]
box1dj.addEventListener("click", function (){
console.log("box1被点击了")
event.stopPropagation()
},true)
var box2dj=document.getElementsByClassName('box2')[0]
box2dj.addEventListener("click", function (){
console.log("box2被点击了")
event.stopImmediatePropagation()
},true)
function box(){
console.log("box被点击了")
}
function box1(){
console.log("box1被点击了")
return
}
function box2(){
console.log("box2被点击了")
event.stopImmediatePropagation();
}
function box3(){
console.log("box1被点击了2")
event.stopPropagation();
}
</script>
</body>
</html>

71
js/demo/callapply.html Normal file
View File

@@ -0,0 +1,71 @@
<!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>
// call,apply 用其他函数的方法
function add(a,b){
return a+b;
}
function sub(a,b){
return a-b;
}
var a1 = add.apply(sub,[4,2]);　　//sub调用add的方法
var a2 = sub.apply(add,[4,2]);
// alert(a1); //6
// alert(a2); //2
/*call的用法*/
var a1 = add.call(sub,4,2); //sub调用add的方法
console.log(a1)
// 实现继承 cat 继承animal
function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}
function Cat(name){
console.log(this)
Animal.apply(this,[name]); // this new以后指向的是他的实例，cat 但是cat的构造函数里面通过apply把当前的this指向了animal
//所以他实例出来的对象cat 就能用 animal里面的属性和方法
}
var cat = new Cat("咕咕");
cat.showName();
/*call的用法*/
Animal.call(this,name);
// bind
var a = {
b : function(){
var func = function(){
console.log(this.c);
}
func.bind(this)(); //等价于 this.func()
},
c : 'Hello!'
}
a.b();
//Hello!
</script>
</head>
<body>
<p> call和apply的作用都是 修改this的指向</p>
<p> call和apply 操作的都是函数 而不是对象</p>
<p>区别：
<p>call 需要的参数都写上（单独的）</p>
<p>apply 需要的参数 如果有多个的话，需要用数组的形式传过去</p>
</p>
<p>bind()方法主要就是将函数绑定到
<p>f.bind(obj)，实际上可以理解为obj.f()</p>
</p>
</body>
</html>

22
js/demo/day4.html
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>Documen</title>
</head>
<body>
<script>
var box = document.createElement('div')
box.innerHTML = 'happy new year'
box.setAttribute('style', 'width:100px;height:100px;background:red;color:white')
var main = document.body
main.append(box)
</script>
</body>
</html>

51
js/demo/digui&bibao.html Normal file
View File

@@ -0,0 +1,51 @@
<!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>递归和杨辉三角</title>
</head>
<body>
<button onclick="ljq()">点我加一</button>
<p></p>
<script>
function combine (m, n) {
if (n == 0) {
return 1;
} else if (m == n) {
return 1;
} else {
return combine(m - 1, n) + combine(m - 1, n - 1);
}
}
function put (len) {
for (let i = 0; i < len; i++) {
for (let j = 0; j <= i; j++) {
document.write(combine(i, j) + ' ');
}
document.write('<br/>');
}
}
put(5);
function add(){
var count = 0;
function demo(){
count ++;
console.log("现在的值："+count);
}
return demo;
}
var counter = add();
function ljq(){counter(); }
// 目的：从全局访问add里面的count变量
// 点击调用ljq -> counter-> counter=demo->demo() -> 输出结果
</script>
</body>
</html>

29
js/demo/digui.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>
</head>
<body>
<script>
function a(n) {
if (n <= 1) {
return 1
} else {
return n * a(n - 1)
}
}
console.log(a(5)) //120
var cheng=a
a=null
console.log(cheng(5))// : a is not a function
</script>
</body>
</html>

97
js/demo/diguibibao.html Normal file
View 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>
</head>
<body>
<script>
// 递归 函数内部调用他自己 必须有个终点
let num = 0;
function a(index){
if(index == 0){
return 0;
}else {
return index + a(index - 1)
//10+a(9)
//10+9+a(8)
//10+9+8+a(7)
//.....
//10+9+8+7+......+3+2+1+0
}
}
num = a(10)
alert(num)
// function a (){
// let b = 100;
// return function (){
// b++;
// return b;
// }
// }
// let c = a()
// alert(c())
// alert(c())
// alert(c())
// alert(c())
// alert(c())
function a (){
let name = "123"
var shop = {
a: "商品c",
b: "商品d"
}
return {
name: "321",
getname(name){
return "商品" + name +"的值是" + shop[name]
},
addshop(name1,item){
shop[item] = name1 // shop['pingguo']="苹果"
alert(this.name) //543
},
getlist(){
return shop
},
setname(name){
this.name = name
}
}
}
let sa = a()
alert(sa.getname('a')) //商品a的值是商品c
sa.setname("543") // sa.name = 543
sa.addshop("苹果","pingguo") //543
alert(sa.getname('pingguo')) //商品pingguo的值是、苹果
console.log(sa.getlist())
function b (){
var shop = {
a: "商品a",
b: "商品b"
}
return {
getname(name){
return "商品" + name +"的值是" + shop[name]
},
addshop(name,item){
shop[item] = name
},
getlist(){
return shop
}
}
}
let sb = b()
// 递归 生成杨辉三角
// 闭包 封装一个累加器 调用add 方法+1 调用get方法 获取现在的累加值 ‘当前值是 ’
</script>
</body>
</html>

38
js/demo/dingshiqi.html Normal file
View File

@@ -0,0 +1,38 @@
<!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>
// 每三秒打印一次“Hello”
var h = setInterval(function () {
console.log("hello")
}, 3000)
setTimeout(function () {
clearInterval(h)
}, 9000)
(function () {
var m = 0;
function getM() {
return m;
}
function seta(val) {
m = val;
}
window.g = getM;
window.f = seta;
})();
f(100);
console.info(g());
</script>
</head>
<body>
</body>
</html>

104
js/demo/dom.html Normal file
View File

@@ -0,0 +1,104 @@
<!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>
.gaibianzhuti{
color: white;
background-color: black;
width: 100px;
}
.biaoge{
width: 100px;
display: none;
}
.div1 {
border: 1px dashed black;
padding: 27px;
width: 350px;
height: 350px;
margin: 100px auto;
}
.div2 {
width: 300px;
height: 300px;
padding: 20px;
border: 5px solid #d7effe;
}
.div3 {
background-color: #ffa0df;
overflow: hidden;
}
.div4 {
margin: 40px;
border: 1px dashed white;
width: 218px;
height: 218px;
}
.div5 {
margin: 3px;
border: 1px dotted white;
width: 210px;
height: 210px;
}
.div6 {
margin: 49px;
border: 5px solid #fcff00;
width: 100px;
height: 100px;
background-color: #96ff38;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script>
var div1 = document.getElementsByClassName("div1")[0];
var d2=document.createElement('div')
d2.setAttribute('class','div2')
div1.append(d2);
var d3=document.createElement('div')
d3.setAttribute('class','div3')
d2.append(d3);
var d4=document.createElement('div')
d4.setAttribute('class','div4')
d3.append(d4);
var d5=document.createElement('div')
d5.setAttribute('class','div5')
d4.append(d5);
var d6=document.createElement('div')
d6.setAttribute('class','div6')
d5.append(d6);
</script>
</body>
</html>
<!--
html
head
title
meta
text --回车
body
text
-->
<!--
html
head
meta
title
body
table
tbody
tr
th
td
text
-->

39
js/demo/jqajax.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 src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>
$.ajax({
url:"http://127.0.0.1:5000/userlist",
type:"GET",
dataType:"json",
success:function(res){
console.log(res)
var uinfo=res
$.each(uinfo,function(i,val){
// console.log(i,val)
var obj=val
console.log(obj.username)
var list=$("<tr><td>"+obj.userid+"</td><td>"+obj.username+"</td><td>"+obj.account+"</td><td>"+obj.pwd+"</td></tr>")
$('#uinfo').append(list)
})
}
})
</script>
</head>
<body>
<table id="uinfo">
<tr>
<th>编号</th>
<th>姓名</th>
<th>账号</th>
<th>密码</th>
</tr>
</table>
</body>
</html>

58
js/demo/jqchildren.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>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.descendants1 *
{
display: block;
border: 2px solid grey;
color: grey;
padding: 5px;
margin: 15px;
}
.demo2{
color: red;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="descendants" style="width:500px;">div (当前元素)
<p class="11">p (子)
<span>span (孙)</span>
</p>
<p class="11">p (子)
<span>span (孙)</span>
</p>
<p class="22">p (子)
<span>span (孙)</span>
</p>
</div>
<script>
// $(".descendants").children(":first").css({"color":"red","border":"2px solid red"});
// $(".descendants").children(".11").css({"color":"red","border":"2px solid red"});
$(".descendants").child().css({"color":"red","border":"2px solid red"});
</script>
</body>
</html>

53
js/demo/jsdom.html Normal file
View File

@@ -0,0 +1,53 @@
<!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>
.box{
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p class="newyear" id="niu" name="neo">过年好</p>
<div id="old">
ppplolk
<p>bye 2020</p>
</div>
</div>
<script>
var str=""
str=document.getElementsByTagName('p')[0] //通过标签获取元素
// 通过类名获取元素 str=document.getElementsByClassName('newyear')[0].innerHTML
// 通过id获取元素 str=document.getElementById('niu').innerHTML
// console.log(str)
str.innerHTML="新年快乐"
var attr=str.getAttribute('name') //获取属性
str.setAttribute('name','tom')
str.setAttribute('class','demo2')
// console.log(attr)
var oldyear=document.getElementById('old')
// oldyear.remove()
// oldyear.parentNode.removeChild(oldyear); 通过父级删自己
var val=document.querySelectorAll("#old")
// document.querySelectorAll("p")
// document.querySelectorAll(".demo2")
console.log(val[0].innerHTML)
var myele=document.createElement('div')
myele.setAttribute('class','box')
myele.innerHTML="happy new year"
// console.log(myele)
document.body.append(myele)
</script>
</body>
</html>

99
js/demo/jsform.html Normal file
View File

@@ -0,0 +1,99 @@
<!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 src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input type="text" placeholder="姓名" value="" name="name" id="name">
<div>
<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex">女
</div>
<div>
<input type="checkbox" name="hob" value="game">玩游戏
<input type="checkbox" name="hob" value="bilibili">看小视频
<input type="checkbox" name="hob" value="tv">电视剧
</div>
<select name="lesson" id="lesson">
<option value="1">法学</option>
<option value="2">医学</option>
<option value="3">哲学</option>
</select>
<div>
<button onclick="save()">保存</button>
</div>
总结一：
1.radio 选中的时候for循环checked
2.checkbox 选中的时候要用个数组接收，判断是否选中也是用checked属性值
3.select 下拉框 选中的时候要用selected 判断是否选中
4.数组转字符串 可以用join(),toString,for循环遍历数组再拼接字符串
<script>
var obj = {}
// function save(){
// var uname=document.getElementById('name')
// // console.log(uname.value)
// var sex= document.getElementsByName("sex");
// // console.log(sex[0].checked,sex[0].value)
// var hobby=document.getElementsByName('hob')
// // console.log(hobby[0].checked,hobby[0].value)
// var lesson=document.getElementById('lesson')
// // console.log(lesson.options)
// for(let i=0; i<lesson.options.length;i++){
// console.log(lesson.options[i].selected,lesson.options[i].value)
// }
// }
function save() {
obj.name = document.getElementById('name').value;
// console.log(obj,123)
var sex = document.getElementsByName('sex')
for (let i = 0; i < sex.length; i++) {
if (sex[i].checked) {
obj.sex = sex[i].value
}
}
var hob = document.getElementsByName("hob")
obj.hob = []
for (let i = 0; i < hob.length; i++) {
if (hob[i].checked) {
obj.hob[i] = hob[i].value
}
}
var lesson = document.getElementById('lesson')
for (let i = 0; i < lesson.length; i++) {
console.log(lesson[i])
if (lesson[i].selected) {
obj.lesson = lesson[i].value
}
}
// obj.hob=obj.hob.join(',')
obj.hob = obj.hob.toString()
console.log(obj, 123)
// 下面是ajax
$.ajax({
url: "https://kaoshi-shangpin.theluyuan.com/findshop",
data:obj,
type:"GET",
dataType:"json",
success: function (res) {
console.log(res)
}
});
}
</script>
</body>
</html>

34
js/demo/jsshijian.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>
<script>
function say(){
alert("你好")
}
</script>
</head>
<body>
<button onclick="say()">say</button>
<div>
<button class="says">say1</button>
</div>
<div>
<button class="say2">say2</button>
</div>
<script>
var mouse=document.getElementsByClassName('says')[0]
mouse.onclick=function(){
alert('nihao')
}
var mouse1=document.getElementsByClassName('say2')[0]
mouse1.addEventListener("click",function(){alert("hello")})
</script>
</body>
</html>

57
js/demo/maopao.html Normal file
View File

@@ -0,0 +1,57 @@
<!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>
.box{
width: 500px;
height: 500px;
border: 1px solid black;
}
.box1{
width: 300px;
height: 300px;
background: pink;
}
.box2{
width: 100px;
height: 100px;
background: gold;
}
</style>
<script>
function box(){
console.log("box被点击了")
}
function box1(){
console.log("box1被点击了")
return
}
function box2(){
console.log("box2被点击了")
event.stopImmediatePropagation();
}
function box3(){
console.log("box1被点击了2")
event.stopPropagation();
}
</script>
</head>
<body>
<div class="box" onclick="box()">
<div class="box1" onclick="box1(),box3()">
<div class="box2" onclick="box2()"></div>
</div>
</div>
<div>
总结：点击box2时，会接连触发 box2() -> box1() -> box() 整个过程叫做冒泡
<p> 阻止冒泡： event.stopImmediatePropagation() event.stopPropagation()</p>
冒泡和捕获不会同时发生
</div>
</body>
</html>

25
js/demo/riqishijian.html Normal file
View File

@@ -0,0 +1,25 @@
<!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>
// 2021-2-26
// 9:58:12
var now=new Date()
console.log(now)
console.log(now.getFullYear()) //2021
console.log(now.getMonth()+1) //2
console.log(now.getDate())
console.log(now.getDay()) //星期
console.log(now.getTime()) //时间戳
console.log(now.getHours()+":"+now.getMinutes()+":"+now.getSeconds())
</script>
</head>
<body>
</body>
</html>

73
js/demo/yuanxing.html Normal file
View 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 val=999
var obj={name:"ming"} // 字面量创建
function Grand(){
this.name="root"
this.pow=2
this.say=function(){
console.log("我是根")
}
}
var grand1=new Grand()
console.log(grand1.__proto__) //grand1 obj 中有个 prototype, 对象里面只能用__proto__ 访问原型（左右两个横线）
console.log(Grand.prototype) //Grand 函数里面有个 prototype
// console.log(Grand.__proto__) error写法 函数里面只能用prototype属性访问原型
function f(){
this.name="father"
}
f.prototype=grand1 //原型指向的只能是实例对象 不能是函数
f.prototype.val="miku"
var fa=new f()
fa.say()
console.log(fa)
var me={}
me.__proto__=fa
console.log(me.name)
console.log(me.val)
//grand1 => fa =>me :原型链
// me.pow
// me 从me对象中查找pow属性的值
// |
// fa me对象中找不到属性时 就会去 上一级 也就是fa对象中找 Pow的值
// |
// grand1 fa 对象中也找不到这个属性的话 ，那么就再往上一层 找grand1中的 pow的值
// 如grand1中也找不到这个值呢 就结果上来说 结果是Undefined 而且原型链的尽头不是window
function A(sa){
this.sa = sa;
this.hello = function(){console.log("hello")}
}
function Aa(saa){
this.saa = saa;
}
function Aaa(saaa){
this.saaa = saaa;
}
var z = new A();
Aa.prototype = z;
var za = new Aa();
Aaa.prototype = za;
var zaa = new Aaa();
zaa.hello();
</script>
</head>
<body>
</body>
</html>

29
js/demo/zuoyongyulx.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>
<script>
function createPerson(name) {
let localPerson = new Object();
localPerson.name = name;
return localPerson;
}
let globalPerson = createPerson("Nicholas");
// 解除globalPerson对值的引用
// globalPerson = null;
</script>
</head>
<body>
</body>
</html>

65
js/kejian/bom.md Normal file
View File

@@ -0,0 +1,65 @@
# Bom
bom 全称是浏览器对象模型 ，他提供的是浏览器操作的方法
bom 组成：
* window对象 js顶层对象 全局global
* location 浏览器当前url信息
* screen 客户端屏幕信息
* navigator 浏览器本身信息
* history 记录历史信息
## window
* 通过js通过浏览器访问的接口
* esma 规定的global对象
```
var a=9
console.log(a) //9
console.log(window.a)
console.log(top) //top 指的是顶层对象也等于window
```
window 对象的方法有：
alert()
confirm() //弹出一个确认框
prompt() //弹出一个带输入框的弹窗
open(url,打开方式,新窗口的尺寸)
打开方式 默认新窗口打开 ，self/black
close() 关闭当前的网页
窗口的尺寸
document.documentElement.clientWidth 和document.documentElement.clientHeight ；(非严格模式)
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;（严格模式）
## location
window.location.href(url) 页search 返回？号后面的所有值。
port 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串
portocol 返回页面使用的协议。 http:或https:面跳转
## navigator
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。 浏览器相关信息都能返回
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
## screen
存储客户端屏幕信息
属性： screen.availWidth //屏幕宽度
screen.availHeigh //屏幕高度
## history
包含浏览器的浏览历史
history.back() 返回上一页
history.forward() 返回下一页
# 本地缓存 localstorage
localStorage.setItem(键,值) 存值
localStorage.getItem(键) 取值
localStorage.clear(); 清空
localStorage.removeItem(键);　删除　

39
js/kejian/digui.md Normal file
View File

@@ -0,0 +1,39 @@
# 递归
### 发生前提：
递归是在一个函数通过名字调用自身的情况下发生的
如：
```
function a(n){
if(n<=1){
return 1
}else{
return num*a(n-1)
}
}
```
这是一个经典的递归阶乘函数，但是接下来的操作却可能会导致他出错
```
function a(n) {
if (n <= 1) {
return 1
} else {
return n * a(n - 1)
}
}
console.log(a(5)) //120
var cheng=a
a=null
console.log(cheng(5))// : a is not a function
```
以上代码把a保存在一个变量（cheng）中，然后将a赋值为null
在cheng执行的过程中 必然会执行到a (在cheng 中else代码块的函数名字改不了)
但是此时a已经不是函数了，所以会报错 a is not a function
上面问题的解决措施：

1
js/kejian/domshijian.md Normal file
View File

@@ -0,0 +1 @@
# dom事件

96
js/kejian/jqdom.md Normal file
View File

@@ -0,0 +1,96 @@
# dom
## jq操作dom
* 查询元素并获取元素的值
查询元素：
* 根据标签选取：$('目标标签')
* 根据class选取：$('.类名')
* 根据id选取：$('#id值')
* 根据属性选取 $('[目标属性]')
获取值：
* element.html() 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
* element.text() 也就是从对象的起始位置到终止位置的全部内容,去除Html标签。
* element.val() 返回表单字段的值
demo:
html:
<html>
<head>
<title>标题</title>
</head>
<body>
<div>提瓦特大陆最好吃的食物是派蒙嗷！</div>
</body>
</html>
js:
```
var str=$('div').text() //提瓦特大陆最好吃的食物是派蒙嗷！
```
获取属性值：
eg:
str=$('p')
var attr=str.attr('name')
document.write($('#image').attr('href'))
* 删除元素 自身
element.remove()
* 修改元素
* 修改元素的文本内容
* element.text('修改后的文本内容')
* elenment.html("\<p>修改后的文本内容\</p>")
* 修改元素的属性
element.setAttribute('属性名','属性值')
eg:
var myele=document.createElement('div')
myele.setAttribute('class','box')
* <p style="color:red;font-weight:bold">创建元素:</p>
* 创建新的html节点
$('要创建的标签名')
* 为新创建的节点添加文本内容
element.html('想要添加的文本内容')
element.text('想要添加的文本内容')
* 为新创建的添加属性及属性值
方法一： element.attr('属性名','属性值')
* 查找一个现有的元素（新元素的父级元素）
* 向已有的元素追加新元素
* fuelement.append(创建的新元素)
demo:
```
var box =$('div')
box.text('happy new year')
box.attr('style', 'width:100px;height:100px;background:red;color:white')
var main = document.body
main.append(box)
```
追加元素的方式：
* append(),在父级最后追加一个子元素
* appendTo(),将子元素追加到父级的最后
* prepend(),在父级最前面追加一个子元素
* prependTo(),将子元素追加到父级的最前面
* after(),在当前元素之后追加（是同级关系）
* before(),在当前元素之前追加（是同级关系）
* insertAfter(),将元素追加到指定对象的后面
* insertBefore(),将元素追加到指定对象的前面
```

128
js/kejian/jsdom.md Normal file
View File

@@ -0,0 +1,128 @@
# dom
## dom 节点树
dom 包含 ：元素节点，文本节点，注释节点
demo:
```
<!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>
hello world
</body>
</html>
```
```
html
head
title
meta
text --回车
body
text
```
## js操作dom
* 查询元素并获取元素的值
查询元素：
* 根据标签选取：document.getElementsByTagName('目标标签')
* 根据class选取：document.getElementsByClassName('目标类名')
* 根据id选取：document.getElementById('目标id')
* js直接访问html对象：
* document.title 获取文档的标题
* document.body 获取body元素
* document.head 获取head元素
...
通过id获取document.querySelectorAll("#old")
通过标签获取 document.querySelectorAll("p")
通过类名获取document.querySelectorAll(".demo2")
获取值：
* element.innerHTML 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
* element.innerText 也就是从对象的起始位置到终止位置的全部内容,去除Html标签。
特别说明 innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用
innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
```
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML标签后的文本</a>
```
获取属性值：
方法一：element.属性名
eg:document.write(document.getElementById("image").src)
方法二：element.getAttribute('属性名')
eg:
str=document.getElementsByTagName('p')[0]
var attr=str.getAttribute('name')
* 删除元素 自身
element.remove()
* 修改元素
* 修改元素的文本内容
* element.innerHTML="修改后的文本内容"
* elenment.innerText="修改后的文本内容"
* 修改元素的属性
* 方法一：
element.属性名="属性值"
demo:
```
document.getElementById("myImage").src = "landscape.jpg";
```
* 方法二：
element.setAttribute('属性名','属性值')
eg:
```
var myele=document.createElement('div')
myele.setAttribute('class','box')
```
* <p style="color:red;font-weight:bold">创建元素:</p>
* 创建新的html节点
document.createElement('要创建的标签名')
* 为新创建的节点添加文本内容
element.innerHTNL="想要添加的文本内容"
element.innerText="想添加的文本内容"
* 为新创建的添加属性及属性值
方法一： element.setAttribute('属性名','属性值')
方法二： element.属性名='属性值'
* 查找一个现有的元素（新元素的父级元素）
* 向已有的元素追加新元素
* fuelement.append(创建的新元素)
demo:
```
var box = document.createElement('div')
box.innerHTML = 'happy new year'
box.setAttribute('style', 'width:100px;height:100px;background:red;color:white')
var main = document.body
main.append(box)
```
追加元素的方式：
* append(),在父级最后追加一个子元素
* appendTo(),将子元素追加到父级的最后
* prepend(),在父级最前面追加一个子元素
* prependTo(),将子元素追加到父级的最前面
* after(),在当前元素之后追加（是同级关系）
* before(),在当前元素之前追加（是同级关系）
* insertAfter(),将元素追加到指定对象的后面
* insertBefore(),将元素追加到指定对象的前面
```

49
js/kejian/jsinfo - 副本.md
View File

@@ -3,6 +3,10 @@
链接：
* https://juejin.cn/post/6916046341131599879
* https://juejin.cn/post/6896445621273083912
### this 指向
https://www.cnblogs.com/pssp/p/5216085.html
demo1:
```
function f() {
@@ -89,3 +93,48 @@ function zxxFn () {
}
zxxFn()
```
### js dom
js dom 初识： https://juejin.cn/post/6907112616221966350
js dom操作 https://juejin.cn/post/6844903593011576845
jq dom操作
### 作业：
通过在页面上点击button，实现主题切换
主题1：黑底白字
主题2：粉底绿字
五环之歌
点击按钮显示一个五行四列的表格 内容自定义
自定义一个6行的ul列表 点击删除
### dom事件
https://www.w3school.com.cn/js/js_htmldom_events.asp

0
js/kejian/jsmaopaobuhuo.md Normal file
View File

7
js/kejian/menu.md Normal file
View File

@@ -0,0 +1,7 @@
# menu
* 作用域
* 闭包
* 预编译
* this指向
* 构造函数

106
js/kejian/this.md Normal file
View File

@@ -0,0 +1,106 @@
# 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的对象

193
js/kejian/zuoyongyu.md Normal file
View File

@@ -0,0 +1,193 @@
# 作用域
### 练习
```
var color = "blue";
function changeColor() {
let anotherColor = "red";
function swapColors() {
let tempColor = anotherColor;
anotherColor = color;
color = tempColor;
// 这里可以访问color、anotherColor和tempColor
}
// 这里可以访问color和anotherColor，但访问不到tempColor
swapColors();
}
// 这里只能访问color
changeColor();
```
分析上面的作用域链：
<details>
<summary>展开查看</summary>
* window
* color
* changecolor()
* anothercolor
* swapcolors()
* tempcolor
</details>
### 垃圾回收机制
优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如果数据不再必要，那么把它设置为null ，从而释放其引用。这也可以叫作解除引用 。这个建议最适合全局变量和全局对象的属性。
局部变量在超出作用域后会被自动解除引用
即 全局变量(GO) 不会被销毁，但是局部变量(AO)函数执行完后会被销毁
也可以手动销毁变量，即赋值为null
如下面的例子所示：
```
function createPerson(name){
let localPerson = new Object();
localPerson.name = name;
return localPerson;
}
let globalPerson = createPerson("Nicholas");
// 解除globalPerson对值的引用
//globalPerson = null;
```
解析：
<details>
<summary>展开查看</summary>
在上面的代码中，变量globalPerson 保存着createPerson() 函数调用返回的值。在createPerson() 内部，localPerson 创建了一个对象并给它添加了一个name 属性。然后，localPerson 作为函数值被返回，并被赋值给globalPerson 。localPerson 在createPerson() 执行完成超出上下文后会自动被解除引用，不需要显式处理。但globalPerson 是一个全局变量，应该在不再需要时手动解除其引用，最后一行就是这么做的。
不过要注意，解除对一个值的引用并不会自动导致相关内存被回收。解除引用的关键在于确保相关的值已经不在上下文里了，因此它在下次垃圾回收时会被回收。
</details>
### 闭包
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。
```
function a() {
var x = 0;
return function(y) {
x = x + y;
// return x;
console.log(x);
}
}
var b = a();
b(1); //1
b(1); //2
```
练习1：
```
function fn() {
var max = 10;
return function bar(x) {
if (x > max) {
console.log(x);
}
};
}
var f1 = fn();
f1(15);
```
练习2
```
function init() {
var name = "Mozilla"; // name 是一个被 init 创建的局部变量
function displayName() { // displayName() 是内部函数，一个闭包
alert(name); // 使用了父函数中声明的变量
}
displayName();
}
init();
```
<details>
init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。请注意，displayName() 没有自己的局部变量。然而，因为它可以访问到外部函数的变量，所以 displayName() 可以使用父函数 init() 中声明的变量 name 。
</details>
hrefs:
https://blog.csdn.net/weixin_43586120/article/details/89456183
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
```
(function() {
var m = 0;
function getM() { return m; }
function seta(val) { m = val; }
window.g = getM;
window.f = seta;
})();
f(100);
console.info(g());
```
<hr/>
```
function fn(){
var arr = [];
for(var i = 0;i < 5;i ++){
arr[i] = (function(i){
return function (){
return i;
};
})(i);
}
return arr;
}
// 立即执行函数 每调用一次完成后就自动销毁
var list = fn();
for(var i = 0,len = list.length;i < len ; i ++){
console.log(list[i]());
} //0 1 2 3 4
```
```
function fn(){
var arr = [];
for(var i = 0;i < 5;i ++){
arr[i] = function(){
return i;
}
}
return arr;
}
var list = fn();
for(var i = 0,len = list.length;i < len ; i ++){
console.log(list[i]());
} //5 5 5 5 5
```
```
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].onclick = function(){
console.log(i);
};
})(i); //事件处理函数中闭包的写法
}
```
```
var li = document.getElementsByTagName( "li" );
　　 for ( var i = 0; i < li.length; i++) {
li[i].addEventListener( "click" , function () {
console.log(i);
})
}
```

92
js/lx/a.html Normal file
View 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
js/lx/callapply.md Normal file
View 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();

120
js/lx/jsthis.md Normal file
View 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 并说明原因
理论题：
谈谈什么是闭包

115
js/lx/this.md Normal file
View File

@@ -0,0 +1,115 @@
# 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 并说明原因
理论题：
谈谈什么是闭包