了解对象
对象 { key: value }
对象使用两个大括号包裹， 左边是属性名，右边是属性值，用逗号隔开
属性名和属性值 又称为 “键值对”，以下为对象的增删改查
// 创建对象
// 1. 直接声明
var stu = {
// 左边就是起个名字，右边的是它的实际值
// 后面的值可以使用任何数据类型
name: "小张",
age: 17,
address: function(){}
}
// 2. 使用构造函数创建实例，先了解
var o = new Object();
console.log(stu);
console.log(o);
// 获取属性值
// 用. 或者 [] 的方式获取属性值
console.log( stu.name );
console.log( stu["age"] );
console.log( stu.address );
// 添加/修改属性值, 重新赋值即可
// 特点： 属性名不能重复, 属性名不能为纯数字 // stu.10
stu.name = "小明";
stu["name"] = "小李";
// 如果我使用的属性值以前没有，那么就会添加
stu.sex = "boy";
console.log(stu);
// 删除属性
delete stu.age;
// 先获取名字的值，然后做字符串拼接，再把得到的值赋值给之前的名字
stu.name = stu.name + "同学";
console.log(stu);
了解数组
用中括号包裹，可以包含很多项，每一项之间用逗号隔开。
数组的每一项都有自己的索引，从0开始，到 length-1结束，length为数组的长度。
var arr = [ 1, "abc", false, {name: "张三"} ];
console.log(arr);
// 数组的每一项，都可以写任意数据类型
// 获取数组某一项的值要用索引 arr索引是 0 1 2 3
console.log( arr[0] ); // 取索引为0的那一项，就是第一项
console.log( arr[1] );
console.log( arr[2] );
console.log( arr[3] );
// 数组长度： 数组的长度是一个数字值
console.log( arr.length );
if else 【选择结构】
js 代码的三种基本结构： 顺序结构、选择结构、循环结构
if、 else if 、else
// 重复声明、后面的会覆盖前面的
var a = 1;
// var a = -1;
console.log( a );
// 比较符号: == ===
// 大于号 > 、 小于号 < 、 大于等于 >= 、 小于等于 <=
// 如果和 逻辑符号一起运算，比较符号优先
// 小括号里面的是判断条件，大括号里面的是执行语句
if(a < 0){
// 条件成立时执行的代码
console.log("a是负数");
}else{
// 条件不成立时执行的代码
console.log("a是正数或0");
}
// if是“如果”， else是“否则”
// js 代码的三种基本结构： 顺序结构、选择结构、循环结构
// if、 else if 、else
var a = -1;
if(a > 0){ // 判断一
console.log("a是正数"); // 判断一成立执行语句
}else if(a === 0){ // 判断二
console.log("a是0"); // 判断二成立执行语句
}else{
console.log("a是负数"); // 以上都不成立执行语句
}
if-else 【小练习】
var arr = ["a", "b", "c"];
arr = []; // 直接给arr赋值
console.log(arr.length);
if( arr.length > 0 ){
console.log(arr);
}else{
console.log("这个数组为空");
}
var stu = {
name: "小张",
age: 18
}
if( stu.age >= 18 ){
console.log("已成年");
}else{
console.log("未成年");
}
if(a>0 && b>0){ // false
console.log("a、b都是正数");
}else if(a>0 || b>0){ // true
console.log("a、b有一个是正数");
}else{
console.log("a、b都不是正数");
}
var c;
// 如果小括号里面有一个值，那么就直接判断它的布尔值，为true时则执行
if(c){
console.log(a);
}
三元运算符【选择结构】
三元运算符，也称三目运算符， 跟if else 语句等价
// if else 不跟
var a = -10;
// if(a>0){
// console.log("正数");
// }else{
// console.log("负数或0");
// }
// 条件判断 ? 执行一 : 执行二;
a > 0 ? console.log("正数") : console.log("负数或0");
var b = "";
// 先判断 字符串b的长度, 大于0 就打印b, 否则 就给b 赋值 "a"
b.length > 0 ? console.log(b) : b = "a";
var m = -10;
var n = 20;
// 判断 m>0 && n>0
// 判断结果是true， 所以执行 m+n 。 var sum = m + n
// 如果判断结果是false， 那么 var sum = null;
var sum = m>0 && n>0 ? m+n : null;
console.log(sum);
var c = 0;
// 如果小括号里面有一个值，那么就直接判断它的布尔值，为true时则执行
if(c){
console.log(c);
}
// 判断c的布尔值， 如果成立执行前面的语句， 后面是null，代表没有执行
c ? console.log(c) : null;
switch-case 【选择结构】
var a = "6";
// 把a和"case" 后面的每一个值做比较，当比较的值一致，那么执行下面的代码
switch (a) {
case "1":
alert("今天周一");
break;
case "2":
alert("今天周二");
break;
case "3":
alert("今天周三");
break;
case "4":
alert("今天周四");
break;
case "5":
alert("今天周五");
break;
default: // 以上都不成立，则执行default
alert("今天周末");
}
// break 一定要加，遇到break就跳出，后面的代码不再执行。
// 只要匹配一次，后面就不比较了
// switch 中的比较是 用 === 来比较的
for循环【循环结构】
每一轮的for循环都有四步:
1.设置初始值 var i=0
2.是否满足循环执行条件， i<5
3.满足条件，执行{循环体}中的代码
4.执行完后，再做累加 i++ // i=i+1
做完第四步，重复二三四步
注：循环会做重复的操作，操作的次数有限制。如果操作次数没有限制，那么称“死循环”
// i执行5次， 输出 0 1 2 3 4
for(var i=0; i<5; i++){
console.log(i);
}
// 下面是死循环， n永远都大于-1,所以程序就卡死了
// for(var n=0; n>-1; n++){
// console.log(n);
// }
i++和++i的区别
都类似于i = i + 1
i++;
先使用i， 再累加++i;
先累加， 再使用i
var i = 0;
// i=i+1; // 把i值加一后，重新赋值给i
// 两步： 第一步 累加， 第二步赋值
// 1. 先使用i, 打印0
// 2. 执行累加， i = i+1
// 3. 第二次打印 i为 1
console.log(i++); // 0
console.log(i); // 1
console.log(i++); // 1
console.log(i); // 2
i++和++i 拆解
var i = 0;
// console(i++); // 0
// console.log(i); // 1
// 上面的两步 可以做一个拆解
console.log(i);
i=i+1;
console.log(i);
// 除了 i++， 还有 ++i
// 先累加， 再使用
i = 0; // 先设置i为0
// console.log(++i); // 1
// console.log(i); // 1
// 第一句话，拆解成两步
i=i+1;
console.log(i);
console.log(i);
for循环复习
核心四步骤： 1.声明 2.判断 3.执行 4.累加
for(var i=0; i<100; i++){
// % 是取余操作, 目前找偶数
// 如果if判断的语句只有一行，可以简写省略大括号，放在if判断后面
// i + "、" 是字符串拼接
// 奇数
if(i%2 === 1) document.write(i+"、");
// 偶数
// if(i%2===0) document.write(i + "、");
}
// 偶数多打印一次
for(var n=0; n<5; n++){
if(n%2===0){
console.log(n);
}
console.log(n);
}
while循环
我一直执行一段代码， 直到判断条件不满足，则停止
// 定义变量
var i = 0;
// 1. 判断条件 i<5
// 2. 执行大括号内的语句 (里面一般有自增运算)
// 重复2、3步骤
while(i<5){
console.log(i);
i++;
// i++ 是自增运算， 如果不加，i一直为0，会出现死循环
}
for循环和while循环的转换【练习】
for(var n=0; n<5; n++){
if(n%2===0){
document.write(n);
}
document.write(n);
}
// 偶数多打印一次
document.write("----------");
// 用while循环，对for循环做改造（写法不同，功能一样）
var i=0;
while(i<5){
if(i%2 === 0){
document.write(i);
}
document.write(i);
i++;
}
continue-break【补充】
continue： 跳出本次循环
break: 跳出当前的整个循环
for(var i=0; i<5; i++){ // 0~4
if(i === 1){
// continue; // 跳出这一次循环，然后继续执行后面的循环
break; // 跳出整个循环
}
console.log(i);
}
console.log("-----------------------");
// 跳出i为偶数的循环
for(var i=0; i<20; i++){
if(i % 2 === 0){
continue;
}
console.log(i);
}
console.log("-----------------------");
// 跳出i在 10到19之间的循环
for(var i=0; i<30; i++){
if(i>=10 && i<=19){
continue;
}
console.log(i);
}
for-in【循环对象】
var stu = {
name: "小明",
age: 18,
hobby: "游泳"
}
// 对象的【遍历】， 使用for in， 把对象中的每一个键值对 过一遍
// key: value
// var 变量名 in 对象
// 在{}中写执行的代码 属性值使用 对象[变量名]，不要用点
for(var key in stu){
console.log(stu[key]);
// console.log( stu.key ); // 打印的都是 undefined
}
for(var n in stu){
console.log(stu[n]);
}
函数
函数： 是一个功能，一个方法
1）声明/定义 上面两种写法，会把写的代码当成字符串存储起来
function 函数名(){ ...一大堆代码 }
2）执行
函数名();
// 用变量的方式声明函数
var fn1 = function (){
console.log(1);
}
// 普通函数声明，小括号前是函数名
function fn2(){
console.log(2); //...
}
// 2）执行
fn1();
fn2();
console.log(typeof fn1); // function
console.log(Object.prototype.toString.call(fn2)); // [object Function]
引用数据类型【小练习】
引用数据类型，也称复杂数据类型
操作的是地址空间
var arr = ["a", "b", "c", "d"]; // 数组
var obj = { name: "硬件一班" }; // 对象
var fn = function(){} // 函数
var arr1 = arr; // 数组复制了一份，但是复制的是地址空间 比如内存地址：xxff11
arr[0] = "aaa"; // 修改了第一项
arr1[1] = "bbb";
console.log(arr1); // ["aaa", "bbb", "c", "d"]
console.log(arr); // ["aaa", "bbb", "c", "d"]
// 引用数据类型 存储的是地址空间
// 就像地图一样，只要实际的地点变了，所有的地图都跟着变
var stu = {
name: "小明",
age: 17,
hobby: "游戏"
}
var stu2 = stu1 = stu;
// 一个变了，所有的跟着变，因为3个指向的是同一个地址空间
stu.age = 18;
console.log(stu);
console.log(stu1);
console.log(stu2);
获取dom节点
html部分
<div id="box">
<ul class="myUl">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
js部分
// 1.通过id获取dom节点，得到一个元素
var box = document.getElementById("box");
console.log(box);
// 2.通过标签名获取, 得到类数组
var lis = document.getElementsByTagName("li");
console.log(lis);
// 3.通过类名获取元素, 得到类数组
var myUl = document.getElementsByClassName("myUl");
console.log(myUl);
// 4.h5提供的querySelector来获取 id、类名、标签名都可以。只获取一个
// querySelectorAll获取所有
// var dom = document.querySelector("#box");
// var dom = document.querySelector(".myUl");
var dom = document.querySelector("li");
// var dom = document.querySelectorAll("li");
console.log(dom);
