JavaScript学习笔记

最新推荐文章于 2023-10-27 16:45:10 发布
最新推荐文章于 2023-10-27 16:45:10 发布
阅读量242 收藏
点赞数 3
分类专栏： 学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mryjf/article/details/106154767
版权

JavaScript

  • 概念：一门客户端脚本语言

    • 运行在客户端浏览器中的。每一个浏览器都有 JavaScript 的解析引擎
    • 脚本语言：不需要编译，直接就可以被浏览器解析执行了

  • 功能：可以来增强用户和 html 页面的交互过程，可以来控制 html 元素，让页面有一些动态的效果，增强用户的体验。

JavaScript发展史

  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C–，后来更名为：ScriptEase
  2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
  3. 1996年，微软抄袭JavaScript开发出JScript语言
  4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
  • JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
    • ECMAScript：客户端脚本语言的标准

与html结合方式

  • 内部JS：定义<script>，标签体内容就是 js 代码

    • <script> js代码 </script>

  • 外部JS：定义<script>，通过 src 属性引入外部的 js 文件

    • <script src="js文件相对路径"></script>

  • 注意

    1. <script>可以定义在 html 页面的任何地方。但是定义的位置会影响执行顺序。
    2. <script>可以定义多个，在一个script中如果前面有异常，则此script中后面的代码不执行，但不影响其它的script代码块
    3. 一般将外部导入的写在前面head中，自己编写的写在最后

基本语法

注释

  • 单行注释：//注释内容
  • 多行注释：/*注释内容*/

数据类型

原始数据类型（基本数据类型）

  • number：数字。整数、小数、NaN（not a number 一个不是数字的数字类型）
  • string：字符串。（字符串形如：“abc”、“a”、‘abc’）
  • boolean：true 和 false
  • null：表示一个空对象，通常用作一个空引用或一个空对象的预期（占位符）
  • undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

复杂数据类型（引用数据类型）

  • object

    • var obj = {};
    • var obj = new Object();

  • function

  • array

数据类型的判断

  • typeof 运算符：获取变量的类型，返回字符串。（注：null运算后得到的是object）
    • typeof(a);
    • typeof a;
<script>
	typeof(7); // number
	typeof("7"); // string
	typeof(true); // boolean
	typeof(null); // object
	typeof(undefined); // undefined
	typeof(NaN); // number

	console.log(null == undefined) // true
	console.log(NaN == NaN) // false，NaN自身不相等
	console.log(isNaN(NaN)) // true，判断一个变量是不是NaN
</script>

数据类型的转换

  • 转数值

    • Number()：可以转整数和浮点数。

      • 如果字符串里除了数字还有其它则输出NaN
      • Number(undefined)：结果为NaN
      • Number("") 和 Number(" ")：结果为0，（不论双引号里有多少空格）
      • Number(true)：结果为1，反之false为0
      • Number(null)：结果为0

    • parseInt()：可以转整数（浮点数的小数点后面的会被省去）

      • parseInt("123abc123")：结果为123（从左到右识别字符串，取出未到字符时的数字）
      • parseInt("abc123")：结果为NaN
      • 空字符串为NaN
      • 布尔值为NaN
      • null为NaN
      • undefined为NaN

    • parseInt(num, 指定进制)：将指定进制的数字转为十进制（如果输入有错误，则输出NaN）

    • parseFloat()：可以转换为浮点数

  • 转字符串

    • String()：所有数据都可以转字符串，输出加引号
    • str.toString()：对null和undefined不能使用
    • str.toString(进制)：将str转为对应进制的值
<script>
	var num = 15;
	alert(num.toString(16)); //输出f，不能直接数字.toString()
</script>
  • 转布尔值
    • Boolean()
      • 数值类型只要不为0和NaN，转换后为true
      • 字符串类型只要不为""，转换后为true
      • null和undefined：转换后为false
      • 所有对象都为 true

变量

  • 变量：一小块存储数据的内存空间

  • Java语言是强类型语言，而JavaScript是弱类型语言。

    • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
    • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

  • 语法：var 变量名 = 初始化值;

    • 变量名命名规范
      • 不能以数字开头
      • 不能出现特殊符号，除（_ 和 - 和 $）
      • 不能使用关键字
      • 命名区分大小写
      • 使用小驼峰命名法

运算符

一元运算符：只有一个运算数的运算符++、--、+(正号)、-、!

  • ++、--：自增、自减

    • ++(--)在前，先自增(自减)，再运算
    • ++(--)在后，先运算，再自增(自减)

  • +(-)：正负号

  • string 转 number：按照字面值转换。如果字面值不是数字，则转为 NaN（不是数字的数字）

    • +'s'+2：输出NaN
    • 's'+2：输出s2
    • !!""+"33"：输出false33

  • boolean 转 number：true 转为1，false 转为0

  • 注意：在JS中，如果运算数不是运算符所要求的类型，那么 js引擎会自动的将运算数进行类型转换

算数运算符：+、-、*、/、%、++、--

赋值运算符：=、+=、-=、*=、/=

比较运算符：>、<、>=、<=、==、===(全等于)、!=、!==

  • 比较方式

    1. 类型相同：直接比较

      • 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

    2. 类型不同：先进行类型转换，再比较

      • ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回 false

逻辑运算符：&&、||、!

  • 短路

    • 1 && 2 && 4：返回4
    • 1+1 && 2 && !false：返回true
    • 1+1 && 0 && true：返回0

  • 其他类型转boolean：

    1. number：0 或 NaN 为假，其他为真
    2. string：除了空字符串""，其他都是 true
    3. null&undefined：都是 false
    4. 对象：所有对象都为 true

三元运算符：条件? 表达式1(true): 表达式2(false);

  • 判断条件，如果是true则表达式1，如果是false则表达式2；
