好久没更新了
This commit is contained in:
113
js/demo/bibao.html
Normal file
113
js/demo/bibao.html
Normal 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
83
js/demo/buhuo.html
Normal 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
71
js/demo/callapply.html
Normal 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>
|
||||
@@ -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
51
js/demo/digui&bibao.html
Normal 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
29
js/demo/digui.html
Normal 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
97
js/demo/diguibibao.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>
|
||||
</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
38
js/demo/dingshiqi.html
Normal 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
104
js/demo/dom.html
Normal 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
39
js/demo/jqajax.html
Normal 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
58
js/demo/jqchildren.html
Normal 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
53
js/demo/jsdom.html
Normal 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
99
js/demo/jsform.html
Normal 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
34
js/demo/jsshijian.html
Normal 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
57
js/demo/maopao.html
Normal 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
25
js/demo/riqishijian.html
Normal 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
73
js/demo/yuanxing.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 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
29
js/demo/zuoyongyulx.html
Normal 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>
|
||||
Reference in New Issue
Block a user