目录
一、JS基础
1.HTML/CSS/JS的关系
HTML决定网页结构和内容(决定看到什么),相当于人的身体。
CSS决定网页呈现给用户的模样(决定好不好看),相当于穿衣服、化妆。
JS脚本语言实现业务逻辑和页面控制(决定功能),相当于人的各种动作。
2.JS书写方式
行内:
内嵌:
外部:
3.JS中的变量
变量就是一个装东西的盒子,通俗的来说,变量就是存放数据的容器。我们通过变量名获取数据,甚至可以修改数据
4.JS的数据类型
简单数据类型 | 说明 | 默认值 |
Number | 数字型,包含整数值和浮点值 | 0 |
Boolean | 布尔值类型,如true、false,等价与1和0 | false |
String | 字符串类型 | “” |
Undefined | Var a;声明了变量a但是没有给值,此时a = undefined | undefined |
Null | Var a = null;声明了变量a为空值 | null |
5.JS的分支语句
5.1.if语句:
if(条件表达式){
语句块
}
2.if......else语句:
if(条件表达式){
语句块1
}else{
语句块2
}
3.switch语句
switch(变量){
case 表达式1:执行语句;break;
case 表达式2:执行语句;break;
.......
}
6.JS的循环语句
6.1.for语句
for
for(语句1;语句2;语句3){
执行语句块
}
6.2.while语句
while (条件)
{
需要执行的代码
}
6.3.do.....while语句
do
{
需要执行的代码
}
while (条件);
二、JS函数与对象
1.函数
封装了一段可以被重复调用或者执行的代码块,通过这个代码块可以实现大量代码的重复使用,这就叫做函数。
1.1.创建函数
方法一:function 函数名([参数列表]) {
//函数体代码
}
方法二:var 函数名 = function ([参数列表]) {
//函数体代码
}
1.2.函数调用
函数名([参数列表])
2.对象
JavaScript 对象是拥有属性和方法的数据。
属性:事物的特征
方法:事物的行为
2.1.创建对象
方法1: 使用字面量创建对象:
var star = {
属性1:属性值1,
属性2:属性值2,
属性3:属性值3
方法1:函数1;
}
方法2: 利用 new Object 创建对象:
var star = new Object();
star.属性1=“属性1”;
star.属性2=“属性2”;
star.属性3=“属性3”;
star.方法1=函数1
方法3: 利用构造函数创建对象:
function 构造函数名([形参1,形参2,形参3]) {
this.属性名1 = 参数1;
this.属性名2 = 参数2;
this.属性名3 = 参数3;
this.方法名 = 函数体;
}
var obj=new 构造函数名([实参1,实参2,实参3])
2.2访问对象的属性和方法
访问属性: 对象.属性名 对象[“属性名”]
访问方法: 对象.方法名()
三、DOM对象
1.DOM是什么
DOM ( Document Object Model ),叫做文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。
2.DOM的作用
JavaScript 能够创建动态的 HTML节点
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
3.查询元素的方法
方法 | 说明 | 返回值 |
getElementById(“id值”) | 通过 id 查找 HTML 元素 | 一个元素对象 |
getElementsByTagName(”name值”) | 通过标签名查找 HTML 元素 | 元素对象集合 |
getElementsByClassName(”class值”) | 通过类名找到 HTML 元素 | 元素对象集合 |
querySelector | 通过选择器获取第一个对象 | 一个元素对象 |
querySelectorAll | 根据选择器返回所有对象集合 | 元素对象集合 |
body | 获取body元素 | 一个元素对象 |
documentElement | 获取html元素 | 一个元素对象 |