var a = 3;
var b = 4;
var c = a > b ? 1:0;

运算符优先级

一元运算符 > 算术运算符 > 比较运算符 > 逻辑运算符 > 三元运算符 > 赋值元素符

流程控制语句

  • if...else...

  • switch

    1. 在java中，switch语句可以接受的数据类型：byte、int、short、char、枚举(1.5)、String(1.7)
    2. switch(变量): case 值:
    3. 在JS中,switch语句可以接受任意的原始数据类型

  • while

  • do...while

  • for

JS特殊语法

  1. 语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略 (不建议)
  2. 变量的定义使用 var 关键字，也可以不使用
    • 用： 定义的变量是局部变量
    • 不用：定义的变量是全局变量(不建议)

基本对象

内置对象

  • 数据对象：Number、String、Boolean
  • 组合对象：Array、Math、Date
  • 高级对象：Object、Error、Global、Function、RegExp

对象

对象概念

  • 无序属性的集合
  • 属性值原始值，对象或者函数

创建对象

  • var obj=new Object();
  • var obj={};：字面量创建方法

添加值

  • obj.prop=""
  • obj[prop2]=""：prop2必须字符串，如果是变量那么会隐式转toString();

遍历对象

  • for in
    • Object.keys()
    • Object.values()
    • Object.entries()
var obj={
	name:"yan",
	age:20,
	address:"北京",
	eat:function(){
		console.log("我正在吃饭");
	},
	car:{
		benci:"",
		aodi:"A8"
	}
}
console.log(obj.name);
obj.eat();
obj.name="wang";
console.log(obj.name);
console.log(obj["car"]);
for(var a in obj){
	console.log(obj[a])
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));

Function：函数(方法)对象

声明

  • 方法一：命名函数（函数可以放在任何位置，调用不分先后）
function 函数名(形式参数列表){
	方法体;
}
// 实例
function fun1(a,b) { alert(a+b); }
fun1(3,4);	//窗口上弹出7
  • 方法二：匿名函数（必须先声明后调用）
var 函数名 = function(形式参数列表){
	方法体;
}
// 实例
var fun2 = function(a,b) { alert(a+b); }
fun3(3,4);	//窗口上弹出7
  • 方法三：（不推荐使用）
var 函数名 = new Function(形式参数列表,方法体);
// 实例
var fun1 = new Function("a","b","alert(a);");
fun1(3,4);	// 窗口上弹出3

参数

  • length 代表形参的个数
var fun1 = new Function("a","b","alert(a);");
alert(fun1.length);	//窗口上弹出2
  • 参数列表可以多写
function fun1(a,b){ alert(a,b); }
fun1(1); // 1 undefined
fun1(1,2); // 1 2
  • 在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实际参数
function add(){
	var sum = 0;
	for(var i = 0; i < arguments.length; i++){
		sum += arguments[i];
	}
	return sum;
}
var sum = add(1,2,3);
alert(sum); // 6

  • 特点

    • 方法定义时，形参的类型不用写，返回值类型也不写。
    • 方法是一个对象，如果定义名称相同的方法，会覆盖
    • 在JS中，方法的调用只与方法的名称有关，和参数列表无关

  • 拓展：立即执行函数（匿名函数）

(function(形参){}(实参))
(function(){})()
+function(){}()
!function(){}()

Array：数组对象

创建

  1. var arr = new Array(元素列表);
  2. var arr = new Array(默认长度);
  3. var arr = [元素列表];
var arr1 = new Array(); // 声明一个空数组
var arr2 = new Array(3); // 定义一个长度为3的数组
var arr3 = new Array(1,2,3); // 定义一个数组，并赋值
var arr4 = [1,2,3,4]; // 字面量定义法

增删改查

  • 添加值

    • 数组名[索引值]="";

  • 修改值

    • 数组名[指定位置]="";

  • 获取值

    • 数组名[指定位置]

方法

  • concat(item1,item2...)：合并数组，返回新数组arr1.concat(item)，（item可以为变量也可以为数组）

  • join(分隔符)：将数组中的元素按照指定的分隔符拼接为字符串，默认,

  • pop()：删除数组末尾的值，返回删除的值；如果对空数组进行操作，则返回undefined

  • push()：向数组的末尾添加一个或更多元素，并返回新的长度

  • shift()：删除数组第一个元素的值，返回删除的值

  • unshift(value)：给数组开始位置添加值，并返回新的长度

  • splice(startIndex, deletCount, values)：修改增加元素到原数组，返回一个数组，存放被删除的元素

    • startIndex：开始处理数据的位置（包含开始的位置）
    • deletCount：删除的数量
    • values：要添加的值

  • slice(startIndex, endIndex)：截取指定位置数组元素，返回的数组，内容为截取出来的元素

    • startIndex：开始位置（如果为负数，那么倒数第一位为-1，从右向左数，负几就是倒数第几位开始）
    • endIndex：结束位置（如果省略，会截取到元素的最后一位）

  • sort()：按 unicode 编码排序

  • reverse()：数组反转

document.write(arr.join());	//不传参数，默认按逗号进行分隔输出'1,2,3'
document.write(arr.join("-"));	//按'-'进行分隔输出'1-2-3'

var arr = new Array(1,2,3);
document.write(arr.join());	//1,2,3
arr.push(6);
document.write(arr.join());	//1,2,3,6

var arr = [13, 40, 5, 6]
var res = arr.sort(function(a,b){
	return b-a; // 降序
})

属性

  • length：数组的长度（arr.length：以0为开始下标）

特点

  1. 数组元素的类型可变的。var arr = [1,"abc",true];
  2. 数组长度可变的。
  3. 索引值从0开始，数组长度为最大索引值+1
