目录
前言
大二暑假在家,由于之前在学校做课设的时候,自己想做好看的界面,但总是在样式上调试很久,参考网上代码时也有些地方看不懂,想着系统复习和学习一下前端知识,希望能在以后的项目里熟练地写出好看的界面。为了记录我的学习过程也方便我以后查看,于是就有了在CSDN上写博客的想法。这篇是关于JavaScript的总结 !
一、JavaScript介绍
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”,指的是它不具备开发操作系统的能力,
而是只用来编写控制其他大型应用程序的“脚本”。JavaScript 是一种嵌入式语言。
它本身提供的核心语法不算很多。
二、JavaScript与ECMAScript的关系
ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合, 这两个词是可以互换的。
三、JavaScript引入到文件
1.嵌入到HTML文件中,body或者head标签里。
<body>
<script>
var age = 20
</script>
</body>
2.引入本地独立JS文件。
<body>
<script type="text/javascript"src="./itbaizhan.js">
</script>
</body>
3.引入网络来源文件
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</body>
四、JavaScript输出方式
1.弹出对话框
alert("要输出的内容");
ps:在浏览器中弹出一个对话框,然后把要输出的内容展示出来,
alert都是把要输出的内容首先转换为字符串然后在输出的
2.在页面中输出
document.write("要输出的内容");
3.在控制台输出内容
console.log("要输出的内容");
五、数据类型
JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型)
1.原始类型(基础类型):数值number、字符串string、布尔值boolean
var age = 20;
var name = "尚学堂";
var learn = true;
2.合成类型(复合类型)
对象object:因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。
var user = {
name:"尚学堂",
age:20,
learn:true
}
温馨提示:
至于undefined和null,一般将它们看成两个特殊值。
六、运算符
1.对象运算符 typeof
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
typeof {} // "object"
unll和undefined的区别:都表示“没有”,语法效果几乎没区别,可以说一个是数值为空,一个是对象为空
2.算术运算符
加:10 + 10; // 20
减:100 - 10; // 90
乘:10 * 2; //20
除:10 / 5; 2
余数:13 % 5 // 3
自增:var x = 1; ++x // 2
自减:var y = 1; --y // 0
ps:自增和自减运算符有一个需要注意的地方,就是放在变量之后,会先返回变量操作前的值, 再进行自增/自减操作;放在变量之前,会先进行自增/自减操作,再返回变量操作后的值。
console.log(x++ + y);// 2
3.赋值运算符
// 将 1 赋值给变量 x
var x = 1;
// 将变量 y 的值赋值给变量 x
var x = y;
// 等同于 x = x + y
x += y
4.比较运算符
< 小于运算符
> 大于运算符
<= 小于或等于运算符
>= 大于或等于运算符
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不相等运算符
5.布尔运算符
取反运算符(!):!true // false; 对于非布尔值,取反运算符会将其转为布尔值。
且运算符(&&):多个条件都要满足 console.log(10 < 20 && 10 >5); // true
或运算符(||): 满足一个条件即可 console.log(10 < 20 || 10 < 5); // true
6.三元运算符
(条件) ? 表达式1 : 表达式2
当条件的布尔值为true时,执行表达式1否则执行表达式2。
七、条件语句
1.if语句
if (布尔值){
语句;
}
2.if...else
if (m === 3) {
// 满足条件时,执行的语句
} else {
// 不满足条件时,执行的语句
}
3.switch
switch (x) {
case 1:
console.log('x 等于1');
case 2:
console.log('x 等于2');
default:
console.log('x 等于其他值');
}
// x等于1
// x等于2
// x等于其他值
ps:需要注意的是,每个case代码块内部的break语句不能少,否则会接下去执行下一个case代码块, 而不是跳出switch结构。
4.for
for (初始化表达式; 条件; 迭代因子) {
语句
}
a 初始化表达式(initialize):确定循环变量的初始值,只在循环开始时执行一次。
b 布尔表达式(test):每轮循环开始时,都要执行这个条件表达式,只有值为真,才继续进行循环。
c 迭代因子(increment):每轮循环的最后一个操作,通常用来递增循环变量。
d for语句的三个表达式,可以省略任何一个,也可以全部省略。但把条件表达式省略会变成无限循环。
//循环输出1~100之间数字的和
var sum=0;
for(var i=1;i<=100;i++){
sum+=i; }
console.log(sum);
//打印九九乘法表
for(var i = 1;i <= 9;i++){
document.write("<br>");
for(var j = 1;j <= i;j++){
sum = i * j;
document.write(i ,"*" ,j ,"=" ,sum ," ");
}
}
5.while
ps :所有for循环,都可以改写成while循环
while (条件) {
语句;
}
//例子
var i = 0;
while (i < 100) {
console.log('i 当前为:' + i);
i = i + 1;
}
6.break 语句和 continue 语句
1 break语句用于跳出代码块或循环
for (var i = 0; i < 5; i++) {
if (i === 3){
break;
}
console.log(i);
}
2 continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环
for (var i = 0; i < 5; i++) {
if (i === 3){
continue;
}
console.log(i);
}
八、字符串
1.简介
字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。单引号字符串的内部, 可以使用双引号。双引号字符串的内部,可以使用单引号。
'itbaizhan'
"itbaizhan"
'key = "value"'
"It's a long itbaizhan"
注意:字符串默认只能写在一行内,分成多行将会报错
2.属性
length属性返回字符串的长度,该属性也是无法改变的
var s = 'itbaizhan';
s.length // 9
3.方法
a. charAt()
charAt 方法返回指定位置的字符,参数是从 0 开始编号的
var s = new String('itbaizhan');
s.charAt(1) // "t"
s.charAt(s.length - 1) // "n"
注意:如果参数为负数,或大于等于字符串的长度, charAt 返回空字符串
'itbaizhan'.charAt(-1) // ""
'itbaizhan'.charAt(9) // ""
b.concat()
concat 方法用于连接两个字符串,返回一个新字符串,不改变原字符串
var s1 = 'itbaizhan';
var s2 = 'sxt';
s1.concat(s2) // "itbaizhansxt"
s1 // "itbaizhan"
该方法可以接受多个参数
'sxt'.concat('itbaizhan', 'bjsxt') //"sxtitbaizhanbjsxt"
如果参数不是字符串, concat 方法会将其先转为字符串,然后再连接
var one = 1;
var two = 2;
var three = '3';
''.concat(one, two, three) // "123"
console.log(one + two + three )//33
c.substring()
substring方法用于从原字符串取出子字符串并返回,不改变原字符串。它的第一个参数表示子字符串的开始位置,第二个位置表示结束位置(返回结果不含该位置)。
规则:
1.如果省略第二个参数,则表示子字符串一直到原字符串的结束
2.如果第一个参数大于第二个参数, substring 方法会自动更换两个参数的位置
3.如果参数是负数, substring 方法会自动将负数转为0
'itbaizhan'.substring(0, 2) // "it"
'itbaizhan'.substring(2) // "baizhan"
'itbaizhan'.substring(2, -3) // "it"
d.substr()
substr方法用于从原字符串取出子字符串并返回,不改变原字符串,跟 substring 方法的作用相同。substr 方法的第一个参数是子字符串的开始位置(从0开始计算),第二个参数是子字符串的长度。
规则:
1.如果省略第二个参数,则表示子字符串一直到原字符串的结束
2.如果第一个参数是负数,表示倒数计算的字符位置。
3.如果第二个参数是负数,将被自动转为0,因此会返回空字符串
'itbaizhan'.substr(2, 7); // baizhan
'itbaizhan'.substr(2) // "baizhan"
'itbaizhan'.substr(-7) // "baizhan"
'itbaizhan'.substr(4, -1) // ""
e.indexOf()
indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置,返回结果是匹配开始的位置。如果返回 -1 ,就表示不匹配。
'hello world'.indexOf('o') // 4
'itbaizhan'.indexOf('sxt') // -1
indexOf 方法还可以接受第二个参数,表示从该位置开始向后匹配
'hello world'.indexOf('o', 6) // 7
f.trim()
trim 方法用于去除字符串两端的空格、制表符( \t 、 \v )、换行符( \n )和回车符( \r ),返回一个新字符串,不改变原字符串。
' hello world '.trim()// "hello world"
'\r\nitbaizhan \t'.trim() // 'itbaizhan'
g.split()
split 方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。
规则:
1.如果分割规则为空字符串,则返回数组的成员是原字符串的每一个字符
2.如果省略参数,则返回数组的唯一成员就是原字符串
3.接受第二个参数,限定返回数组的最大成员数
'it|sxt|baizhan'.split('|') // ["it", "sxt","baizhan"]
'a|b|c'.split('') // ["a", "|", "b","|","c"]
'it|sxt|bz'.split() // [it|sxt|bz]
'it|sxt|bz'.split('|', 0) // []
'it|sxt|bz'.split('|', 1) // ["it"]
'it|sxt|bz'.split('|', 2) // ["it", "sxt"]
九、数组
1.简介
数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。
var arr = ['sxt', 'baizhan', 'it'];
任何类型的数据,都可以放入数组
var arr = [ 100, [1, 2, 3],false ];
2.length 属性:
数组的length属性,返回数组的成员数量
['sxt', 'baizhan', 'it'].length // 3
3.数组的遍历
数组的遍历可以考虑使用for循环或while循环
var a = ['sxt', 'baizhan', 'it'];
// for循环
for(var i = 0; i < a.length; i++) {
console.log(a[i]);
}
// while循环
var i = 0;
while (i < a.length) {
console.log(a[i]);
i++;
}
for...in遍历数组
var a = ['sxt', 'baizhan', 'it'];
for (var i in a) {
console.log(a[i]);
}
4.数组方法
1.Array.isArray()
Array.isArray 方法返回一个布尔值,表示参数是否为数组。它可以弥补typeof 运算符的不足。
var arr = ["尚学堂", 100, true];
console.log(typeof arr); // object
var arr = ['sxt', 'baizhan', 'it'];
Array.isArray(arr) // true
2.push()/pop()
push 方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。
pop 方法用于删除数组的最后一个元素,并返回该元素。两者都会改变数组长度。
var arr = [];
arr.push("尚学堂") // 1
arr.push('itbaizhan') // 2
arr.push(true, {}) // 4
arr // [尚学堂, 'itbaizhan', true, {}
var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];
arr.pop() // 'WEB前端'
arr // ['尚学堂', 'itbaizhan']
3.shift()/unshift()
shift 方法用于删除数组的第一个元素,并返回该元素。unshift 方法用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。
var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];
arr.shift() // '尚学堂'
arr // ['itbaizhan', 'WEB前端']
var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];
arr.unshift('baizhan'); // 4
arr // ['baizhan', '尚学堂', 'itbaizhan', 'WEB前端']
4.join()
join 方法以指定参数作为分隔符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔。数组的 join 配合字符串的 split()可以实现数组与字符串的互换。
var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
如果数组成员是 undefined 或 null 或空位,会被转成空字符串
[undefined, null].join('#') // '#'
['a',, 'b'].join('-') // 'a--b
5.concat()
concat 方法用于多个数组的合并。它将新数组的成员,添加到原数组成员的后部,
然后返回一个新数组,原数组不变。
['hello'].concat(['world'])// ["hello", "world"]
['hello'].concat(['world'], ['!'])// ["hello", "world", "!"]
除了数组作为参数, concat 也接受其他类型的值作为参数,添加到目标数组尾部。
[1, 2, 3].concat(4, 5, 6) // [1, 2, 3, 4, 5, 6]
6.reverse()
reverse 方法用于颠倒排列数组元素,返回改变后的数组。注意,该方法将改变原数组
var a = ['a', 'b', 'c'];
a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]
实现一个字符串反转排列
var str = "hello";
str.split("").reverse().join("")
7.indexOf()
indexOf 方法返回给定元素在数组中第一次出现的位置,如果没有出现则返回 -1
var arr = ['a', 'b', 'c'];
arr.indexOf('b') // 1
arr.indexOf('y') // -1
indexOf 方法还可以接受第二个参数,表示搜索的开始位置
['尚学堂', '百战程序员','itbaizhan'].indexOf('尚学堂', 1) // -1
十、函数
1.函数的声明
function 命令: function命令声明的代码区块,就是一个函数。function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函数体放在大括号里面。
function print(s) {
console.log(s);
}
2.函数名的提升
JavaScript 引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。
3.函数参数
函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。
4.函数返回值
JavaScript函数提供两个接口实现与外界的交互,其中参数作为入口,接收外界信息;返回值作为出口,把运算结果反馈给外界。
function getName(name){
return name;
}
var myName = getName("itbaizhan")
console.log(myName); // itbaizhan
温馨提示:return 后面不能在添加任何代码,因为不会执行
十一、对象
1.简介
对象(object)是 JavaScript 语言的核心概念,也是最重要的数据类型。简单说,
对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合。
var user = {
name: 'itbaizhan',
age: '13'
};
对象的每一个键名又称为“属性”(property),它的“键 值”可以是任何数据类型。如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用。
var user = {
getName: function (name) {
return name;
}
};
user.getName("itbaizhan") // itbaizhan
如果属性的值还是一个对象,就形成了链式引用
var user = {
name:"itbaizhan",
age:13,
container:{
frontEnd:["Web前端","Android","iOS"],
backEnd:["Java","Python"]
}
}
user.container.frontEnd // ["Web前 端","Android","iOS"]
2.Math对象
Math是 JavaScript 的原生对象,提供各种数学功能。
1.Math.abs()
Math.abs 方法返回参数值的绝对值
Math.abs(1) // 1
Math.abs(-1) // 1
2.Math.max(),Math.min()
Math.max 方法返回参数之中最大的那个值, Math.min 返回最小的那个值。如果参数为空, Math.min 返回 Infinity , Math.max 返回 -Infinity 。
Math.max(2, -1, 5) // 5
Math.min(2, -1, 5) // -1
Math.min() // Infinity
Math.max() // -Infinity
3.Math.floor(),Math.ceil()
Math.floor()向下取整,Math.ceil()向上取整
Math.floor(3.2) // 3
Math.floor(-3.2) // -4
Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3
4.Math.random()
Math.random() 返回0到1之间的一个伪随机数,可能等于0,但是一定小于1。
Math.random() // 0.28525367438365223
//任意范围的随机数生成函数如下
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
getRandomArbitrary(5, 10)//得到5到10之间的随机数
3.Date对象
Date 对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00 作为时间的零点,可以表示的时间范围是前后各1亿天(单位为毫秒)
1.Date.now()
Date.now 方法返回当前时间距离时间零点(1970年1月1日 00:00:00UTC)的毫秒数,
相当于Unix时间戳乘以1000.
Date.now(); // 1635216733395
2.时间戳
时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)
起至现在的总秒数。Unix是20世纪70年代初出现的一个操作系统,Unix认为1970年1月1日0点是时间纪元。
JavaScript也就遵循了这一约束。
3.实例方法get类
Date 对象提供了一系列 get* 方法,用来获取实例对象某个方面的值:
getTime():返回实例距离1970年1月1日00:00:00的毫秒数
getDate():返回实例对象对应每个月的几号(从1开始)
getDay():返回星期几,星期日为0,星期一为1,以此类推
getYear():返回距离1900的年数
getFullYear():返回四位的年份
getMonth():返回月份(0表示1月,11表示12月)
getHours():返回小时(0-23)
getMilliseconds():返回毫秒(0-999)
getMinutes():返回分钟(0-59)
getSeconds():返回秒(0-59)
var d = new Date('January 6, 2022');
d.getDate() // 6
d.getMonth() // 0
d.getYear() // 122
d.getFullYear() // 2022
//编写函数获得本年度剩余天数
function leftDays() {
var today = new Date();
var endYear = new Date(today.getFullYear(),11, 31, 23, 59, 59, 999);
var msPerDay = 24 * 60 * 60 * 1000;
return Math.round((endYear.getTime() - today.getTime()) / msPerDay);
}
十二、DOM概述
1.介绍
DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(DocumentObjectModel)。它的作用是将网页转为一个JavaScript 对象,从而可以用脚本进行各种操作(比如对元素增删内容)。浏览器会根据 DOM 模型,将结构化文档HTML解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。
所有的节点和最终的树状结构,都有规范的对外接口DOM 只是一个接口规范,可以用各种语言实现。所以严格地说,DOM 不是 JavaScript 语法的一部分,但是 DOM 操作是 JavaScript最常见的任务,离开了 DOM,JavaScript 就无法控制网页。另一方面,JavaScript 也是最常用于 DOM 操作的语言。
2.节点
DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种:
Document: 整个文档树的顶层节点
DocumentType: doctype标签
Element: 网页的各种HTML标签
Attribute: 网页元素的属性(比如class="right")
Text: 标签之间或标签包含的文本
Comment: 注释
DocumentFragment:文档的片段
3.节点树
一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点,下一层都是顶层节点的子节点,然后子节点又有自己的子节点,就这样层层衍生出一个金字塔结构,倒过来就像一棵树浏览器原生提供document节点,代表整个文档。 除了根节点,其他节点都有三种层级关系:
父节点关系(parentNode):直接的那个上级节点
子节点关系(childNodes): 直接的下级节点
同级节点关系(sibling): 拥有同一个父节点的节点
4.document对象_方法/获取元素
a.getElementsByTagName()
该方法搜索 HTML 标签名,返回符合条件的元素。它的返回值是一个类似数组对象,可以实时反映 HTML 文档的变化。如果没有任何匹配的元素,就返回一个空集。如果传入 * ,就可以返回文档中所有 HTML 元素。
b.getElementsByClassName()
该方法返回一个类似数组的对象,包括了所有 class 名字符合指定条件的元素,元素的变化实时反映在返回结果中。由于 class 是保留字,所以 JavaScript 一律使用 className 表示 CSS 的 class。
c.getElementsByName()
该方法用于选择拥有 name 属性的 HTML 元素(比如 <form> 、 <radio> 、 <img> 等),返回一个类似数组的的对象( NodeList 实例),因为 name 属性 相同的元素可能不止一个。
d.getElementById()
该方法返回匹配指定 id 属性的元素节点。如果没有发现匹配的节点,则返回 null。注意,该方法的参数大小写是敏感的。比如,如果某个节点的 id 属性是 main ,那么 .getElementById('Main') 将返回 null。
e.querySelector()
该方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点 满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回 null。
f.querySelectorAll()
该方法与 querySelector 用法类似,区别是返回一个NodeList 对象,包含所有匹配给定选择器的节点。
<p class="text">Hello</p>
<form name="login"></form>
<div id="root">哈哈哈</div>
<div class="nav">nav1</div>
<div class="nav">nav2</div>
<script>
// 获得div标签数组的第一个div标签
var div1 = document.getElementsByTagName("div")[0]
div1.innerHTML = "Hello World"// 把获得的标签的内容写成 Hello World
// 获得class为text的标签数组的第一个标签
var text = document.getElementsByClassName("text")[0];
text.innerHTML = "Hello!"// 把获得的标签内容写成 Hello!
// 使用率极低
var name = document.getElementsByName("login")
console.log(name);
var root = document.getElementById("root");// 获得id为 root 的标签
root.innerHTML = "呵呵呵"// 把该标签的内容改为 呵呵呵
var nav = document.querySelector(".nav");// 获得class为nav的第一个标签
console.log(nav);// 在控制台输出该标签
// 获得class为nav标签数组的第二个标签
var navs = document.querySelectorAll(".nav")[1];
console.log(navs); // 在控制台输出该标签
</script>
5.document对象_方法/创建元素
a.document.createElement()
该方法用来生成元素节点,并返回该节点。
b.document.createTextNode()
该方法用来生成文本节点(Text 实例),并返回该节点。它的参数是文本节点的内容。
c.document.createAttribute()
该方法生成一个新的属性节点(Attr 实例),并返回它。
var text = document.createElement("p");//创建一个p标签
var content = document.createTextNode("我是文本")//创建一个文本
var it = document.createAttribute("id")//创建一个id
it.value = "root"//给id取名叫“root”
text.appendChild(content);//往p标签里添加文本
text.setAttributeNode(it);//往p标签里添加id
console.log(text);//在控制台输出p标签
//获得页面id为container的div标签
var container = document.getElementById("container");
container.appendChild(text);//在div标签里放入p标签在页面上显示出来
6.Element对象_属性
Element对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM 树上都会转化成一个
Element节点对象(以下简称元素节点)。
a.Element.id
Element.id 属性返回指定元素的 id 属性,该属性可读写
// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"
b.Element.className
className 属性用来读写当前元素节点的 class 属性。它的值是一个字符串,每个 class 之间用空格分割。
c.Element.classList
classList 对象有下列方法:
add() : 增加一个 class
remove() : 移除一个 class
contains() : 检查当前元素是否包含某个 class
toggle() : 将某个 class 移入或移出当前元素
var div = document.getElementById('myDiv');
div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.contains('myCssClass'); // 返回true 或者 false
div.classList.toggle('myCssClass'); // 如果myCssClass 不存在就加入,否则移除
d.Element.innerHTML
Element.innerHTML 属性返回一个字符串,等同于该元素包含的所有HTML 代码。该属性可读写,常用来设置某个节点的内容。它能改写所有元素节点的内容,包括 <HTML> 和 <body> 元素
e.Element.innerText
innerText 和 innerHTML 类似,不同的是 innerText 无法识别元素,会直接渲染成字符串
7.Element获取元素位置
属性 描述
clientHeight 获取元素自身高度包括 padding 部分,但是不包括 border 、 margin
clientWidth 获取元素自身宽度,同上
scrollHeight 元素总高度,它包括 padding ,但是不包括 border 、 margin
包括溢出的不可见内容
scrollWidth 元素总宽度,同上(在实际中和clientWidth差不多)
scrollLeft 当前水平滚动条距离左端的像素数量
scrollTop 当前垂直滚动条距离顶端的像素数量
offsetHeight 元素的 CSS 垂直高度(单位像素),包括元素本身的高度、
padding 和 border
offsetWidth 元素的 CSS 水平宽度(单位像素),同上
offsetLeft 左边到定位父级左边界的间距,前提是父级有定位,否则往更上一级定位
offsetTop 上边到定位父级上边界的间距
// 视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeight
8.CSS操作
a.setAttribute
HTML 元素的 style 属性操作 CSS 样式最简单的方法,就是使用网页元素节点的setAttribute 方法直接操作网页元素的 style 属性
div.setAttribute('style','background-color:red;' + 'border:1px solidblack;');
b.元素节点的 style 属性
var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';
c.cssText 属性
var divStyle = document.querySelector('div').style;
divStyle.cssText = 'background-color: red;' + 'border: 1px solid black;'
+ 'height: 100px;' + 'width: 100px;';
9.事件处理程序
a.HTML事件处理
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Js事件详解--事件处理</title>
</head>
<body>
<div id="div">
<button id="btn1" οnclick="demo()">按钮</button>
</div>
<script>
function demo(){
alert("hello html事件处理");
}
</script>
</body>
</html>
b.DOM0级事件处理
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.οnclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉
btn1.οnclick=function(){alert("Hello DOM0级事件处理程序2");}
</script>
</body>
c.DOM2级事件处理
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1(){ alert("DOM2级事件处理程序1") }
function demo2(){ alert("DOM2级事件处理程序2") }
function demo3(){ alert("DOM2级事件处理程序3") }
btn1.removeEventListener("click",demo2);
</script>
</body>
10.事件类型之鼠标事件
鼠标事件:鼠标事件指与鼠标相关的事件,具体的事件主要有以下一些
1 click: 按下鼠标时触发
2 dblclick: 在同一个元素上双击鼠标时触发
3 mousedown: 按下鼠标键时触发
4 mouseup: 释放按下的鼠标键时触发
5 mousemove: 当鼠标在节点内部移动时触发。当鼠标持续移动时,该事件会连触发。
6 mouseenter: 鼠标进入一个节点时触发,进入子节点不会触发这个事件
7 mouseleave: 鼠标离开一个节点时触发,离开父节点不会触发这个事件
8 mouseover: 鼠标进入一个节点时触发,进入子节点会再一次触发这个事件
9 mouseout: 鼠标离开一个节点时触发,离开父节点也会触发这个事件
10 wheel: 滚动鼠标的滚轮时触发
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
console.log("click事件");
}
这些方法在使用的时候,除了DOM2级事件,都需要添加前缀 on.
11.Event事件对象
事件发生以后,会产生一个事件对象,作为参数传给监听函数。
a.Event对象属性:
1 Event.Target
Event.target属性返回事件当前所在的节点
// HTML代码为
// <p id="para">Hello</p>
function setColor(e) {
console.log(this === e.target);
e.target.style.color = 'red';
}
para.addEventListener('click', setColor);
2 Event.type
Event.type属性返回一个字符串,表示事件类型。事件的类型是在生成事件的时候。该属性只读。
b.Event对象方法:
3 Event.preventDefault()
该方法取消浏览器对当前事件的默认行为。比如点击链接后,浏览器默认会跳转到另一个页面,使用这个方法以后,就不会跳转了。
btn.onclick = function(e){
e.preventDefault(); // 阻止默认事件
console.log("点击A标签");
}
4 Event.stopPropagation()
该方法阻止事件在 DOM 中继续传播,防止再触发,阻止事件冒泡。定义在别的节点上的监听函数,但是不包括在当前节点上其他的事件监听函数 。
btn.onclick = function(e){
e.stopPropagation(); // 阻止事件冒泡
console.log("btn");
}
12.事件类型之键盘事件
1 keydown:按下键盘时触发。
2 keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件 不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
3 keyup: 松开键盘时触发该事件
4 keyCode: 唯一标识// 回车键值为13
username.onkeypress = function(e){
console.log("keypress事件");
}
var username = document.getElementById("username");
username.onkeydown = function(e){// 按下回车键触发的事件
if(e.keyCode === 13){
console.log("回车");
}
}
13.事件类型之表单事件
1 input事件
input事件当 <input>、<select>、<textarea> 的值发生变化时触发。对于复选框( <input type=checkbox> )或单选框( <input type=radio> ),用户改变选项时,也会触发这个事件。input事件的一个特点,就是会连续触发,比如用户每按下一次按键,就会触发一次input事件。
var username = document.getElementById("username");
username.oninput = function(e){// 实时获取当前输入框的内容
console.log(e.target.value);
}
2 select事件
select事件当在 <input>、<textarea> 里面选中文本时触发
// HTML 代码如下
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select',
function (e) {
console.log(e.type); // 该事件类型是"select"
}, false);
3 Change事件
Change事件当 <input>、<select>、<textarea> 的值发生变化时触发。 它与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发。
var email = document.getElementById("email");
email.onchange = function(e){
console.log(e.target.value);//当输入完后获取值
}
4 reset事件
发生在表单对象 <form> 上,reset事件当表单重置(所有表单成员变回默认值)时触发。
5 submit事件
发生在表单对象 <form> 上,submit事件当表单数据向服务器提交时触发。
<form id="myForm" οnsubmit="submitHandle">
<button οnclick="resetHandle">重置数据
</button>
<button>提交</button>
</form>
var myForm = document.getElementById("myForm")
function resetHandle(){
myForm.reset();
}
function submitHandle(){
console.log("提交");
}
14.事件代理(事件委托)
由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)。
var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() ==='li') {
// some code
}
});
15.定时器
JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由 setTimeout() 和 setInterval()这两个函数来完成。它们向任务队列添加定时任务。
1 setTimeout ()
函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。 setTimeout 函数接受两个参数,第一个参数 func|code 是将要推迟执行的。函数名或者一段代码,第二个参数 delay 是推迟执行的毫秒数。
var timerId = setTimeout(func|code, delay);
setTimeout(function(){
console.log("定时器")
},1000)
温馨提示:
还有一个需要注意的地方,如果回调函数是对象的方法,那么setTimeout 使得方法内部的 this 关键字指向全局环境,而不是定义时所在的那个对象
定时器取消:
var id = setTimeout(f, 1000);
clearTimeout(id);
2 setInterval ()
函数的用法与 setTimeout 完全一致,区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。
var timer = setInterval(function() {
console.log(2);
}, 1000)
通过setInterval方法实现网页动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#someDiv{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="someDiv"></div>
<script>
var div = document.getElementById('someDiv');
var opacity = 1;
var fader = setInterval(function() {
opacity -= 0.05;
if (opacity > 0) {
div.style.opacity = opacity;
} else {
clearInterval(fader);
}
}, 30);
</script>
</body>
</html>
16.防抖(debounce)
防抖严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。
防抖定义:
对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一次。
从滚动条监听的例子说起
function showTop () {
var scrollTop = document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
window.onscro = showTop
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法
}
}
17.节流(throttle)
如果在限定时间段内,不断触发滚动事件(比如某个用户闲着无聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远不会输出当前距离顶部的距离。但是如果产品同学的期望处理方案是:即使用户不断拖动滚动条,也能在某个时间间隔之后给出反馈呢?
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间,执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(function(){
fn()
valid = true;
}, delay)
}
}
function showTop () {
var scrollTop =
document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
window.onscroll = throttle(showTop,300)
使用场景:
1 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
2 页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)。
十三、总结
这个笔记内容中的“重点”和“轻点”是我根据自己的学习状况和理解来的,有什么不足还请多多包涵~