- JavaScript概念
1. 运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎
2. 是一门脚本语言，不需要编译，直接就可以被浏览器解析执行的
3. 功能：
a. 可以增强用户和html页面的交互
b. 可以控制html元素，让其有一些动态效果
c. 增强用户体验
4. 发展历程：
ECMAScript为混乱的Script制定了一套标准，使得各浏览器脚本遵循该标准
JavaScript = ECMAScript + JavaScript特有内容(BOM + DOM) -- 网景公司+Sun公司合作的脚本语言
JScript = ECMAScript + JScript特有内容 -- 微软的IE浏览器的脚本语言
- ECMAScript：客户端脚本语言的标准
1. 基本语法：
a. 与html结合方式
1. 内部JS：
在html页面内部任意位置定义一个script标签，在标签内部书写脚本代码
例如：
<script>
</script>
2. 外部JS：
也是定义script标签，通过src属性引入外部的js文件
3. 注释：
虽然可以任意放位置，但是还是会影响代码执行的顺序，script脚本前面的html代码先执行
script标签可以定义多个
b. 注释
1. 单行：
2. 多行：
c. 数据类型：
1. 原始数据类型(基本数据类型)：
* number：数字 -- 整数/小数/NaN(not a number 一个不是数字的数字类型)
* string：字符串
* boolean：true和false
* null：一个对象为空的占位符
* undefined：未定义 -- 如果一个变量未初始化，则会被默认赋值为undefined类型
2. 引用数据类型(对象)：
d. 变量
-- 变量其实是一块存储空间
-- java是强类型语言，JavaScript是弱类型语言。
-- 强类型在开辟变量存储空间时需要定义将来存储数据的数据类型
-- 弱类型则不需要定义具体类型，将来可以存储任意类型数据
关键字var定义变量：
var 变量名 = 变量值;
注意：
1. typeof(xxx)：查看变量的数据类型
2. 使用typeof(null)得到数据类型为Object
e. 运算符
* 一元运算符：
++ -- +(正号) -(负号)...
注意：
1. 在JS中，如果运算数不是运算符所要求的数据类型，则JS引擎会自动对类型进行转换
2. string类型转number类型：+(-)正负号的作用
如果string类型变量字面值为数字，则在+(-)正负号的作用下会转化为相应的数值
如果string类型变量的字面值中有数字和非数字，则在+(-)正负号的作用下会变为NaN的值
NaN和其他数字运算结果都是NaN
3. boolean类型转number类型：+正号的作用
true在+(正号)作用下会转为1
false在+(正号)作用下会转为0
* 算数运算符：
+ - * \ % ...
* 逻辑运算符：
&& || ！
注意：
1. number类型转boolean时，0或NaN为false，其他数值为true
2. string类型转boolean时，空字符串("")为false，其他都为true
3. 所有对象都为true
4. null和undefined类型都为false
* 比较运算符：
> < >= <= == ===(全等于)
注意：
1. 类型相同时，直接比较
2. 类型不同时，先进行类型转换，再比较。例如"123" == 123为true
3. 全等于(===)比较前会先进行类型判断，比较的两者类型不一致直接返回false
* 赋值运算符：
=
* 三元运算符：
? :
f. js特殊语法：
* 语句的结束符为分号;或者回车
* 如果使用var定义的变量，为局部变量；不写var关键字定义变量则表示全局变量
g. 流程控制语句：
* if...else...
* switch(变量)...
注意：JS中的switch可以接收的变量为所有数据类型
* for...
* while...
* do...while...
2. 基本对象：
* Function：函数对象
a. 创建(三种形式)：
1. var fun = new Function(形式参数列表，方法体);
2. function 方法名称(形式参数列表){
}
3. var 方法名 = function(形式参数列表){
}
b. 属性：
length：参数的数量
c. 注意：
1. JS中方法定义的形式参数类型不用写，返回值类型也不用写，因为都是var关键字定义变量，所以省略不写
2. 方法名称相同会覆盖前面的方法定义
3. 在JS中方法的调用只与方法名称有关，与形参列表无关
4. 在方法声明中有一个隐藏的内置对象arguments(是一个数组)，封装所有传入方法的实际参数
例如：求任意个数字之和
function add(){
var sum = 0;
for(var i = 0;i < arguments.length;i++){
sum += arguments[i];
}
return sum;
}
此时，为add方法传入任意个参数，都会封装为一个数组
* Array：
a. 创建(三种形式)：
1. var arr = new Array(元素列表);
2. var arr = new Array(数组长度);
3. var arr = [元素列表];
b. 方法
* join(参数)：将数组中的元素按照指定的参数分隔符拼接为字符串返回
* push(参数)：向数组末尾添加一个元素，并返回新数组的长度
c. 属性
length：数组长度
d. 特点：
1. JS中元素类型是可以不一致的，且可以索引访问
2. JS中数组长度是可变的，如果访问时数组越界，则会扩容到越界的长度
* Boolean：布尔对象
* Date：日期对象
a. 创建：
1. var date = new Date();
b. 方法：
* toLocalString()：返回当前date对象对应的本地时间，并作为字符串返回
* getTime()：返回当前时间距离标准0时的毫秒值
* Math：数学对象
a. 创建：该对象不需要创建，直接使用
b. 方法：直接使用(Math.方法名)调用即可
* PI：pi值
* random()：返回[0，1)之间的随机数
* floor(x)：向下取整
* ceil(x)：向上取整
* round(x)：四舍五入取整
* Number：number的包装类
* String：string的包装类
* RegExp：正则表达式对象
a. 定义字符串组成的规则：
1. 单个字符：[]
例如：[a] -- 字符a；[ab] -- 字符a或字符b；[a-zA-Z0-9_] -- 单个单词字符
* 特殊字符简化书写：
\d：表示单个数字字符 -- [0-9]
\w：表示单个单词字符 -- [a-zA-Z0-9_]
2. 量词符号：
* ：表示出现任意次
? ：表示出现0次或1次
+ ：表示出现一次以上
{m,b} ：表示出现次数在[m,n]中，{,n} -- 最多n次，{m,}--最少m次
3. 开始和结束：
^ ：表示开始字符
$ ：表示结束字符
例如：
var reg = /^\w{1,5}$/; -- 以单词字符开头，以单词字符结束
b. 创建：
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
方法1定义的正则表达式注意反斜杠需要转译
方法2定义正则表达式不需要在双引号
c. 方法：
* test(参数)：验证给定的参数是否符合对象定义的正则表达式，符合true
* Global：全局对象
a. 创建
b. 方法：
* encodeURI(参数)：将参数转化为url编码
* decodeURI(参数)：将参数url编码解码
* encodeURIComponent(参数)：将字符串编码为url组件
* decodeURIComponent(参数)：将url组件解码
* parseInt()：将字符串转为数字
-- 逐一判断字符串每个字符，当碰到一个非数字字符，将前面的数字字符转为数值
-- +(正号)在该种情况下就只会转为NaN
* isNaN()：判断变量是否为NaN
-- NaN参与正常==比较返回的永远是false
-- 只能调用该方法来判断一个变量是否为NaN
* jscode(参数)：可以解析参数字符串并执行它
c. 特点：
该对象是全局对象，其中封装的方法不需要创建对象就可以直接调用
3. 输出：
document.write("xxx");
4. JavaScript中this表示当前元素自身的对象
-- 如果需要对某个元素操作自身(或者父子元素)，可以在操作函数的实际参数列表传入this
- BOM：Browser Object Model – 浏览器对象模型
1. 浏览器对象(Navigator)：
a. 描述：
用于获取浏览器的相关信息
2. 窗口对象(Window)：
a. 描述
Window 对象表示浏览器中打开的窗口
所有全局JavaScript对象，函数和变量自动成为window对象的成员。
b. 属性：
1. 可以通过属性值获取其他BOM对象
* history
* location
* Navigator
* Screen
2. 可以通过属性获取DOM对象
* document
c. 方法：
1. 弹出框相关：
* alert()：显示一段消息和一个确定按钮的警告框
* confirm()：显示一段消息和确定/取消按钮的对话框
-- 该方法返回值为boolean类型，如果点击确定按钮，返回true，点击取消按钮，返回false
-- 用于区别执行后续代码
* prompt()：显示一段消息和一个输入框的对话框
-- 该方法返回值为用户输入的字符串
2. 打开关闭窗口相关：
* open()：打开一个新的窗口(标签页)
-- 即生成一个新的Window对象
-- 参数可以传入新开窗口默认加载的url连接
-- 返回值就是新的Window对象
* close()：
-- 关闭调用该方法的window对象
3. 与定时器相关：
* setTimeout(参数1,参数2)：
-- 一次性的定时器
-- 返回值为唯一标号，用于取消定时器
-- 参数1为js代码或者方法调用；参数2为计时器毫秒值
* clearTimeout(定时器id)：
-- 传入一次性定时器标识id，用于取消一次性定时器
* setInterval(参数1,参数2)：
-- 循环定时器，每隔若干时间执行一次
-- 返回值为唯一标号，用于取消定时器
-- 参数1为js代码或者方法调用；参数2为计时器毫秒值
* clearInterval(定时器id)：
-- 传入循环定时器标识id，用于取消循环定时器
d. 特点：
1. Window对象不需要创建对象也可以直接使用，使用window.方法名()调用方法
2. window也可以省略，直接使用方法
3. 地址栏对象(Location)：
a. 创建：
通过window对象属性获取，由于window可以省略，即直接使用location即可
b. 属性：
* herf：用于设置和获取当前location对象的完整URL
c. 方法：
* reload()：重新加载当前文档，刷新页面
4. 历史记录对象(History)：
a. 描述：
用户在当前窗口访问过的历史url
b. 创建
通过window对象属性获取
c. 属性：
* length：属性值表示当前窗口的历史记录列表长度
d. 方法：
* back()：加载history列表中的前一个url
* forward()：加载history列表中的下一个url
* go(参数)：加载history列表中指定的某个url
-- 参数如果为正数，表示前进几个历史记录
-- 参数如果为负数，表示后退几个历史记录
5. 显示器屏幕对象(Screen)：
a. 描述：
每一Window对象的screen属性都引用一个Screen对象，其中存放了有关显示浏览器屏幕的信息
Screen对象不包含成员方法，仅含有属性信息
6. 对象之间的关系：
浏览器对象可以包含多个窗口对象(标签页)
一个标签页包含一个地址栏对象和一个历史记录对象还有一个显示器屏幕对象
显示器屏幕对象中包含了DOM的Document对象
- DOM：Document Object Model 文档对象模型。控制HTML文档内容
1. 概念：
将标记语言的各个组成部分，封装为对象。可以使用该对象对html文档进行CRUD动态操作
W3C DOM标准分为3个部分：
核心DOM - 针对任何结构化文档的标准模型
XML DOM - 针对XML文档的标准模型
HTML DOM - 针对XHTML文档的标准模型
2. 核心DOM对象：
a. Document：文档对象
b. Element：元素对象
c. Attribute：属性对象
d. Text：文本对象
e. Comment：注释对象
f. Node：节点对象，也是其他5类对象的父对象
3. 核心DOM
a. Document：
1. 创建(获取)：
在html DOM模型中可以直接使用window对象来获取
-- window.document 或者省略window document
2. 方法：
1. 获取Element对象：
* getElementById()：依据id属性值获取元素对象。id属性值一般唯一
* getElementByTagName()：根据元素名称获取元素对象。返回值是一个数组
* getElementByClassName()：根据class属性值获取元素对象。返回值是一个数组
* getElementByName()：根据name属性值获取元素对象。返回值是一个数组
-- 该方法对input标签较多，因为表单提交要求必须要有name属性
2. 创建其他DOM对象：
* createAttribute()
* createElement()
* createComment()
* createTextNode()
b. Element：
1. 创建(获取)：
通过document来获取和创建
2. 方法：
* setAttribute(属性名,属性值)：设置元素的属性值
* removeAttribute(属性名)：移除元素的属性
3. 操作Element对象：
1. 修改属性值：
1. 首先明确获取的对象是哪一种
2. 查看API文档查看对象有哪些属性可以更改
2. 修改标签体内容：
1. 获取标签对象
-- document.getElementById("标签名");
2. 查看API文档，查看标签对象有哪些属性可以更改
c. Node：
1. 特点：
所有DOM对象都可以看作一个Node对象
2. 方法：
* appendChild(子对象)：为节点添加一个子对象；注意Text对象不能有子对象
* removeChild(子对象)：为节点删除一个子对象
* replaceChild(新对象)：用新节点替换原节点
3. 属性：
* parentNode：返回当前节点的父节点
4. HTML DOM
a. 标签体的设置和获取：
1. innerHTML属性：
-- 属性值即标签体的内容：标签体元素对象.innerHTML
-- 设置标签体内容：
标签体元素对象.innerHTML = "新的内容";
标签体元素对象.innerHTML += "追加的内容";
-- 在对内容的设置中，可以直接在里面写html标签代码
标签体元素对象.innerHTML = "<a href='javascript:void(0);'>innerHTML<a>";
-- 使用innerHTML属性可以方便的操作标签体，而不用频繁的操作DOM树(即创建/添加节点对象)
b. 控制元素样式：
1. 每个元素都有style属性，该属性下有各种css的样式属性，为这些属性赋值同样具有css样式效果
例如：
var divs = document.getElementById("div");
divs.style.border = "1px solid red";
divs.style.fontSize = "20px";
2. 提前定义类选择器的样式，而后设置元素的className属性为类选择器名称，此时预定义的样式就会生效
例如：
<style>
.div1{
border: 1px solid red;
font-size: 20px;
}
</style>
<script>
var divs = document.getElementById("div");
divs.className = "div1";
</script>
5. 事件监听机制：
a. 概念：指的是组件由于某些操作触发一些代码执行
1. 事件：指的是某些操作。如：鼠标单击，双击，键盘按动，鼠标悬停...
2. 事件源：组件。如：按钮，文本输入框...
3. 监听器：代码
4. 注册监听：将事件，事件源，监听器绑定在一起。当事件源上发生了某个事件，则触发某个监听器的代码
b. 常见事件：
1. 点击事件：
* onclick：单击事件
* ondbclick：双击事件
2. 焦点事件：
* onblur：元素失去焦点事件
* onfocus：元素获取焦点事件
3. 加载事件：
* onload：一个页面或者一张图像加载完成事件
1. 一般给window加载完成事件，即，当页面加载之后才会触发一些js代码
4. 鼠标事件：
* onmousedown：鼠标按下事件
1. 定义方法时，定义一个形参，接收event对象
2. event对象的button属性可以获取鼠标哪个键被点击了
3. event.button = 0表示左键，1表示滚轮，2表示右键
* onmouseup：鼠标松开事件
* onmousemove：鼠标移动了事件
* onmouseover：鼠标在元素上悬停事件
* onmouseout：鼠标从元素上移开事件
5. 键盘事件：
* onkeydown：某个键被按下事件
1. 定义方法时，定义一个形参，接收event对象
2. event对象的keyCode属性可以获取键盘哪个键被点击了
3. event.keyCode = 65表示a，65表示b...以ASCII码为数值
4. 回车键的keyCode值为13，可以用于判定提交表单等动作
* onkeyup：某个键被松开事件
* onkeypress：某个键被按下后松开事件(两个动作)
6.选择和改变：
* onchange：元素域内的内容被改变事件
1. 一般用于下拉框的select绑定onchange事件
* onselect：文本被选中事件
7. 表单事件：
* onsubmit：确认按钮被点击事件
1. onsubmit一般用于绑定表单，可以阻止表单提交
2. 用于校验表单，当校验不通过时，绑定的校验函数返回false，则按下提交按钮也不会提交
3. 注意：
* 使用document.getElementById("form").onsubmit = function(){
return false;
}可以阻止表单提交
* 当使用自定义的函数绑定给onclick事件时，如：
<input type="submit" value="提交" onclick="myFunction();">
并不会阻止表单提交，因为绑定的onclick事件在底层表述为：
function fun(){
myFunction();
}此时提交事件响应的是fun函数的返回值，而非自定义的myFunction的返回值
* 使用自定义的函数绑定给onclick事件时，需要return myFunction();才会生效
<input type="submit" value="提交" onclick="return myFunction();">
* onreset：重置按钮被点击事件
c. 绑定事件：
1. 在标签定义中，指定事件的属性(即某些操作)，属性值就是js代码(即触发的一些代码)
例如：点击图片事件，触发执行js代码
<img src="xxx" onclick="js代码">
一般将js代码定义在script标签中，标签体的属性值设为方法名调用即可
但是仍然没有将元素与操作分离
2. 通过js获取元素对象，指定事件属性的属性值为出发的代码的函数对象
(函数对象是不许括号的，函数调用才需要)
例如：
var Xxx = documents.getElementById("img");
Xxx.onclick = function(){
}
扫一扫
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