var arr = new Array(3);
arr[10] = 'hello';
document.write(arr[10]); //显示hello
document.write(arr[9]); //显示undefined
alert(arr.length); //输出11

二维数组

  • arrEr=[[],[],[]]

  • 添加值

    • arrEr[一维索引值][二维索引值]=num

  • 获取二维数组的值

    • arrEr[一维索引值][二维索引值]

  • 多维数组

    • arr=[ [ [[],[]] ,[]] ,[] ]

数组中的比较运算

  • [] == []：false
  • ![] == false：true
  • [] == false：true（Nmber([])结果为0，[]转为字符串为""，所以为false）
  • Boolean([])：true

字符串String

方法

  • length：字符串的长度

  • charAt(index)：返回指定位置的字符（索引从0开始），一般长度为1（如果指定的位置超出了字符串的长度，那么返回空）

  • indexOf(subStr, startIndex)：查找字符串，存在返回字符第一次出现的位置，否则返回-1

    • subStr：查找的字符串
    • startIndex：开始查找的位置（超出字符长度返回-1；如果是负数或省略，则从0开始）

  • str.substr(startIndex,length) ：截取字符串（截取的字符串包含开始位置的字符）

    • startIndex：开始的位置（如果是负数，从倒数开始，倒数第一个为-1；如果大于字符的长度，那么返回空）
    • length：截取的字符串的长度（如省略，返回从开始位置到结束的所有字符）

  • str.substring(startIndex,endIndex)：截取字符串（截取的字符串包含开始位置的字符，不包含结束位置的字符）

    • startIndex：开始的位置（如果是负数，从0开始）
    • endIndex：结束的位置（如省略，截取从开始到结束的所有字符）
    • 注意：endIndex小于startIndex，那么先交换位置，然后在执行

  • str.slice(startIndex,endIndex)：截取字符串（截取的字符串包含开始位置的字符，不包含结束位置的字符）

    • startIndex：开始的位置（如果是负数，从倒数开始，倒数第一位为-1）
    • endIndex：结束的位置（如省略，截取从开始到结束的所有字符）
    • 注意：endIndex小于startIndex，返回空

  • str.split(delimit,limit)：按指定字符将字符串转成数组（返回是一个数组）

    • delimit：分隔符（如果是 "" 那么按字符分割）
    • limit：分割次数（如果省略，无限分割，分割完为止）

  • str.replace(regexp,elem)：将指定的字符替换

    • regexp：正则 或者是 字符（如果是字符，那么只会替换第一个）
    • elem：替换对象

  • str.toUpperCase()：将字符串中的字母全部转大写

  • str.toLowerCase()：将字符串中的字母全部转小写

Date：日期对象

创建

  • var date = new Date();

方法

  • toLocaleString()：返回当前date对象对应的时间本地字符串格式
  • getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
  • getFullYear()：返回完整年份
  • getMonth()：返回月份 0-11
  • getDate()：返回日 1-31
  • getDay()：返回星期 0-6
  • getHours()：返回时 0-23
  • getMinutes()：返回分 0-59
  • getSeconds()：返回妙 0-59

设置方法

  • setFullYear(year，month，day)

    • year：必需，表示年份的四位整数

    • month：可选,介于 0 ~ 11 之间：如果不填，取系统当月

      • -1 为去年的最后一个月，12 为明年的第一个月，13 为明年的第二个月

    • day：可选,表示月中某一天的数值。如果不填，取系统当日

      • 用本地时间表示。介于 1 ~ 31 之间
      • 0 为上个月最后一天，-1 为上个月最后一天之前的天数
      • 如果当月有 31 天：32 为下个月的第一天
      • 如果当月有 30 天：32 为下一个月的第二天

  • setHours(hour,min,sec,millisec)

    • hour：小时
    • min：分钟
    • sec：秒
    • millisec：毫秒
var date = new Date();
document.write(date); //Wed Jan 01 2020 09:00:00 GMT+0800 (中国标准时间)
document.write(date.toLocaleString()); //2020/1/1 上午9:00:00

Math：数学对象

  • Math.方法名();：Math对象不用创建，直接使用。

方法及属性

  • random()：返回 [0, 1) 之间的随机数。
  • ceil(n)：对n进行上舍入。（3.14 -> 4）
  • floor(n)：对n进行下舍入。（3.14 -> 3）
  • round(n)：把n四舍五入为最接近的整数。（3.14 -> 3）
  • pow(x, y)：返回x的y次方
  • sqrt(x)：返回数的平方根
  • 属性：Math.PI

RegExp：正则表达式对象

  • 正则表达式：定义字符串的组成规则。

修饰符

  • i：匹配的时候不区分大小写
  • g：全局匹配
  • m：多行匹配

语法

  • 单个字符:[ ]

    • [a]：单个字符a
    • [ab]：a 或 b
    • [a-zA-Z0-9_]：a到z，A到Z，0到9，_（中的一个）
    • [^a-c]：匹配除了括号内a-c的任意字符
    • \d：单个数字字符[0-9]（中的一个）
    • \w：单个单词字符[a-zA-Z0-9_]（中的一个）
    • \s：空格
    • \W：除了\w之外的任意字符
    • \D：除了数字之外的任意字符

  • 量词符号

    • ?：表示出现0次或1次
    • *：表示出现0次或多次
    • +：表示出现1次或多次
    • {m,n}：表示 m<= 数量 <= n
      • m如果缺省： {,n}:最多n次
      • n如果缺省：{m,} 最少m次

  • 开始结束符号

    • ^：开始
    • $：结束

创建

  1. var reg = new RegExp("正则表达式");
  2. var reg = /正则表达式/g;
var reg1 = new RegExp("\\w{1,10}");
var reg2 = /\w{1,10}/;
alert(reg1); // /\w{1,10}/
alert(reg2); // /\w{1,10}/
var reg3 = /^\w{1,10}$/;

