请注意,本文编写于 223 天前,最后修改于 223 天前,其中某些信息可能已经过时。
JavaScript基础
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
概念:一门客户端脚本语言
- 运行在客户端浏览器中
- 不需要编译,直接被浏览器解析执行
功能:增强用户和html的交互过程,可以控制html,使其拥有一些动态效果
ECMAScript:客户端脚本语言标准
-
基本语法:
-
与html结合方式
-
内部js:
-
外部js:
-
<script> alert("Test") </script> <script src="1.js"></script>
-
-
注释
- 单行注释://
- 多行注释:/ /
-
数据类型
- 原始数据类型:
- number:数字
- string:字符串
- boolean:true/false
- null:一个对象为空的占位符
- undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值undefined
- 引用数据类型:对象
- 原始数据类型:
-
变量
- Java强类型、JavaScript弱类型
- var a = 3
-
运算符
- 一元运算符:只有一个运算数的运算符
- 算数运算符:+ - * /
- 赋值运算符:= += -=
- 比较运算符:> < >= <= == ===
- ===:在比较前,先判断类型,如果类型不一致,直接返回false
- 逻辑运算符:&& || !
- 三元运算符:?:
- var c = a > b ? 1:0;
- 如果a>b则c=1,否则c=0
-
流程控制语句
- if...else...
- switch
- while
- do....while
- for
-
JS特殊语法:
- 语句以;结尾,如果一行只有一条语句,可以省略;
- 变量的定义使用var关键字,也可以不使用
- 用:定义的变量是局部变量
- 不用:定义的变量是全局变量
-
-
基本对象
-
Function:函数、方法
function 方法名(参数){方法体}
var 方法名 = function (形参列表){方法体}
- 定义名称相同的方法,会覆盖第一个方法
- length:代表方法形参的个数
- 定义方法,形参类型不用写
- JS中方法的调用跟形参个数没有关系
-
Array:数组对象
- 创建
var arr = new Array(元素列表)
var arr = new Array(默认长度)
var arr = {元素列表}
- 方法
- join(参数):将数组中的元素按照指定的分隔符拼接为字符串
- push:向数组末尾添加一个变量
- 属性
- 特点
- JS中数组元素的类型是可变的
- JS中数组长度是可变的
- 创建
-
Data:日期时间对象
- 创建:
var data = new Data()
- 方法
- toLocaleString:获取本地时间
- getTime():获取从1970年1月1日起的毫秒值
- 创建:
-
Math:数学类
-
创建:
- Math对象不用引用直接使用
-
方法:
- random():生成随机数
- ceil():对数进行向上舍入
- floor():对数进行向下舍入
- round():把数四舍五入为最接近的整数
-
-
RegExp:正则表达式对象
- 单个字符:[ ]
- \d:单个数字字符[0-9]
- \w:单个单词字符[a-zA-Z0-9_]
- 量词字符:
- ?:表示出现0次或1次
- *:表示出现0次或多次
- +:出现1次或多次
- {m,n}:表示m<=数量<=n
- m如果缺省:{,n}最多n次
- n如果缺省:{m,}最少m次
- 正则对象:
- 创建:
var reg = new RegExp("正则表达式")
var reg = /正则表达式/;
- 方法:
- test(参数):验证指定的字符串是否符合正则定义的规范
- 创建:
- 单个字符:[ ]
-
Global:
- 特点:全局对象,这个Global中封装的方法
- 方法:
- encodeURI():url编码
- decodeURI():url解码
- encodeURIComponent():编码字符更多的url编码
- decodeURIComponent():url编码
- parseInt():将字符串转化为数字
-
DOM简单学习:
- 功能:控制Html文档的内容
- 代码:获取页面标签对象 Element
- document.getElementById("id值"):通过元素id获取元素对象
- 操作Element对象:
- 设置属性值
- 获取对象
- 查看API,看那个属性可以设置
- 修改标签体内容:innerHTML
- 设置属性值
- 事件的简单学习:
- 功能:某些组件执行了某些动作,触发某些代码的执行
- 绑定事件:
- 直接在html标签指定事件的属性,属性值就是JS代码
- onclick --- 单击事件
- 通过js获取元素对象,指定事件属性,设置一个函数
- 直接在html标签指定事件的属性,属性值就是JS代码
BOM:
-
概念:将浏览器的各个组成部分封装成对象
-
组成:
-
Window:窗口对象
-
方法:
- 与弹出框有关的方法:
- alert():带确认的警告框
- confirm():带确认和取消的警告框
- prompt():提示用户输入的对话框
- 与开启/关闭有关的方法
- open:打开新窗口,返回一个新的windows对象
- close:关闭当前窗口,谁调用我,我关谁
- 与定时器有关的方式
- setTimeout:在指定的毫秒数后调用函数或表达式
- clearTimeout:清除定时器
- setInterval:循环定时器,每隔几秒调用一次方法
- clearInterval:清除定时器
- 与弹出框有关的方法:
-
属性:
- 获取其他BOM对象
- history
- location
- Navigator
- Screen
- 获取DOM对象
- document
- 获取其他BOM对象
-
特点:
- 不需要创建直接引用,window.方法()
-
-
Navigator:浏览器对象
-
Screen:显示器屏幕对象
-
History:历史记录对象
-
Location:地址栏对象
- 创建:
- 方法:
- reload:重新加载当前文档
- href:获取当前网页的URL
- 属性:
-
DOM:
- 概念:将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记文档进行CRUD的动态操作
- W3C DOM标准被分为三个不同的部分
- 核心DOM:针对任何结构化文档的标准模型
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个的父对象
- XML DOM:针对XML文档的标准模型
- HTML DOM:针对HTML文档的标准模型
- 核心DOM:针对任何结构化文档的标准模型
- 核心DOM模型:
- Document:文档对象
- 创建:在html dom模型中可以使用Windows对象来获取
- window.document
- document
- 方法:
- 获取Element对象
- getElementsById():通过id获取元素对象
- getElementsByTagName():通过元素名获取元素对象
- getElementsByClassName():通过Class属性值获取元素对象
- getElementsByName():通过name属性值获取元素对象
- 创建其他Element对象
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
- 获取Element对象
- 属性:
- 创建:在html dom模型中可以使用Windows对象来获取
- Element:元素对象
- 获取:通过document来获取
- 方法:
- removeAttribute():删除属性
- setAttribute():设置属性
- Node:节点对象,其他5个父对象
- 特点:所有的dom对象都可以被认为是一个节点
- 方法:
- CRUD dom树:
- appendChild():向节点的子节点列表的结尾添加新的子节点
- removeChild():删除并返回当前节点指定的子节点
- replaceChild():用新的节点替换一个子节点
- CRUD dom树:
- 属性:
- parentNode:返回节点的父节点
- Document:文档对象
- HTML DOM
- 标签体的设置和获取:innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 修改样式
div1.style.border = "1px solid red"
div1.style.fontSize = "20px"
- 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值
- 修改样式
事件
- 概念:某些组件被执行了某些操作后,触发某些代码的执行
- 事件:某些操作,单击、双击、键盘按下了、鼠标移动了
- 事件源:组件,按钮、文本输入框
- 监听器:代码
- 注册监听:将事件、事件源、监听器结合在一起
- 常见的事件
- 点击事件:
- onclick:单击事件
- ondblclick:双击事件
- 焦点事件:
- onblur:失去焦点
- onfocus:元素获得焦点
- 加载事件:
- onload:一张界面或一幅图像完成加载
- 鼠标事件:
- onmousedown:鼠标按钮被按下
- onmouseup:鼠标按键被松开
- onmousemove:鼠标被移动
- onmouseover:鼠标移到某元素之上
- onmouseout:鼠标从某元素移开
- 键盘事件:
- onkeydown:某个键盘按键被按下
- onkeyup:某个键盘按键被松开
- onkeypress:某个键盘按键被按下并松开
- 选中和改变:
- onselect:文本被选中
- onchange:域的内容被改变
- 表单事件:
- onsubmit:确认按钮被点击
- onreset:重置按钮被点击
- 点击事件: