javaScript

编程语言

程序:指令加数据

编程语言:

  • 二进制命令,机器语言。(打孔纸带)

  • 汇编语言:通过一些简单单词,缩写字母,符号

    汇编 —》 二进制(编译)

  • 高级语言:给容易被人类理解的语言。

    • 编译型语言: c/c++ Go Rust c#

      • 源代码需要编译成二进制程序才能执行。

      • 运行速度块 性能高。

    • 解释型语言: Shell Python Java JavaScript Ruby SQL

      • 可以直接运行,需要安装解释器(虚拟机)

      • 运行速度慢,相对更简单一些,开发效率高

    • java 半编译半解释型 .java源码经过jdk编译后生成.class文件或打包.jar/.war文件后被jvm(java虚拟机)执行

学习顺序

学习基础语法与特性 :变量 输入输出 数据类型 结构化编程(顺序 分支 循环)函数 内置方法 模块 框架 面向对象 设计模式

看源码模仿 多练

做项目 实现几个完整的功能

设计项目 架构设计

javaScript

JavaScript(简称 JS)是一种广泛用于 Web 开发的高级、解释型、动态编程语言。最初设计用于在网页上实现动态交互,如今已成为前端开发的核心技术之一,并通过 Node.js 等环境扩展到后端、移动端和桌面应用开发。

核心作用

  1. 网页交互 通过操作 DOM(文档对象模型),实现页面元素的动态修改、事件响应(如点击、滚动)和动画效果。

  2. 表单验证 在数据提交前检查用户输入(如邮箱格式、密码长度),提升用户体验。

  3. 异步数据处理 通过 AJAX、Fetch API 等技术实现无刷新数据交互(如实时搜索、动态加载)。

  4. 客户端存储 使用localStoragesessionStorage临时保存用户数据(如偏好设置、购物车)。

  5. 游戏开发 结合 Canvas 或 WebGL 创建轻量级游戏(如《2048》《Flappy Bird》)。

常见应用

JavaScript并不仅用于网页和网站程序,还可以结合时下三大流行框架(Vue.js、Angular、React)进行微信公众号、小程序、混合App等移动应用开发。

引入方式

  • 直接将JavaScript代码嵌入HTML中(内嵌式)

语法格式:

<script type="text/javascript">
    JavaScript语句
</script>
//<script>标记的代码一般放在<head>和</head>之间或者</body>之前
  • 链接外部的JavaScript代码(外链式)

    语法格式:<script type="text/javascript" src="脚本文件路径"></script>
    ​

  • 直接在HTML标记中使用(行内式)

    <a href="javascript:alert('希望你成为前端开发的高手')">
          欢迎来到JavaScript世界!
    </a>
    ​
    <input type="button" value="显示信息" οnclick="alert('Hello, Welcome!');" />
    ​

基础方法

输入输出方法

prompt()

语法格式:prompt("提示信息","默认值");

功能:prompt()表示弹窗输入框;

使用:var a = prompt(“提示文字”)

说明:用户单击“取消”按钮,prompt()方法的返回值是null;单击“确定”按钮,prompt()方法的返回值是用户输入的字符串,并将返回值存储到变量中。

变量a保存的是prompt的返回值,即输入的内容

  • 当输入内容,然后点击确定,prompt的返回值为输入的值;

  • 当没有输入内容,点击确定,prompt的返回值为空字符串;

  • 当点击取消,prompt的返回值null;

  • prompt方法返回值的类型是string

alert( )

语法格式: alert("提示信息");

说明: 参数可以是变量、字符串或表达式。 调用浏览器弹窗

console.log()

控制台打印

主要用于代码的调试

console.error()

报错输出

write()

语法格式: document.write("输出信息"); 将内容输出body中,直接显示到浏览器窗口中

说明: (1)参数可以是变量、字符串或表达式。 (2)字符串中可以包含HTML标记或脚本代码。

变量
命名
  • 必须以字母或下画线开头,中间可以是数字、字母或下画线。

  • 变量名不能包含空格、加号、减号等字符。

  • 不能使用JavaScript的关键字,如var、int等。

  • JavaScript的变量名是严格区分大小写的,例如,username和UserName是两个不同的变量。