方法

  1. reg.test(str)：验证指定的字符串是否符合正则定义的规范
  2. str.match(reg)：输出所有匹配成功的结果
var username = "zhangsan";
var reg = /^\w{6,12}$/;
var flag = reg.test(username);
alert(flag);	//true

Global

  • 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();

方法

  • encodeURI()：url编码
  • decodeURI()：url解码
  • encodeURIComponent()：url编码，编码的字符更多
  • decodeURIComponent()：url解码
  • parseInt()：将字符串转为数字
  • isNaN()：判断一个值是否是 NaN
    • NaN 六亲不认，连自己都不认。NaN 参与的 == 比较全部为 false
  • eval()：将 JavaScript 字符串，并把它作为脚本代码来执行。
var jscode = "alert(123)";
alert(jscode);	//弹出警告框，显示 alert(123)

URL编码

  • 你好 = %E4%BD%A0%E5%A5%BD
var str = "你好";
var encode = encodeURI(str);
document.write(encode+"<br>");	// %E4%BD%A0%E5%A5%BD
var decode = decodeURI(encode);
document.write(decode+"<br>");	// 你好

var encode = encodeURIComponent(str);	// %E4%BD%A0%E5%A5%BD
var decode = decodeURIComponent(encode);	// 你好

/*	区别
encodeURIComponent()
编码"http://www.baidu.com你好"
http%3A%2F%2Fwww.baidu.com%E4%BD%A0%E5%A5%BD

encodeURI()
编码"http://www.baidu.com你好"
http://www.baidu.com%E4%BD%A0%E5%A5%BD
*/

作用域和预编译

js三部曲

1.语法检查
2.预编译
3.逐行解释执行

作用域

  • 全局作用域：最外层定义的变量

  • 局部作用域：只在固定的代码片段内可用，函数外出不可访问

    • js没有块级作用域，局部作用域是由函数的产生而产生的，也叫函数作用域。
    • 块级作用域：{}

  • 注意：建议使用var声明变量，如果没有var声明，那么在函数内也是声明了全局变量。

预编译

发生的时刻：函数执行的前一刻和全局下

  • js执行环境

    • 全局执行环境：最外面层的执行环境—>window
    • 因此所有的全局变量和函数都作用为window的属性和方法。GO
    • 局部执行环境：函数内的执行环境—>AO

  • 过程
    1.创建AO对象（active object this，arguments）
    2.在函数内找用var定义的变量及形参变量，并且赋值为undefined
    3.形参和实参相统一
    4.找函数内用function定义的函数,并将函数体赋值。

function test(a){
	console.log(a);//function
	aa=345;
	console.log(aa);//345
	var a=6;
	console.log(a);//6
	function a(){
		console.log(a);
		var cc=456;
		console.log(cc);
	}
	a();//报错
}
test(4);
// 原理
AO{
	this:window
	arguments:{0:4}
	aa:undefined->345
	a:undefined->4->function->6
} 
GO{
	window:object
	test:fn
}

作用域链

当一个函数被调用的时候，创建了执行环境和相应的作用域链，并且把作用域链赋值给一个特殊的内部属性[[scope]]，然后用this，arguments(全局不存在),和其他的命名参数来初始化活动对象，当前的执行环境始终在作用域链的最顶端

  • [[scope]]中所存储的执行期上下文的集合，这个集合呈链式结构，我们把这种链式叫做作用域链。也是作用域对象的集合。
var a=10;
function test(c,d){
	var b=20;
	function aa(){ }
	aa();
}
test(4);
// 原理
GO{
	a:undefined->10
	test:function
}
test-AO{
	this:window
	arguments:[4]
	b:undefined->20
	c:undefined->4
	d:undefined
	aa:function
}->aa-AO->销毁
aa-AO{
	this:window
	arguments:[]
}->销毁

闭包

概念：函数与函数相互嵌套的情况，将内部函数保存到外部，能从外部访问内部函数环境下的所有变量

  • 发生时间：将内部函数保存到外部的时候，闭包就形成了

  • 闭包的缺点：把外部变量保存到内存中不被释放。导致空间的消耗，内存泄漏。

  • 闭包的作用

    • 可以访问内部变量
    • 模块化开发
    • 避免变量全局污染

  • 闭包的使用场景

    1. 采用函数引用方式的setTimeout调用
    2. 封装相关的功能集
function foo(x){
	var tmp=3;
	bar=function(y){
		return (x+y+(++tmp));
	}
}
console.log(foo(2)); // undefined，（没有return）
console.log(bar(10)); // 16（2+10+4）->bar-AO被销毁，但foo-AO（外部变量保存到内存中不被释放）
console.log(bar(10)); // 17（2+10+5）
// 原理
Go{
	foo:function
	bar:function
}->浏览器全部执行完4销毁
foo-AO{
	this:window
	arguments:[2]
	tmp:undefined->3
	x:undefined->2
}->浏览器全部执行完3销毁
bar-AO{
	this:window
	arguments:[10]
	y:undefined->10
}->1销毁
bar-AO{
	this:window
	arguments:[10]
	y:undefined->10
}->2销毁

原型和原型链

  • 对象分为两种，普通对象和函数对象。

    • 普通对象里使用存在一个隐式属性（__proto__）;
    • 函数对象里始终有一个属性prototype（原型）同时还存在隐式属性（__proto__）
    • 普通对象的__proto__指向了构造函数的原型

  • 对象都有属性和方法

    • prototype本身就是一个对象–原型对象
    • prototype里有一个属性constructor–构造器。指向了构造函数。
    • 普通对象的__proto__指向了构造器的原型对象。
    • 构造函数构造出来的对象继承了构造函数原型上的一切属性和方法。

  • 判断对象的数据类型instanceof

  • 原型

    • 概念:函数里的一个属性，它定义了公共属性。这个属性本身也是一个对象。
    • prototype：构造函数构造出了一个公共祖先。

