一、概述
(一)概念
js,全称是JavaScript。是web开发中不可缺少的脚本语言,不需要编译就可以运行(解释性语言)。它“寄生”在html体内,随网络传输到客户端在浏览器内存中解析运行。
(二)作用
可以动态的修改html代码和css代码。(修改的是本地内存当中的这一份)
(三)js的组成(理解)
网景公司 NetScape LiveScript JScript ECMA
1. ECMAScript
只规定的js的基本语法规范,是js 的核心
2. BOM
Borwser Object Model 浏览器对象模型。可以理解为把浏览器抽象封装成的对象。我们的js代码可以调用BOM对象的属性和方法,来操作浏览器。比如:网址跳转,历史记录切换。
3. DOM
Document Object Model文档对象模型。可以理解为把html文档抽象封装成的对象。我们的js代码可以调用doom对象的属性和方法,来操作html文档。比如:创建标签、删除标签、添加属性、删除属性、修改属性值等等。
(四)js的引入方式
1. 内部js
<script type="text/javascript">
alert();
</script>
2. 外部js
<script type="text/javascript" src="../js/my.js" ></script>
js代码位置的原则:在不影响页面显示效果的前提下,js代码越晚加载越好
二、基本语法规范(ECMAScript)
(一)变量定义
js是弱类型语言,所有变量定义都使用var来定义
(二)数据类型
js的数据类型分为两类:原始数据类型 和 引用数据类型
1. 基本数据类型
Ø boolean
Ø number
Ø string
Ø null: 空类型,只有一个值:null
Ø undefined: 未定义类型,只有一个值:undefined
2. 引用数据类型
js的引用数据类型只有9个,明天详细说
js使用关键字new创建对象: var date = new Date();
(三)运算符
js的运算符和java非常相似,这里列出来几个不同的:
1. ==和=== ==只比较值;===比较值和类型
2. &&和|| js里逻辑判断只有&&和||,而没有&和|
3. +-*/ 如果有字符串,+表示拼串;如果有字符串-*/运算,js会先转换为数字再做运算
(四)逻辑语句
js的逻辑语句和java非常相似,也有if,if else, for, switch等等。不同的是if判断:
false,0,””,null,undefined,使用if判断结果都是false
(五)函数(重点)
1. 普通函数
定义:function 函数名称(形参,形参…){//js代码块}
调用 :函数名称(实参,实参…)
2. 匿名函数
定义:function(形参,形参…){//js代码块}
调用:
把匿名函数赋值给一个变量,通过变量名调用函数
把匿名函数作为另外一个函数的实参传递进去
(六)事件(重点)
1. 先了解事件相关的几个概念
事件源:被监听的html标签对象
事件:在事件源上发生的某一类动作,比如:单击、双击
响应行为:事件发生后要执行一一段代码,通常使用函数封装
2. 常见的事件
onclick:单击事件
ondblclick:双击事件
onload:加载完成事件,一般用于监听页面加载完成
onsubmit:表单提交事件
onchange:域内容改变事件,一般用于select下拉框的选项发生变化
onfocus:获取焦点事件
onblur:丢失焦点事件
onkeydown:键盘按键被按下
onkeyup:键盘按键弹起
onkeypress:键盘按键被按下或按住
onmousedown:鼠标按键被按下
onmouseup:鼠标按键弹起
onmouseover:鼠标移入
onmouseout:鼠标移出
onmousemove:鼠标移动
3. 事件注册/事件绑定
<!--事件和响应行为嵌入到事件源中-->
<input type="button" value="按钮1" onclick="alert();"/>
<!--响应行为封装成函数,事件嵌入到事件源中-->
<input type="button" value="按钮2" onclick="showWin()"/>
<!--响应行为和事件 与 事件源完全分离,使用js动态绑定事件-->
<input type="button" value="按钮3" id="btn3"/>
window.onload = function(){
//从html文档里获取到btn3标签对象
var btn = document.getElementById("btn3");
//设置btn3标签对象的onclick属性,即绑定监听单击事件,然后赋值是响应行为
btn.onclick = function(){
alert("btn3");
}
/*btn.onclick = showWin;*/
}
三、BOM对象
(一)bom对象有哪些
1. window: 浏览器窗口对象,是所有bom对象的顶级对象
2. location: 浏览器地址信息对象,可以用来获取网址,更改网址(网址跳转)
3. history: 历史记录信息对象,可以进行历史记录的切换
4. navigator: 只读,浏览器信息对象,里边封装的浏览器的内核、版本,操作系统筀信息
5. screen:浏览器的屏幕显示信息对象,浏览器窗口的大小,位置,颜色信息等
(二)window对象
1. 弹窗方法
a) 普通弹窗alert()
b) 确认弹窗confirm()
c) 输入弹窗prompt()
三种弹窗方法都是阻塞方法
2. 定时器
a) 执行多次的定时器
定义:var timer = setInterval(函数对象, 间隔的毫秒值);
清除:clearInterval(timer);
b) 执行一次的定时器(延时器)
定义:var timer = setTimeout(函数对象, 延迟的毫秒值);
清除:clearTimeout(timer);
3. 全局方法
a) parseInt 转换为整数
b) parseFloat 转换为小数
c) eval 把字符串作为js代码来执行
(三)location对象
1. 获取当前页面的网址
var url = location.href;
2. 设置当前页面的网址(网址跳转)
location.href = “”;//在当前窗口打开新页面
window.open(“”);//在新窗口打开新页面
(四)history
后退一步:history.back();
前进一步: history.forward()
切换指定步数:history.go(n)
n是正整数,表示前进n步;如果n是负整数,表示后退n步
四、DOM对象
五、dom操作
(一)dom概述
DOM:DocumentObjectModel文档对象模型。html文档在被加载到浏览器内存当中后,会按照html的层级结构形成一棵“家谱树”,我们称之为“dom树”。而html文档里的标签、属性、标签体都会转换成dom树上的节点。
(二)dom操作
1.标签操作
(1)获取标签
getElementById(id值), 返回一个Element元素对象
getElementsByName(name值),返回一个Element元素的集合
getElementsByTagName(标签名称) ,返回一个Element元素的集合
getElementsByClassName(class名称) ,返回一个Element元素的集合
上边四个方法document对象可以用,Element对象也可以用。区别在于:document获取是从整个html文档内查找;而Element对象获取是从某一个标签内部查找。
(2)创建标签
var opt = document.createElement(“option”);
(3)插入标签
父标签对象.appendChild(子标签对象) ----表示剪切
(4)删除标签
标签对象.remove();
2.属性操作
(1)获取属性值
var attrValue = 标签对象.attrName;
var attrValue =标签对象.getAttribute(“attrName”);
(2)设置属性值
标签对象.attrName = attrValue;
标签对象.setAttribute(attrName, attrValue);
(3)删除属性
标签属性.removeAttribute(attrName);
3.标签体操作
(1)获取标签体
var innerhtml = 标签对象.innerHTML;//获取标签体里的全部内容,包括标签
var innertxt = 标签对象.innerText;//获取标签体里的文本
(2)设置标签体
标签对象.innerHTML = “新的html代码”;
标签对象.innerText = “新的文本”;
六、引用数据类型
(一)Array数组
1.创建:var arr = [“a”, 1, true];
2.循环遍历
3.常用属性和方法
(1)常用属性:length
Ø 使用length属性获取数组的长度
Ø 使用length属性设置数组的长度
(2)常用方法:
Ø concat 合并数组
Ø join 把数组拼接成字符串
Ø reverse 颠倒数组里元素的顺序
(二)Date日期
1.创建日期对象
Ø 当前日期:var date = new Date();
Ø 指定日期:var date = new Date(年,月,日);//月从0开始
Ø 指定日期和时间:var date = new Date(年,月,日,时,分,秒);
2.常用方法
Ø getTime 获取毫秒值
Ø setTime 根据毫秒值设置日期
(三)Math数学工具类
不需要创建对象,直接使用其属性和方法即可
1.常用的方法
Ø abs:绝对值
Ø ceil:向上取整
Ø floor:向下取整
Ø round:四舍五入
Ø random:取随机数 [0,1)
(四)RegExp正则表达式
1.创建正则表达式对象
Ø var reg = new RegExp(“表达式”);
Ø var reg = /表达式/;
2.常用方法
Ø test(str):校验str是否符合正则表达式的格式