HTML笔记

最新推荐文章于 2024-11-08 16:09:18 发布

一个人孤独啊

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量1k

点赞数 23

分类专栏：课堂笔记文章标签： js javascript html css vue.js

本文链接：https://blog.csdn.net/duwei666/article/details/115268462

版权

课堂笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS

外部引用

<link rel="stylesheet" type="text/css" href="地址" />

内部

<style type="text/css">

引入4.5 bootstrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</style>

在页面中直接写入

<script type="text/javascript">js代码</script>。

在页面中引入外部文件

<script src="地址"></script>

transition过渡希望把效果添加到哪个 CSS 属性上效果的时长
transform旋转格式transform rotate(数字deg)

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: //带图片的标签

js基本类型

number string boolean undefind null

引用数据类型

object function

区别栈内存堆内存

typeof基本

instanceof引用

getElementById() 是多个 JavaScript HTML 方法之一。
alert() 警告框
 innerHTML 修改内容

 console.log() 浏览器控制台
JavaScript 使用 var 关键词来声明变量。= 号用于为变量赋值。

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

构造函数

var fun new function（“a”，“b”，“return，a+b”）

变量提升 全局环境 函数环境

js 预解析

var/function会进行定义

var a只定义不赋值

function既定义且赋值

命名函数 function sum（）{}

匿名函数var sum = func（）{}

嵌套函数

function fn（）{

	return function fn1(){

	}

}

自调用函数

（function（）{}）

function sum（）{

	console.log（arguments）

}

sum（1,2）//<u>获取参数arguments 不是一个真正的数组 怎么转换成真实的数组

将arguments转换成数组的方法

将函数里的arguments，转换成一个真正的数组的方法，arguments是个类数组，除了有实参所组成的类似数组以外，还有自己的属性，如callee，arguments.callee就是当前正在执行的这个函数的引用，它只在函数执行时才存在。因为在函数开始执行时，才会自动创建第一个变量arguments对象。

一、arguments这个类数组

1. 它将实参以数组的形式保存着,还可以像数组一样访问实参,如arguments[0];
2. 它也有自己独特的属性，如：callee，
3. 它的长度是实参的个数。补充：那arguments.callee.length又是什么呢？arguments.callee是当前正在执行的函数的引用，类似function.length，那就是形参的个数。

二、将arguments转换为真正的数组的方法

1. Array.prototype.slice.apply(arguments)这是运行效率比较快的方法（看别人资料说的）,为什么不是数组也可以，因为arguments对象有length属性，而这个方法会根据length属性,返回一个具有length长度的数组。若length属性不为number，则数组长度返回0;所以其他对象只要有length属性也是可以的哟，如对象中有属性0,对应的就是arr[0],即属性为自然数的number就是对应的数组的下标，若该值大于长度，当然要割舍啦。
2. Array.prototype.concat.apply(thisArg,arguments)。,thisArg是新的空数组，apply方法将函数this指向thisArg，arguments做为类数组传参给apply。根据apply的方法的作用,即将Array.prototype.slice方法在指定的this为thisArg内调用，并将参数传给它。用此方法注意:若数组内有数组，会被拼接成一个数组。原因是apply传参的特性。
3. 我自己想了个方法，利用Array的构造函数,如Array(1,2,3,4,5,6);可以返回一个传入的参数的数组，那Array.apply(thisArg,arguments)也可以将arguments转化为数组，果然实验是可以的;有没有什么影响呢，就是乱用了构造函数，但这也是js的特性嘛。构造函数也是函数。用此方法注意:若数组内有数组，会被拼接成一个数组。原因是apply传参的特性。
4. 用循环，因为arguments类似数组可以使用arguments[0]来访问实参，那么将每项赋值给新的数组每项，直接复制比push要快，若实参有函数或者对象，就要深拷贝。

 

三、综上所述，最完美的方法应该是Array.prototype.slice.apply(arguments)了

执行上下文

function a（）{

	b（）

}

function b（）{

 c（）

}

function c（）{

console.log（“Hello word”）

}

a（）

stack栈的意思

数组

定义：var arr = 【】；

var arr1 = new array（）

向尾部追加push（"张三")