BOM

  • 概念：Browser Object Model 浏览器对象模型
  • 组成：
    • Window：窗口对象
    • Navigator：浏览器对象
    • Screen：显示器屏幕对象
    • History：历史记录对象
    • Location：地址栏对象

Window：窗口对象

与弹出框有关的方法

  • alert()：显示带有一段消息和一个确认按钮的警告框。

  • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

    • 如果用户点击确定按钮，则方法返回true
    • 如果用户点击取消按钮，则方法返回false

  • prompt()：显示可提示用户输入的对话框。（括号里的第一个内容为提示内容，第二个为默认内容）

    • prompt("请输入您要打开的网站","http://www.baidu.com")
    • 返回值：获取用户输入的值，或为null
var flag = confirm("您确定要退出吗？");
if(flag){
	// 退出
}else{
	// 取消
}

与打开关闭有关的方法

  • close()：关闭浏览器窗口。

    • 谁调用我 ，我关谁（不能关闭非脚本打开的窗口）

  • open()：打开一个新的浏览器窗口

    • window.open("href","_self/_blank","option")
    • _self自身窗口打开
    • _blank新窗口打开
    • 返回新的Window对象
var openBtn = document.getElementById("openBtn");
openBtn.onclick = function(){
	// 点击按钮打开百度
	open("https://www.baidu.com");
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
	// 点击按钮关闭当前窗口
	window.close();
}
// ---------------------------------
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function(){
	// 点击按钮打开百度
	newWindow = open("https://www.baidu.com");
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
	// 点击按钮关闭打开来的百度
	newWindow.close();
}

与定时器有关的方式

  • setTimeout()：一次定时器，在指定的毫秒数后调用函数或计算表达式。

    • 参数可以是：js代码、方法对象，毫秒值
    • 返回值：唯一标识，用于取消定时器

  • setInterval()：循环定时器，按照指定的周期（以毫秒计）来调用函数或计算表达式。

  • clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

  • clearInterval(id)：取消由 setInterval() 设置的 timeout。（id是setInterval产生的值）

// 语法
setInterval(function(){代码},1000) // 匿名函数不重复调用
setInterval(test,1000); // 函数可以重复调用，但是不能传递参数（test函数名）
setInterval("test(参数)",1000) // 函数可以重复调用，也可以传递参数（1000是1秒，这里以毫秒计）

var clear = setTimeout(fun,1000);
clearTimeout(clear);

var clear = setInterval(fun,1000);
clearInterval(clear);

属性

  • 获取其他BOM对象

    • history
    • location
    • Navigator
    • Screen

  • 获取DOM对象

    • document

特点

  • window对象不需要创建可以直接使用 window使用。 window.方法名();
  • window引用可以省略。 方法名();
  • 总结：方法名(); 效果等同于 window.方法名();

Location：地址栏对象

  • 创建(获取)：

    • window.location 或 location

  • 方法：

    • reload()：重新加载当前文档（刷新）

  • 属性

    • href：设置或返回完整的 URL。
    • prot：获取端口号
    • host：获取域名及端口号
    • hostname：获取域名
    • search：获取参数（?号后的内容）
    • hash：URL的锚部分（从 # 号开始的部分）。
    • pathname：获取路径名（?号前的内容）
var btn = document.getElementById("btn");
btn.onclick = function(){
	// 刷新页面
	location.reload();
}

// 获取href
var href = location.href;
alert(href);	//当前页面url

// 点击按钮去百度
var goBaidu = document.getElementById("goBaidu");
goBaidu.onclick = function(){
	location.href = "https://www.baidu.com/";
}

History：历史记录对象

  • 创建(获取)：

    • window.history 或 history

  • 方法：

    • back()：加载 history 列表中的前一个 URL（返回上一页===浏览器的后退键）
    • forward()：加载 history 列表中的下一个 URL（进入到下一页===浏览器的前进键）
    • go(参数)：加载 history 列表中的某个具体页面。（参数为正数：前进几个历史记录；参数为负数：后退几个历史记录）

  • 属性：

    • length：返回当前窗口历史列表中的 URL 数量。
var btn = document.getElementById("btn");
btn.onclick = function(){
	// 获取当前窗口历史记录个数
	var length = history.length;
	alert(length);
}

var forward = document.getElementById("forward");
forward.onclick = function(){
	// 前进
	history.forward();
}

Screen：显示器屏幕对象

  • width：返回当前屏幕宽度(分辨率值)
  • height：返回当前屏幕高度(分辨率值)

Navigator：浏览器对象

  • userAgent：浏览器类型、版本、操作系统类型、浏览器引擎类型等信息

DOM

  • 概念： Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

  • W3C DOM 标准被分为 3 个不同的部分

    • 核心 DOM - 针对任何结构化文档的标准模型
    • Document：文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment:注释对象
    • Node：节点对象，其他5个的父对象

  • XML DOM - 针对 XML 文档的标准模型

  • HTML DOM - 针对 HTML 文档的标准模型

Document：文档对象

  • 创建(获取)：在html dom模型中可以使用window对象来获取
    • window.document 或 document

获取Element对象

  • getElementById()：根据 id属性值 获取元素对象。（id属性值唯一）
  • getElementsByTagName()：根据 元素名称（如div等） 获取元素对象们。（返回值是一个数组）
  • getElementsByClassName()：根据 Class属性值 获取元素对象们。（返回值是一个数组）
  • getElementsByName()：根据 name属性值 获取元素对象们。（返回值是一个数组）

创建其他DOM对象

  • createAttribute(name)
  • createComment()
  • createElement()
  • createTextNode()
var table = document.createElement("table");
alert(table);

Element：元素对象

  • 获取/创建：通过document来获取和创建

获取元素属性

  • removeAttribute("属性名")：删除属性
  • setAttribute("属性名","属性值")：设置属性
  • getAttribute("属性名")：获取属性
  • dataset.prop="值"：自定义属性（dataset.index="1"）
// 获取btn
var btn_set = document.getElementById("btn_set");
// 给a标签设置href属性
btn_set.onclick = function(){
	var element_a = document.getElementsByTagName("a")[0];
	element_a.setAttribute("href","https://www.baidu.com");	// 设置完属性，可以通过点击a标签前往百度
}

获取样式

  • dom.style.prop：可读写行间样式，写入的值必须是字符串格式
  • window.getComputeStyle(ele,null)：null的地方可以存放伪类，返回的都是绝对值，是只读的，不可修改
  • ele.currentStyle：是只读的，不可修改，返回的是经过转换的绝对值，IE独有的属性
    • ele.id
    • ele.title
  • 获取样式：ele.style.prop–效率低，维护不方便；ele.className—维护方便
  • document.styleSheets[0].cssRules[0].style：获取样式表
  • document.styleSheets[0].rules[0];

获取元素的内容

  • innerHTML：在赋值的时候：标签会被解析成标签，页面中不会输出；在提取内容时：标签会一并被提取
  • innerText：在赋值的时候：标签会被解析成文本，在页面中输出；在提取内容时：标签不会并被提取，只提取文本内容
  • value：使用于表单

offset系列属性

滚动条滚动的距离

  • window.pageYOffset(ie9以下不支持)
  • document.body.scrollTop
  • document.documentElement.scrollTop
  • 如果body.scrollTop有值那么documentElement.scrollTop为0

可视窗口尺寸

  • window.innerWidth(IE8以下不兼容)
  • document.documentElement.clientWidth
  • document.body.clientWidth(怪异模式没有<!DOCTYPE html>)
  • document.compatMode：判断怪异模型的方法

查看元素在页面中的位置

  • ele.offsetLeft：包含padding

    • 对于无定位的父级，返回相对文档的位置
    • 对于有定位的父级，返回相对于最近的有定位的父级的位置

  • ele.offsetParent

    • 返回最近的有定位的父级，如无，返回body，body.offsetParent为null
    • 滚动到指定位置

  • scroll(x,y) scrollTo(x,y) scrollBy(x,y);

Node：节点对象，其他5个的父对象

  • 特点：所有dom对象都可以被认为是一个节点

  • 方法

    • appendChild()：向节点的子节点列表的结尾添加新的子节点。
    • removeChild()：删除（并返回）当前节点的指定子节点。
    • replaceChild()：用新节点替换一个子节点。

  • 属性

    • parentNode：返回节点的父节点。
    • childNodes：返回所有子节点
    • nodeName：节点名，大写标签名
    • nodeValue：节点值
    • nodeType：节点类型
<body>
	<div id = "div1">
		<div id = "div2">
			div2
		</div>
		div1
	</div>
	<input type = "button" id = "del" value = "删除子节点">
	<a href = "javascript:void(0);" id = "add">添加子节点</a>

<script>
	// 1.获取超链接
	var element_a = document.getElementById("del");
	// 2.绑定单击事件
	element_a.onclick = function(){
		var div1 = document.getElementById("div1");
		var div2 = document.getElementById("div2");
		div1.removeChild(div2);	// 删除div2的节点
	}

	// 1.获取超链接
	var element_add = document.getElementById("add");
	// 2.绑定单击事件
	element_add.onclick = function(){
		var div1 = document.getElementById("div1");
		//创建div节点
		var div3 = document.createElement("div");
		div3.setAttribute("id","div3");
		//给div1添加子节点div3
		div1.appendChild(div3);
	}

	var div2 = document.getElementById("div2");
	var div1 = div2.parentNode;
	alert(div1);
</script>
</body>
  • 超链接功能
    • 可以被点击：样式
    • 点击后跳转到 href 指定的 url
    • 需求：保留点击功能，去掉跳转功能
    • 实现：href="javascript:void(0);"

HTML DOM

  • 标签体的设置和获取：innerHTML
var div = document.getElementById("div1");
div.innerHTML = "<input type='text'>";	//将div转换成文本输入框
div.innerHTML += "<input type='text'>";	//在div标签中追加文本输入框
  • 使用html元素对象的属性
  • 控制元素样式
    • 使用元素的style属性来设置
    • 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";

事件监听机制

  • 概念：某些组件被执行了某些操作后，触发某些代码的执行。
    • 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
    • 事件源：组件。如： 按钮 文本输入框…
    • 监听器：代码。
    • 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

点击事件

  • onclick：单击事件。
  • ondblclick：双击事件。
  • onmousedown：在鼠标按键被按下时发生。
  • onmousemove：在鼠标指针移到指定的对象时发生。
  • onmouseout：离开事件。
  • onmouseover：在鼠标指针移动到指定的元素上时发生。（存在冒泡）
  • onmouseenter：鼠标穿过事件。（不存在冒泡）
  • onmouseup：在鼠标按键被松开时发生。
  • onwaiting：在视频由于要播放下一帧而需要缓冲时触发。

表单事件

  • onblur：在对象失去焦点时发生。
  • onchange：在域的内容改变时发生。
  • onreset：在表单被重置后触发。
  • onselect：在文本框中的文本被选中时发生。
  • onsubmit：确认按钮被点击
    • 可以阻止表单的提交（方法返回false则表单被阻止提交）

加载事件

  • onload：一张页面或一幅图像完成加载
  • onunload：在用户退出页面时发生。

