<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
一. script的引入方式
1. 头部引入
2. 外部引入(可以在头部可以在body)
3. body闭标签前引入(内部引入)一般写法
js的调试方式:
1. alert();
2. console.log();
3. document.write();
js的数据:
1. 常量
2. 变量(容器)
变量的定义:
var a = 0;
变量名命名规范:
1. 由字母数字下划线和$符组成,并且数字不能开头;
2. 不能与系统保留字重名,无二义性;
3. 变量名不能重复;
4. 见名知意。驼峰法:wangZheWei; 匈牙利命名法 aArray fnFunction oObject (一般用于元素命名)
数据类型:
1. Number数字类型
2. String
3. Boolean
4. Null
5. Object
6. Undefined
7. NAN alert(parseInt('Lee123Lee'));
8. [element collection] 元素集合
9. [node list] 节点列表
10.[Object Object] json
11. float 浮点数
12 int 整数
类型转换:
显示类型转换:
Number();
String();
a.toString();
parseInt();
parseFloat();
隐式类型转换
+ 字符串连接符
+ 如果其中某一项是字符串,就把其他项转化为字符串再进行连接
- * / % 如果其中某一项是数字,就把其他项转化为数字类型再进行计算
运算符:
1. 算数运算符 + - * / %;
2. 赋值运算符 = (拷贝;
3. 复合运算符 += -= *= /= %=
a += 3;
a = a + 3;
4. 自增运算符
a++, ++a, a--, --a
a7+++a8;
a7++ + a8;
5. 条件运算符
> , < , <=, >=, == , !=, ===, !==
与布尔值连用
== 与 === 的区别是否判断类型
!= !== 不全等
6. 逻辑运算符(连接多个条件)
&&, ||, !
&&: 一假即假
||: 一真即真
!: 真真假假
注意短路情况。
7. 三目运算符(条件运算符)
条件 ? 表达式1 : 表达式2;
8. 表达式
由常量 变量 运算符 组成的式子;
alert(a = 3); 返回值是3;
表达式都有返回值!!!
二、分支结构
满足某一条件,就执行某一段代码
1. if (条件) {
alert(1);
};alert(2);
如果。。。就。。。否则。。。
2. if (true) {} else{};
var a = 1;
级联式
3. if (a < 3) {
} else if(a < 5) {
}......
else{
};
switch...case
// 多分支结构
case 后面的值和switch后面的条件绝定走哪个分支
注意break;
default; 可以不写
三.循环结构
满足某一条件就重复做某件事,帮助我们做重复的任务
1. while
while(循环条件){
循环体;
};
注意:while循环要控制好循环增量的变化(循环条件)
通常用于不知道循环次数。
2. do...while 循环
do{
循环体;
} while(循环条件);
与while循环的区别,不管满不满足条件,都执行一次循环体。
3. for循环
for (循环增量初始化; 循环条件控制循环次数; 循环增量的变化){
循环体;
}
4. 循环控制:
break; 跳出本层循环
continue; 跳出本次循环
循环嵌套:
// 冒泡排序
var arr = [2, 7, 3, 4, 6];
// 外层循环控制趟数
for (var i = 0; i < 5; i++) {
// 内层循环控制交换次数
for (var j = 0; j < 5; j++) {
// 判断交换
if(arr[j] > arr[j + 1]){
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
} alert(arr);
四.数组
定义:能够保存多个数据(一组)的变量
var arr = new Array();
var arr = []; 字面量定义空数组
arr2 = [10]; // 是元素,而不是数组长度
遍历:
获取到数组中每一个元素
循环遍历(index 下标);
数组对象的方法
push();从尾部给数组添加元素
unshift();从头部给数组添加元素
shift();从尾部给数组添加元素
pop();从尾部删除元素
[1, 2, 3, 4, 4]
splice(1, 0, "4");[1, 4, 2, 3, 4, 4]
splice(起始位置,长度, 添加的元素);
arr.concat();数组拼接
.sort(); 数组排序默认是ASCII码排序
reverse(); 倒序
键值对 key-value;
var json1 = {a: 3, b: 5, c: "hello"};
json1.a;
json1["a"];
json的遍历:
for(var key in json1){
// key
key;
// value
json1[key];
}
五. 函数
具有一定动能的代码段。
从结构来分:
1. 无参数无返回值
2. 有参数无返回值
3. 无参数有返回值
4. 有参数有返回值
function fn1(num1, num2){
return(num1 + num2);
}
从命名上分为:
1.命名函数
2.匿名函数
应用1: 事件绑定
应用2. 让一个变量保存函数
定时器:
单次定时器:
var timer = setTimeout(function(){}, 事件);
clearTimeout(timer);
循环定时器:
var timer = setInterval(function(){}, 1000);
clearInterval(timer);
eval(string);函数
string 一定是可执行的js代码;
eval("var a = 2; var y = 3; document.write(a * b);");
// 生成一个不重复的数组
六. 对象
1. string对象
var myStr = new String("hello");
var str = "hello";
str.length; 字符串长度
str.charAt(下标); 查询下标处的字符;
str.search(); 查询字符所在的下标,返回第一次出现的位置,如果找不到返回-1;
str.concat(); 数组拼接, 也可以用于字符串;
str.indexOf(); 类似于search,可用于数组;
str.lastIndex(); 从后向前检索,返回首次出现的下标
str.split(""); 通过所给的字符分割字符串,分割后生成一个数组
join(); 数组方法,把数组中的元素,用所给的字符串连接起来
str.substr(下标位置,范围); 取子字符串
str.substring(开始位置(包括),结束位置(不包括));
str.slice(数字,起始下标位置, 数字,结束下标位置(不包括)); 数组方法
str.replace(string1, string2); 字符串替换,把string1替换成string2
a.toString(); 显式类型转换;
2. Date对象
记录时间的,时间对象
定义一个Date对象:
var now = new Date();
年份获取:
var year = now.getFullYear();
月份获取 0 ~ 11
var month = now.getMonth();
日获取
var day = now.getDate();
星期获取
var week = now.getDay();
小时获取
var hour = now.getHours();
分钟获取
var minute = now.getMinutes();
秒获取
var second = now.getSeconds();
毫秒获取
var millsecond = now.getMilliseconds();
从1970年1月1日到现在的毫秒数
时间戳
var time = now.getTime();
获取到指定时间
var future = new Date(1949, 9, 1, 8, 30, 00);
七、DOM:
1. 获取元素
document.getElementById();
document.getElementsByTagName();
document.querySelector();
通过CSS获取一个
document.querySelectorAll();
通过CSS获取多个
2. oDiv.style.backgroundColor = "red";
注意给属性赋值时,是字符串
反转:oInput.checked = !oInput.checked;
3. className;
可以通过js动态的改变元素的class属性
4. this 这个
通常情况下我们用于循环事件绑定,this指代被绑定的对象
</script>
</body>
</html>