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：重置按钮被点击
- 点击事件：