鼠标事件

  • onmousedown：鼠标按钮被按下
    • 定义方法时，定义一个形参，接受event对象
    • event对象的button属性可以获取鼠标按钮键被点击了
  • onmouseup：鼠标按键被松开
  • onmousemove：鼠标被移动
  • onmouseover：鼠标移到某元素之上
  • onmouseout：鼠标从某元素移开

键盘事件

  • onkeydown：某个键盘按键被按下
  • onkeyup：某个键盘按键被松开
  • onkeypress：某个键盘按键被按下并松开
// 方法1
<script>
document.getElementById("form").onsubmit = function(){
	//校验用户名格式是否正确
	var flag = false;
	return flag;
}
</script>

// 方法2
<form action="#" id="form" onclick="return checkForm();">
</form>

//失去焦点事件
document.getElementById("lose").onblur = function(){
    alert("失去焦点了");
}

//加载完成事件 onload
window.onload = function(){}

//绑定鼠标点击事件
document.getElementById("username").onmousedown = function(even){
    alert("鼠标点击了");
    alert(even.button);	//返回当事件被触发时，哪个鼠标按钮被点击
}

绑定事件的方法：

  1. onclick

    • 一个元素上只能绑定一个
    • this指向dom元素本身

  2. obj.addEventListener(type,fn,false);

    • IE9以下不兼容
    • 可以为一个元素绑定多个事件
    • this指向dom元素本身

  3. obj.attchEvent(“on”+type,fn);

    • IE独有
    • 可以为一个元素绑定多个事件
    • this指向window
function addEvent(elem,eventType,fun){
    if(elem.addEventListener){
        console.log("listener")
        elem.addEventListener(eventType,fun);
    }else if(elem.attachEvent){
        console.log("attach")
        elem.attachEvent('on'+eventType,function(){
            fun.call(elem);//修改this指向为elem.
        });
    }else{
        console.log("on");
        elem['on'+eventType]=fun;
    }
}

解除事件的方法

  1. ele.οnclick=false/null;
  2. ele.removeEventListener(type,fn,false)
  3. ele.detachEvent(‘on’+type,fn);
  • 注意：匿名函数不能解除事件

event 事件对象

  • 概念：记录事件上发生的所有数据
  • e=e||window.event;
  • 事件源 target=e.target||e.srcElement;
  • 可视区的位置 e.clientX,e.clientY
  • 页面的位置 e.pageX,e.pageY
  • 屏幕的位置 e.screenX,e.screenY
  • 事件类型 e.type
  • 鼠标键值 e.which
  • 键盘键值 e.keyCode
  • 鼠标距离事件源起始位置的值e.offsetX,e.offsetY

事件流

  • 分三个阶段：捕获，目标，冒泡

  • 目标阶段：目标元素就是事件源，事件源上的捕获和冒泡是谁写在前面就先执行谁。事件源上的事件是按顺序执行的。

  • 冒泡：对于相互嵌套的元素，从结构上（非视觉上）从点击的元素开始向上查找是否存在相同的事件（不是所有的事件），如果存在，就会发生冒泡

  • 捕获：对于相互嵌套的元素，从结构上（非视觉上）从顶端的元素开始向下查找是否存在相同的事件（不是所有的事件），直到点击的元素为止，如果存在，就会发生捕获
    IE上没有

  • 事件委托：通过给一个元素添加事件，来管理一类元素的事件。

    • 原理：利用了冒泡事件的原理，利用了事件源来查找当前点击的对象
    • 优势：提高效率

  • 阻止冒泡

    • W3C：e.stopPropagation()（IE9及IE9以上）
    • ie：e.cancelBubble=true（谷歌已经实现）

  • 默认事件：一般用于a标签和表单提交

    • eturn false;
    • preventDefault(); //IE9及IE9以上
    • returnValue=true;//IE独有

  • 阻止冒泡的兼容方法：e=e||window.event;

