JavaScript
书写位置
行内:
<body>
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
内嵌:
<head>
<script>alert="lalalalalallla"</script>
</head>
引用外部:
<head>
<script src="my.js"></script>
</head>
注释:
// 单行注释
/* */ 多行注释(块注释,块级注释)
输入\输出:
prompt():带有输入框的弹窗,默认值类型为字符型
console.log():控制台输出
alert():内容弹窗
变量:
var a: var为声明变量关键字,不使用的话为全局变量
a=12:赋值
var a,b,c,d,ab:可同时声明多个变量
var a=12:可同时声明变量并赋值,也可同时声明多个变量并赋值,也称为变量初始化
变量更新:同一个变量进行多次赋值后,存储的是最后一次赋给它的值。
特殊情况:
只声明,不赋值输出
var a;
console.log(a);
返回undefined
不声明不赋值输出
console.log(b);
会报错
不声明,只赋值输出
age=10;console.log(age);
输出为10(这是全局变量,不推荐使用)
变量名的命名规则:
只能包含大小写字母、数字,下划线、$符号及其组合,不能以数字开头,区分大小写,不能是var等关键字,尽量遵循驼峰命名法
数据类型:
只有当给声明好的变量赋值后,才能确定该变量的数据类型,且可以变化
简单数据类型:
number:数字型,不区分整数与小数
进制表示:
(默认会直接转换成十进制)
二进制:0,1
八进制:0-7,以0开头
十进制,0-9
十六进制:0-9,A-F,以0x开头
js数字范围:
number.max_value:表示数值的最大值,为1.7976……太长了,把这个放到alert里面自己看吧
number.min_value:表示数值的最小值,为5e-324
特殊值:
infinity:正无穷大
-infinity:负无穷大,就是无穷小
NaN: not a number,表示非数值
is NaN:判断值是否为非数字,是数字,返回false,是非数字,返回true
string:字符串型
‘string’:被单引号或双引号包围的数据为字符串
字符串嵌套:
引号遵循就近匹配原则
转义符
\n:换行
\b:空格
\\:反斜杠\
\':单引号 '
\":双引号 "
\t:tab 缩进
\b:一个空格,blank
变量名.length:返回变量长度(字符串个数)
变量 + 变量:字符串拼接(两个数值中间用+会进行求和计算)
也可以使用英文逗号分隔,不过输出时中间有空格
Boolean:布尔型
true参与数值运算时当1,false为0.
undefined:未定义类型
undefined与字符串相连当字符处理,参与数字运算返回NaN
null:表示空值
null与字符相连同上,参与数字运算当0
typeof 变量名:返回变量类型
prompt取得的值是字符型
Tip:在chrome浏览器f12的console界面,返回值呈蓝色表示数值型,黑色代表字符串,深蓝色表示布尔型,浅灰色表示undefined和null
字面量:是固定赋给变量的值
数据类型转换
一、转换成字符型
变量类型->字符(假设变量赋值为任意数字)
1、变量.toString();
2、String(变量或数据)
3、隐式转换
*变量 + ‘’
二、转换成数值型
*1、parseInt(变量或数据) //整数转换数值,小数取整;’120px’会去掉数字后面的本身不存在数值属性的数据并转换120为数值,rem120px返回值为NaN
2、parseFloat(变量或数据) //小数转换数值,细节同上
3、Number(变量或数据) //强制转换
4、运算符+-/ //隐式转换,注意+本身具有连接字符的意义存在,部分场景需要对字符进行强制转换后使用
转换布尔型:
Boolean():空值、否定值会被转换成false,如 ‘’、0、NaN、null、undefined。其余值或状态都会转换成true
运算符:
+-*/%:加减乘除,最后一个为取余(取模),因浮点数精度问题,没有特殊要求不要使用浮点数(小数)直接进行算数运算,包括判断是否相等
表达式:
由数字,运算符,变量等组成的式子成为表达式且有返回值;有等号时表达式运算右边的运算结果赋值给左边变量
前置递增\递减,后置递增\递减:
++和–为递增\递减运算符,放在变量前面称为前置递增\递减,放在变量后面成称为后置递增\递减。此运算符只能与变量配合使用。
++num:相当于num = num + 1,先加1,再返回值。var age=10; console.log(++age + 10); 结果为21
num++:相当于num = num + 1,先使用原值运行当前行代码,运行完最后再加1。var age=10; console.log(age++ + 10); 结果为20
比较运算符(关系运算符):
<、>、>=、<=、==、!=、===、!==:依次为 小于、大于、大于等于、小于等于、判断是否相等,在一定条件下此符号默认会将字符串类型转换成数值型、不等、全等、不全等,后两个判断要求值和数据类型全部一致;如果使用判断条件成立,返回值为true,反之为false
逻辑运算符:
他是用来进行布尔值运算的,返回值也是布尔值
&&:逻辑与,两值为true,为true,有一个为false,结果为false
||:逻辑或,两个值有一个为true,值为true,都为false,值为false
!:逻辑非,取反,与true使用结果为false,与false用值为ture
逻辑中断(短路运算):
原理:存在多个表达式或值时,左边所得的值可以确定结果时,不再继续运算右边的值
短路与:左边为真,返回右边的值;左边为假,返回左边的值
eq:123 && 456
;返回值为 4560 && 456
;返回值为 00 && 1+2 && 456 * 2342342
;返回值为 0
短路或:左边为真,返回左边的值;左边为假,返回右边的值123 || 456
返回值为1230 || 456
返回值为4560 || 456 || 456 * 789
返回值为456
赋值运算符:
=、+=、-+、*=、/=、%=
:依次为直接赋值\先加\减\乘\除\取余后再赋值
eq:num += 2
相当于num = num + 2
运算符优先级:
优先级 | 名称 | 举例 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++、–、! |
3 | 算术运算符 | 先*/%,后+- |
4 | 关系运算符 | >、<、>=、<= |
5 | 等于判断运算符 | ==、!=、===、!== |
6 | 逻辑运算符 | 先&&后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
分支:
if分支:
基本结构:if (条件表达式) {执行语句} (单分支语句)
当条件为真时,则执行语句;条件为假时,跳出if语句,执行后面的代码
双分支语句:
结构:if (条件表达式) {执行语句1} else {执行语句2}
多分支语句:
if(条件表达式1){执行语句1}else if(条件表达式2){执行语句2}……else{执行语句n}
三元表达式:
条件表达式 ? 表达式1 : 表达式2
思路:当表达式值为真时,返回表达式1的值,否则返回2的值
switch分支语句:
基本语法:switch(表达式){case 值1: 执行语句1; break; case 值2: 执行语句2;break; … default: 执行语句n;}
思路:表达式与各个case后的值进行匹配,如果匹配成功,执行该case下的语句,否则继续向下匹配,没有匹配的,执行default后面的语句。
注意点:switch中的表达式是一个变量;匹配方式是全等,也就是值和数据类型全部一样;break不强制写入,但是会一直往下执行下一个case且依旧执行其后面的语句
Switch语句对结果的判断是不错的选择,适用于分支较多的案例
If适用于范围判断,分支较短的情况
循环:
for循环:
基本语法for (初始化变量; 条件表达式; 操作表达式) {循环体}
初始化变量:使用var声明的普通变量,通常用作计数器使用
条件表达式:用来决定每次循环是否继续执行,即终止条件
操作表达式:每次循环最后执行的代码,用于变换计数器的更新
断点调试:
chrome:f12->sources,f11:一步一步执行
实操1:
求1到100之和
求1到100之和的平均值
分别求1到100之间奇偶之和
求1到100之间能被三整除的数字之和
实操2:
求班级总分数和平均分
思路:1输入总人数;2输入每个学生的成绩;3求成绩之和与平均成绩
编程思路:使用prompt进行数据输入,使用alert实现最终输出
实操3:一行打印5个星号
双重for循环(嵌套):
基本格式:for(初始化变量1; 条件表达式1; 操作表达式1){for(初始化变量2; 条件表达式2; 操作表达式2){循环体}}
while循环:
基本格式:while(条件表达式){循环体}
注意计数器的存在和变化,防止死循环
do while循环:
基本结构:do {循环体}while(条件表达式)
:与上面不同的是,先执行一次循环体,再进行判断,如果为真,继续执行循环体,直到判断为假,退出循环。同样注意计数器及其的变化
continue关键字:跳出本次循环,执行下一次循环
break关键字:跳出该循环结构
数组:
一组数据的集合,每个数据都是元素
创建数组:利用new 创建(空)数组var 数组名= new Array();
自定义数组:每个元素使用英文逗号隔开,最后一个不使用标点符号var 变量=[1,'2',true];
获取数组元素:通过索引(下标)获取元素,下标从0开始。如果使用没有元素个数的下标,会返回undefined。迪丽古力马尔扎哈var 变量=[1,'2',true];
console.log(变量[索引号]);
遍历数组:使用循环的方式取出数组元素,这个方式叫遍历,注意下标范围,从0开始。
数组长度:获取数组元素个数数组名.length
新增数组元素:
1、可以通过修改数组长度(数组名.length)数组名.length = 大于原本数组长度的正整数;
增加长度后,由于没有值,新增进来的元素默认值是undefined。
*2、通过修改数组索引追加元素,也可以通过该方式修改已有元素数组名[下标号]=追加元素;
不要直接给数组名赋值,会变成普通变量
函数:
封装了可以重复使用的代码的代码块
声明函数
function 方法名(变量){执行语句}
变量可以写多个,用英文都逗好隔开,函数命名一般用动词,可以为空;且形参在传递完参数之后就没有任何值了,可以复用
调用方法:方法名(值);
值的个数要与该方法的变量数量相同,用英文都逗好隔开;多余形参个数会正常输出,剩下的的值会丢弃,少于形参会返回NaN
参数传递:
声明函数名后面小括号里面的变量为形参(形式参数),引用函数名后面小括号里面的变量或值称为实参(实际参数)
利用函数求任意两个数的和以及累加和
return:返回值
写在函数体最后,用来返回结果,并终止后面的代码执行
使用方法:return 需要返回的结果(变量/值/可以有结果的表达式)
求任意两个数的最大值
求数组中的最大值
利用return终止函数并且只能返回一个值
函数返回值的注意事项:
有终止后续后面代码的执行
只能返回最后一个值,包括在return同一行上用逗号分隔的变量,可以使用数组进行多个变量输出
每个函数都有返回值,如果有return则返回return后面的返回值,没有则返回undefined
break,continue,return的区别
break结束当前循环体
continue跳出本次循环,继续执行下次外层循环
return不仅可以推出循环,还可以返回return语句中的值,同时还可以结束当前函数体后续的代码
对象arguments的使用:
当不确定实参个数的时候,可利用函数arguments存储传递过来的实参,以伪数组的方式
伪数组:
1、具有数组的length属性
2、按照索引的方式进行存储
3、没有真正数组的方法
4、只有函数内置了对象arguments
利用函数求任意一组数的最大值
利用函数翻转数组reverse
利用函数封装冒泡排序
利用函数判断闰年
在一个函数里面可以调用另一个函数,将按顺序执行
输出2月份的天数
函数的声明
1、利用函数关键字自定义函数名:function 函数名(){}
2、匿名函数:此方式定义的函数没有函数名,引用方式使用变量名();
的方式,也可以实现参数传递,返回的只是一个值;var 变量名 = function(){}
作用域
作用域:代码名字在某个范围内起作用,这个范围就是作用域,为了减少命名冲突
分类
全局作用域:整个script标签内或整个js文件中声明的变量
局部作用域:函数内声明的变量(函数作用域)
变量的作用域
分类
全局变量:在全局作用域
下声明的变量;其中,未使用var声明的变量为全局变量
局部变量:在局部作用域
下声明的变量;其中,函数的形参也可视为局部变量
从执行效率看:
全局变量只有关闭浏览器时才会释放内存资源,局部变量在执行完当前所在生效范围的程序块后就会释放内存
*块级作用域(es6)
使用{}内部声明的为块级作用域
作用域链
从本级作用域开始向上级一层一层查找本层需要的值或变量,遵循就近原则取值。
作用域链案例:
1、读程序
function f1(){
var num = 123;
function f2(){
console.log(num);
}
f2();
}
var num = 456;
f1();
读程序2
var a=1;
function fn1(){
var a=2;
var b='22';
fn2();
function fn2(){
var a=3;
fn3();
function fn3(){
var a=4;
console.log(a);
console.log(b);
}
}
}
fn1();
预解析
js解析器在进行解析代码的时候会进行两步操作:预解析和代码执行;js引擎会把js中所有var
还有function
提升到当前作用域的最前面
预解析
分类:
变量预解析(变量提升)
在当前作用域内,把所有已经声明(var)
的变量提升到最前面,不提升赋值操作。
函数预解析(函数提升)
在当前作用域内,把所有已经声明(function)
的函数提升到最前面,不调用函数。
代码执行
按照代码书写顺序从上到下执行
对象
官语:是一组无序的相关属性和方法的集合。
对象是由属性和方法组成
属性:事物的特征。
方法:事物的行为。
创建对象
可以通过字面量创建,new object关键字,构造函数创建对象
通过字面量创建
使用{}创建
eq:
var obj = {uname = '张三',age=18,sex='男',sayHi:function(){console.log('hi~');}}
对象的属性或者方法是采用键值对的方式创建{键(属性名):值(属性值)}
,多个属性或方法中间用逗号分隔,方法冒号后面跟的是一个匿名函数
属性调用
使用对象名.属性名
的格式
console.log(obj.uname);
或 对象名['属性名']
console.log(obg['age']);
方法调用
同理,对象的方法调用方式为对象名.方法名()
obj.sayHi();
关键字创建
直接上例子:
var obj = new object();
通过赋值的方式进行追加
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){console.log('hi~');}
构造函数创建
是把对象里面的一些相同的属性和方法抽象出来封装到函数里面
语法格式:
function 构造函数名(形参){this.属性名=值;this.方法名=function(){}}
调用方式:
var 变量=new 构造函数名(实参或值);
// 构造函数内的方法调用
变量.方法名(实参);
Tip:构造函数名的首字母要大写,不需要return,
遍历对象
for…in…
for(变量in对象){循环体}
// eq:
for(var k in obj){console.log(obj[k])}
内置对象
对象分类:自定义对象、内置对象、浏览器对象
前两种是js基础,属于ecmascript,第三个为js独有
查文档
可在mdn查询js对象的相关信息,包括对象的属性和对象的方法
常用内置对象
math数学对象最大值
math.max(一组数字);求一组数字中最大的数
封装自己的数学对象
通过创建自定义对象可以模拟内置数学对象
math.PI //圆周率
math.floor() //向下取整(去小数点取整)
math.ceil() //向上取整(取小数点加一取整)
math.round() //四舍五入
math.abs() //绝对值
math.max() //最大值
math.min() //最小值
随机数math.rendmom()
,取值范围为左闭右开
补充:开闭区间是一个数学概念,开区间使用符号小括号()表示,闭区间使用符号中括号[]表示,闭区间包含了两个端点,而开区间则不包含两个端点
取随机整数
// 得到两个数之间的整数,且包含这两个数
function getRandom(min,max){
return math.floor(math.random()*(max-min+1))+min
}
练习
猜数字
猜1到10之间会出现哪个数,猜中了,返回恭喜,猜错了,返回抱歉
变种:
猜数字
猜1到10之间会出现哪个数,用户给出的数字大于猜测数字,提示大了,并继续猜,反之提示小了,依旧继续猜,猜中,返回正确
参考:猜数字
Date日期对象
date是一个构造函数,需要使用new来调用
var date=new date();
当没有参数时,返回当前系统下的当前时间
参数格式:年月日使用逗号隔开(2008,08,08),或用横杠连接的字符串,时间时分秒用分号分隔(’2008-8-8 8:8:8’)
格式化日期
var date=new date();
console.log(date.getFullYear()); //返回当前年份
console.log(date.getMonth()); //返回月份减一的数字
console.log(date.getDate()); //返回当前日期
console.log(date.getDay()); //返回星期,从周日到周六的顺序,周日返回0(许多英语国家、犹太教、日本的习惯)
格式化时间
console.log(date.getHours()); //时
console.log(date.getMinutes()); //分
console.log(date.getSeconds()); //秒
总毫秒数(时间戳)
Data对象的起始时间为1970年1月1日(世界标准时间)(相关来源)
获得date总毫秒数,是距1970年1月1日0时0分0秒过去了多少毫秒
1、通过方法:valueOf() getTime()
2、实例化方式:var 变量= +new data();
3、H5新增:Date.now()
案例:倒计时
思路:使用时间戳,用将来的时间戳减去当前的时间戳,然后进行天时分秒转换
换算与公式:
1秒=1000毫秒
1分钟=60秒
1小时=60分钟
1天=24小时
天数=总秒数/60/60/24
小时=总秒数/60/60%24
分钟=总秒数/60%60
秒=总秒数%60
注意要取整,使用parseInt()
数组对象
创建数组:new Array();创建一个空数组,两个以上的参数为数组,一个参数不是数组;var arr=[1,2,3];字面量创建数组
检测是否是数组
1、instanceof逻辑运算符:判断变量是否为数组,是为true,否为false
使用方法:
(变量 instanceof Array)
2、Array.isArray(变量):返回值为true和false
添加数组元素
push():追加数组元素;且有返回值,为追加完成之后数组的长度;arr.push([参数1,[参数2,……]])
unshift():前端插入数组元素;特性同上;arr.unshift([参数1,[参数2,……]])
删除数组元素
pop():删除最后一个数组元素;返回值为被删除的元素;arr.pop()
shift():删除第一个数组元素;特性同上;arr.shift()
案例:筛选数组
要求将数组[1500,1200,2000,2100,1800]中超过2000的删除,剩余的放到新数组中
数组元素排序
翻转数组reverse():arr.reverse();
冒泡排序sort():arr.sort();仅限个位数
冒泡排序方法完善:arr.sort(function(a,b){return a - b;});其中,a-b为升序排序,降序为b-a
数组索引方法:
indexOf(数组元素):返回该元素在数组中的索引号;从前往后查找,只返回第一个满足条件的索引号,没有满足条件的元素时,返回-1;arr.indexOf(‘zhangsan’)
lastIndexOf(数组元素):返回该元素在数组中的索引号;从后往前查找,只返回第一个满足条件的索引号,没有满足条件的元素时,返回-1;arr.lastIndexOf(‘zhangsan’)
案例:数组元素去重
删掉数组['c','a','z','a','x','a','x','c','b',]中相同数组元素,只保留一个,并放到新数组中
思路:使用旧数组元素与新数组中的元素进行一一对比,有相同的,不进行添加,没有相同的,添加到新数组中
数组转换为字符串
toString():将数数组转换为字符;arr.toString()
join([分隔符]):使用分隔符进行链接转换,分隔符须在单引号内填写,默认(空)使用逗号分隔
字符串对象
基本包装类型
基本包装类型:把简单数据类型包装成了复杂数据类型
js提供了三个特殊引用类型:string,number和boolean
字符串不可变
变量在有值的基础上重新赋值之后,原来的值不会被新值覆盖,新旧两个值都在内存中
根据字符返回位置
*字符串的所有方法,都不会修改字符串本身,操作完成会返回一个新的字符串
indexOf(要查找的字符,[起始位置]):从规定起始位置开始向后查找,默认从第一个字符开始
unindexOf(要查找的字符,[起始位置]):从规定起始位置开始向前查找,默认从最后一个字符开始
案例:
查找字符串"abcoefoxyozzopp"中所有"o"出现的位置以及次数
根据位置返回字符串
charat(参数):返回对应位置的字符
string(参数):返回对应位置字符的ascii值,通常用于判断按键操作
str[参数]:H5新增
案例:
判断字符串"abcoefoxyozzopp"中出现最多的字符,并统计出现此数
补充:对象名['属性名']:可以判断该对象中有无该属性
参考:统计出现次数最多的字符
字符串拼接与截取
concat(str1,[str2,…]):用于在后面拼接两个或多个字符串,等效于使用+,后者用的更多
substr(参数1,参数2):从参数1开始,参数2为要取的个数
slice(参数1,end):从参数1开始,截取到end,end不取出
substring(参数1,end):从参数1开始,截取到end,end不取出;不接收负值
替换字符串与字符串转换数组
replace(字符1,字符2):将字符1替换为字符2;只将从左到右开始第一个匹配的字符替换掉
split(‘分隔符’):将字符串转换为数组,分隔符根据字符串中的的分隔对应;与join的返回值相对应
eq:
str='red,black,yello,blue';
str.split(',')
//或
str2='red&black&yello&blue';
str2.split('&')
简单数据类型与复杂数据类型
基本数据类型或值类型,复杂类型又称为引用类型。
值类型:string,number,boolean,undefined,null(比较特殊,null的返回值为object)
引用类型:new创建的对象(系统对象,自定义对象),object,array,date等
堆栈
空间分配:
简单数据类型存放在栈中,复杂数据类型放在堆中。讲解参考
Tip:js中没有堆栈概念,只是为了便于理解代码执行,学习其他编程语言
这部分内容如果感兴趣可以参考C语言的数据结构相关知识
简单数据类型参数传递
复杂数据类型参数传递
apis
api:一种工具,是以接口的方式实现的。
web api:是针对浏览器的页面元素的api。
详细的api接口也可在mdn中查找
dom
处理页面标记语言的标准接口
专有名词:树
文档,一个页面就是一个文档,用document表示
元素,页面中所有的标签都是元素,用element表示
节点,页面中所有的内容都是节点,用node表示
获取元素
getElementByID(id)
获取元素对象
<div id="time">asdfasdf</div>
<script>
var timer = document.getElementByID('time');
console.log(timer);
</script>
Tip:因为html是从上往下加载的,所以要先写标签,然后在下面写script;id是大小写敏感的字符串;返回的是一个元素对象;console.dir()打印返回的元素对应的对象,可查看里面的属性和方法
getElementsByTagName()
获取带有指定标签名的对象的集合
<ul>
<li>空山新雨后,自挂东南枝。</li>
<li>欲穷千里目,自挂东南枝。</li>
<li>爹娘闻女来,自挂东南枝。</li>
<li>洞房花烛夜,自挂东南枝。</li>
<li>天生我材必有用,各种自挂东南枝。</li>
<li>人生在世不如意,不如自挂东南枝。</li>
</ul>
<ol id="ol">
<li>空山新雨后,自挂东南枝。</li>
<li>欲穷千里目,自挂东南枝。</li>
<li>爹娘闻女来,自挂东南枝。</li>
<li>洞房花烛夜,自挂东南枝。</li>
<li>天生我材必有用,各种自挂东南枝。</li>
<li>人生在世不如意,不如自挂东南枝。</li>
</ol>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
var olis = document.getElementsByTagName('ol');
console.log(olis[0].getElementsByTagName('li')); //还可以获取某个元素(父元素)内部的所有指定标签名的子元素element.getElementsByTagName(标签名);
</script>
Tig:返回的是获取元素对象的集合,以伪数组的方式存储(页面没有标签就是空伪数组);可采用遍历的方式输出元素对象里面的对象;得到的元素的对象是动态的;还可以获取某个元素(父元素)内部的所有指定标签名的子元素element.getElementsByTagName(标签名);eq:ul.getElementsByTagName(‘li’);父元素必须是单个对象(必须指明具体是哪一个元素)获取的时候不包括父元素自己,如想实现使用父元素名,可以在父元素标签处设置一个同名id;
H5新增获取元素方法
1、document.getElementsByClassName(‘类名’);:根据class类名放回元素集合
<ul class="cul">
<li>空山新雨后,自挂东南枝。</li>
<li>欲穷千里目,自挂东南枝。</li>
<li>爹娘闻女来,自挂东南枝。</li>
<li>洞房花烛夜,自挂东南枝。</li>
<li>天生我材必有用,各种自挂东南枝。</li>
<li>人生在世不如意,不如自挂东南枝。</li>
</ul>
<script>
var lis = document.getElementsByClassName('cul');
console.log(lis);
</script>
2、document.querySelector(‘选择器’);:根据指定选择器返回第一个元素对象
<ul class="zgdnz">
<li>空山新雨后,自挂东南枝。</li>
<li>欲穷千里目,自挂东南枝。</li>
<li>爹娘闻女来,自挂东南枝。</li>
<li>洞房花烛夜,自挂东南枝。</li>
</ul>
<ul class="zgdnz">
<li>天生我材必有用,各种自挂东南枝。</li>
<li>人生得意须尽欢,不如自挂东南枝。</li>
</ul>
<ul id="SB">
<li>Are you ready kids?</br>准备好了吗?孩子们?</li>
<li>Aye, aye, captain!</br>是的,船长</li>
<li>I can't hear you!</br>太小声罗</li>
<li>Aye, aye, captain!</br>是的,船长</li>
<li>Ooh</br>哦~</li>
<li>Who lives in a pineapple under the sea?</br>是谁住在深海的大菠萝里</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>Absorbent and yellow and porous is he!</br>方方黄黄伸缩自如</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>If nautical nonsense be something you wish!</br>如果四处探险是你的愿望</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>Then drop on the deck and flop like a fish!</br>那就敲敲甲板让大鱼开路</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>Ready?</br>准备</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>Ha, ha, ha</br>哈哈</li>
<li>Ha, ha, ha</br>哈哈</li>
</ul>
<script>
var lis = document.getElementsByClassName('zgdnz');
console.log(lis);
var lul = document.querySelector('.zgdnz');
console.log(lul);
var sb=document.querySelector('#SB');
console.log(sb);
</script>
Tip:注意在填写选择器时,以class命名的,使用 . + 名称,使用id命名的,使用 # + 名称;
3、document.querySelectorAll();:返回指定选择器的所有元素对象集合(伪数组)
<ul class="zgdnz">
<li>空山新雨后,自挂东南枝。</li>
<li>欲穷千里目,自挂东南枝。</li>
<li>爹娘闻女来,自挂东南枝。</li>
<li>洞房花烛夜,自挂东南枝。</li>
</ul>
<ul class="zgdnz">
<li>天生我材必有用,各种自挂东南枝。</li>
<li>人生得意须尽欢,不如自挂东南枝。</li>
</ul>
<script>
var lis = document.getElementsByClassName('zgdnz');
console.log(lis);
var lul = document.querySelector('.zgdnz');
console.log(lul);
var zgdnzall=document.querySelectorAll('.zgdnz')
console.log(zgdnzall);
</script>
获取body或html中的元素
获取body元素对象
document.body
获取html元素对象
document.documentElement
事件三要素
事件源,事件类型,事件处理程序
<button id="btn">空山新雨后</button> <!-- 事件源 -->
<script>
var btn=document.getElementById('btn'); //事件类型
btn.onclick = function(){alert('自挂东南枝。');} //事件处理程序
</script>
执行事件过程
1获取事件源
2注册事件(绑定事件)
3添加事件处理程序
<button id="btn">空山新雨后</button> <!-- 事件源 -->
<script>
var btn=document.getElementById('btn'); //获取事件源
btn.onclick/*绑定事件,注册事件*/ = function(){alert('自挂东南枝。');} //添加事件处理程序
</script>
操作元素-修改元素内容
element.innerText:从起始位置到终止位置的内容,但他会去除html标签,同时空格和换行也会去掉(不识别html标签)
<button>空山新雨后,</button>
<div>__________。</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
div.innerText = '自挂东南枝。';
}
</script>
元素可以不用添加事件,直接对element.innerText进行赋值
<button>空山新雨后,</button>
<div>__________。</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
div.innerText = '直接自挂东南枝。'; //可直接调用
</script>
element.innerText:从起始位置到终止位置的内容,包含html标签,同时保留空格和换行(识别html标签)
<button>空山新雨后,</button>
<div>__________。</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
div.innerHTML = '<strong>自挂东南枝。</strong>';//使用innerHTML
}
</script>
innerText和innerHTML的区别
element.innerText非官方发布的,不识别html标签;element.innerHTML是W3C组织推荐的,识别html标签(例子见上)。
这两个属性是可读写的,可以获取元素里面的内容,但是element.innerText会去除html标签,同时空格和换行也会去掉,element.innerHTML会保留html标签、空格和换行
<div>__________。</div>
<p>
spongebob
<span>SquarePants</span>
</p>
<script>
var div = document.querySelector('div');
var p=document.querySelector('p')
console.log(p.innerText);
console.log(div.innerHTML); //可以尝试将最后两行中p和div换换位置看一下效果
</script>
操作元素-修改元素属性
<button id="change">改为B站链接</button>
<a href="https://www.baidu.com">百度一下,你就知道</a>
<script>
var btn = document.getElementById('change');
var ln = document.querySelector('a');
btn.onclick = function () {
if (ln.innerHTML==='百度一下,你就知道') { //这里加了一个判断,通过判断是否与默认值相同来改变属性值
ln.innerHTML = '哔哩哔哩';
ln.href = 'https://wwww.bilibili.com';
btn.innerHTML='改为百度链接';
} else {
ln.innerHTML = '百度一下,你就知道';
ln.href = 'https://www.baidu.com';
btn.innerHTML='改为B站链接';
}
}
</script>
案例:分时问候
通过不同的时间来改变不同的图片和问候语
上午访问显示上午图片,显示上午好
下午访问显示下午图片,显示下午好
晚上访问显示晚上图片,显示晚上好
操作元素-修改表单属性
<button>按钮</button>
<input id="ipt" type="text" value="哈喽哇!">
<script>
var btn=document.querySelector('button');
var ipt=document.getElementById('ipt');
btn.onclick=function(){
ipt.value='客户,感受我们的下葬服务吧!';
}
</script>
可以发现,前面修改显示内容都是用innerHTML或innerText修改,但是表单内容是通过修改特定的属性值(value)来实现的,前者都是双标签,后者为单标签。
禁用按钮
<button>按钮</button>
<input id="ipt" type="text" value="哈喽哇!">
<script>
var btn=document.querySelector('button');
var ipt=document.getElementById('ipt');
btn.onclick=function(){
ipt.value='客户,感受我们的下葬服务吧!';
btn.disabled = true; //禁用按钮
}
</script>
this.disabled = true;也可实现相同的功能,this指向的是事件的调用者,上例中指向的就是btn
案例:密文显示输入密码
功能分析:用户名输入时正常显示,密码输入时默认隐藏,但有显示\隐藏切换按钮
<div class="box">
<input type="password" id="pwd">
<button id="tip">显示</button>
</div>
<script>
// var flag = 0; 这个变量是另一种方法的前置,详情在下面
var ipt = document.getElementById('pwd');
var btn = document.getElementById('tip');
btn.onclick = function () {
if (ipt.type === 'password') {
ipt.type = 'text';
this.innerHTML = '隐藏';
} else {
ipt.type = 'password';
this.innerHTML = '显示';
}
//这里可以换成另一个方式,使用一个变量来控制判断条件,注意这个变量要在全局下声明
// if (flag == 0) {
// ipt.type = 'text';
// this.innerHTML = '隐藏';
// flag = 1;
// } else {
// ipt.type = 'password';
// this.innerHTML = '显示';
// flag = 0;
// }
}
</script>
操作元素-修改样式属性
element.style行内样式操作
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="div">
</div>
<script>
var div=document.getElementById('div');
div.onclick=function(){
this.style.backgroundColor='yellow';
}
</script>
</body>
行内样式优先级高,适用于样式修改较少,实现功能简单的情况
案例:关闭图片
思路:利用css的显示和隐藏:display:none隐藏元素;display:block显示元素
案例:循环精灵图
思路分析:精灵图排列要有顺序,一般需要竖向排列,然后使用for循环
案例:显示\隐藏文本框文字
参考视频
element.className类名样式操作
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.change{ /* 引用class类名以.开头 */
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
</div>
<script>
var div=document.getElementById('d1');
d1.onclick=function(){
this.className='change';/* 使用element.className调用类为其元素使用 */
}
</script>
</body>
案例:密码框格式提示正误
思路分析:1,焦点获得和焦点失去显示相应的提示
2,输入字符符合要求后显示正确提示,不符合要求提示相应不符合要求的信息
小结练习
1.登陆界面账号\密码显示隐藏内容。
2.京东关闭广告(直接隐藏)
3.新浪下拉菜单(鼠标悬浮显示菜单)
4.页面开关灯
排他思路
如果有同一组元素,想让他们实现同一个样式(功能),但是每次生效的都是同组中的某一个元素时
先把其他元素的样式(功能)清空,再进行某一个元素添加某个样式(功能)
利用循环
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btn = document.querySelectorAll('button');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
案例1:百度换肤
<head>
<style>
body{
background-size: 1920px,1080px;
}
img {
height: 70px;
width: 140px;
}
</style>
</head>
<body>
<div>
<img src="img/2098/01.jpg">
<img src="img/2098/02.jpg">
<img src="img/2098/03.jpg">
<img src="img/2098/04.jpg">
<img src="img/2098/05.jpg">
<img src="img/2098/06.jpg">
</div>
<script>
var bgimg = document.querySelectorAll('img');
var bg = document.body;
for (var i = 0; i < bgimg.length; i++) {
bgimg[i].onclick = function () {
for(var i=0 ;i<bgimg.length;i++){
bg.background='';
}
bg.background=this.src;
}
}
</script>
</body>
(未完待续……)
更多内容: