一、Js基础
1.Js的三种书写方式
行内样式
<input type="button" value="刘亦菲" onclick="alert('HuGe');"/>内嵌样式
<script> alert("刘亦菲");</script>外部样式
<script src="my.js"></script>2.Js注释
1.单行注释 Ctrl + / //
2.多行注释 默认是 shift + alt + a 可改为 Ctrl + shift + / /**/
3.Js输入输出语句
//这是一个输入框
prompt('请输入你的名字');
alert('离人殇');
//console 控制台输出 给程序员注释用
console.log('给程序员看到的');4.变量
<script>
//1.声明了一个age的变量
var age;
//2.赋值 把值存入这个变量中
age = 18;
//3.输出结果
console.log(age);
//4.变量的初始化
var myname = '离人殇';
console.log(myname);
</script>5.变量的语法拓展
<script>
//1.更新变量
var myname = '离人殇';
console.log(myname);
myname = '离歌笑';
console.log(myname);
//2.同时声明多个变
var age = 18,name ='lyf',gz =200000000;
alert(age +"|" + name+"|"+ gz);
</script> 声明变量的特殊情况
(1)只声明不赋值 结果是undefined
var sex;
console.log(sex);(2)不声明，不赋值 直接使用某个变量会直接报错
console.log(tel);(3)不声明直接赋值使用（JS中可以）
qq = 10000010;
console.log(qq);7.交换两个变量值
var pingzi = "";
var apple="毒苹果";
var yApple = "红苹果";
console.log("1"+apple);
console.log("1"+yApple);
pingzi = apple;
apple = yApple;
yApple = pingzi;
console.log("2"+apple);
console.log("2"+yApple);8.变量的数据类型（程序在运行过程中，根据等号右边的值来确定的）
var num = 10;//数字型
var str = 'pink';
console.log(num);
console.log(str);
//js是动态语言，变量的数据类型是可以变化的
var x = 10;//x是数字型
console.log(x);
x = 'lyf';//x是字符串型
console.log(x);9.数字型Number
var num = 10;//num 数字型
var PI = 3.14;//PI数字型
//1.八进制 0~7 我们程序里面数字前面加0表示八进制
var num1 = 010;
console.log(num1);//010 八进制转换为10进制 就是 8
var num2 = 012;
console.log(num2);
//2.十六进制 0~9 a~f #ffffff 前面的数字加0x表示十六进制
var num3 = 0x9;
console.log(num3);
var num4 = 0xa;
console.log(num4);
//3.数字型的最大值
console.log(Number.MAX_VALUE);
//4.数字型的最小值
console.log(Number.MIN_VALUE);
//5.无穷大
console.log(Number.MAX_VALUE * 2);//Infinty 无穷大
//6.无穷小
console.log(-Number.MAX_VALUE * 2);//-Infinty 无穷小
//7.非数字
console.log('LYFHG'-100);//NaN10.isNaN()
判断变量是否为非数字的类型，返回true或者false
isNaN：是数字，返回false 不是数字，返回true
console.log(isNaN(12));//false
console.log(isNaN('pink老师'));//true11.字符串转义符
\n：换号符
\\：斜杠\
\'：'单引号
\"：""双引号
\t：tab缩进
\b：空格，b是blank的意思
var str ='我"真"是美丽啊'
console.log(str);
//字符串转义字符 都是用 \ 开头 但是这些转义字符写到引号里面
var str1 = "我是一\n个程序'员'";
console.log(str1);12.弹出警示框案例
alert('刘亦菲，1987年8\n月25日"出生于湖北省武汉市"，华语影视女演员、歌手，毕业于北京电影学院2002级表演系\n本科。2002年，因出演电视剧《金粉世家》中白秀珠一角踏入演艺圈。2003年因主演武侠剧《天龙八部》王语嫣崭露头角。');13.字符串拼接
//1.检测获取字符串的长度length
var str ='my name is ZJH';
console.log(str.length);
console.log('嘻嘻'+'哈哈');
console.log('嘻嘻'+true);
console.log(12+9);
console.log('20'+8);14.字符串拼接加强
console.log('LYF'+18);
console.log('LYF'+18 +'岁');
var age = 19;
console.log('LYFage岁');
console.log('LYF'+ age +'岁');
//变量和字符串相连的口诀，引引加加
console.log('LYF'+ age +'岁');15.显示年龄案例
var age = prompt('请输入您的年龄');
var str = '你今年已经'+age+'岁了';
alert(str);16.undefined和null
var flag = true;
var flag1 = false;
console.log(flag + 1);//true 参与加法运算当1来看
console.log(flag1 + 1);//false 参与加法运算当0来看
//如果一个变量声明未赋值 就是 undefined 未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable+'lyf');//undefinedlyf
console.log(variable+1);//NaN undefined 和数字相加 最后的结果是 NaN
//null空值
var space = null;
console.log(space+'lyf');//nulllyf
console.log(space+1);// 1 17.获取变量数据类型
var num = 10;
console.log(typeof num);//number
var str = 'lyf';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//boolean
var vari = undefined;
console.log(typeof vari);//undefined
var timer = null;
console.log(typeof timer);//object
//prompt取过来的值是 字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);18.字面量（字体颜色）
console.log(18);//青色
console.log('18');//黑色
console.log(true);//青色
console.log(undefined);//灰色
console.log(null);//灰色
19.转换为字符型
//1.把数字型转换为字符串型 变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
//2.我们利用String变量
console.log(String(num));
//3.利用+拼接字符串的方法实现转换效果
console.log(num+'');20.转换为数字型
// var age= prompt("您今年贵庚?");
// //1.parseInt（变量）可以把字符串型转换为数字型 得到是整数
// console.log(parseInt(age));
console.log(parseInt('3.14'));//3取整
console.log(parseInt('3.94'));//3取整
console.log(parseInt('120px'));//120 会去掉这个px单位
console.log(parseInt('rem120px'));//NaN
//2.parseFloat（变量）可以把字符串型转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px'));//120 会去掉这个px单位
console.log(parseFloat('rem120px'));//NaN
//3.利用Number（变量）
var str = '123';
console.log(Number(str));//123
console.log(Number('12'));//12
//4.利用了算数运算 - * / 隐式转换
console.log(Number('12'-0));//12
console.log(Number('123'-'120'));//3
console.log(Number('123' * 1));//123
console.log(Number('123' / '5'));//321.计算年龄案例
// var age= prompt("您今年贵庚?");
// //1.parseInt（变量）可以把字符串型转换为数字型 得到是整数
// console.log(parseInt(age));
console.log(parseInt('3.14'));//3取整
console.log(parseInt('3.94'));//3取整
console.log(parseInt('120px'));//120 会去掉这个px单位
console.log(parseInt('rem120px'));//NaN
//2.parseFloat（变量）可以把字符串型转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px'));//120 会去掉这个px单位
console.log(parseFloat('rem120px'));//NaN
//3.利用Number（变量）
var str = '123';
console.log(Number(str));//123
console.log(Number('12'));//12
//4.利用了算数运算 - * / 隐式转换
console.log(Number('12'-0));//12
console.log(Number('123'-'120'));//3
console.log(Number('123' * 1));//123
console.log(Number('123' / '5'));//3
//24.计算年龄案例
var age = prompt("你出生于何年？");
if(isNaN(age))
{
alert("请输入数字");
}else{
var date= d = new Date();
var year = d.getFullYear();
var old = year - parseInt(age);
alert("您今年已经"+old+"岁了");
}22.简单加法器案例
var num1 = prompt('请输入第一个数');
var num2 = prompt('请输入第二个数');
var sum = parseFloat(num1) + parseFloat(num2);
alert('相加结果是' + sum);23.转换为布尔型
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log('-----------------');
//下面都为true
console.log(Boolean('123'));
console.log(Boolean('你好吗'));
console.log(Boolean('我很好'));
console.log(Boolean(666));编译语言（C#，JAVA）：首先把所有菜做好，才能上桌吃饭
解释语言（JS）：好比吃火锅，边吃边煮，同时进行
24.案例，依次询问并获取用户的姓名、年龄、性别、并打印用户信息
var name = prompt('请输入姓名');
var age = prompt('请输入年龄');
var sex = prompt('请输入性别');
alert(name + '\n' + age + '\n' + sex+ '\n' );二、运算符
1.算数运算符
+ - * / %(取余)
<script>
//1.算数运算符
console.log(1 + 1);//2
console.log(1 - 1);//0
console.log(1 * 1);//1
console.log(1 / 1);//1
//1.%取余 （取模）
console.log(4 % 2);//0
console.log(5 % 3);//2
console.log(3 % 5);//3
//2.浮点数 算数运算里面会有问题
console.log(0.1 + 0.2);//0.30000000000000004
//3.我们不能直接拿着浮点数来进行相比较 是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3);//false
</script>2.表达式和返回值
<script>
//2.表达式和返回值
console.log(1 + 1);//2就是返回值
//1 + 1 = 2
//在我们程序里面 2 = 1 + 1 把我们的右边表达式计算完毕把返回值给左边
var num = 1 + 1 ;
console.log(num);
</script>3.前置自增运算符
++num
<script>
//1.想要一个变量自己加1 num = num + 1 比较麻烦
var num = 1;
num = num +1;
num = num +1;
console.log(num);//3
//2.前置递增运算符 ++ 写在变量的前面
var age = 10;
++ age ;//类似于 age = age + 1
console.log(age);
//3.先加1 后返回值
var p = 10;
console.log(++p + 10);
</script>4.后置递增运算符
num ++
<script>
var num =10;
num ++;//num= num +1 ++num;
console.log(num);//11
var age = 10;
console.log(age++ + 10);
console.log(age);
</script>5.递增运算符练习
<script>
var a = 10;
++a;//11;
var b = ++a +2;//12 + 2
console.log(b);
var e = 10;
var f = e++ + ++e;//22 10 + 12(11 +1)
console.log(f);
//后置自增 先表达式返回原值 后面变量再自加1
</script>6.比较运算符
< > >= <= == ！= === ！==
<script>
console.log(3>=5);//false
console.log(2<=4);//true
//1.我们程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
console.log(3==5);//false
console.log(18==18);//true
console.log(18!=18);//false
//2.全等
console.log(18===18);//true
console.log('18'===18);//false
</script>7.逻辑运算符
逻辑与 && 逻辑或 || 逻辑非 ！
<script>
//1.逻辑与 && 两侧都为true true 否则 false
console.log(3>5&& 3>2); //false
console.log(3<5&& 3>2); //true
//2.逻辑或 || 两侧都为 false 才为false 否则一侧为true 结果则为true
console.log(3>5|| 3>2); //true
console.log(3>5|| 3<2); //false
//3.逻辑非 not !
console.log(!true); //false
</script>8.短路运算（逻辑中断）
表达式1为真则返回表达式2 如果表达式1位假，则返回表达式1
<script>
//逻辑与短路运算 表达式1为真则返回表达式2 如果表达式1位假，则返回表达式1
console.log(123&&456);//456
console.log(0&&456);//0
console.log(0&&1+2&&456*56789);//0
console.log(''&&1+2&&456*56789);//0
// 0 '' null undefined NaN为假 其余为真
</script>9.赋值运算符
num = num +2; num+=2;
<script>
var num = 10;
//num = num+1;//num ++;
// num = num +2;//num += 2;
num +=5;
console.log(num);
var age = 2;
age*=3;
console.log(age);
</script>10.运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- ！ |
| 3 | 算数运算符 | 先 */%后+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&&后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
<script>
console.log(4>=6&&'人'!='阿凡达'&& !(12*2==144)&& true);//false
var num = 10;
console.log(5 == num/2 &&(2+2*num).toString()==='22'); //true
var a =3 > 5 && 2 < 7 && 3 == 4;
console.log(a);//false
var b = 3<=4 || 3>1 ||3!=2;
console.log(b);//true
var c = 2 ==="2";
console.log(c);//false
var d = !c || b && a;
console.log(d);//true
</script>流程控制：顺序结构、分支结构、循环结构
11.if分支语句
<script>
if(3>5){alert("LYF"); }
</script>12.进入网吧案例（if-else双分支语句）
<script>
var age = prompt("请输入您的年龄：");
if(age >= 18)
{
alert("我想和你去浪漫的土耳其");
}
else{
alert("先去西安吧");
}
</script>13.判断闰年案例(能被4整除且不能整除100的为闰年，或者能被400整除的就是闰年)
//能被4整除且不能整除100的为闰年，或者能被400整除的就是闰年
var num = prompt("请输入要查询的年份");
if(num%4 == 0 && !num%100==0 || num%400==0)
{
alert("是闰年");
}
else{
alert("是平年");
}14.if-else if多分支语句
if(){} else if(){}else{}
所有条件都不满足，才执行else里面的条件
15.判断成绩案例
<script>
var score = prompt("请输入您的分数");
if(score>=90){
alert("优");
}
else if(score>=80){
alert("良");
}
else if(score>=70){
alert("中");
}
else if(score>=60){
alert("及格线--------------------------------------------");
}
else{
alert("你很差劲吔");
}
</script>16.三元表达式
<script>
var num = 10;
var result = num < 5 ? '是的' : '不是的' ;
console.log(result);
</script>17.数字补0案例
<script>
var num = prompt('请输入0——59的数');
var result = num < 10 ? '0' + num:num;
console.log(result);
</script>18.switch分支语句
<script>
switch(3)
{
case 1:console.log('这是1');break;
case 2:console.log('这是2');break;
case 3:console.log('这是3');break;
default:console.log('没有匹配结果');break;
}
</script>19.switch注意事项
表达式的值和case的值匹配的时候是全等，必须值个数据类型一致才可以 num===1
break如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
20.查询水果案例
<script>
var fruit = prompt('你喜欢什么水果');
switch(fruit)
{
case '苹果':alert('大苹郭啊哈哈哈');break;
case '草莓':alert('粗霉啊~');break;
case '猕猴桃':alert('猕hotel~');break;
default:alert('886');break;
}
</script>21.switch语句和if else if语句的区别
switch 语句通常处理case为比较确定值的情况，而 if else 语句更加灵活，常用于范围判断（大于、等于某个范围）
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高 。而if else语句有几种条件，就得判断多少次。
分支较少，if else 执行效率比switch语句高。
分支较多，switch语句执行效率比较高，而且结果更清晰。
22.作业总结
<script>
// 1.判断时间阶段
var time = prompt('请输入时间');
switch(time)
{
case '12':alert('中午好');break;
case '18':alert('傍晚好~');break;
case '23':alert('深夜好~');break;
default:alert('886');break;
}
// 2.比较两个数最大值
var num1 = prompt('请输入第一个数');
var num2 = prompt('请输入第二个数');
if(parseInt(num1)>parseInt(num2)){alert(num1);}else{alert(num2);}
// 3.判断是奇数还是偶数
var num = prompt('请输入数字');
if(num % 2 == 0)//能被2整除
{
alert("偶数");
}
else{
alert("奇数");
}
// 4.根据用户输入的数值（1-7），返回星期几
var num = prompt('请输入今天星期几如6');
alert("星期"+num);
// 5.班长请吃大餐
var num = prompt('班长今天带了多少钱');
if(num>=2000){
alert("西餐");
}
else if(num>=1500){
alert("快餐");
}
else if(num>=1000){
alert("饮料");
}
else if(num>=500){
alert("棒棒糖");
}
else{
alert("穷鬼，没钱请啥客");
}
// 6.根据分数判断等级
var score = prompt('请输入分数');
if(score>=90){
alert("A");
}
else if(score>=80){
alert("B");
}
else if(score>=70){
alert("C");
}
else if(score>=60){
alert("D");
}
else{
alert("E");
}
//7.for循环
for(var i=0;i<999;i++)
{
console.log("我真棒");
}
</script>三、流程控制 -- 循环
1.for循环
<script>
for(var i = 1;i<=100;i++)
{
console.log('hello word');
}
</script>2.for循环执行过程
F11调试
（1）首先执行里面的计数器变量 var i =1 ,d但是这句话在for里面只执行一次 index
（2）去 i<=100来判断是否满足条件，如果满足条件 就去执行循环体 不满足条件退出循环
（3）最后去执行 i++ i++是单独写的代码 递增 第一轮结束
（4）接着去执行i<=100 如果满足条件 就去执行循环体 不满足条件退出循环 第二轮
3.for循环可以执行相同的代码
<script>
//for循环可以执行相同的代码
for(var i=1;i<=10;i++)
{
console.log("LYF");
}
//我们可以让用户控制输入的次数
var num = prompt("循环几次呢");
for(var i =1;i<num;i++)
{
console.log(i);
}
</script>4.for循环重复不同的代码
<script>
for(var i =1;i<=100;i++)
{
if(i == 12)
{
console.log(i+"岁了，最后一次过六一");
}
if(i ==18)
{
console.log(i+"一朵花");
}
if(i==100)
{
console.log(i+"岁");
}
}
</script>5.for循环重复某些操作
1-100之间的整数累加和
<script>
var sum = 0;
for(var i =1;i<=100;i++)
{
sum += i
}
console.log(sum);
</script>6.for循环案例
（1）1-100之间所有数的平均值
<script>
var sum = 0;
var average = 0;
for(var i =0;i<=100;i++)
{
sum +=i;
}
average = sum / 100;
console.log(average);
</script>（2）求1-100之间所有偶数和奇数的和
<script>
var odd = 0;
var even = 0;
for(var i=1;i<=100;i++)
{
if( i % 2== 0)
{
even +=i;
}
else{
odd +=i;
}
}
console.log("偶数和:"+even);
console.log("奇数和:"+odd);
</script>（3）求1-100之间所有能被3整除的数字的和
<script>
var sum = 0;
for(var i=1;i<=100;i++)
{
if( i % 3 == 0)
{
sum +=i;
}
}
console.log("能被3整除的数字的和:"+sum);
</script>7.求学生成绩案例
根据输入的学生成绩，人数输j出班级总的成绩和平均值
<script>
var mum = prompt(" 请输入班级总的人数");
var sum = 0;//求和
var average = 0;//平均数
for(var i =1;i<=mum;i++)
{
var score = prompt("请你输入第" + i + "个学生成绩");
sum += parseFloat(score);
}
console.log("求和："+sum);
average = sum / mum;
console.log("平均数："+average);
</script>8.一行打印五个星星
<script>
var num = prompt(" 请输入星星的个数");
var str = '';
for(var i =1;i<=num;i++)
{
str += "♣";
}
console.log(str);
</script>9.双重for循环
<script>
for(var i = 1; i <=3;i++)
{
console.log('外层'+i+'次循环');
for(var j = 1; j <=3;j++)
{
console.log('里层'+j+'次循环');
}
}
</script>10.打印五行五列星星
<script>
var str = '';
for(var i = 1; i <=5;i++)
{
for(var j = 1; j <=5;j++)
{
str += '☀';
}
//如果一行打印完毕五个星星就要另起一行\n
str += '\n';
}
console.log(str);
</script>11.打印n行n列的星星
<script>
var rows = prompt('请输入行数');
var cols = prompt('请输入列数');
var str = '';
for(var i = 1; i <=rows;i++)
{
for(var j = 1; j <=cols;j++)
{
str += '☀';
}
//如果一行打印完毕五个星星就要另起一行\n
str += '\n';
}
console.log(str);
</script>12.打印倒三角形
<script>
var str = '';
for(var i = 1 ;i <= 10; i++){ /*1 2*/
for(var j= i ;j <= 10; j++){/*1 2 3 4 5 6 7 8 9 10 2 3 4 5 6 7 8 9 10*/
str += '☀';
}
str += '\n';
}
console.log(str);
</script>13.打印正三角形
<script>
var str = '';
for(var i = 1 ;i <= 10; i++){ /*1 2 3 */
for(var j= 1 ;j <= i; j++){/*1 1 2 1 2 3*/
str += '☀';
}
str += '\n';
}
console.log(str);
</script>14.打印九九乘法表
<script>
var str = '';
for(var i = 1 ;i <= 9; i++){
for(var j= 1 ;j <= i; j++){
str += j +"*" + i +"="+ i * j + "\t";
}
str += '\n';
}
console.log(str);15.while循环
while(条件表达式){//循环体}
执行思路：当条件表达式结果为true 则执行循环体，否则退出循环
white不止可以计数，还可以写条件
<script>
var num = 1 ;
while(num<=100){
console.log('ok');
num++;
}
</script>16.white循环案例
（1）打印人的一生 从1岁到100岁
<script>
var age = 1;
while(age<=100)
{
console.log(age + '岁');
age ++;
}
</script>（2）计算1~100之间所有整数的和
<script>
var num = 1;
var sum = 0;
while(num<=100)
{
sum += num;
num++;
}
console.log('总和：'+sum);
</script>（3）弹出一个提示框，如果没有给到正确的答案，则一直询问，否则提示结束
<script>
var str = prompt('魔镜魔镜，世上最美的女明星是？');
while(str != '刘亦菲')
{
str = prompt('魔镜魔镜，世上最美的女明星是？');
}
alert('答对了！真棒！');
</script>17.do-white循环
和white不同的地方在于 do white 先执行一次循环体 再判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
<script>
var i = 1;
do{
console.log('哦吼');
i++;
}
while(i <= 100)
</script>18.do-white循环案例
（1）打印人的一生 从1岁到100岁
<script>
var age = 1;
do{
console.log(age + '岁');
age ++;
}while(age <= 100)
</script>（2）计算1~100之间所有整数的和
<script>
var num = 1;
var sum = 0;
do{
sum += num;
num ++;
}while(num<=100)
console.log('总和：'+sum);
</script>（3）弹出一个提示框，如果没有给到正确的答案，则一直询问，否则提示结束
<script>
do{
var str = prompt('魔镜魔镜，世上最美的女明星是？');
}while(str != '刘亦菲')
alert('答对了！真棒！');
</script>19.循环小结
for比较常用（简洁直观）
white和do..white 可以做更复杂的判断条件，比for更灵活一些
white和do..white 执行顺序不一样，white先判断后执行，do..white 先执行一次，再判断执行
white和do..white 执行次数不一样，do..white会至少执行一次循环体，而white可能一次也不执行
20.continue（退出本次（当前次的循环）继续执行剩余次数循环）
<script>
for(var i = 1;i<=5;i++)
{
if(i == 2)
{
continue;//退出本次循环
}
console.log('第'+i+"个包子");
}
</script>结果：
第1个包子
第3个包子
第4个包子
第5个包子
求1~100之间，除了能被7整除之外的整数和
<script>
var sum = 0;
for(var i = 1;i<=100;i++)
{
if(i % 7 == 0)
{
continue;
}
sum +=i;
}
console.log(sum);
</script>21.break（退出整个循环）
<script>
for(var i =1;i<5;i++)
{
if(i == 3)
{
break;
}
console.log('第'+i+"个包子");
}
</script>结果：
第1个包子
第2个包子
22.JavaScript命名规范
变量，函数的命名必须有意义
变量的名称一般用名词
函数的名称一般用动词
for (var i = 1; i < 9; i++) //操作符的作用两侧各保留一个空格
23.作业
（1）求1-100之间所有数的总和与平均值
<script>
var sum = 0;
var average = 0;
for(var i = 1;i<=100;i++){
sum += i;
}
average = sum/100;
console.log('总和：'+sum);
console.log('平均数'+average);
</script>（2）求1-100之间所有偶数的和
<script>
var even = 0;
for(var i = 1;i<=100;i++){
if(i % 2 == 0)
{
even += i ;
}
}
console.log('偶数和：'+even);
</script>（3）求1-100之间所有7的倍数的和
<script>
var sum = 0;
for(var i = 1;i<=100;i++){
if(i % 7 == 0)
{
sum += i ;
}
}
console.log('7的倍数：'+sum);
</script>（4）使用for循环打印矩形，要求每次只能输出一个★
<script>
var fang = '';
for(var i = 1; i < 5 ;i++)
{
for(var j = 1;j < 6;j++)
{
fang +='♣';
}
fang +='\n';
}
console.log(fang);
</script>（5）使用for循环打印三角形
<script>
var str = '';
for(var i = 1; i < 6;i++)
{
for(var j = 1;j <= i;j++)
{
str += "♣";
}
str +='\n';
}
console.log(str);
</script>（6）使用for循环打印99乘法表
<script>
var str ='';
for(var i = 1; i <= 9; i++)
{
for(var j = 1; j <= i; j++)
{
str += j + '*' + i +'=' + i * j + '\t';
}
str +='\n';
}
console.log(str);
</script>（7）接收用户输入的用户名和密码，若用户名为"admin",密码为"123456"，则提示用户登录成功！否则，让用户一直输入
<script>
do{
var account = prompt('请输入用户名');
var pw = prompt('请输入密码');
} while(account != 'admin' || pw != '123456')
alert('芝麻开门，口令正确');
</script>
<script>
var account = prompt('请输入用户名');
var pw = prompt('请输入密码');
while(account != 'admin' || pw != '123456')
{
account = prompt('请输入用户名');
pw = prompt('请输入密码');
}
alert('芝麻开门，口令正确');
</script>（8）求整数1-100的累加值，但要求跳过所有个位为3的数【用continue实现】
<script>
var num = 0;
var str = '';
for(var i = 1; i <= 100;i++)
{
if(i % 10 == 3)
{
continue;
}
str += i + '|\t';
num += i;
}
console.log(num);
console.log(str);
</script>（9）简易ATM
<script>
var pirce = 100;
var number = prompt("请输入您要的操作\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4.退出");
switch(parseInt(number))
{
case 1:
var sPrice = prompt("你要存多少钱");
pirce += parseInt(sPrice);
alert('余额：'+pirce);
break;
case 2:
var sPrice = prompt("你要取多少钱");
sPrice = pirce - parseInt(sPrice);
if(sPrice<=0){
alert('余额不足');
}
else{pirce = sPrice;alert('余额：'+pirce);}
break;
case 3:alert('余额：'+pirce);break;
case 4:alert('退出成功');break;
}
</script>四、数组
1.数组的使用
<script>
var arr = new Array();//创建了一个空的数组
var arr = [];//创建了一个空的数组
var arr1 = [1,18,'刘亦菲',true];
//数组里的数据源：数组元素
//我们数组里面的数据一定用逗号分隔开
console.log(arr1);
console.log(arr1[2]);
console.log(arr1[3]);
var arr2 = ['刘亦菲','胡歌','哈哈'];
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]);//因为没有这个数组元素，所以输出的结果是undefined
</script><script>
var arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
console.log(arr[6]);
</script>2.遍历数组
数组索引从0开始，计数器i当索引号来用
<script>
var arr = ['blue','orange','pink'];
for(var i = 0 ;i < 3 ;i++)
{
console.log(arr[i]);
}
//数组索引从0开始，计数器i当索引号来用
</script>3.数组长度
数组长度：数组名.length
数组长度是元素个数 不要和索引号混淆
arr.length动态监测数组元素的个数
<script>
//数组长度：数组名.length
//数组长度是元素个数 不要和索引号混淆
//arr.length动态监测数组元素的个数
var arr = ['我的秘密花园','天天有喜','秋香怒点唐伯虎','乘龙怪婿','皆大欢喜'];
for(var i = 0; i < arr.length; i++)
{
console.log(arr[i]);
}
</script>4.计算数组所有元素的和以及平均值
<script>
//计算数组所有元素的和以及平均值
var arr = [2,6,1,7,4];
var sum = 0;
var average = 0;
for(var i = 0;i < arr.length;i++)
{
sum += arr[i];
}
average = sum / arr.length;
console.log(sum,average);//想要输出多个变量，用逗号分割即可
</script>console.log(sum,average);//想要输出多个变量，用逗号分割即可
5.求数组中的最大值
<script>
var arr = [2,6,11,77,252,25,7];
var max = arr[0];
for(var i = 0;i < arr.length;i++)
{
if(arr[i] > max)
{
max = arr[i];
}
}
console.log('该数组中最大值是：'+max);
</script>6.数组转换为字符串
<script>
var arr = ['pink','red','blue','orange','yellow'];
var str = '',sep = '\n';
for(var i = 0;i < arr.length;i++)
{
str += arr[i] + sep;
}
console.log(str);
</script>7.新增数组元素
<script>
//1.新增数组元素，修改length长度
var arr= ['pink','red','blue','orange','yellow'];
console.log(arr.length);
arr.length = 9;
console.log(arr[6]);
console.log(arr[7]);
console.log(arr[20]);
//2.新增数组元素，修改索引号 追加数组元素
var arr1= ['pink','red','blue'];
console.log(arr1);
arr1[1] = 'yellow';
console.log(arr1);
arr1[4] = 'lyf';
console.log(arr1);
arr1[0] = 'hg';
console.log(arr1);
arr1 = 'AAA';
console.log(arr1);//不要直接给数组名赋值，否则里面的数组元素都没有了
</script>8.数组存放（1~1000）
<script>
var arr = [];
for(var i = 0;i < 100;i++)
{
arr[i] = i+1;
}
console.log(arr);
</script>9.筛选数组
<script>
var arr = [2,0,6,1,77,0,52,0,568,25,7];
//方法1
var nArr = [];
var j = 0;
for(var i = 0; i < arr.length; i++)
{
if(arr[i] > 10)
{
nArr[j] = arr[i];
j++;
}
}
console.log(nArr);
//方法2
var arr = [2,0,6,1,77,0,52,777,568,25,7];
//方法1
var nArr = [];
console.log(nArr.length);//空数组刚开始nArr.length是0
for(var i = 0; i < arr.length; i++)
{
if(arr[i] > 10)
{
//新数组索引号应该从0开始，依次递增
nArr[nArr.length] = arr[i];
}
}
console.log(nArr);
</script>10.数组去重（删除指定数组元素）
<script>
//将数组[2,0,6,1,77,0,52,777,568,25,7]中的0去掉后，形成一个不包含0的新数组
var arr = [2,0,6,1,77,0,52,0,568,25,7];
var nArr = [];
for(var i = 0;i < arr.length; i++)
{
if(arr[i] != 0)
{
nArr[nArr.length] = arr[i];
}
}
console.log(nArr);
</script>11.翻转数组
<script>
var arr = ['pink','red','blue','orange','yellow','purple'];
console.log(arr.length);
//把旧数组索引号第四个取过来（arr.length-1），给新数组索引号第0个元素（nArr.length）
var nArr = [];
for(var i = arr.length;i >= 0; i--){
nArr[nArr.length] = arr[i];
}
console.log(nArr);
</script>12.复习交换两个变量
<script>
//交换两个变量
var temp1 = 'apple';
var temp2 = 'orange';
var temp3 = '';
console.log(temp1,temp2);
temp3 = temp1;
temp1 = temp2;
temp2 = temp3;
console.log(temp1,temp2);
</script>13.冒泡排序
<script>
var arr =[4,1,2,3,5];
for(var i = 0;i < arr.length - 1; i++){//外层管趟数
for(var j = 0;j <= arr.length - i - 1;j++)//里面的循环 管每一趟的交换次数
{
//内部交换2个变量的值 前一个和后面的数组元素相比较
if(arr[j] > arr[j + 1])
{
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>14.什么是函数
<script>
//1.求 1~100的累加和
var sum = 0;
for(var i = 0;i <= 100; i ++)
{
sum += i;
}
console.log(sum);
//2.求 10~50的累加和
var sum = 0;
for(var i = 10;i <= 50; i ++)
{
sum += i;
}
console.log(sum);
//3.函数
function getSum (num1,num2){
var sum = 0;
for(var i = num1;i <= num2; i ++)
{
sum += i;
}
console.log(sum);
}
getSum(50,999);
getSum(1,99);
</script>15.函数的使用
<script>
//1.声明函数
function sayHi(){
console.log('h1~~');
}
//2.调用函数
sayHi();
</script>16.利用函数封装求1-100的和
<script>
//利用函数计算1-100之间的累加和
//1.声明函数
function getSum(){
var sum = 0;
for(var i = 1; i<= 100; i++)
{
sum += i;
}
console.log(sum);
}
getSum();
getSum();
</script>17.带参数的函数
利用函数的参数实现函数重复不同的代码
function 函数名（形参1，形参2...）{//在声明函数的小括号里面是形参（形式上的参数）}
函数名（实参1，实参2...）;//在函数调用的小括号里面是实参（实际的参数）
形参和实参的执行过程
<script>
//我们可以利用函数的参数实现函数重复不同的代码
//function 函数名（形参1，形参2...）{//在声明函数的小括号里面是形参（形式上的参数）}
//函数名（实参1，实参2...）;//在函数调用的小括号里面是实参（实际的参数）
//形参和实参的执行过程
function cook(aru)
{
console.log(aru);
}
cook("红烧肉");
cook("大肘子");
</script>18.利用函数求任意两个数的和
<script>
function getSum(num1,num2){
console.log(num1 + num2);
}
getSum(1,88);
getSum(10,5);
//利用函数求任意两个数之间的和
function getSums(start,end){
var sum = 0;
for(var i = start;i <= end;i++)
{
sum += i;
}
console.log(sum);
}
getSums(1,100);
//多个参数间用逗号隔开
//形参可以看做是不用声明的变量
</script>19.函数形参实参个数匹配
<script>
//函数形参实参个数匹配
function getSum(num1,num2)
{
console.log(num1 + num2);
}
//1.如果实参的个数和形参的个数一致 则整除输出结果
getSum(66,77);
//2.如果实参的个数多于形参的个数 会取到形参的个数
getSum(66,77,88);
//3.如何实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是NaN
//形参可以看做是不用声明的变量 num2是一个变量但是没有接受值 结果就是undefined
getSum(66);//NaN
</script>20.函数的返回值（return）
<script>
//函数的返回值格式
// function 函数名(){ return 需要返回的结果;}
// 函数名();
//(1)我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return实现的
//(2)只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return 后面的结果
function getResult(){
return 666;
}
getResult();//666
console.log(getResult());
//2.求任意两个数的和
function getSum(num1,num2){
return num1 + num2;
}
console.log(getSum(5,66));
</script>21.求两个数的最大值（函数版）
<script>
//普通版
function getSum(num1,num2){
// if(num1 > num2)
// {
// return num1;
// }
// else{
// return num2;
// }
return num1 > num2 ? num1 : num2;
}
console.log(getSum(30,1));
console.log(getSum(1,50));
</script>22.求数组中的最大值（函数版）
<script>
function getArrMax(arr){
var max = arr[0];
for(var i = 0; i < arr.length;i++)
{
if(arr[i] > max)
{
max = arr[i];
}
}
return max;
}
var re = getArrMax([5,2,99,101,66 ,77]);//在实际开发中我们通常用一个变量来接受函数的返回结果
console.log(re);
</script>23.函数返回值注意事项
<script>
//返回值注意事项
//1.return 注意事项
function getSum(num1,num2){
return num1 + num2;
alert("我是不会被执行的");
}
console.log(getSum(65,80));
//2.return 只能返回一个值
function fn(num1,num2)
{
return num1,num2;//返回的结果是最后一个值
}
console.log(fn(12,65));
//3.我们求任意两个数的加减乘除结果
function getResult(num1,num2){
return [num1 + num2,num1 - num2,num1 * num2,num1 / num2];
}
var re = getResult(42,23);//返回的是一个数组
console.log(re);
//4.我们的函数如果有 return 则返回的是return 后面的值，如果函数没有 return 则返回undefined
function fun1(){
return 666;
}
console.log(fun1());//返回666
function fun2(){}
console.log(fun2());//函数返回的结果是undefined
</script>24.break,continue,return的区别
函数没有return返回undefined
（1）如果有return则返回return后面的值
（2）如果没有return则返回undefined
break,continue,return的区别
break：结束当前的循环体（如for、white）
continue：跳出本次循环，继续执行下次循环（如for、white）
return ：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码
25.作业
（1）写一个函数，用户输入任意两个数组的任意算数运算（简单的计算器小功能），并能弹出运算后的结果
<script>
//（1）写一个函数，用户输入任意两个数组的任意算数运算（简单的计算器小功能），并能弹出运算后的结果
var num1 = parseInt(prompt('请输入第一个数'));
var num2 = parseInt(prompt('请输入第二个数'));
function getSum(num1,num2){
return num1 + num2;
}
alert(getSum(num1,num2));
</script>（2）写一个函数，用户输入任意两个数字的最大值，并能弹出运算后的结果
<script>
//（2）写一个函数，用户输入任意两个数字的最大值，并能弹出运算后的结果
var num1 = parseInt(prompt('请输入第一个数'));
var num2 = parseInt(prompt('请输入第二个数'));
function getSum(num1,num2){
return num1 > num2 ? num1 :num2;
}
alert(getSum(num1,num2));
</script>（3）写一个函数，用户输入任意三个不同数字的最大值，并能弹出运算后的结果
<script>
//（3）写一个函数，用户输入任意三个不同数字的最大值，并能弹出运算后的结果
var num1 = parseInt(prompt('请输入第一个数'));
var num2 = parseInt(prompt('请输入第二个数'));
var num3 = parseInt(prompt('请输入第三个数'));
function getSum(num1,num2,num3){
var arr = [num1,num2,num3];
var max = arr[0];
for(var i = 0;i<arr.length;i++)
{
if(arr[i] > max)
{
max = arr[i];
}
}
return max;
}
alert(getSum(num1,num2,num3));
</script> （4）写一个函数，用户输入一个数判断是否素数，并返弹出回值（又叫质数，只能被1和自身整数的数）
<script>
//（4）写一个函数，用户输入一个数判断是否素数，并返弹出回值（又叫质数，只能被1和自身整除的数）
//质数：只能被1和它本身整除的数，1既不是质数也不是合数。质数需是大于1的自然数（自然数： 0,1,2,3…）
var num = +prompt("请输入一个数：");
function getSum(num){
for(var i = 2;i <= num;i++){
if(num == i && num != 1)
{
return num + "是质数";
break;
}
else if(num == 1 || num % i == 0 )
{
return num + "不是质数";
break;
}
}
if(num == 1)return num + "不是质数";}
alert(getSum(parseInt(num)));
</script>五、函数与对象1
1.arguments：当前函数的内置对象，对象中存储了传递的所有实参伪数组 并不是真正意义上的数组）
<script>
//arguments的使用 只有函数才有argumemts对象 而且是每个函数都内置好了这个arguments
function fn(){
console.log(arguments);//里面存储了所有传递过来的参数 arguments = [1,2,3];
console.log(arguments.length);
console.log(arguments[2]);
for(var i=0;i<arguments.length;i++)
{
console.log(arguments[i]);
}
}
fn(1,2,3,4);
</script>2.利用函数求任意个数的最大值
<script>
function getMax(){
var max = arguments[0];//伪数组中的第一个
for(var i =1;i<=arguments.length;i++){
if(arguments[i] > max)
{
max = arguments[i];
}
}
return max;
}
console.log( getMax(77,656656,99,101,5));
</script>3.利用函数翻转任意数组
<script>
function reverse(arr)
{
var arr1 = [];
for(var i = arr.length -1;i>=0;i--)
{
arr1[arr1.length] = arr[i];
}
return arr1;
}
console.log(reverse([6,7,8,9,10,12]));
</script>4.利用函数冒泡排序
<script>
function sort(arr){
for(var i=0;i< arr.length-1;i++)
{
for(var j=0;j< arr.length-i-1;j++)
{
if(arr[j]>arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
var arr1 = sort([1,4,2,9]);
console.log(arr1);
var arr2 = sort([11,7,222222,9999]);
console.log(arr2);
</script>5.利用函数判断闰年
<script>
function isRunYear(year){
var flag = false;
if(year%4==0 &&year %100!=0||year %400 ==0)
{
flag = true;
}
return flag;
}
console.log(isRunYear(2000));
console.log(isRunYear(1998));
</script>6.函数是可以相互调用的
<script>
function fun1(){
console.log(6600);
fun2();
}
fun1();
function fun2(){
console.log(22);
}
</script>7.输出年份2月份的天数
<script>
backDay();
function backDay(){
var year = prompt("请输入要查询的年份");
if(isRunYear(year))
{
alert("闰年2月份有29天");
}
else{
alert("平年2月份有28天");
}
}
function isRunYear(year){
var flag = false;
if(year%4==0 &&year %100!=0||year %400 ==0)
{
flag = true;
}
return flag;
}
</script>8.函数的两种声明方式
1.利用函数关键词自定义函数（命名函数）
//1.利用函数关键词自定义函数（命名函数）
function fn (){
console.log("飞雪连天射白鹿，笑书神侠倚碧鸳");
}
fn();2.函数表达式（匿名函数）
//2.函数表达式（匿名函数）
var fn2 = function(aru){
console.log("2008北京奥运会");
console.log(aru);
}
fn2("亚特兰大");9.Javascript作用域
<script>
//全局作用域
var num = 10;
var num = 30;
console.log(num);
//局部作用域
function fn(){
var num = 20;
console.log(num);
}
fn();
</script>10.变量的作用域
<script>
function fun(aru){
var num1 = 10;
num2 = 20;
}
fun();
console.log(num1);
console.log(num2);
//从执行效率看全局变量和局部变量
//（1）全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
//（2）局部变量当我们程序执行完毕就会销毁，比较节约内存资源
</script>从执行效率看全局变量和局部变量
（1）全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
（2）局部变量当我们程序执行完毕就会销毁，比较节约内存资源
11.JavaScript没有块级作用域
js中没有块级作用域 块级作用域: {} if{} for{}
<script>
//js中没有块级作用域 块级作用域: {} if{} for{}
if(3<5)
{
var num = 10;
}
console.log(num);
</script>12.作用域链
作用域链：内部函数访问函数的变量，采用的是链式查找的方式来决定取哪个值 这种结构我们称为作用域链 就近原则
<script>
//作用域链：内部函数访问函数的变量，采用的是链式查找的方式来决定取哪个值 这种结构我们称为作用域链 就近原则
var num = 10;
function fn(){//内部函数
var num = 20;
function fun(){
console.log(num);
}
fun();
}
fn();
</script>14.预解析
//1.我们js引擎运行js分成两步：预解析 代码执行
//（1）预解析js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面
//（2）代码执行 按照代码书写的顺序从上往下执行
//2.预解析分为变量预解析（变量提升）和函数预解析（函数提升）
//（1）变量提升 就是把所有的变量提升到当前作用域最前面 不提升赋值操作
//（2）函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数16.利用对象字面量创建对象
<script>
//var obj = {};创建一个空的对象
var obj = {
uname :'李逍遥',
age:18,
sex:'男',
sayHi:function(str){//匿名函数
console.log('hi~~~~');
console.log(str);
}
}
//（1）里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值
//（2）多个属性或者方法中间用逗号隔开的
//（3）方法冒号后面跟的是一个匿名函数
//2.使用对象
//（1）调用对象的属性 对象名.属性名
//调用示例
console.log(obj.sex);
console.log(obj['age']);
obj.sayHi("lyf");
</script> <script>
var obj = {
name :'可可',
type:'阿拉斯加犬',
age: '5',
color:'棕红色',
jineng:function(){
console.log('bark');
console.log('showfilm');
}
}
console.log(obj.name);
console.log(obj['type']);
console.log(obj.age);
console.log(obj.color);
obj.jineng();
</script>17.变量属性函数方法区别
1.函数和对象的区别
（1）函数是单独声明 并且调用的 函数名() 单独存在的
（2）方法 在对象里面 调用的时候 对象.方法()
2.变量、属性的区别
（1）变量和属性是相同的 他们都是用来存储数据的
（2）变量 单独声明并赋值 使用的时候直接写变量名 单独存在
（3）属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
<script>
//变量、属性、函数、方法的区别
//1.变量和属性是相同的 他们都是用来存储数据的
var num = 10;
var obj = {
age : 18,
fn:function(){
}
}
function fn(){}
console.log(obj.age);
//变量 单独声明并赋值 使用的时候直接写变量名 单独存在
//属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
//2.函数和方法的共同点 都是实现某种功能 做某件事
//函数是单独声明 并且调用的 函数名() 单独存在的
//方法 在对象里面 调用的时候 对象.方法()
</script>18.利用new Object创建对象
<script>
var obj = new Object();//创建一个空的对象
obj.name = '李逍遥';
obj.age = '18';
obj.sayHi = function(){
console.log("hI~~");
}
console.log(obj.name);
console.log(obj['age']);
obj.sayHi();
</script> <script>
var obj = new Object();
obj.name = '鸣人';
obj.age = '180';
obj.sex = 'boy';
obj.skil = function(){
console.log('放个大招给你看');
}
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
obj.skil();
</script>19.我们为什么需要构造函数
（1）因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制
（2）因此我们可以利用函数的方法，重复这些相同的代码 我们就把这个函数称为构造函数
（3）又因为这个函数不一样，里面封装的不是普通代码，而是对象
（4）构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
20.利用构造函数创建对象（平时返回多个值时可用）
（1）.构造函数名字首字母要大写
（2）我们构造函数不需要return 就可以返回结果
（3）我们调用构造函数，必须使用new
（4）我们只要new Star() 调用函数就创建一个对象 ldh()
（5）我们的属性和方法前面必须添加this
<script>
//new 构造函数名();
function Star (uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.skil = function(skil){
console.log(skil);
}
}
var ldh = new Star('刘德华',18,'男');//调用函数返回的是一个对象
console.log(ldh.name);
console.log(ldh.sex);
ldh.skil('sing');
var lxy = new Star('李逍遥',20,'男');
console.log(lxy.name);
console.log(lxy.age);
ldh.skil('sword');
//1.构造函数名字首字母要大写
//2.我们构造函数不需要return 就可以返回结果
//3.我们调用构造函数，必须使用new
//4.我们只要new Star() 调用函数就创建一个对象 ldh()
</script> <script>
function Afun(){
var a = 1084;
var b = 800;
var sum = a + b;
this.a = a;
this.sum = sum;
}
var aName = new Afun();
console.log(aName.a);
console.log(aName.sum);
</script> <script>
function objName(name,type,blood,attack){
this.name = name;
this.type = type;
this.blood = blood;
this.attack = attack;
}
var lianpo = new objName('廉颇','力量型','500血量','近战');
console.log(lianpo.name);
console.log(lianpo.type);
console.log(lianpo.blood);
console.log(lianpo.attack);
var houyi = new objName('后羿','射手型','100血量','远程');
console.log(houyi.name);
console.log(houyi.type);
console.log(houyi.blood);
console.log(houyi.attack);
</script>21.构造函数和对象
<script>
//构造函数和对象
//1.构造函数 明星 泛指的某一大类 它类似于java语言里面的类（class）
function Star(uname,age,sex)
{
this.uname = uname;
this.age = age;
this.sex = sex;
this.sing = function(sing){
console.log(sing);
}
}
//2.对象 特指是一个具体的事物 李逍遥 == {name:李逍遥,age:18,sex:'男',sign:f}
var lxy = new Star('李逍遥',18,'男');
lxy.sing('六月的雨');
console.log(lxy);
//3.我们利用构造函数创建对象的过程我们也称为对象的实例化
</script>
22.new关键字执行过程
（1）new 构造函数可以在内存中创建一个空的对象
（2）this 就会指向刚才创建的空对象
（3）执行构造函数里面的代码 给这个空对象添加属性和方法
（4）返回这个对象
<script>
//new关键字执行过程
//1.new 构造函数可以在内存中创建一个空的对象
//2.this 就会指向刚才创建的空对象
//3.执行构造函数里面的代码 给这个空对象添加属性和方法
//4.返回这个对象
function Sart(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.skil = function(skil)
{
console.log(skil);
}
}
var lxy = new Sart('李逍遥',18,'大侠');
console.log(lxy.name);
console.log(lxy.age);
console.log(lxy.sex);
lxy.skil('飞龙探云手');
</script>23.遍历对象
for in 遍历我们的对象
for(变量 in 对象)
<script>
var obj = {
name :'李逍遥',
skil:'飞龙探云手',
type:'大侠',
fn:function(){}
}
//for in 遍历我们的对象
//for(变量 in 对象)
for(var k in obj)
{
console.log(k);//k变量输出 得到的是属性名
console.log(obj[k]);//obj[k] 得到的是属性值
console.log(k+":"+obj[k]);
}
//我们使用 for in 里面的变量 我们喜欢写k或者key
</script>24.作业
<script>
//1
function Computer(color,log,xinh){
this.color = color;
this.log = log;
this.xinh = xinh;
this.fn = function(skil){
console.log(skil);
}
}
var com = new Computer('红色','1000kg','重度');
for(var k in com)
{
console.log(k+":"+com[k]);
}
com.fn('看电影,听音乐，打游戏，敲代码');
//2
function Btn(w,height,bgColor){
this.w = w;
this.height = height;
this.bgColor = bgColor;
this.fn = function(skil){
console.log(skil);
}
}
var btn = new Btn('100','200','红色');
for(var k in btn)
{
console.log(k+":"+btn[k]);
}
btn.fn('点击行为');
//3.
function Car(log,color,paizi){
this.log = log;
this.color = color;
this.paizi = paizi;
this.fn = function(skil){
console.log(skil);
}
}
var car = new Car('100000kg','灰色','五菱荣光');
for(var k in car)
{
console.log(k+":"+car[k]);
}
car.fn('载人，拉货和耕田');
</script>六、函数与对象2
1.Math对象最大值
<script>
//Math数学对象，不是一个构造函数，所以我们不需要new来调用 而是直接使用里面的属性和方法即可
console.log(Math.PI);//一个属性 圆周率
//Math.max 最大值
console.log(Math.max(1,99,3));//99
console.log(Math.max(-1,-10));//-1
console.log(Math.max(-1,99,'AAAA'));//NaN
console.log(Math.max());//-Infinity
</script>2.封装自己的数学对象
<script>
//利用对象封装自己的数学对象 里面有PI最大值和最小值
var myMath = {
PI:3.1415926,//3.141592653589793
max:function(){
var max = arguments[0];
for(var i = 1;i < arguments.length;i++)
{
if(arguments[i]>max){
max = arguments[i];
}
}
return max;
},
min:function(){
var min = arguments[0];
for(var i = 0;i<arguments.length;i++)
{
if(arguments[i]<min)
{
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(2212,55445,88));
console.log(myMath.min(6565,9888,0.4));
</script>3.Math绝对值和三个取整方法
<script>
//1.绝对值方法
console.log(Math.abs(1));//1
console.log(Math.abs(-1));//1
console.log(Math.abs('-1'));//隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('pink'));//NaN
//2.三个取整方法
//（1）Math.floor 向下取整 往最小了取值
console.log(Math.floor(1.1));//1
console.log(Math.floor(1.9));//1
//（2）Math.ceil() ceil 天花板 向上取整 往最大了取值
console.log(Math.ceil(1.1));//2
console.log(Math.ceil(1.9));//2
//（3）Math.round() 四舍五入 其他数字都是四舍五入 但是 .5特殊 他往大了取
console.log(Math.round(1.1));//1
console.log(Math.round(1.5));//2
console.log(Math.round(1.9));//2
console.log(Math.round(-1.1));//-1
console.log(Math.round(-1.5));//这个结果是-1
</script>4.Math对象随机数方法
Math.random()
function getRandom(min,max)
{return Math.floor(Math.random()*(max-min+1))+min;}
<script>
console.log(Math.random());
function getRandom(min,max)
{
return Math.floor(Math.random()*(max-min+1))+min;
}
console.log(getRandom(1,10));
var arr = ["李逍遥","赵灵儿","林月如","阿奴","唐钰小宝","刘晋元"];
console.log(arr[0]);
console.log(arr[getRandom(0,arr.length-1)]);
</script>5.猜数字游戏
<script>
//1.猜1~10的数字
function getRandom(min,max)
{
return Math.floor(Math.random()*(max-min+1))+min;
}
var random = getRandom(1,10);
console.log(random);
while(true)
{
var num = prompt("你来猜？请输入1~10之间的数字");
if(num>random)
{
alert("Big");
}
else if(num<random)
{
alert("Small");
}
else{
alert("GOOD JOB");
break;//退出整个循环结束程序
}
}
// 2.猜1~50之间的数字 但是只有10次猜的机会
var random = getRandom(1,50);
console.log(random);
var cNum = 0;
while(true)
{
cNum ++;
if(cNum<=10)
{
var jNum = 11 - cNum;
var num = prompt("你来猜？请输入1~50之间的数字,还剩"+ jNum+"次机会");
if(num>random)
{
alert("Big");
}
else if(num<random)
{
alert("Small");
}
else{
alert("GOOD JOB");
break;//退出整个循环结束程序
}
}
else{
alert("Game Over");
break;
}
console.log(cNum);
}
</script> 6.Date日期对象
var arr = new Array();//创建一个数组对象
var obj = new Object();//创建了一个对象示例
var date = new Date();//如果没有参数 返回系统当前时间
<script>
var arr = new Array();//创建一个数组对象
var obj = new Object();//创建了一个对象示例
var date = new Date();//如果没有参数 返回系统当前时间
console.log(date);
var date1 = new Date(2019,10,10);
console.log(date1);
var date2 = new Date('2021-11-11 8:8:8');
console.log(date2);
</script>7.格式化日期年月日
var date = new Date();
年：date.getFullYear()
月：date.getMonth();//返回的月份小1个月 记得月份+1哟
日：date.getDate();
周几：date.getDay();//周几 周日返回是0
时：date.getHours();
分：date.getMinutes();
秒：date.getSeconds();//秒
<script>
var date = new Date();
console.log(date.getFullYear());//年
console.log(date.getMonth());//月 返回的月份小1个月 记得月份+1哟
console.log(date.getDate());//日
console.log(date.getDay());//周几 周日返回是0
//示例
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var arr = ['周日','周一','周二','周三','周四','周五','周六'];
var week = date.getDay();
var h = date.getHours();//时
h = h<10?"0" + h: h;
var m = date.getMinutes();//分
m = m<10?"0" + m: m;
var s = date.getSeconds();//秒
s = s<10?"0" + s: s;
console.log("北京时间：" + year+"年" +month+"月"+day+"日"+h+":"+m+":"+s+arr[week]);
</script> <script>
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
//封装一个函数 时分秒
function getTime(){
var time = new Date();
var h = date.getHours();
h = h < 10 ? "0" + h : h;
var m = date.getMinutes();
m = m < 10 ? "0" + m : m;
var s = date.getSeconds();
s = s < 10 ? "0" + s : s;
return h + ":" + m + ":" + s;
}
console.log(getTime());
</script> 9.获得Date总的毫秒数
<script>
//获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1日过来多少毫秒数
var date = new Date();
console.log(date.valueOf());//就是 我们显示时间距离1970.1.1总的毫秒数
console.log(date.getTime());
//2.简单的写法（最常用的写法）
var date1 = new Date();// +new Date(); 返回的就是总的毫秒数
console.log(date1);
//3.H5新增的获得总的毫秒数
console.log(Date.now());
</script>10.倒计时效果
<script>
function countDown(Time){
var nowTime = +new Date();//返回的是当前时间总的毫秒数
var inputTime = +new Date(Time);//返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime)/1000;//time是剩余时间总的秒数
var d = parseInt(times / 60 /60 / 24);//天
d = d < 10 ? '0'+ d : d;
var h = parseInt(times / 60 /60 % 24);//时
h = h < 10 ? '0'+ h : h;
var m = parseInt(times / 60 % 60 );//分
m = m < 10 ? '0'+ m: m;
var s = parseInt(times % 60);//秒
s = s < 10 ? '0'+ s : s;
return d + '天' + h +'时' + m +'分' + s + '秒';
}
console.log(countDown('2021-8-1 12:25:00'));
var date = new Date();
console.log(date);
</script>11.创建数组的两种方式
1.利用数组字面量
var arr = [1,2,3];
2.利用new Array()
var arr1 = new Array(2,3);
<script>
//1.利用数组字面量
var arr = [1,2,3];
console.log(arr[1]);
//2.利用new Array()
// var arr1 = new Array();//创建一个空的数组
// var arr1 = new Array(2);//表示数组长度为2 里面有2个空的数组元素
var arr1 = new Array(2,3);
console.log(arr1);
</script>12.检测是否为数组方法
（1）instanceof运算符 检测是否为数组
（2）Array.isArray(参数)
<script>
//翻转数组
function reverse(arr){
if(arr instanceof Array)
{
var newArr = [];
for(var i = arr.length-1;i>=0;i--)
{
newArr[newArr.length] = arr[i];
}
return newArr;
}
else{
return 'error 这个参数必须是数组格式[a,b,c]';
}
}
console.log(reverse(1,2,3));
console.log(reverse([898,56,55]));
//（1）instanceof运算符 检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
//（2）Array.isArray(参数)
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
</script>13.添加删除数组元素方法
（1）push()：在数组末尾 添加或者多个元素
（2）unshift()：在数组开头 添加或者多个元素
（3）pop()：删除数组的最后一个元素（一次只能删除一个元素,没有参数）
（4）shift()：它可以删除数组的第一个元素（一次只能删除一个元素,没有参数）
<script>
var arr = [1,2,3];
console.log(arr.push(64,'apple',5656));//返回的结果是新数组的长度
console.log(arr);
console.log(arr.unshift('gg','qweqwe'));//返回的结果是新数组的长度
console.log(arr);
console.log(arr.pop());//（一次只能删除一个元素,没有参数）//返回的结果是删除的那个元素
console.log(arr);
console.log(arr.shift());//（一次只能删除一个元素,没有参数）//返回的结果是删除的那个元素
console.log(arr);
</script>14.筛选数组
<script>
//筛选小于2000的数据
var arr = [1500,1200,2000,2100,1800];
console.log(arr);
var newPArr = [];
var newUArr = [];
for(var i =0;i<arr.length;i++)
{
if(arr[i]<2000)
{
newPArr.push(arr[i]);
newUArr.unshift(arr[i]);
}
}
console.log(newPArr);
console.log(newUArr);
</script>15.数组排序
（1）翻转数组
（2）数组排序（冒泡排序）(从小到大（升序）从大到小（降序）排序)
<script>
//数组排序
//1.翻转数组
var arr = ['pink','red','blue','lgx'];
arr.reverse();
console.log(arr);
//2.数组排序（冒泡排序）(从小到大（升序）从大到小（降序）排序)
var arr1 = [13,5,77,1,7];
arr1.sort(function(a,b)
{
// return a - b;//升序的顺序排列
return b - a;//降序的顺序排列
})
console.log(arr1);
</script>16.获取数组元素索引方法
（1）indexOf（数组元素）返回该数组元素的索引号 从前面开始查找
只返回第一个满足条件的索引号,如果在该数组里面找不到元素，返回的是-1
（2）lastIndexOf（数组元素）从后面开始查找
只返回第一个满足条件的索引号,如果在该数组里面找不到元素，返回的是-1
<script>
//indexOf（数组元素）返回该数组元素的索引号 从前面开始查找
//只返回第一个满足条件的索引号,如果在该数组里面找不到元素，返回的是-1
var arr = ['green','pink','blue'];
console.log(arr.indexOf('blue'));
//lastIndexOf（数组元素）从后面开始查找
//只返回第一个满足条件的索引号,如果在该数组里面找不到元素，返回的是-1
var arr = ['green','purper','blue','purper','yellow'];
console.log(arr.lastIndexOf('purper'));
</script>17.数组去重
<script>
//封装一个去重的函数
function unique(arr){//unique独一无二
var newArr = [];
if(arr instanceof Array)
{
for(var i = 0;i<arr.length;i++)
{
if(newArr.indexOf(arr[i]) === -1)
{
newArr.push(arr[i]);
}
}
return newArr;
}
else{
return "请输入数组";
}
}
var demo = unique(['t','c','a','a','x','z','a','c','b','t']);
console.log(demo);
</script>18.数组转换为字符串
（1）toString() 数组转字符串
（2）join（分隔符）
<script>
//（1）toString() 数组转字符串
var arr = [1,2,3];
console.log(arr.toString());//1,2,3
//（2）join（分隔符）
var arr = ['green','blue','purper'];
console.log(arr.join());//green,blue,purper
console.log(arr.join('-'));//green-blue-purper
console.log(arr.join('&'));//green&blue&purper
</script>（3）concat() 连接两个或多个数组，不影响原数组
（4）slice() 数组截取slice(begin,end)
（5）数组删除splice() (第几个开始，要删除个数（删除当前1，删除之后的eg:2,3,4....），这个会影响原数组)
<script>
//（3）concat() 连接两个或多个数组，不影响原数组
var arr1 = [545,666,999];
var arr2 = ['apple','purper','gg'];
var arr3 = arr1.concat(arr2);
console.log(arr3);
var arr4 = ['干','爸','爹'];
var arr5 = arr1.concat(arr4,arr2);
console.log(arr5);
//（4）slice() 数组截取slice(begin,end)
// var arr4 = arr1.slice(2);
var arr4 = arr1.slice(1,3);
console.log(arr4);
//（5）数组删除splice() (第几个开始，要删除个数（删除当前1，删除之后的eg:2,3,4....），这个会影响原数组)
var arr5 = arr1.splice(2,2);//删除删除位于 index 2 的元素
var arr5 = arr1.splice(1,1,"William");//删除位于 index 1 的元素，并添加一个新元素来替代被删除的元素
console.log(arr1);
</script>19.基本包装类型
<script>
var str = 'andy';
console.log(str.length);
//对象才有属性和方法 复杂数据类型才有属性和方法
//基本包装类型:就是把简单数据类型包装成为了复杂数据类型
//（1）把简单数据类型包装为复杂数据类型
var temp = new String('andy');
//（2）把临时变量的值给str
str = temp;
console.log(str);
//（3）销毁这个临时变量
temp = null;
console.log(str);
</script>20.字符串的不可变性
<script>
//字符串的不可变性
var str = 'andy';
console.log(str);
str = 'me';
console.log(str);
//因为我们字符串的不可变所以不要大量的拼接字符串
var str = '';
for(var i = 1;i <=100;i++)//循环越多次，越需要花费大量时间来显示，因为需要不断开辟新的空间
{
str += i +'.';
}
console.log(str);
</script>21.根据字符返回位置
<script>
//字符串对象 根据字符返回位置 str.indexOf('要查找的字符','[起始的位置]')
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春',3));//从索引号是3的位置开始往后查找
</script>22.查找字符串的中某个字符出现的次数
<script>
var str = 'oabcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while(index!==-1)
{
console.log(index);
num ++;
index = str.indexOf('o',index + 1);
}
console.log('o出现的次数是' + num);
//['red','blue','red','green','pink','red'] 求red出现的位置和次数
var color = ['red','blue','red','green','pink','red'];
var index = color.indexOf('red');
var num = 0;
while(index!==-1)
{
console.log(index);
num ++;
index = color.indexOf('red',index + 1);
}
console.log('red出现的次数是' + num);
</script>23.根据位置返回字符
（1）charAt(index) 根据位置返回字符
（2）charCodeAt(index) 返回相应索引号的字符ASCII值 目的：判断用户按下哪个键
字符串中第一个字符的位置为 0， 第二个字符位置为 1，以此类推。
（3）str[index] H5新增的 （与charArt功能类似）
<script>
//（1）charArt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(2));
//遍历所有字符
for(var i =0;i<str.length;i++)
{
console.log(str.charAt(i));
}
//（2）charCodeAt(index) 返回相应索引号的字符ASCII值 目的：判断用户按下哪个键
console.log(str.charCodeAt(0));//97
//（3）str[index] H5新增的 （与charArt功能类似）
console.log(str[1]);//n
</script>24.统计出现最多的字符和字数
<script>
var str = 'oabcoeofoxyozzopop';
var o = {};
for(var i =0;i < str.length;i++)
{
var chars = str.charAt(i); //根据索引号返回字符
if(o[chars])
{
o[chars] ++;
}
else{
o[chars] = 1;
}
}
console.log(o);
var max = 0;
var ch = '';
for(var k in o)
{
if(o[k]>max)
{
max = o[k];
ch = k;
}
}
console.log("最大值是" + max + "最多的字符是" + ch);
</script>25.字符串操作方法
（1）contat('字符串1','字符串2');
（2）substr('截取的初始位置','截取几个字符') 第一个 是索引号 从第几个开始 第二个 是第几个字符
<script>
//字符串操作方法
//（1）contat('字符串1','字符串2');
var str = 'lgx';
console.log(str.concat('离歌笑'));
//（2）substr('截取的初始位置','截取几个字符') 第一个 是索引号 从第几个开始 第二个 是第几个字符
var str1 = '飞雪连天射白鹿';
console.log(str1.substr(2,2));//第一个2 是索引号的2 从第几个开始 第二个2 是去几个字符
</script>26.其他方法
（1）替换字符 replace('被替换的字符','替换为的字符') 它只会替换第一个字符
（2）字符转换为数组 split('分隔符')
<script>
//（1）替换字符 replace('被替换的字符','替换为的字符') 它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a','b'));
//有一个字符串 'oabcoefoxyozzopp' 要求把里面所有的o替换为*
var str1 = 'oabcoefoxyozzopp';
// str1 = str1.replace(/o/g,'*');
// console.log(str1);
while(str1.indexOf('o')!==-1)
{
str1 = str1.replace('o','*');
}
console.log(str1);
//（2）字符转换为数组 split('分隔符')
var str2 = 'red,pink,blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
console.log(str3[6]);
</script>27.转换大写小写
（1）toUpperCase() 转换大写
（2）toLowerCase() 转换小写
<script>
//（1）toUpperCase() 转换大写
var str = 'abcdefg';
str = str.toUpperCase(str);//转换大写
console.log(str);
//（2）toLowerCase() 转换小写
var str1 = 'ABCDEFG';
str1 = str1.toLowerCase(str1);
console.log(str1);
</script>28.作业
<script>
var str = 'abaasdffggsghhjjkkgfddsssss344343';
console.log(str.length);//字符串长度
//取出指定位置的字符
console.log(str.charAt(0));
console.log(str.charAt(3));
console.log(str.charAt(5));
console.log(str.charAt(9));
//查找指定字符是否存在
var o = {};
for(var i = 0;i<str.length;i++)
{
var chars = str.charAt(i);
if(o[chars])
{
o[chars]++;
}
else{
o[chars] = 1;
}
}
console.log(o);
//出现次数最大的字符和出现的次数
var max = 0;
var ch = '';
for(var k in o)
{
if(o[k] > max)
{
max = o[k];
ch = k;
}
}
console.log("出现次数最多的字符:"+ ch + " 次数:"+max);
//替换指定的字符
while(str.indexOf('g')!==-1)
{
str = str.replace("g",'22');
}
while(str.indexOf('ss')!==-1)
{
str = str.replace("ss",'b');
}
console.log(str);
//截取指定开始位置到结束位置的字符串
str2 = str.substr(1,5);
console.log(str2);
</script>29.简单类型与复杂类型
<script>
//复杂数据类型传参
function Person(name)
{
this.name = name;
}
function f1(x)
{
console.log(x.name);//李逍遥
x.name= "离歌笑";
console.log(x.name);//离歌笑
}
var p = new Person("李逍遥");
console.log(p.name);//李逍遥
f1(p);
console.log(p.name);//离歌笑
</script>
七、WebApis和JS基础关联性1（DOM）
1.getElementById获取元素
console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
<div id="time"></div>
<script>
var timer = document.getElementById("time");
console.log(timer);
console.log(typeof timer);
//console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>2.getElememtsByTagName获取某些元素
getElementsByTagName：获取标签 ul li ol
<ul>
<li>飞雪连天射白鹿</li>
<li>笑书神侠倚碧鸳</li>
</ul>
<ol id="ol">
<li>啊啊啊</li>
<li>嗷嗷嗷</li>
<li>哎哎哎ε＝ε＝ε＝(#>д<)ﾉ</li>
</ol>
<script>
//1.返回的是 获取过来元素对象的集合 以伪数组的形式储存的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//2.我们想要依次打印里面的元素对象，我们可以采取遍历的方式
for(var i=0;i<lis.length;i++)
{
console.log(lis[i]);
}
//3.如果页面中只有一个li返回的还是伪数组的形式
//4.如果页面中没有这个元素返回的空的伪数组的形式
//5.element.getElementsByTagName('标签名');
var ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById("ol");
console.log(ol.getElementsByTagName("li")[1]);
</script>3.H5新增获取元素方式
（1）getElementsByClassName 根据类型获得某些元素集合
（2）QuerySelector 返回指定选择器的第一个元素 切记 里面的选择器需要加符号
（3）querySelectorAll()返回指定选择器的所有元素对象集合
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</div>
</ul>
</div>
<script>
//1.getElementsByClassName('box');根据类型获得某些元素集合
var boxs = document.getElementsByClassName("box");
console.log(boxs);
//2.QuerySelector 返回指定选择器的第一个元素 切记 里面的选择器需要加符号
var firstBox = document.getSelection(".box");
console.log(firstBox);
var nav = document.getSelection("#nav");
console.log(nav);
var li = document.getSelection("li");
console.log(li);
//3.querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll("li");
console.log(lis);
</script>4.获取特殊元素
（1）获取body元素 document.body
（2）获取html元素 document.documentElement
<script>
//1.获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
//2.获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>5.事件三要素
事件由三个部分组成 事件源 事件类型 事件处理程序
（1）事件源 点击触发
（2）事件类型 触发的事件 eg:onclick
（3）事件处理程序 函数function
<button id="btn">离歌笑</button>
<script>
//事件由三个部分组成 事件源 事件类型 事件处理程序
//（1）事件源 点击触发
//（2）事件类型 触发的事件 eg:onclick
//（3）事件处理程序 函数function
var btns = document.getElementById("btn");
btns.onclick=function(){
alert("李逍遥");
}
</script>6.执行事件步骤
<div>杨秋池</div>
<script>
//执行事件步骤
//1.获取事件源
var yang = document.querySelector("div");
//2.绑定事件 注册事件
//3.添加事件处理程序
yang.onclick = function(){
alert("纳妾记");
}
</script>7.操作元素之改变元素内容，interText和interHtml的区别
（1）innerText 不识别html标签 非标准 去除空格和换行
（2）innerHTML 识别html标签 W3C标准 保留空格和换行
这两个属性是可读写的 可以获取元素的内容
<script>
//（1）innerText 不识别html标签 非标准 去除空格和换行
//（2）innerHTML 识别html标签 W3C标准 保留空格和换行
//这两个属性是可读写的 可以获取元素的内容
var div = document.querySelector("div");
div.innerHTML = "<span style='color:#c00;'>爱情</span>睡醒了";
var p = document.querySelector("p");
console.log(p.innerText);
console.log(p.innerHTML);
</script>9.操作元素之修改元素属性
修改元素属性 src
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" title="刘德华">
<script>
var ldh = document.getElementById("ldh");
var zxy = document.getElementById("zxy");
var img = document.querySelector("img");
ldh.onclick = function(){
img.src = "images/ldh.jpg";
img.title = "刘德华";
}
zxy.onclick = function(){
img.src = "images/zxy.jpg";
img.title = "张学友";
}
</script>10.分时问候并显示不同图片案例
<style>
img {width: 300px;}
</style>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
var div = document.querySelector("div");
var img = document.querySelector("img");
var date = new Date();
var h = date.getHours();
if(h<12)
{
div.innerHTML = "早上好！干巴爹！";
img.src = "images/s.gif";
}
else if(h<18)
{
div.innerHTML ="中午好！干巴爹！";
img.src="images/x.gif";
}
else{
div.innerHTML = "晚上好！干巴爹！";
img.src = "images/w.gif";
}
</script>11.操作元素之表单属性设置
<button>按钮</button>
<input type="text" value="输入内容"/>
<script>
var btn = document.querySelector("button");
var input = document.querySelector("input");
btn.onclick = function(){
input.value = "海阔天空";
// btn.disabled = true;
this.disable = true;//this 指向的是事件函数的调用者btn
}
</script>12.仿京东显示隐藏密码
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
var eye = document.getElementById("eye");
var pwd = document.getElementById("pwd");
var flag = 0;
eye.onclick = function(){
if(flag == 0)
{
flag = 1;
pwd.type = "text";
eye.src = "images/open.png";
}
else{
flag = 0;
pwd.type = "password";
eye.src = "images/close.png";
}
}
</script>13.操作元素之修改样式属性
div.style
div.style里面的属性 采用驼峰命名法
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div></div>
<script>
var div = document.querySelector("div");
div.onclick = function(){
//div.style里面的属性 采用驼峰命名法
this.style.backgroundColor = "skyblue";
this.style.width = "700px";
this.style.height = "450px";
}
</script>14.关闭淘宝二维码案例
<style>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
/* display: block; */
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
<div class="box">
淘宝二维码
<img src="images/tao.png" alt="">
<i class="close-btn">×</i>
</div>
<script>
var btn = document.querySelector(".close-btn");
var box = document.querySelector(".box");
btn.onclick = function(){
box.style.display = "none";
}
</script>15.循环精灵图
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var lis = document.querySelectorAll('li');
for(var i = 0;i< lis.length;i++)
{
//让索引号乘以44 就是每个li的背景坐标 index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = "0 -" + index + "px";
}
</script>16.显示隐藏文本框内容
<style>
input {
color: #999;
}
</style>
<input type="text" value="手机">
<script>
var input = document.querySelector("input");
//获得焦点
input.onfocus = function(){
if(this.value==="手机")
{
this.value = "";
}
this.style.color = "pink";
}
//失去焦点
input.onblur = function(){
if(this.value ==="")
{
this.value = "手机";
}
this.style.color = "#999";
}
</script>17.通过className更改元素样式
this.className = "first change";
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
<div class="first">文本</div>
<script>
var first = document.querySelector("div");
first.onclick = function(){
// this.style.backgroundColor = "skyblue";
// this.style.color = "#c00";
// this.style.fontSize = "25px";
// this.style.marginTop = "100px";
// this.style.width = "600px";
// this.style.height = "1000px";
// this.style.textAlign = "center";
// this.style.lineHeight = "300px";
this.className = "first change";
}
</script> 18.仿新浪注册页面
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(images/wrong.png);
}
.right {
color: green;
background-image: url(images/right.png);
}
</style>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt = document.querySelector(".ipt");
var message = document.querySelector(".message");
ipt.onblur = function(){
var len = this.value.length;
if(len < 6|| len > 16)
{
message.innerText = "您输入的位数不对，要求6~15位";
message.className = "message wrong";
}
else{
message.innerText = "您输入的正确";
message.className = "message right";
}
}
</script>19.作业
1.文本框内容显示隐藏
<input value="用户名" id="inp">
<script>
//1.文本框内容显示隐藏
var inp = document.getElementById("inp");
//获取焦点
inp.onfocus = function(){
if(inp.value === "用户名")
{
inp.value = "";
}
}
//失去焦点
inp.onblur = function(){
if(inp.value === "")
{
inp.value = "用户名";
}
}
</script> 2.关闭广告
<style>
.box{
width: 100px;
height: 50px;
background: purple;
}
.icon{
width: 35px;
height: 35px;
background: #c00;
}
</style>
<div class="main">
<div class="box"></div>
<div class="icon"></div>
</div>
<script>
var icon = document.querySelector(".icon");
var main = document.querySelector(".main");
icon.onclick = function(){
main.style.display = "none";
}
</script>3.下拉菜单
<style>
li:first-child{ height: 30px;line-height: 30px;color: orange;background: #999;display: block;cursor:pointer;}
li{
width: 100px;
height: 20px;
line-height: 20px;
border: 1px solid orange;
list-style: none;
text-align:center;
font-size: 14px;
color: #c00;
display:none;
}
</style>
<ul>
<li id="first">微博</li>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
<script>
var lis = document.querySelectorAll("li");
var lif = document.getElementById("first");
lif.onmousemove = function(){
for(var i =0;i<lis.length;i++)
{
lis[i].style.display = "block";
}
}
lif.onmouseout = function(){
for(var i =0;i<lis.length;i++)
{
lis[i].style.display = "none";
}
lis[0].style.display = "block";
}
</script>4.开关灯案例
<input type="button" value="开关灯">
<script>
var body = document.body;
var input = document.querySelector("input");
var flag = 0;
input.onclick = function(){
if(flag == 0)
{
body.style.backgroundColor = "black";
input.value = "开灯";
flag = 1;
}
else{
body.style.backgroundColor = "white";
input.value = "关灯";
flag = 0;
}
}
</script>八、WebApis和JS基础关联性2（DOM）
1.排他思想（算法）
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button');
for(var i = 0;i<btns.length;i++)
{
btns[i].onclick = function(){
for(var i = 0;i<btns.length;i++)
{
btns[i].style.backgroundColor = "";
}
this.style.backgroundColor = "skyblue";
}
}
//首先排除其他人，再设置自己的样式 排他思想
</script>2.百度换肤效果
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(images/1.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
var images = document.querySelector(".baidu").querySelectorAll("img");
for(var i=0;i<images.length;i++){
images[i].onclick = function(){
document.body.style.backgroundImage = "url("+this.src+")";
}
}
</script>3.表格隔行变色
onmouseover：鼠标经过事件
onmouseout：鼠标离开事件
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: pink;
}
</style>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector("tbody").querySelectorAll("tr");
for(var i = 0;i<trs.length;i++)
{
//鼠标经过事件
trs[i].onmouseover = function(){
this.className = "bg";
}
//鼠标离开事件
trs[i].onmouseout = function(){
this.className = "";
}
}
</script>4.全选反选
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
var j_cbAll = document.getElementById("j_cbAll");//全选按钮
var j_tbs = document.getElementById("j_tb").getElementsByTagName("input");
j_cbAll.onclick = function(){
console.log(this.checked);
for(var i = 0;i<j_tbs.length;i++)
{
j_tbs[i].checked = this.checked;
}
}
for(var i = 0;i<j_tbs.length;i++)
{
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
</script>5.自定义属性操作
（1）获取元素的属性值
console.log(div.id);
（2）element.getAttribute("属性") 可以显示我们程序员自己添加的属性（自定义属性）
console.log(div.getAttribute('index'));
（3）设置元素属性值
div.className = "navs";
div.setAttribute("index",2);
（4）移除属性 removeAttribute(属性)
div.removeAttribute("index");
<div id="demo" index="1"></div>
<script>
var div = document.querySelector("div");
//（1）获取元素的属性值
console.log(div.id);
//（2）element.getAttribute("属性") 可以显示我们程序员自己添加的属性（自定义属性）
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
//（3）设置元素属性值
div.id ="aaaaa";
div.className = "navs";
div.setAttribute("index",2);
div.setAttribute("class","footer");
console.log(div.getAttribute('index'));
console.log(div.getAttribute('class'));
//（4）移除属性 removeAttribute(属性)
div.removeAttribute("index");
</script>6.tab栏切换
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
var lis = document.querySelector(".tab_list").querySelectorAll("li");
var items = document.querySelectorAll(".item");
for(var i =0;i<lis.length;i++)
{
lis[i].setAttribute("index",i);
lis[i].onclick = function(){
for(var i=0;i<lis.length;i++)
{
lis[i].className = "";
}
this.className = "current";
var index = this.getAttribute('index');
for(var i =0;i<items.length;i++)
{
items[i].style.display = "none";
}
items[index].style.display = "block";
}
}
</script> 7.H5自定义属性
设置H5自定义属性（h5新增的自定义属性的方法，只能获取data-开头的、dataset是一个集合里面存放了所有以data开头的自定义属性）
<div getTime="29" data-index="2" data-list-name="andy"></div>
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
<div getTime="29" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector("div");
console.log(div.getAttribute("getTime"));
div.setAttribute("date-index",230);
console.log(div.getAttribute("date-index"));
console.log(div.getAttribute("data-list-name"));
//h5新增的自定义属性的方法，只能获取data-开头的
//dataset是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
//如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>9.父节点操作
parentNode
<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
//1.父节点 parentNode
var erweima = document.querySelector(".erweima");
// var box = document.querySelector("box");
//得到离元素最近的父节点 找不到父节点就返回null
console.log(erweima.parentNode);
</script>10.子节点操作
（1）childNodes 所有的子节点 包含元素节点 文本节点等等
nodeType ：元素节点 1 属性节点 2 文本节点 3
（2）children 获取所有的子元素节点（常用）
<ul>
<li>认真</li>
<li>的雪</li>
</ul>
<script>
var ul = document.querySelector("ul");
var lis = document.querySelectorAll("li");
//子节点 childNodes 所有的子节点 包含元素节点 文本节点等等
//nodeType ：元素节点 1 属性节点 2 文本节点 3
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
//chidren获取所有的子元素节点
console.log(ul.children);
</script>11.子节点 第一个元素和最后一个子元素
（1）childNodes 所有的子节点 包含元素节点 文本节点等等
nodeType ：元素节点 1 属性节点 2 文本节点 3
（2）children 获取所有的子元素节点（常用）
39.第一个子元素/最后一个子元素
（1）firstChild 第一个子节点 不管是文本节点还是元素节点
（2）lastChild 最后一个子节点 不管是文本节点还是元素节点
（3）firstElementChild 返回第一个子元素节点
（4）firstElementChild 返回最后一个子元素节点
（5）实际开发的写法 既没有兼容性问题又返回第一个子元素
（6）实际开发的写法 既没有兼容性问题又返回最后一个子元素
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector("ol");
//（1）firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
//（2）lastChild 最后一个子节点 不管是文本节点还是元素节点
console.log(ol.lastChild);
//（3）firstElementChild 返回第一个子元素节点
console.log(ol.firstElementChild);
//（4）firstElementChild 返回最后一个子元素节点
console.log(ol.lastElementChild);
//（5）实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
//（6）实际开发的写法 既没有兼容性问题又返回最后一个子元素
console.log(ol.children[ol.children.length - 1]);
</script>12.新浪下拉菜单
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
//1.获取元素
var nav = document.querySelector(".nav");
var lis = nav.children;
for(var i = 0;i<lis.length;i++)
{
lis[i].onmouseover = function(){
this.children[1].style.display = "block";
}
lis[i].onmouseout = function(){
this.children[1].style.display = "none";
}
}
</script>13.兄弟节点
(1).nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
console.log(div.nextSibling);
(2).previousSibling 上一个兄弟节点 包含元素节点或者文本节点等等
console.log(div.previousSibling);
(3)nextElementSibling得到下一个兄弟元素节点
console.log(div.nextElementSibling);
(4)previousElementSibling得到上一个兄弟元素节点
console.log(div.previousElementSibling);
(5)兼容写法
function getNextElementSibling(element)
{
var el = element;
while(el = el.nextSibling)
{
if(el.nodeType == 1)
{
return el;
}
}
return null;
}
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector("div");
//(1).nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
console.log(div.nextSibling);
//(2).previousSibling 上一个兄弟节点 包含元素节点或者文本节点等等
console.log(div.previousSibling);
//(3)nextElementSibling得到下一个兄弟元素节点
console.log(div.nextElementSibling);
//(4)previousElementSibling得到上一个兄弟元素节点
console.log(div.previousElementSibling);
//(5)兼容写法
function getNextElementSibling(element)
{
var el = element;
while(el = el.nextSibling)
{
if(el.nodeType == 1)
{
return el;
}
}
return null;
}
var span = document.querySelector("span");
console.log(getNextElementSibling(span));
</script>
14.创建和添加节点
(1)创建节点元素节点 node.createElement
(2)添加节点 node.appendChild
(3)添加节点 nodel.innsertBefore(child,指定元素)
<ul>
<li>把耳朵叫醒</li>
</ul>
<script>
var ul = document.querySelector("ul");
//(1)创建节点元素节点 node.createElement
var li = document.createElement("li");
li.innerHTML = "那么骄傲";
//(2)添加节点 node.appendChild
ul.appendChild(li);
//(3)添加节点 nodel.innsertBefore(child,指定元素)
var lili = document.createElement("li");
lili.innerText = "沿海地带";
ul.insertBefore(lili,ul.children[1]);
</script>15.简单版发布留言案例
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
var ul = document.querySelector("ul");
var text = document.querySelector("textarea");
var btn = document.querySelector("button");
btn.onclick = function(){
if(text.value == "")
{
alert("您没有输入内容");
return false;
}
else{
var li = document.createElement("li");
li.innerHTML = text.value;
// ul.appendChild(li);
ul.insertBefore(li,ul.children[0]);
}
}
</script>九、WebApis和JS基础关联性3（DOM）
1.节点操作之删除节点
removeChild
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
var ul = document.querySelector("ul");
var btn = document.querySelector("button");
btn.onclick = function(){
if(ul.children.length == 0)
{
this.disabled = true;
}
else{
// ul.removeChild(ul.children[ul.children.length - 1]);
ul.removeChild(ul.children[0]);
}
}
</script>2.删除留言案例
阻止链接跳转 javascript:void(0) 或者 javascript:;
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
</style>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
var text = document.querySelector("textarea");
var btn = document.querySelector("button");
var ul = document.querySelector("ul");
btn.onclick = function(){
if(text.value == "")
{
alert("请输入内容");
return false;
}
else{
var li = document.createElement("li");
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
ul.insertBefore(li,ul.children[0]);
var as = document.querySelectorAll("a");
for(var i = 0;i < as.length;i++)
{
as[i].onclick = function(){
ul.removeChild(this.parentNode);
}
}
// aa();
text.value = "";
}
}
//删除元素方法2
// function aa(){
// var ul = document.querySelector("ul");
// var a = document.querySelector("a");
// a.onclick = function(){
// ul.removeChild(this.parentNode);
// }
// }
</script>3.节点操作之克隆节点
(1)node.cloneNode();括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
(2)node.cloneNode(true); 括号为 true 深拷贝 复制标签复制里面的内容
<ul>
<li>药药</li>
<li>乱跳</li>
<li>抱抱</li>
<li>乱叫</li>
</ul>
<script>
//node.cloneNode();括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
//node.cloneNode(true); 括号为 true 深拷贝 复制标签复制里面的内容
var ul = document.querySelector("ul");
// var lili = ul.children[2].cloneNode();
var lili = ul.children[3].cloneNode(true);
// ul.appendChild(lili);
ul.insertBefore(lili,ul.children[0]);
</script>4.动态生成表格案例
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var datas =[
{
name :'范闲',
subject : 'JavaScript',
score : '100'
},
{
name :'林婉儿',
subject : 'JavaScript',
score : '100'
},
{
name :'范思辙',
subject : 'JavaScript',
score : '88'
},
{
name :'范若若',
subject : 'JavaScript',
score : '98'
}
];
var tbody = document.querySelector("tbody");
for(var i =0;i<datas.length;i++)
{
//创建行
var tr = document.createElement("tr");
tbody.appendChild(tr);
//创建 td行
for(var k in datas[i])
{
var td = document.createElement("td");
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
var td = document.createElement("td");
td.innerHTML = "<a href='javascript:;'>删除</a>";
tr.appendChild(td);
}
var as = document.querySelectorAll("a");
for(var i =0;i<as.length;i++){
as[i].onclick = function(){
tbody.removeChild(this.parentNode);
}
}
</script>5.三种创建元素方式区别
（1）document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
（2）innerHTML创建元素
（3）document.createElement()创建元素
<button>点击</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
//（1）document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
// window.onload = function(){
// document.write("<div>456</div>");
// }
// var btn = document.querySelector("button");
// btn.onclick = function(){
// document.write("<div>123456</div>");
// }
//（2）innerHTML创建元素
var inner = document.querySelector(".inner");
// for(var i = 1;i<=100;i++)
// {
// inner.innerHTML += "<a href='javascript:void(0)'>百度+"+i+"</a>";
// }
//速度更优
var arr = [];
for(var i =1;i<=100;i++)
{
arr.push("众里寻他"+i+"度");
}
console.log(arr);
inner.innerHTML = arr.join("*");
//（3）document.createElement()创建元素
var create = document.querySelector(".create");
for(var i =1;i<=100;i++)
{
var a = document.createElement("a");
a.innerHTML = "众里寻他"+ i;
create.insertBefore(a,create.children[0]);
}
</script>6.DOM
6.注册事件两种方式
（1）onclick
（2）addEventListener
（3）attachEvent E9以前的版本支持
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>IE9前事件</button>
<script>
var btns = document.querySelectorAll("button");
//1.传统方式注册事件
btns[0].onclick= function(){
alert("hi");
}
btns[0].onclick= function(){
alert("say");
}
//2.事件侦听注册事件 addEventListener
//(1)里面的事件类型是字符串 必定加引号 而且不带on
//(2)同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click',function(){
alert("so");
})
btns[1].addEventListener('click',function(){
alert("hi");
})
//3.attachEvent IE9以前的版本支持
btns[2].attachEvent('onclick',function(){
alert("ok");
})
</script>7.删除事件
（1） divs[0].onclick = null;
（2） divs[1].removeEventListener('click',fn);
（3）IE9之前删除事件
divs[2].detachEvent('onclick',fn1);
<div>传统方法删除1</div>
<div>传统方法删除2</div>
<div>传统方法删除3</div>
<script>
//传统方法删除事件
var divs = document.querySelectorAll("div");
divs[0].onclick = function(){
alert(5);
divs[0].onclick = null;
}
divs[1].addEventListener('click',fn)
function fn(){
alert(212)
divs[1].removeEventListener('click',fn);
}
//IE9之前删除事件
divs[2].attachEvent('onclick',fn1);
function fn1(){
alert(33040)
divs[2].detachEvent('onclick',fn1);
}
</script>8.DOM事件流三个阶段
往下扔石头（捕获过程）-> 先执行外面（从大到小）
往上冒泡（事件冒泡）-> 先执行里面（从小到大）
addEventListener(type,Listerner[,useCapture])
第三个参数是true:事件捕获
第三个参数是false:事件冒泡
（1）js代码中只能执行捕获或者冒泡其中一个阶段
（2）onclick和attachEvent（ie）只能得到冒泡阶段
（3）捕获阶段 如果addEventListener 第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father -> son
（4）冒泡阶段 如果addEventListener 第三个参数是false 那么则处于冒泡阶段 son -> father -> body -> html -> document
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//（1）js代码中只能执行捕获或者冒泡其中一个阶段
//（2）onclick和attachEvent（ie）只能得到冒泡阶段
//（3）捕获阶段 如果addEventListener 第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father -> son
var son = document.querySelector(".son");
son.addEventListener('click',function(){
alert("son")
},true)
var father = document.querySelector(".father");
father.addEventListener('click',function(){
alert("father");
},true)
//（4）冒泡阶段 如果addEventListener 第三个参数是false 那么则处于冒泡阶段 son -> father -> body -> html -> document
// var son = document.querySelector(".son");
// son.addEventListener('click',function(){
// alert("son");
// },false);
// var father = document.querySelector(".father");
// father.addEventListener('click',function(){
// alert("father");
// },false);
// </script>9.事件对象
div.onclick = function(event)
div.addEventListener('click',function(e)
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<div>123</div>
<script>
var div = document.querySelector("div");
div.onclick = function(e){
// console.log(e);
// console.log(window.e);
e = e || window.event;//兼容性写法
console.log(e);
}
div.addEventListener('click',function(e){
console.log(e);
})
</script>10.常见事件对象属性和方法
（1）this返回的是绑定事件的对象（元素） ul
（2）e.target 点击了哪个元素，就返回哪个元素 li
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
//e.target 返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素）
//区别：e.target 点击了哪个元素，就返回哪个元素 this哪个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector("div");
div.addEventListener('click',function(e){
console.log(e.target);
console.log(this);
})
var ul = document.querySelector("ul");
ul.addEventListener('click',function(e){
console.log(this);//我们给ul绑定事件，那么this指向ul
console.log(e.target);//e.target 指向我们点击的哪个对象， 谁触发了这个事件，我们点击是的li.target 指向的就是li
})
//了解兼容性
div.onclick = function(e){
e = e || window.event;
var target = e.target || window.event.target;
console.log(target);
}
</script>
11.事件对象阻止默认行为
（1）阻止默认行为（事件）让链接不跳转 或者让提交按钮不提交
e.preventDefault();
（2）低版本浏览器 ie678 returnValue 属性
e.returnValue;
（3）return false 阻止默认行为 没有兼容性问题 but return后面的代码不执行了
return false;
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
var div = document.querySelector("div");
div.addEventListener('click',fn);
div.addEventListener("mouseover",fn);
div.addEventListener("mouseout",fn);
function fn(){
// alert(666);
}
//2.阻止默认行为（事件）让链接不跳转 或者让提交按钮不提交
var a = document.querySelector("a");
a.addEventListener('click',function(e){
// e.preventDefault();//dom标准写法
// alert(888)
})
//3.传统的注册方法
a.onclick = function(e){
//普通浏览器 e.preventDefault() 方法
// e.preventDefault();
//低版本浏览器 ie678 returnValue 属性
// e.returnValue;
//return false 阻止默认行为 没有兼容性问题 but return后面的代码不执行了
return false;
alert(667);
}
var btn = document.querySelector("input");
btn.addEventListener('click',function(e){
alert(111)
e.preventDefault();
alert(222)
})
</script>12.阻止事件冒泡
e.stopPropagation(); //stop停止 Propagation 传播
e.cancelBubble = true;//非标准 cancel取消bubble泡泡
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
// 常见事件对象的属性和方法
// 阻止冒泡 dom 推荐的标准 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation();//stop停止 Propagation 传播
e.cancelBubble = true;//非标准 cancel取消bubble泡泡
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>13.事件委托
<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
var ul = document.querySelector("ul");
var lis = document.querySelectorAll("li");
ul.addEventListener('click',function(e){
for(var i =0;i<lis.length;i++)
{
lis[i].style.backgroundColor = 'transparent';
}
e.target.style.backgroundColor = 'pink';
})
</script>14.常见鼠标事件
（1）禁用右键菜单 contextmenu
（2）禁止选中文字 selectstart
我是一段不愿意分享的文字
<script>
//禁用右键菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
//禁止选中文字
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
</script>15.鼠标事件对象
（1）client 鼠标在可视区的x和y坐标
（2）page鼠标在页面文档的x和y坐标
（3）screen鼠标在电脑屏幕的x和y坐标
<style>
body {
height: 3000px;
}
</style>
<script>
//鼠标事件 MouseEvent
document.addEventListener('click',function(e){
//（1）client 鼠标在可视区的x和y坐标
console.log('鼠标在可视区的x和y坐标');
console.log(e.clientX);
console.log(e.clientY);
//（2）page鼠标在页面文档的x和y坐标
console.log('鼠标在页面文档的x和y坐标');
console.log(e.pageX);
console.log(e.pageY);
//（3）screen鼠标在电脑屏幕的x和y坐标
console.log('鼠标在电脑屏幕的x和y坐标');
console.log(e.screenX);
console.log(e.screenY);
})
</script>16.跟随鼠标的天使
<style>
img {
position: absolute;
top: 2px;
}
</style>
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector("img");
document.addEventListener('mousemove',function(e){
var x = e.pageX;
var y = e.pageY;
console.log(x + "|" + y);
// pic.style.left = x +'px';
// pic.style.top = y+'px';
pic.style.left = x - 50 +'px';
pic.style.top = y - 40 + 'px';
})
</script>十、WebApis和JS基础关联性4（DOM+BOM）
1.常用的键盘事件
（1）keyup 松开时触发
（2）keydown 按下时触发
（3）keypress 按下时触发 不能识别功能键 比如 ctrl shift 左右箭头
三个事件的执行顺序 keydown -- keypress -- keyup
<script>
// document.onkeyup = function(){
// console.log("松开");
// }
//（1）keyup 松开时触发
document.addEventListener('keydown',function(){
console.log("按下");
})
//（2）keydown 按下时触发
document.addEventListener('keyup',function(){
console.log("松开-");
})
//（3）keypress 按下时触发 不能识别功能键 比如 ctrl shift 左右箭头
document.addEventListener('keypress',function(){
console.log('我按下了press');
})
//三个事件的执行顺序 keydown -- keypress -- keyup
</script>2.键盘事件对象之keyCode
<script>
//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
//keyup和keydown事件不区分大小写 a和A得到的都是65
//keypress事件区分字母大小写 a 97和 A得到的是65
document.addEventListener('keyup',function(e){
console.log('up'+e.keyCode);
//我们可以利用keyCode返回的ASCII码值来判断用户按下了哪个键
if(e.keyCode === 65)
{
alert('您按下的是a键');
}
else{
alert('您按下的不是a键');
}
})
document.addEventListener('keypress',function(e){
console.log('press'+e.keyCode);
})
</script>
3.模拟京东按键输入内容
<input type="text"/>
<script>
var search = document.querySelector("input");
document.addEventListener('keyup',function(e){
if(e.keyCode === 83)
{
search.focus();//获得焦点
}
else{
search.blur();//失去焦点
}
})
</script>
4.模拟京东快递单号查询案例
（1）keyup：触发时，文字已经落到文本框里面了
（2）keydown keypress：事件触发时，文字还没有落到文本框中
<style>
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
</style>
<div class="search">+
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
var con = document.querySelector(".con");
var js_input = document.querySelector(".jd");
js_input.addEventListener('keyup',function(){//这里要用keyup(触发时，文字已经落到文本框里面了)
//keydown keypress在文本框的特点，事件触发时，文字还没有落到文本框中
if(this.value == '')
{
con.style.display = 'none';
}
else{
con.style.display = 'block';
con.innerText = this.value;
}
})
//失去焦点
js_input.addEventListener('blur',function(){
con.style.display='none';
})
js_input.addEventListener('focus',function(){
if(this.value !== '')
{
con.style.display = 'block';
}
})
</script> 5.BOM顶级对象
window.xx(window可省略)
<script>
var num = 10;
console.log(num);
console.log(window.num);
function fn(){
console.log(11);
}
fn();
window.fn();
console.dir(window);
var name = 'lyf';
console.log(window.name);
</script>6.window常见事件onload
（1）window.onload = function(){}
（2）window.addEventListener('load',function(){})
load 等页面内容全部加载完毕 包括页面dom元素 图片 flash css等等
（3）DOMContentLoaded 是DOM加载完毕，不包含 falsh css等就可以执行 加载速度比load更快一些
document.addEventListener('DOMContentLoaded',function(){})
<button>点击我吧</button>
<script>
// window.onload = function(){
// var btn = document.querySelector('button');
// btn.addEventListener('click',function(){
// alert('点击我');
// })
// }
// window.onload = function(){
// alert(45)
// }
window.addEventListener('load',function(){
alert(88)
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
alert('点击我888');
})
})
//（3）DOMContentLoaded 是DOM加载完毕，不包含 falsh css等就可以执行 加载速度比load更快一些
document.addEventListener('DOMContentLoaded',function(){
alert(878);
})
</script>7.调整窗口大小事件
resize
window.addEventListener('resize',function(){})
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div></div>
<script>
var div = document.querySelector('div');
window.addEventListener('load',function(){
window.addEventListener('resize',function(){
console.log('变化了');
console.log(window.innerWidth);
var width = window.innerWidth;
if(width >= 800)
{
div.style.display = 'block';
}
else{
div.style.display = 'none';
}
})
})
</script>
8.定时器之setTimeout（延时时间到了，就去调用这个回调函数，只调用一次，就结束这个定时器）
setTimeout(bom,5000);
<script>
function bom(){
console.log('爆炸0.0');
}
var time1 = setTimeout(bom,3000);
var time2 = setTimeout(bom,5000);
setTimeout('bom()',2000);//不推荐
</script>
9.5秒之后自动关闭广告
<img src="images/ad.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function(){
ad.style.display='none';
},5000)
</script>
10.清除setTimeout定时器
clearTimeout(times);//times是定时器
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
var times = setTimeout(function(){
console.log('bz');
},3000);
btn.addEventListener('click',function(){
clearTimeout(times);
});
</script>
11.定时器之setInterval
setInterval(bom,1000);
<script>
setInterval(function(){
console.log('月底');
},2000)
</script>
12.倒计时效果
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2021-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
// console.log(h+':'+ m + ':' + s);
}
</script>
13.清除setInterval定时器
clearInterval(times);//times是定时器
<button class="begin">开启定时器</button>
<button class="stop">关闭定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null;
begin.addEventListener('click',function(){
timer = setInterval(function(){
console.log('guo ma lu');
},2000)
})
stop.addEventListener('click',function(){
clearInterval(timer);
})
</script>
14.发送短信案例
手机号码： <input type="number"> <button>发送</button>
<script>
var btn = document.querySelector("button");
var num = 10;
btn.addEventListener('click',function(){
btn.disabled = true;
var timer = setInterval(function(){
if(num == 0){
clearInterval(timer);
btn.disabled = false;
num = 10;
btn.innerText = "发送";
}
else{
btn.innerText = num +"秒后重新发送";
num --;
}
},1000);
})
</script>
15.this指向问题
（1）全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
（2）方法调用中谁调用this指向谁
（3）构造函数中this指向构造函数的示例
<script>
//（1）全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
console.log(this);
function fn(){
console.log(this);
}
window.fn();
window.setTimeout(function(){
console.log(this);
},1000);
//（2）方法调用中谁调用this指向谁
var o = {
sayHi:function(){
console.log(this);//this指向的是o这个对象
}
}
o.sayHi();
//（3）构造函数中this指向构造函数的示例
function Fun(){
console.log(this);//this指向的是fun示例对象
}
var fun = new Fun();
</script>
16.5秒钟之后跳转页面
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector("button");
var div = document.querySelector("div");
btn.addEventListener('click',function(){
location.href = "http://baidu.com";
})
var timer = 5;
setInterval(function(){
if(timer == 0)
{
location.href = "http://itcast.cn";
}
else{
div.innerHTML = "您将在"+ timer +"秒后跳转";
timer --;
}
},1000)
</script> <form action="index2.html">
用户名：<input type ="text" name = "uname"/>
<input type="submit" value="登录"/>
</form>
<div></div>
<script>
console.log(location.search);//?uname=andy
//1.先去掉? substr('起始的位置','截取几个字符')
var params = location.search.substr(1);//uname=andy
console.log(params);
//2.利用=把字符分割为数组 split('=')
var arr = params.split('=');
console.log(arr);//Array [ "uname", "asdsa" ]
var div = document.querySelector("div");
//3.把数据写入div中
div.innerHTML = arr[1] + '欢迎你';//asdsa欢迎你
</script>17.location常见的方法
（1）location.assign（链接地址）：记录浏览历史，所以可以实现后退功能
（2）location.replace（链接地址）：不记录浏览历史，所以不可以实现后退功能
（3）location.reload()：重新加载页面（刷新页面）默认是f5 括号里是true则是ctrl+ f5（强制刷新）
<button>点击</button>
<script>
var btn = document.querySelector("button");
btn.addEventListener('click',function(){
//记录浏览历史，所以可以实现后退功能
// location.assign('http://baidu.com');
//不记录浏览历史，所以不可以实现后退功能
// location.replace('http://baidu.com');
//重新加载页面（刷新页面）默认是f5 括号里是true则是ctrl+ f5（强制刷新）
location.reload(true);
})
</script>
18.navigator对象
navigator.userAgent.match：判断设备版本
<script>
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = "../H5/index.html"; //手机
}
</script>
19.history对象
后退:history.back(); history.go(-1);//括号里是后退的页数
前进:history.forward(); history.go(1);//括号里是前进的页数
<a href="index2.html">点击我去index2</a>
<button>前进</button>
<script>
var btn = document.querySelector("button");
btn.addEventListener('click',function(){
// history.forward();
history.go(1);
})
</script>
<a href="index.html">点击我去首页</a>
<button>后退</button>
<script>
var btn = document.querySelector("button");
btn.addEventListener('click',function(){
// history.back();
history.go(-1);
})
</script>十一、WebApis和JS基础关联性5（BOM）
1.offset系列属性
（1）可以得到元素的偏移 位置，返回不带单位的数值
（2）它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以body为准
xx.offsetTop:相对带有定位父元素上方的偏移
xx.offsetLeft:相对带有定位父元素左方的偏移
（3）可以得到元素的大小 宽度和高度 是包含padding + border + width
xx.offsetWidth
xx.offsetHeight
（4）返回带有定位的父亲 否则返回的是body
xx.offsetParent:返回带有定位的父亲 否则返回的是body
xx.parentNode:返回 父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
<style>
* {
margin: 0;
padding: 0;
}
.father {
/* position: relative; */
width: 200px;
height: 200px;
background-color: pink;
margin: 150px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
margin-left: 45px;
}
.w {
height: 200px;
background-color: skyblue;
margin: 0 auto 200px;
padding: 10px;
border: 15px solid red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
//offsetx系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
//（1）可以得到元素的偏移 位置，返回不带单位的数值
//xx.offsetTop :相对带有定位父元素上方的偏移
console.log(father.offsetTop);
//xx.offsetLeft :相对带有定位父元素左方的偏移
console.log(father.offsetLeft);
//（2）它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以body为准
console.log(son.offsetLeft);
//（3）可以得到元素的大小 宽度和高度 是包含padding + border + width
var w = document.querySelector('.w');
console.log(w.offsetWidth);
console.log(w.offsetHeight);
//（4）返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent);//返回带有定位的父亲 否则返回的是body
console.log(son.parentNode);//返回 父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
</script>2.offset与style的区别
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
}
</style>
<div class="box" style="width: 200px;"></div>
<script>
//offset与style的区别
var box = document.querySelector('.box');
console.log(box.offsetWidth+'px');
console.log(box.style.width);
// box.offsetWidth = '300px';//无效写法
box.style.width = '350px';
</script>3.计算鼠标在盒子内的坐标
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
<div class="box"></div>
<script>
// 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）
// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
// 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
var box = document.querySelector('.box');
box.addEventListener('mousemove',function(e){
// console.log(e.pageX);
// console.log(e.pageY);
// console.log(this.offsetLeft);
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + "y坐标是" + y ;
})
</script>4.拖动的模态框
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script>
var login = document.querySelector(".login");//登录弹出层
var mask = document.querySelector('.login-bg');//遮罩层
var link = document.querySelector('#link');//点击的链接
var closeBtn = document.querySelector('#closeBtn');//关闭按钮
var title = document.querySelector('#title');
//1.点击链接 弹出 登录弹出层和遮罩层
link.addEventListener('click',function(){
mask.style.display = 'block';
login.style.display = 'block';
})
//2.点击关闭按钮 隐藏 弹出层和遮罩层
closeBtn.addEventListener('click',function(){
mask.style.display = 'none';
login.style.display = 'none';
})
//3.实现拖拽
//（1）鼠标按下，获得鼠标在盒子内的坐标
title.addEventListener('mousedown',function(e){
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
//（2）鼠标移动的时候 把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是模态框的left 和 top值
document.addEventListener('mousemove',move);
function move(e){
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// document.addEventListener('mousemove',function(e){
// login.style.left = e.pageX - x + 'px';
// login.style.top = e.pageY - y + 'px';
// })
//（3）鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
})
})
</script>5.client系列
client 宽度 和我们offsetWidth 最大的区别就是 不包含边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<script>
// client 宽度 和我们offsetWidth 最大的区别就是 不包含边框
var div = document.querySelector('div');
console.log(div.clientWidth);
</script>
</body>
</html>6.scroll系列
scroll滚动事件当我们滚动条发生变化会触发的事件
scrollHeight
scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分
scrollWidth
scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div>
我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
</div>
<script>
// scroll 系列
var div = document.querySelector('div');
console.log(div.scrollHeight);
console.log(div.clientHeight);
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll', function() {
console.log(div.scrollTop);
})
</script>
</body>
</html>7.mouseenter和mouseover的区别
鼠标移动到元素上就会触发mouseenter事件（mouseenter不会冒泡）
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发，mouseenter只会经过自身盒子触发
mouseenter搭配鼠标离开mouseleave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector(".father");
var son = document.querySelector(".son");
father.addEventListener('mouseover',function(){
console.log(6);
})
father.addEventListener('mouseenter',function(){
console.log(7);
})
</script>
</body>
</html>
2596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