像头部追加unshift（“李四"）

头部删除shift（）

删除尾部pop（）

连接数组 concat

插入splice（起始下标，删除个数，替换的元素）删除 替换

slice（起始位置，结束位置） 数组的截取

数组的排序 sort a-b升序 b-a降序

数组的定位 indexof如果数组中存在 则返回其下标 否则返回-1

indexof从后往前 lastindexof从前往后

ES6新增的数组方法

find(function(n){})寻找如果符合条件的结果返回这个值

var arr = [1,2,3,-1]
var res = arr.find(function(n){
	return n <0
})
console.log(res)//-1

findIndex如果符合条件的结果返回这个下标

var arr = [1,2,3,-1]
var res = arr.findIndex(function(n){
	return n <0
})
console.log(res)//3

fill()填充

var aa = [];
var arr1 = new Array(10)
console.log(arr1.fill("111"))//111,111,111,111,111

Array.form() 可以把一个伪类数组转为真是数组

function sum (){
console.log(argumentss)
}
sum(1,2,3,4,4,5)
arguments array.prototyype.slice(ar)

数组的迭代器

var arr=[1,2,3,4,5];
for(var i= 0;i<arr.length;i++){
console.log(arr[i])
}迭代方法foreach（function（value，index，数组）{}
arr.foreach(function(value,index，arr){
console.log(value+"-----下标"+index+“--原数组”+arr)
})

map(function(value,index,数组))映射
arr.map(function(value,index,arr){
	consloe.log(value)
})

every(function(value,index,arr){})
var result = arr.every(function(a){
	return a % 2 ==0;
})console.log(result)
//every每一个条件都满足才返回true 只要有一个不满足就返回false
//some 只要有一个条件满足就会返回true 否则返回false

filter(过滤)//把当前符合条件的值返回 不符合的过滤
arr.filter(function(item){
return item % 2==0
})
//ES6新语法规范
function(){} == ()=>{}

reduce ((initvalue,currentvalue,index,arr)=>{

})累加
//初始值:initvalue如果设置第一个值就为初始值 如果不设置则为数组中第一个值

字符串转数组

var str = "hello word";
//split();
str.split();
console.log(str);

reverse 反转

var numm = [1,2,3,4];
var res = num.reverse();
console.log(res);

join链接可以把数组变成字符串

var string = num+"";//原始
num.join("");默认以字符进行

var str="你好，李焕英"；
var st1 = str
.split()
.reverse()
.join()

原型原型链

prototype
在javascript除外，每一个函数都有一个prototype属性，这个属性指向函数的原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sgzNlEH6-1616837302430)(C:\Users\DUWEI\Desktop\Html\image\prototype.png)]

_ proto_
每个对象（null除外）都会有一个属性，叫_proto_，这个属性会指向对象的原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sFOPeJmx-1616837302434)(C:\Users\DUWEI\Desktop\Html\image_ proto_.png)]

constructor

每个原型都有一个constructor属性，指向与之关联的构造函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZZkO1xRI-1616837302436)(C:\Users\DUWEI\Desktop\Html\image\constructor.png)]

原型链
那 Object.prototype 的原型呢？

null，我们可以打印：

console.log(Object.prototype.proto === null) // true
引用阮一峰老师的《undefined与null的区别》就是：

null 表示“没有对象”，即该处不应该有值。

所以 Object.prototype.proto 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ORM2RCC-1616837302439)(C:\Users\DUWEI\Desktop\Html\image\原型链.png)]

全局环境函数环境

js执行有两个阶段：创建阶段和执行阶段（生命周期）

var a 在初始化阶段只定义但是未赋值

function 在初始化阶段声明并赋值

console.log(a);undefined

var a=10;

window.a=10;

闭包

执行上下文中 a函数中创建一个b函数这个函数能够访问b函数中的变量我们称这个a函数为闭包

能够读取其他函数内部变量的函数

function a(){
var name = "张三";
var age =18;
return function b(){
console.log(name,age)
}
}
var fn = a（）

call apply bind改变this指针