抹茶星魚
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python核心丨并发编程之Futures
m0_45198298的博客
06-24 288
Futures 区分并发和并行 并发(Concurrency) 并行(Parallelism) 在Python中，并发并不是指同一时刻有多个操作（thread、task）同时进行。相反某个特定的时刻，它只允许有一个操作发生，只不过线程/任务之间互相切换，直到完成。 thread和task分别对应Python中并发的两种形式threading和asyncio。 threading，操作系统知道每个线程的所有信息，因此它会做主在适当的时候做线程切换。 asyncio，主线程想要切换任务时，必须得到此任务可以
akshare:AKShare是一个为人而建的优雅而简单的Python财务数据接口库！开源财经数据接口库
03-17
概述 需要Python（64位）3.7或更高版本，旨在使获取财务数据尽可能方便。 写得更少，得到更多！ 文档： 文档： 安装 一般的 pip install akshare --upgrade 中国 pip install akshare -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host=mirrors.aliyun.com --upgrade 公关 如果您想为AkShare做出贡献，请查阅 码头工人 拉图像 docker pull registry.cn-hangzhou.aliyuncs.com/akshare/akdocker 运行AkDocker docker run -it registry.cn-hangzhou.aliyuncs.com/akshare/akdocker python 测试AkDocker
concurrent.futures模块ThreadPoolExecutor、ProcessPoolExecutor讲解及使用实例
weixin_43587784的博客
02-23 5628
concurrent.futures模块ThreadPoolExecutor、ProcessPoolExecutor讲解及使用实例
concurrent.futures.ThreadPoolExecutor并发库详解
漫步量化
08-15 8865
concurrent.futures Python3.2带来的新版功能。是Python并发执行的标准库。 这个模块具有线程池和进程池、管理并行编程任务、处理非确定性的执行流程、进程/线程同步等功能。 concurrent.futures 是两个文件放在一起作为这个模块，因为concurrent文件夹下只有futures这个文件夹，而futures下有两个主要文件thread.py和proces...
python 线程池 concurrent 模块的 futures 用法
白发渔礁江渚上……
06-13 2579
concurrent.futures 是 3.2 中引入的新模块，它为异步执行可调用对象提供了高层接口。 可以使用 ThreadPoolExecutor 来进行多线程编程，ProcessPoolExecutor 进行多进程编程，两者实现了同样的接口，这些接口由抽象类 Executor 定义。 1、多线程用法 之 map from concurrent import futures im...
Python中如何使用ThreadPoolExecutor一次开启多个线程
这家伙很懒，什么都没有留下
10-27 1090
通过本文的介绍，我们可以了解到是Python中用于实现多线程并发执行的类。通过使用，我们可以方便地创建线程池、提交任务、获取执行结果以及处理异常等。在使用多线程时，我们需要注意避免数据竞争、死锁等问题，并合理拆分和组合任务，设置优先级、异常处理、超时处理以及终止和重试机制等。希望本文能够帮助大家更好地掌握Python中的多线程并发执行技术。
Python并发编程之Futures
python学习者的博客
04-27 908
不论是哪一种语言，并发编程都是一项非常重要的技巧。比如我们上一章用的爬虫，就被广泛用在工业的各个领域。我们每天在各个网站、App上获取的新闻信息，很大一部分都是通过并发编程版本的爬虫获得的。 正确并合理的使用并发编程，无疑会给我们的程序带来极大性能上的提升。今天我们就一起学习Python中的并发编程——Futures。 区分并发和并行 我们在学习并发编程时，常常会听到两个词：并发(Concurre...
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
javaScript学习笔记
最新发布
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
Python 并发编程 Futures
分享既学习
07-27 236
本篇文章介绍了如何使用 Futures 创建线程池和进程池，并提供了两个 case，在实验过程中发现，因为 GIL 的原因 Python 的线程池并不适合 CPU 密集型的应用，此时就需要考虑使用多进程的方式，或者将核心代码使用 C++ 编写通过 Python 调用，从而绕过 GIL。虽然有 GIL 用户依然要考虑线程安全的问题，因为 GIL 只是方便 Python 解释器的编写人员，而不是 Python 程序的编写人员。程序每次执行的结果可能都不相同，结果都不为 0，此时就需要使用线程锁来规避此类问题。
Python concurrent.futures模块使用实例
09-18
主要介绍了Python concurrent.futures模块使用实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
.await 和.result 的区别 以及如何使用 lazy来避免在不需要的地方加载异步 使用task.run 避免同步异步互相等待 造成死锁
weixin_41147129的博客
04-07 1559
当我们遇到需要异步的 async的方法，再调用的时候就需要 await或者 .result/ .getwaiter().getresult() 这两个的区别在于，当遇到await会把线程挂起，开启别的线程继续后面的操作。但是遇到 .result会一直等在这里，不会开新的线程。很容易造成线程阻塞。 如果有两处使用 .result 还会导致互相等待 造成线程死锁 ...
Python异步操作concurrent.futures模块使用例子
不定时分享最优质的网络技术与教程，满满的干货。
07-07 493
对于非常长的可迭代对象，与默认大小 1 相比，使用较大的 chunksize 值可以显着提高性能。如果前述例子多执行几次，有可能会遇到文字列混在在一起的情况，例如类似以下的输出情况，这是由于多个Thread 同时都想输出文字而造成的情况，并非什么神秘问题，本文将在稍后例子中解决此问题。的增加，程序平均的执行时间越来越短，但也不是无限制的增加，到某个数量之后，加速的幅度就开始趋缓，因此chunksize 的设定还是得花点心思才行。的实例，而这个实例是一个执行结果的代理(Proxy)，所以我们可以透过。
3.控制类名（className 属性）
weixin_33966095的博客
03-06 397
className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 看看下面代码，获得 <p> 元素的 class 属性和改变className： 结果: 转载于:https://www.cnblogs.c...
java web学习3——JavaScript基础
weixin_46185085的博客
08-19 304
1.JavaScript 概念： 一门客户端脚本语言 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器解析执行了 功能： 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 1.1 Javascript发展史 JavaScript发展史： 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEas
关于AKShare接口数据，快速查询命令大全
我的Python教程
09-18 3125
【代码】关于AKShare接口数据，快速查询命令大全。
秒杀java代码（乐观锁、行锁防止库存超卖） - 简单版本v1
祁_z
08-29 6874
目录 mapper 需要的两张表 乐观锁讲解 修改代码为乐观锁 减库存乐观锁、行锁总结 流程： 1.库存>0就减库存，并记录减了库存的用户到抢购成功记录表中， 2.前台定时实时ajax调用接口查询是否抢购成功。 采用乐观锁防止库存<0 乐观锁就是认为不会产生数据访问冲突。比如update修改商品status为2 update 表set status=2, vers...
python并发 1：使用 futures 处理并发
weixin_33768481的博客
06-17 155
作为Python程序员，平时很少使用并发编程，偶尔使用也只需要派生出一批独立的线程，然后放到队列中，批量执行。所以，不夸张的说，虽然我知道线程、进程、并行、并发的概念，但每次使用的时候可能还需要再打开文档回顾一下。 现在这一篇还是 《流畅的python》读书笔记，译者在这里把future 翻译为“期物”，我觉得不太合适，既然future不...
JavaScript学习笔记：元素交互与基本语法详解
本篇笔记记录了作者在学习JavaScript过程中的关键知识点，主要包括以下几个方面： 1. HTML中使用JavaScript: - 使用`<script>`元素插入脚本，这是在HTML文档中嵌入JavaScript的基本方式。 - 子页面与父页面之间的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值