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

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);
})
}
```