var a =20
var obj = {
a:40
};
function fn(){
 console.log(this.a);
}
fn()//20
fn.call(obj);//40
fn.apply(obj);//40
fn.bind(obj);
bind//返回一个函数 需要在调用一下
var fn = fn.bind(obj)

手写一个new

function _new() {
	// 创建一个新对象
    let newObj = {};  
    // 获取构造函数
    let Constructor = Array.prototype.shift.call(arguments);
    // 连接新对象原型，新对象可以访问原型中的属性
    newObj.__proto__ = Constructor.prototype;
    // 执行构造函数，即绑定 this，并且为这个新对象添加属性
    Constructor.apply(newObj, arguments);
    // 返回该对象
    return newObj;
}

DOM

1、getElementById() 方法返回带有指定 ID 的元素：

getElementById() 方法返回带有指定 ID 的元素：
	<div id="demo">节点</div>
	var demo = document.getElementById('demo');//获取父节点

2、getElementsByClassName() 方法返回包含带有指定类名的所有元素的节点列表：


	<p class="intro">DOM 很有用。</p>

	<p class="intro">本例演示 <b>getElementsByClassName</b> 方法。</p>
	
	var x = document.getElementsByClassName("intro");

3、getElementsByTagName() 方法通过标签名查找 HTML 元素：

	<p>DOM 很有用。</p>
	var x = document.getElementsByTagName("p");

4、querySelectorAll() 方法通过 CSS 选择器查找 HTML 元素：

	<p class="intro">DOM 很有用。</p>
	
	<p id="intro">DOM 很有用。</p>
	
	var x = document.querySelectorAll("p.intro");
	
	var x = document.querySelectorAll("p#intro");

5、createElement() 方法创建一个元素标签

	var h1=document.createElement("h1");

6、创建文本节点 createTextNode()

	var txt = document.createTextNode("这是一个盒子");

7、cloneNode() 方法克隆一个节点 cloneNode(false/true)

	如果为true克隆下面的子节点，如果为false则只克隆当前的标签：
	<div id="app" data="111">
        <h1>asd</h1>
    </div>
    <button onclick="clone()">clone</button>
    <script>
     var oapp =document.querySelector("#app");
     var oh1 = document.querySelector("h1");
      function clone(){
        var newNode=oh1.cloneNode(true);
        oapp.appendChild(newNode);
    }
    </script>

8、innerHTML 属性

innerHTML 属性可用于获取或替换 HTML 元素的内容，（不替换用 "+="）

<div id="app" data="111">
        <h1>asd</h1>
</div>
<button onclick="insert()">insert</button>

<script>
var oapp =document.querySelector("#app"); 
function insert(){
        oapp.innerHTML+="<div><h1>写入文本</h1></div>";
}
</script>

鼠标事件

click mouseup mousemove mouse down mouseout

键盘事件

key keyup keydown

UI

blur focus()聚焦 blur()失焦

事件流

事件流：多个节点对象对同一事件进行响应的先后顺序

ELE.addEventListener(“mouseup”,function(){},ture)

目标阶段冒泡阶段捕获阶段

如果在事件监听上第三个参数设置为false是一个事件冒泡

如果是true的话是一个事件捕获

事件委托把子事件委托给他的父级进行执行

ES6 const let var let const 区别？

共同特点都是用来声明变量的

var可以变量提升可以重复声明

let不能重复声明不能够变量提升 let是块级作用域

const 不能够重复性声明值不能修改

    oapp.innerHTML+="<div><h1>写入文本</h1></div>";

}


### 鼠标事件

click mouseup mousemove mouse down mouseout


### 键盘事件

key keyup keydown


### UI

blur focus()聚焦 blur()失焦


### 事件流

事件流：多个节点对象对同一事件进行响应的先后顺序

ELE.addEventListener("mouseup",function(){},ture)

目标阶段 冒泡阶段 捕获阶段

如果在事件监听上第三个参数设置为false是一个事件冒泡

如果是true的话是一个事件捕获

事件委托 把子事件委托给他的父级进行执行

### ES6 const let var let const 区别？

共同特点都是用来声明变量的

var可以变量提升 可以重复声明 

let不能重复声明 不能够变量提升 let是块级作用域

const 不能够重复性声明 值不能修改