1、HTML界面引入js代码的两种方式
1、内部脚本
<script language="JavaScript"> js代码 </script>
2、外部脚本
<script language = "JavaScript" src = "外部js文件路径"></script>
2、js中的数据类型
- 字符串类型
- 数值类型
- 布尔值
- 未定义
- 对象
- null
3、js流程控制
高级语言中的三种流程控制:顺序,分支,循环
- js中的分支结构还是if和switch
- js中的循环结构主要是for和while
4、js函数
js中的函数分为两种,一种是普通函数、一种是匿名函数
普通函数
function 函数名 (参数列表){
方法体
}
匿名函数(一般和事件搭配使用)
function (参数列表){
方法体
}
特点:
1. js的函数形参不需要类型声明,也不需要返回值声明
2. js方法体中如果有返回值就使用return返回, 如果没有就无需return
3. js函数没有重载的概念,如果出现同名的方法,后面的会覆盖前面的
4. 在js函数内部,其实可以通过一个arguments对象获取到所有传入的参数
5. js也支持可变参数的写法
5、js事件
功能:JS可以监听用户的行为,得到一个事件,并调用函数来完成用户交互功能。
5.1常用事件
js事件有好多,常用的罗列如下:
1.单击事件 onclick
2.双击事件 ondblclick
3.失去焦点 onblur
4.获取焦点 onfocus
5.鼠标移入事件 onmouseover
6.鼠标移出事件 onmouseout
5.2事件绑定
通过事件,可以将HTML上的元素跟函数绑定在一起来完成一些具体的功能。绑定方式有两种:普通函数绑定
和函数绑定
。
匿名函数做事件绑定
document.getElementById(元素id).onclick = function(){
alert("弹窗")
}
普通函数做事件绑定直接调用函数名称即可
onclick = al
function al(){
alert("弹了个窗")
}
6、js内置对象
6.1String 对象
1. 构造方式:
双引号,单引号,反引号
2. 常见方法:
substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符
split(delimiter) 把字符串分割为子字符串数组
toLowerCase()/toUpperCase() 把字符串转换为小/大写
trim() 移除字符串首尾空白
6.2Array对象
1. 创建数组的方式:
let arr1 = [1,2,3];
let arr2 = new Array(1,2,3);
注意:JS数组不区分数据类型,而且其长度可以随意改变,因此JS数组类似于Java中的集合
2. 数组常用方法:
合并:concat() 合并数组
添加:push() 尾部添加 / unshift() 头部添加
删除:pop() 尾部删除 / shift() 头部删除
转字符串:join(分隔符)与split()相反
排序:sort()
反转:reverse()
6.3Date对象
1. 创建日期对象的方式:
let date = new Date();
2. 常见方法:
getFullYear() 获取年
getMonth() 获取月
getDate() 获取日
getHours() 获取时
getMinutes() 获取分
getSeconds() 获取秒
getMilliseconds() 获取毫秒
6.4Math对象
1. Math对象的方法:
round() 四舍五入
floor() 向下取整
ceil() 向上取整
random() 产生随机数 :返回 [0,1) 之间的随机数。
6.5全局函数
不需要创建对象,可以直接调用函数,就称为全局函数
1. 字符串转为数字
parseInt() 转为整型
parseFloat() 转为浮点型
2. 把字符串当做js表达式来执行
eval("js代码")
7、BOM对象
7.1BOM简介
浏览器对象模型,就是把浏览器抽象成一个对象,然后通过js代码来操作浏览器的各个元素
层次结构:
BOM(浏览器对象)
Windows(Windows窗口对象)
Location(地址栏对象)
Document(文档对象,也称DOM对象)
7.2Windows窗口对象
1、JS三个弹框
警告窗: alert
确认窗: confirm 特点: 会有boolean类型的返回值, 如果点击的是确定,返回true; 如果点击的取消,返回false
搜索窗: prompt 特点: 会有字符类型的返回值, 返回值就是输入的内容; 如果点击的是取消,返回null
2、两种定时器: 在指定的时间做什么事
JS两个定时器:
setTimeout(做什么事,多长时间之后(单位ms)):一次性定时器, 此定时器仅仅会在指定的时间执行一次, 这个方法有返回值,返回值就是当前任务的标识
clearTimeout(任务标识): 根据任务标识取消任务
setInterval(做什么是,间隔多长时间(单位ms)):周期性定时器, 此定时器会在指定的时间间隔后重复执行, 这个方法有返回值,返回值就是当前任务的标识
clearInterval(任务标识): 根据任务标识取消任务
3、location地址
location.href 表示的就是当前浏览器地址栏中地址
location.reload() 表示刷新当前页面
location.href = "新地址 表示跳转新页面
8、DOM对象(文档对象)
8.1DOM简介
文档对象模型,其作用是把HTML页面内容抽象成为一个Document对象,然后可以使用js动态修改页面内容。
一颗DOM树上的所有内容都可以称为节点,这些节点分为三类
1、元素节点 (HTML标签):element
2、文本节点(HTML文本):text
3、属性节点(HTML标签的属性值):attribute
8.2DOM获取元素对象
1、js6之前的获取方式
(1. 获取单个元素
document.getElementById(id属性值)
(2. 获取元素数组
document.getElementsByTagName(标签名)
document.getElementsByClassName(class属性值)
document.getElementsByName(name属性值)
2、js6可根据css选择器来获取
(1. 获取单个元素
document.querySelector(id选择器)
(2. 获取元素数组
document.querySelectorAll(css选择器) 标签选择器/class选择器/子选择器/后代选择器/属性选择器
8.3DOM操作内容
1. 获取或者修改元素的 纯文本内容
js(元素)对象.innerText;
2. 获取或者修改元素的 html内容
js(元素)对象.innerHTML;
3. 获取或者修改包含自身的html内容(了解)
js(元素)对象.outerHTML;
8.4DOM操作属性
1.操作HTML默认已有的属性
(1. 获取js对象指定属性的值: js对象.属性名
(2. 设置js对象指定属性的值: js对象.属性名='xxx'
2、操作HTML默认没有的属性
(1. 给js对象添加属性和值: js对象.setAttribute(属性名,属性值)
(2. 获取js对象指定属性的值: js对象.getAttribute(属性名)
(3. 移除js对象的指定属性: js对象.removeAttribute(属性名)
8.5DOM操作样式
1. 给标签的style属性设置一个css样式: js对象.style.样式名='样式值'
2. 给标签的style属性设置多个css样式: js对象.style.cssText='css样式'
3. 给标签添加class的类选择器: js对象.className='class选择器名'
8.6DOM添加元素
1. 创建一个标签对象 document.createElement('标签名称')
2. 给父标签添加一个子标签 父标签对象.appendChild(子标签对象)