声明
  • 使用var关键字声明变量,声明时无须指定数据类型。

  • 使用var可以一次声明一个变量,也可以一次声明多个变量,不同变量使用逗号隔开。

  • var aa;声明一个变量 var aa,bb,cc; 声明多个变量

赋值
  • 声明变量时可以不初始化,此时其默认值为undefined,也可以在声明变量的同时初始化变量。

  • 使用var声明的变量,可以多次赋值,但是其结果只与最后一次赋值有关。

提升

Js中存在着变量提升的现象,也就是说变量的声明无论写在什么位置,都会提升到文档的最前边。

记住一点:变量提升并不是一个好的特性,这样的特性往往会让代码更加杂乱,难易理清头绪,但是应该明白js中存在这一特性,在以后的版本中也会修复。

我们在使用变量的时候,一定先声明后使用

var

作用域 函数作用域和全局

变量提升 会提升(但是在声明前访问,值为 undefined

重复声明 允许在统一作用域重复声明 会覆盖

全局对象绑定 在全局作用域声明是会绑定window对象

块级闭包问题 在循环中 所用循环的代码块公用一个变量

let

作用域 块级作用域 {}内声明的只能在里面才能使用 和全局

变量提升 会提升 声明前访问会报错

重复声明 不允许在同一作用域重复声明 会报错

全局对象绑定 不会绑定window对象

块级闭包问题 不存在闭包问题 循环体内的代码获得一个独立的变量

数据类型

分为三类 基本数据类型 引用数据类型 和 特殊数据类型

基本数据类型

存放在栈内存

  • 数值型

    • 整值型:用十进制 八进制 和 十六进制 来表示

    • 浮点型:使用普通形式和指数形式 指数:5e2=5乘10乘10

    字符串型 :由字母数字汉字和其他特殊字符组成 字符串型数据必须用单引号或双引号引起来

  • 布尔型:逻辑型 只有两个值 逻辑真和逻辑假 true 和 false

引用数据类型

支持对象编程的类型 一般用 对象 和 函数 类型

一般存放在堆内存中

特殊数据类型
  • null 表示空类型 当前为空

  • undefined 未定义变量 表示变量还没有赋值

  • NaN 非数值 表示程序运行时由于某种原因发生计算错误 产生没有意义的数值

  • 转义字符 控制字符,它是以“\”开头、不可显示的特殊字符,利用转义字符可以在字 符串中添加不可显示的特殊字符或者避免引号匹配问题

数据结构

队列 :先进先出的数据结构

栈 :先进后出的数据结构

运算符

运算符 也被称之为操作符,是用于实现赋值 比较和执行算数运算等功能的符号

算数运算符

+加 -减 *乘 /除 先对操作数进行隐式转换,转换为number,再进行运算

%取余数取模

使用浮点数(小数) 进行运算,会有精度问题,因此尽量使用整数进行运算

递增和递减运算符(一元运算符)

前置递增运算符(先加1 后运算)++n

后置递增运算符(先运算 后加1) n++

比较运算符

比较运算符又称关系运算符 是两个数据进行比较时使用的运算符,比较运算后,会返回一个布尔值(true、false)作为结果

< 小于号 >大于号 >=大于等于号 <=小于等于号 ==判等号(会转型只要值相等就行)

!= 不等号 ===全等要求值和数据类型都一致

!== 不全等 要求之和数据类型都不一致

逻辑运算符

逻辑运算符是用来进行布尔运算的运算符,其返回值也是布尔值,后面开发经常用于多条件判断

&& 逻辑与 两边都要成立 左边不成立 就不执行右边 直接返回结果

|| 逻辑或 只要又一边成立即可 左边成立 就不执行右边 直接返回结果

&& 和 || 都是短路运算符

! 逻辑非 也叫取反符 !true 就是 false

赋值运算符

= 直接赋值

+= -= 加,减一个后赋值

*=,/=,%= 乘 除 取模 后赋值

var num = 10 ; num+=2; n=12

num*=3; num=36

三元运算符

you = 1 > 2 ? 笨蛋 :聪明

运算符优先级

()小括号

++ -- !一元运算符

先*/ 后+- 算符运算符

< <= > >= 关系运算符

== != ===

!== 比较运算符

先&& 后 || 逻辑运算符

= 赋值运算符

, 逗号运算符

DOM

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口

节点

html中所有的元素都是一个节点

整个文档是文档节点

所有标签是元素节点

标签内的属性是属性节点

标签的文本是文本节点

dom节点分类

DOM节点分为三大类:元素(标签)节点、属性节点、文本节点;

节点之间的关系

文本节点、属性节点属于元素节点的子节点

在操作属性节点和文本节点前,一定要先获取到元素节点

查找获取节点

通过id查找dom元素

document.getElementById(id) 找页面中对应id名的元素;

document. querySelector (selector):获取指定选择器的页面元素对象

获取元素集合

documnet. getElementsByName (name)获取页面中所有指定标签对象集合

documnet. getElementsByTagName (tag) 获取指定标记的页面元素对象集合

documnet. getElementsByCIassName (class)获取指定类的页面元素对象集合

document. querySelectorAll (selector);获取指定选择器的页面元素对象集合

获取元素内容

先获取元素: active = document.getElementById("active");

获取元素的内容; active.innerHTML

修改元素内容

active.innerHTML = "xxxxxxxxxxx";

获取元素行内样式

先获取元素: active = document.getElementById("active");

获取行内样式

active.style.height 如果是复合型数据要转驼峰 比如font-size 要改成 fontSize

设置行内样式

active.style.background = "red";

获取元素html属性

元素.id 元素.src 元素.alt 元素.value 等;

先获取元素: active = document.getElementById("active");

获取属性

active.background 输出red

修改属性

active.background = "black";

数据类型转换

javaScript中数据类型的转换分为两种,分别为隐式转换和强制转换。

强制转换也叫显式转换,就是人为的调用方法对数据类型进行转换。

隐式转换,是在一些语言计算需要的时候,进行数据类型的自动转换

转义字符

\ 反斜杠 转义符号本身作用

\n 换行符: 让它后面的内容在下一行显示。

\t 制表符: 让它后面的内容间距有段空白空间 先当与 tab键

\r 回车符: 将光标返回到一行的开头

\\转义反斜杠本身

转换规则

转布尔类型

boolean():可以将任何类型的数据转换为布尔类型;

数字类型 只有0 0.0 NaN 是假的

字符串中 非空字符串都是真的 包括空格

undefined 是假的 声明变量为赋值

null 是空对象 是假的

null 是空对象(object) undefined 是 undefined类型

[]空数组是真的 空的{}对象是真的

转字符型

String:可以将任意类型的数据转为字符型 除了null 和 undefined 用了会报错

返回值:转换的内容加引号

转数值型

Number();可以将任意类型数据转换为数值型

0b 开头二进制

0o 开头八进制

0x 开头十六进制

规则

null 转 number 为0

Undefined 转 number 为NaN

空字符串转number结果 0

非空字符串 转 number 如果是有效数字就转 不是就为NaN

注意 0098 会转为 98

布尔转number结果

true=1

false=0

转换的一些方法
parselnt()取整

语法 parseInt(值);

规律:

  • 从第一个字符开始转换,如果第一个字符就是非数字,那么得到的一定是NaN,

  • 如果第一个不是非数字,就向后转换,直到遇到一个小数点,或非数字,则停止转换,将前面转面转的内容输出

parseFloat()取浮点数

语法:parseFloat();

规律:

  • 从第一个字符开始转换,如果第一个字符就是非数字,那么得到的一定是NaN,

  • 如果第一个不是非数字,就向后转换,直到遇到第二个小数点,或非数字,则停止转换,将前面转面转的内容输出

isNaN() 检测是否是非数字

语法:isNaN(检测值)

返回值:非数字true 数字false;

说明:isNaN()会发生一个隐式转换,会尝试着将检测值转为number;然后进行判断

条件语句

if语句

只有当指定条件为 true 时,该语句才会执行代码。

if(){

}else if(){

}else{

}

switch 语句

switch(值){ //表达式===值才会使用语句

case 表达式1:

语句;

break;

case 表达式1:

语句;

break;//结束语句,阻止继续向下判断

default://都不满足时执行

语句;

break;

}

如果没有break,当一个case条件成立之后,执行当前case中的代码,然后继续下一个case,不用比较,直接执行其代码。

case 后面的值可以是表达式 但是swiech的值要是(true)。

typeof 显示数据类型

confirm('hhhhh'); 弹窗 点确定 返回true 点取消 返回 false

循环语句

循环三要素:初始值 终止条件 步长

while循环

语法格式

while(条件){

循环体语句块

改变循环变量

}后续代码

var i = 0

while(i<5){

document.write("hhh");

i++;

}

document.wite(‘后续代码’);

while 循环的使用细节

在循环体中,一定到修改循环变量的值,否则就要陷入死循环中

循环变量的初始化一定放在while之前

while之后,有一个(),表示要判断的条件,里面就是一个条件表达式

循环体,可以使用{},也可以不使用{},但是如果不使用,循环体就只有一条语句,建议大家任何情况下都加上{}。

do ... while循环

格式

var i=0;

do{

循环体语句

修改循环变量

}while(条件表达式);

while 和 do...while的区别

do...while 不论条件满不满足都会执行一次循环体语句 whlie就不会

for循环

语法格式

for(表达式1;表达式2;表达式3){

循环体语句

}

执行顺序

表达式1 参数初始化 只执行一次

表达式2 判断条件

循环体语句

表达式3 更新循环变量

循环内部的跳转语句

break;结束本层循环 跳出循环

continue : 跳过本次循环,继续进入下一次循环

函数

函数的组成和作用

函数:可以看作一个容器,将我们可能会重复使用的代码存放在一起,然后反复调用

函数的作用 代码重用 用于组织代码

组成 函数体 函数名 函数关键字

函数的定义

语法格式

function 函数名(可先参数1,可选参数2...){

函数体:功能代码;

}

function :定义函数的关键字

函数名:自定义的一个名字(需要符合标识符的命名规范)

函数名称后面是小括号,必不可少,用来装载形式参数的

函数表达式

语法格式

var 变量名 = function(){

函数体

}

变量名:函数名:

说明

将function整体,放在赋值运算符的右边,作为表达式来使用。

通过一个变量来引用当前的function,便于后续的调用。

函数名称可以加上,但是只对函数内部起作用,

函数声明和表达式总结

函数声明式:声明被提升,

即用函数声明式定义的函数,可以在定义前调用,也可以在定义后调用

函数表达式:其实就是一个变量,只不过我们赋值时,讲函数这种数据类型赋给了它,因此它遵循变量的规则,先声明后使用;

即,用函数表达式,定义的函数,必须在定义之后调用

函数的数据类型

函数的数据类型为function

函数的调用和函数的分类

调用 自定义的函数直接调用 函数名();

分类 普通函数 匿名函数 闭包函数 了解即可

函数的参数

参数分为形参和实参

形参:函数定义时小括号中的参数称为形参表示要传入什么样的值

实参:函数调用时输入的参数称为实参,具体的某个值

arguments

是实参的一个集合

function fn(x,y,z){

console.log(arguments);

}fn(1,2,3,4,5,6);

结果: [1,2,3,4,5,6]

说明

arguments队形是用来接受实参的,每一个函数都有arguments对象,arguments只会在内部找自身的arguments,无法引用到外层的arguments

我们可以通过arguments的索引(0,1,2,3…),来访问每一个实参,

访问格式:arguments[下标] 下表从0开始

arguments.length 可以得到实参的个数

形参和实参的个数可以不相等 不会报错 但运行结果可能会出问题

函数的返回值

return 语句是值函数调用的返回值

说明

return 只能在函数体中出现,如果不是的话会报语法错误

在使用return语句时,函数就会停止运行,并返回指定的值,后面的语句就不会被执行

如果没有写return默认返回undefined

函数的作用域

作用域

作用域是针对变量而言的。要定义一个变量,这个变量就有一个相应的作用域

作用域是指变量的生效范围,在程序中,在什么范围之内可以访问,什么范围不能访问

在js中 以函数为界,可以分为如下两种

全局变量:不在任何函数内定义的变量就是全局变量。

局部变量:(函数内var 声明的变量)只能被函数自身读取(该变量的作用域是局部的)。

变量的生存周期:

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

函数同名的话,后写的函数覆盖先写的函数

对象

在js中一切皆为对象 对象就是一系列属性的无序集合

对象由属性和方法组成

属性 : 描述一个事物 特征

方法:功能 行为

如果是静态的特征,就是普通的属性,以变量的形式来出现。

如果是动态行为,就是以函数的形式来出现叫做方法。

把静态特征和动态行为组合在一起,就形成了一个完成的对象

创建Object类对象的两种方法

直接量(字面量)

new关键字

字面量 : var phone = {} 创建了一个空对象。

var phone = {
​
    "cpu" : "联发科",
​
    "内存":"5G",
​
    "call" : function (){
​
        console.log('打电话')
​
    }
​
};
​
console.log(phone.cpu);
​
phone.call();

对对象的增删改查

查 对象名.属性名; 或 对象名['属性名'];

改 对象名.属性名="改的内容";

增 对象名.新的属性名 = "内容";

删 delete 对象名.属性名;

对象方法的调用

对象名.方法名(); 括号里如果需要传参数就写,不需要就空着

console.log(对象名.方法名())

如果方法中没有return返回 undefined

遍历对象

for (let k in 方法名){

console.log(k); //遍历的是方法中的属性名 属性名是字符串 加引号的

console.log(方法名.[k]); //遍历的是内容

}

遍历数组

for (let k in 数组名){

console,log(k);

}

遍历的是数组里的下标 遍历出来下标的是字符串类型的 所以我们不推荐遍历数组

new关键字方式创建对象

var obj = new 0bject();

低效 不建议使用

内置的对象

date 时间

var d1 = new Date();

方法
1、时间对象.getFullYear():返回4位数的年份
2、时间对象.getMonth():返回日期中的月份,返回值为0-11
实际月份:1 2 3 ....12
getMonth: 0 1 2 .....11
3、时间对象.getDate():返回月份中的天数,返回值为1-31
4、时间对象.getDay();返回星期:返回0-6 0---星期日 1---星期一
5、时间对象.getHours():返回小时,返回的是0-23
6、时间对象.getMinutes():返回分
7、时间对象.getSeconds():返回秒
8、时间对象.getTime():返回表示日期的毫秒数 //1970年1月1日8:0:0到当时间的毫秒数

Math 运算

Math.random(); 随机一个小数 包括0不包括1

Math.round(Math.random()*(m-n+1)+n) //获取m和n之间的随机数

floor:地板

ceil:天花板

round:周围

数组

Array类对象 数组对象

什么是数组

数组是值的有序集合 值就是各种数据类型的数据

数组中每一个值都称之为元素 每一个元素在数组中所处的位置,称之为索引。

索引是用数字来表示,从0开始

数组的作用

可以储存多个数据

便于数据的管理和操作

创建数组

创建数组有两种方式

直接量(字面量) new的方式

直接量(字面量)

var arr = [];

[]表示是数组,数组中的元素之间使用逗号隔开

new的方式

var arr2 = new Array();

关于new Array()的参数说明

new Array();括号里不传参数,创建一个空数组

new Array();括号里传了一个数字参数;这个参数表示数组的长度

new Array();括号里传一个非数字参数,这个参数表示数组项

new Array():括号里面传多个参数时,这些参数都是数组项

数组的基本操作

数组的类型

JavaScript数组是对象的特殊形式 object

数组的长度

数组.length获取数组的长度

设置数组的长度 数组名.length = 10;

当设置数组长度为0时,可以清空数组

javaScript数组是动态的,根据需要它们会增长或缩减

数组元素的索引不一定要连续的,它们之间可以有空缺。

数组的索引

数组[下标] 就可与取出该下标的内容

修改数组项 数组名[下标] = 值;

添加 arr[arr.lenght]='xx';

删除 arr.lenght = arr.lebght-1;

遍历数组

for(var i = 0;i<arr.length;i++){

console.log(arr[i]);

}

for i in //获取对象中的所有key 想要获取value 对象名[key];

for v of //获取对象中所有 value

数组的内置方法

向数组的的末尾添加一个或多个

arr.push(n,n,n); 它的返回值是新数组的长度

向数组的头部添加

arr.unshift(n,n);它的返回值是新数组的长度

删除最后一项

arr.pop(); 返回值是删除的数据

删除数组第一项

arr.shift();返回值是删除的数据

万能设置法 splice

  • 删除 arr.splie(index,num); //num表示删除的长度

功能:从下标index位置开始,删除num个元素;

返回值:被删除项组成的数组;

  • 添加 arr.splice(index,0,var1,var2...); 如果要添加第二个参数为0

    功能:在下标index的位置上添加多个元素

    返回值:空数组,因为没有删除所以返回空

  • 替换 arr.splice(index,num,nar1,var2...);

    功能 先删除后添加 从index位置开始,先删除num个元素,再添加多个元素;

    返回值 被删除项组成的 数组

数组的 反转 reverse

语法 arr.reverse();

功能:数组的反转;

返回值:反转后的数组;

数组排序 sort

语法 arr.sort(function(a,b){return a-b});

功能:数组的排序;

说明:如果返回a-b 升序,返回b-a 降序; 如果sort不传参数表示按字符串的方式排序;

数组的合并 concat

arr.concat(arr1,arr2);

功能:将多个数组内容拿出来,合并成一个新数组;

返回值: 合并后的新数组;

数组的截取方法 slice

arr.slice(start,end);

返回值:返回截取的内容;

说明:截取时,包含开始位置,不包含截取位置; 参数可以为负数 -3 就是 数组长度-3;

index0f()从前向后找

arr.indexOf(目标值,开始查找的位置);

功能:从index位置开始,向后查找val首次出现的位置;

返回值:如果找到,返回val的下标,如果找不到,返回-1;

lastIndexOf()从后向前找和indexOf()用法一样

数组转字符串 join

语法:arr.join('连接符');

功能:将数组的每一项通过连接符,拼接为一个新字符串;

返回值:字符串; 当join不传参数时,默认用逗号连接;

二维数组

在js中,并不存在真正的多维数组

js中:

数组的元素其数据类型是任意的

我们在数组中存放元素,元素本身刚好又是一个数组我们就得到了二维数组

访问 : arr[n]//通过索引值访问其中一个元素 arr[n] [n]; 数组元素中指定下标的值

字符串

字符串可以是引号中的人文本,字符串可以由单引号或双引号表示

创建字符串

var a = '';

new方式

var a = new String('ddd');

字符串的基本操作

长度 lenght

a.length 字符串长度(个数) 不能设置字符串长度

访问字符串中的字符

a[下标];

功能:获取字符串中指定的字符;

参数:下标从0开始,最大下标为a.length-1;

字符串内置方法

charAt()

功能:查找字符串中指定位置的字符;

语法:str.charAt(index);

参数:index表示位置(下标)

返回值:对应位置的字符;

indexOf()

功能:查找目标值在字符串中的位置(从前往后找)

语法:str.indexOf(target,index);

参数:target:查找目标值 ,index:开始查找的位置

说明:index可以省略,如果省略默认从下标0开始找

返回值:找到返回下标,找不到返回-1

lastIndexOf()

功能:查找目标值在字符串中的位置(从后往前找)

语法:str.lastIndexOf(target,index); //从index位置开始向前找target

参数:target:查找目标值 ,index:开始查找的位置

说明:index可以省略,如果省略默认从最后一个下标开始向前找

返回值:找到返回下标,找不到返回-1

slice()

功能:字符串的截取

语法:str.slice(start,end);

参数:start:开始截取的下标,end表示截取结束的下标(包含开始,不包含结束)

返回值:截取到的字符串;

说明:str.slice(start,end) //从start下标截取到end下标(不包含end)

str.slice(start); 从start下标开始一直截取到最后

str.slice();//全部截取

slice支持负值,负值可以从后往前数,找到对应的下标;

substr

语法:str.substr(start,count)

功能:从start下标开始,截取count个字符

参数:start:开始下标, count:截取的个数

返回值:截取到的字符串

说明:str.substr(start,count); //从start下标开始,截count个字符

str.substr(start);//从start下标开始一直截取到最后

str.substr();//全部截取

substring()

语法:str.substring(start,end);

功能:从start下标开始截取到end下位;(不包含end);

返回值:截取到是字符串

说明:substring不支持负值,如果遇到负值或NaN直接转0

自动将小值作为开始下标,大值作为结束下边;

concat()

语法:str1.concat(str2,str3,....);

功能:将多个字符串拼接一个新的字符串

返回值:返回一个新字符串

replace()

语法:str.replace("被替换的字符","新替换字符");

功能:字符的替换

说明:只能替换第一个

toUpperCase()

语法:str.toUpperCase();

功能:将小写字母转为大写

toLowerCase()

语法:str.toLowerCase();

功能:将大写字符转小写

trim()

语法:str.trim();

功能:去掉字符串前面和后面的空格

注意:中间的空格不能去掉

split()

语法:str.split(分隔符);

功能:将字符串转为数组;

BOM浏览器对象模型

什么是BOM

由浏览器实现的供JavaScript程序调用的一组对象

window对象

所有在全局声明的变量和函数,自动成为window对象的属性和方法

方法 说明

alert(“提示信息") 显示包含消息的对话框。

confirm(“提示信息”) 显示一个确认对话框,包含一个确定取消按钮

prompt(“提示信息”,“默认值”) 弹出提示信息框

open("url" ,"name”) 打开具有指定名称的新窗口,加载给定URL所指定的文档;如果没有提供URL,则打开一个空白文 close() 关闭当前窗口 setTimeout(”函数”,毫秒数)clearTimeout(定时器对象) 设置定时器:延时指定毫秒值后执行某个函数

setInterval(”函数”,毫秒数)clearInterval(定时器对象) 设定每隔多少毫秒执行函数 moveTo(x,y) 把窗口移动到一个绝对位置

Location对象

获取或设置地址栏完整路径

获取地址栏?后的参数信息

location.hash 获取地址栏#后的参数信息

location.reload()刷新页面

history对象

n正数:返回历史纪录后n页 ; n负数:返回历史记录前n页 ; n为0相当于刷新页面

返回上一页

history.forword() 返回下一页

事件

发生在浏览器以及文档上的一些行为

事件三要素:事件源 事件类型 事件处理函数

btn.onclick = function(){}

DOM0级事件处理程序

语法: 元素.on+事件类型 = function(){} ---- 绑定事件

元素.on+事件类型 = null; ---- 移除事件

相同的事件后面的会覆盖前面

DOM2级事件处理程序

语法:

元素.addEventListener( ‘事件类型’ , function(){} ,布尔值) ---- 绑定事件

元素.removeEventListener( ‘事件类型’ , fn ,布尔值) ---- 移除事件

优点: 相同的事件不会被覆盖

缺点: 匿名函数无法移除

事件类型

鼠标事件

click 单击事件

dblclick 双击事件

mousedown 鼠标按下

mouseup 鼠标抬起

mouseover 鼠标滑过

mouseout 鼠标离开

mousemove 鼠标移动

键盘事件

keydown 键盘按下

keyup 键盘抬起

keypress 键盘按下 (只能识别主键盘区键码)

表单事件

focus 获取焦点

blur 失去焦点

input 监听文本框输入

change 下拉列表(文本框)的值发生改变

Window对象常见事件

load 当页面加载完毕后执行

resize 当窗口大小发生改变时触发

scroll 滚动条发生滚动时触发

setInterval(循环的东西,每隔多少毫秒)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值