《JavaScript基础-分享》
建立学习目标
能够使用JS中的流程控制语句(if, switch,for, while)
能够在 JS 中定义命名函数和匿名函数(方法)能够使用 JS 中常用的事件能够使用 JavaScript 对 CSS 样式进行操作能够使用数组中常用的方法能够使用日期对象常用的方法
使用工具建立一个文件：
使用Visual 建立一个文件步骤：选择文件–>新建文件–>Ctrl+s -->起名，保存格式选择HTML–>进入文本–>输入一个英文感叹号–>回车–>完成
学习内容
常用语法
<script>
alert("hello Word!")
1.输入框
prompt("你好啊");
2.弹出警告框
alert("Hello");
3.控制台输出
console.log("hello js");
备注：在网页不能直接看到输出内容，需要在Chrome中按F12或ctrl+shift+i ，里面有很多个功能分栏，第二个就是console控制台，可以在上面输入console.log 回车就能执行，如果有多行代码需要打的话 回车是shift+回车
4.页面内容输出
document.write("hello js");
document.write("<br>");
document.write("hello js");
</script>
流程控制：if 语句
目标
JS中if语句使用非boolean类型的条件
if 语句：
在一个指定的条件成立时执行代码。
if(条件表达式) {
//代码块;
}
if…else 语句
在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
if(条件表达式) {
//代码块;
}
else {
//代码块;
}
if…else if…else 语句
使用这个语句可以选择执行若干块代码中的一个。
if (条件表达式) {
//代码块;
}
else if(条件表达式) {
//代码块;
}
else {
//代码块;
}
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if语句
</title>
</head>
<body>
<script type="text/javascript">
let u;
if(u) {
document.write("真" + "<br/>");
}
else {
document.write("假" + "<br/>");
}
</script>
</body>
</html>
小结：非布尔类型的表达式
数据类型为真为假
number非00string非空串“”undefined为假NaN(Not a Number)为假object非空null
流程控制：switch语句
目标
switch语句与Java的区别window对象的方法
语法一：case后使用常量，与Java相同
如果变量名等于某个分支的常量值，就执行这个代码段。如果所有的条件都不满足就执行default代码。
switch(变量名) {
case 常量值:
break;
case 常量值：
break;
default:
break;
}
语法二：case后使用表达式
switch后面一定要是真每个条件都可以使用表达式如果上面所有的表达式都不匹配，就执行default
switch(true) { //这里的变量名写成true
case 表达式: //如：n > 5
break;
case 表达式:
break;
default:
break;
}
相关的方法
调用方法方式：
window.prompt()， window.alert()prompt(), alert()
注：只要是window对象的方法，window对象都可以省略
window对象的方法名作用
string prompt(“提示信息”,"默认值”)输入框，参数：1. 输入的提示信息2. 一开始出现在输入框中值返回值：就是用户输入的信息，字符串类型alert(“提示信息”)输出信息框
输入框
信息提示框
案例：判断一个学生的等级
通过prompt输入的分数，如果90100之间，输出优秀。8090之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。
效果
分析
使用prompt得到输入的分数使用switch对分数进行判断如果在90到100之间，则输出优秀，其它依次类推。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch语句的使用
</title>
</head>
<body>
<script type="text/javascript">
let score = window.prompt("请输入您的分数：","60");
switch (true) {
case score >=90 && score <=100 :
document.write("优秀" + "<br/>");
break;
case score >=80 && score <90 :
document.write("良好" + "<br/>");
break;
case score >=60 && score <80 :
document.write("及格" + "<br/>");
break;
case score >=0 && score <60 :
document.write("不及格" + "<br/>");
break;
default:
document.write("分数有误" + "<br/>");
}
</script>
</body>
</html>
小结
如果switch的case后面要使用表达式，switch后面值要写成什么？ true
流程控制：循环语句
目标
使用循环实现9x9乘法表
while语句：
当指定的条件为 true 时循环执行代码，也支持非boolean类型的条件
while (条件表达式) {
需要执行的代码;
}
do-while语句：
最少执行1次循环
do {
需要执行的代码;
}
while (条件表达式)
for 语句
循环指定次数
for (var i=0; i<10; i++) {
需要执行的代码;
}
break和continue
break: 结束整个循环
continue：跳过本次循环，执行下一次循环
案例：乘法表
需求
以表格的方式输出乘法表，其中行数通过用户输入
效果
分析
先制作一个没有表格，无需用户输入的9x9乘法表由用户输入乘法表的行数使用循环嵌套的方式，每个外循环是一行tr，每个内循环是一个td输出每个单元格中的计算公式给表格添加样式，设置内间距
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乘法表
</title>
<style>
table {
border-collapse: collapse;
}
td {
padding: 3px;
}
</style>
</head>
<body>
<script type="text/javascript">
let num = prompt("请输入乘法表的数：","9");
document.write("<table border='1'>");
for (let i = 1; i <= num; i++) {
document.write("<tr>");
for (let j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "×" + i + "=" + (i * j));
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
命名函数和匿名函数
目标
命名函数和匿名函数的使用
函数的概述
什么是函数
一个代码块，给代码块起个名字，以后可以通过名字来调用它，实现重用的功能。类似于Java中方法
两种函数：
命名函数：有名字的函数，可以通过名字来多次调用匿名函数：没有名字的函数，不可重用，只能使用一次。但可以通过一个变量来指向它，实现重用。
命名函数的格式
function 函数名(参数列表
) {
return 返回值
;
}
自定义函数
需求
定义一个函数实现加法功能
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的使用
</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b) {
return a + b;
}
let c = sum(3, 5);
document.write("计算结果是：" + c + "<br/>");
</script>
</body>
</html>
注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于函数的重载
</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b) {
alert(2);
}
function sum(a) {
alert(1);
}
function sum(a,b,c) {
alert(3);
}
sum(3, 5);
</script>
</body>
</html>
隐藏数组的执行过程
案例：在函数内部输出隐藏数组的长度和元素
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏的数组
</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b) {
let length = arguments.length;
document.write("隐藏数组的长度是：" + length + "<hr/>");
for (let i = 0; i < arguments.length; i++) {
document.write("i=" + i + "元素的值：" + arguments[i] + "<br/>");
}
document.write("<hr/>");
document.write("a=" + a + "<br/>");
document.write("b=" + b + "<br/>");
}
sum(3);
</script>
</body>
</html>
匿名函数
应用场景
后期很多的事件处理函数都使用匿名函数，一般不重用。也可以定义一个变量让匿名函数可以重用，这种情况使用比较少。
语法
var 变量名 = function(参数列表
) {
return 返回值
;
}
后期可以通过变量名来调用函数
函数调用代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数
</title>
</head>
<body>
<script type="text/javascript">
var sum = function(a,b) {
return a + b;
}
let c = sum(2, 7);
document.write("计算结果：" + c + "<br/>");
</script>
</body>
</html>
小结
定义函数的关键字是什么？函数参数和返回值需要指定数据类型吗？函数是否有重载？ 后面的同名函数会覆盖前面的每个函数内部都有一个隐藏数组名是：arguments
案例：轮播图
目标
函数的应用定时函数的使用
方法说明
方法描述
document.getElementById(“id”)作用：通过id获取网页上唯一的元素(标签)参数：ID的值window.setInterval(“函数名()”,时间) window.setInterval(函数名,时间)作用：每隔一段时间调用一次指定的函数参数1：要调用的函数名参数2：隔多久调用，单位是毫秒
需求
每过3秒中切换一张图片的效果，一共5张图片，当显示到最后1张的时候，再次显示第1张。
步骤
创建HTML页面，页面有一个img标签，id为pic，宽度600。body的背景色为黑色，内容居中。五张图片的名字依次是0~4.jpg，放在项目的img文件夹下，图片一开始的src为第0张图片。编写函数：changePicture()，使用setInterval()函数，每过3秒调用一次。定义全局变量：num=1。在changePicture()方法中，设置图片的src属性为img/num.jpg。判断num是否等于5，如果等于5，则num=0；否则num++。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图案例
</title>
<style>
body {
background-color: black;
text-align: center;
}
</style>
</head>
<body>
<img src="img/0.jpg" width="800" id="game">
</body>
<script type="text/javascript">
window.setInterval("changePic()", 2000);
let num = 1;
function changePic() {
let imgObj = document.getElementById("game");
imgObj.src = "img/" + num + ".jpg";
num++;
if (num == 5) {
num = 0;
}
}
</script>
</html>
效果
小结
方法描述
document.getElementById(“id”)通过id得到唯一的元素注：这个代码必须要在元素加载完毕以后执行window.setInterval(“函数名()”,时间) window.setInterval(函数名,时间)每隔一段时间调用一次指定的函数，单位是毫秒
设置事件的两种方式
目标
使用命名函数和匿名函数设置事件
什么是事件
用户在操作网页的过程中，会有各种操作，每种操作都会产生事件。我们可以通过JS来监听这些事件，对这些事件编写函数进行处理，来实现与用户的交互。
设置事件的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的处理方式
</title>
</head>
<body>
<input type="button" value="命名函数" id="b1" onclick="clickMe()">
<input type="button" value="匿名函数" id="b2">
<script type="text/javascript">
function clickMe() {
alert("命名函数");
}
document.getElementById("b2").onclick = function () {
alert("匿名函数");
}
</script>
</body>
</html>
小结
事件处理中命名函数的写法
onclick = "函数名()"
function 函数名() {
}
事件处理中匿名函数的写法
元素对象.onclick = function() {
}
事件介绍：onload、onclick、ondblclick
目标
加载完毕事件鼠标单击鼠标双击
加载完成事件
事件名：onload示例：页面加载完毕以后，才执行相应的JS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的处理方式
</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("b2").onclick = function () {
alert("匿名函数");
}
}
</script>
<input type="button" value="匿名函数" id="b2">
</body>
</html>
鼠标点击事件
点击：onclick双击：ondblclick (double)
案例演示
需求：单击复制文本内容，双击清除文本内容
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击和双击
</title>
<style>
input {
margin: 5px;
}
</style>
</head>
<body>
姓名：
<input type="text" id="t1"/> <br/>
姓名：
<input type="text" id="t2" /> <br/>
<input type="button" value="单击复制/双击清除" id="b1">
<script type="text/javascript">
document.getElementById("b1").onclick = function () {
document.getElementById("t2").value = document.getElementById("t1").value;
}
document.getElementById("b1").ondblclick = function () {
document.getElementById("t1").value = "";
document.getElementById("t2").value = "";
}
</script>
</body>
</html>
小结
加载完成事件名：onload单击事件名：onclick双击事件名：ondblclick
事件介绍：得到焦点、失去焦点、改变事件
目标
得到焦点失去焦点改变事件
事件名
什么是焦点：一个元素得到光标的操作状态，表示获得了焦点
得到焦点：onfcous失去焦点：onblur (模糊)
焦点事件示例
当文本框失去焦点时，显示后面的文字，获得到焦点时，后面的文字消失
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点
</title>
</head>
<body>
用户名：
<input type="text" id="user"> <span id="info" style="color: red"></span>
<script type="text/javascript">
document.getElementById("user").onfocus = function () {
document.getElementById("info").innerText = "";
}
document.getElementById("user").onblur = function () {
document.getElementById("info").innerText = "用户名不能为空";
}
</script>
</body>
</html>
改变事件示例
事件名：onchange
需求
选中不同的城市，出现一个信息框显示选中城市的值用户输入英文字母以后，文本框的字母全部变成大写
效果
下拉列表select，它的选项option发生变化文本框内容发生改变，也会激活这个事件，它是在失去焦点以后才会激活。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变事件
</title>
</head>
<body>
城市：
<select id="city">
<option value="广州">广州
</option>
<option value="上海">上海
</option>
<option value="南京">南京
</option>
</select>
<hr/>
英文：
<input type="text" id="eng">
<script type="text/javascript">
document.getElementById("city").onchange=function () {
alert(this.value);
}
document.getElementById("eng").onchange=function () {
this.value = this.value.toUpperCase();
}
</script>
</body>
</html>
小结
得到焦点事件名：onfocus失去焦点事件名：onblur改变事件事件名：onchange
上午回顾
流程控制语句
if的判断条件，可以是非boolean类型
number: 非0为真，0为假
string: 非空串为真，空串为假
object: 非null为真，null为假
undefined: 为假
NaN：为假
switch(true) {
case "条件表达式"
break;
}
for(var i=0; i<10; i++)
while(true) {
}
函数
命名函数
function 函数名(参数列表) {
return 返回值
}
匿名函数
var 变量=function(参数列表) {
return 返回值;
}
没有函数的重载，同名的函数后面会覆盖前面，实参的个数与形参的个数无关
每个函数的内部都一个隐藏的数组：arguments
事件
单击：onclick双击：ondblclick加载完毕：onload得到焦点：onfocus失去焦点：onblur改变事件：onchange
事件介绍：鼠标移入和移出
目标
鼠标移入鼠标移出this关键字
事件名
移入：onmouseover 当鼠标指针移到这个元素上面的时候，激活这个事件移出：onmouseout 当鼠标指针移出这个元素的时候，激活这个事件
示例
需求：将鼠标移动到img上显示图片，移出则显示另一张图片。图片设置边框，宽500px
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移上和移出事件
</title>
</head>
<body>
<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">
<script type="text/javascript">
document.getElementById("pic").onmouseover = function () {
this.src = "img/2.jpg";
}
function changePic(obj) {
obj.src = "img/3.jpg";
}
</script>
</body>
</html>
this关键字的作用
出现在元素的事件方法中：
<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">
出现在匿名函数的代码中：
document
.getElementById("pic").onmouseout = function () {
this.src
= "img/0.jpg";
}
小结
鼠标移入(上)：onmouseover鼠标移出：onmouseout
JavaScript 对 CSS 样式进行操作
目标
JS操作CSS的两种方式
在JS中操作CSS属性命名上的区别
CSS中写法JS中的写法说明
colorcolor样式名如果是一个单词是一样font-sizefontSize如果有多个单词，样式名中短横去掉，后面每个单词首字母大小
示例：点按钮，修改p标签的字体、颜色、大小
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JS来修改css的样式
</title>
<style>
.hello {
font-family: "隶书";
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<p id="p1">第一自然段
</p>
<p id="p2">第二自然段
</p>
<hr/>
<input type="button" id="b1" value="改变几个样式">
<input type="button" id="b2" value="改变类样式">
<script type="text/javascript">
document.getElementById("b1").onclick = function () {
let p1 = document.getElementById("p1");
p1.style.fontFamily = "楷体";
p1.style.color = "red";
p1.style.fontSize = "40px";
}
document.getElementById("b2").onclick = function () {
let p2 = document.getElementById("p2");
p2.className = "hello";
}
</script>
</body>
</html>
网页变化
小结
JS修改CSS样式的两种方式
元素.style.样式名=样式值元素.className=类名
内置对象：字符串对象
目标
学习String对象常用的方法
创建字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置对象：字符串对象
</title>
</head>
<body>
<script type="text/javascript">
let a = 3;
let b = 4;
let c = a + b;
let s1 = a + "+" + b + "=" + c;
document.write(s1 + "<br/>");
let s2 = `${a} + ${b} = ${c}`;
document.write(s2 + "<br/>");
</script>
</body>
</html>
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>string对象的函数
</title>
</head>
<body>
<script type="text/javascript">
let s1 = "我是中国人，我爱我的国家";
let s = s1.substring(6, 9);
document.write(s + "<br/>");
let s2 = s1.substr(6, 3);
document.write(s2 + "<hr/>");
let s3 = "a-b-c-xyz-hello";
let arr = s3.split("-");
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br/>");
}
document.write("<hr/>");
document.write("abc".toUpperCase() + "<br/>");
document.write("XYZ".toLowerCase() + "<hr/>");
let s4 = " hello world ";
document.write("长度：" + s4.length + "<br/>");
document.write(s4 + "<br/>");
document.write(s4.trim() + "<br/>");
document.write("去掉空格长度：" + s4.trim().length + "<br/>");
</script>
</body>
</html>
小结
方法名作用
substring(startIndex,endIndex)取子字符串，包头不包尾，索引从0开始。参数是起始位置substr(startIndex, length)取子字符串，起始位置，长度split(delimiter)把一个字符串使用指定的分隔符，切割成一个数组toLowerCase()变成小写toUpperCase()变成大写trim()去掉前后的空格
内置对象：数学对象
目标
学习Math对象的方法
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置对象：数学对象
</title>
</head>
<body>
<script type="text/javascript">
let n1 = Math.round(123.5);
document.write(n1 + "<br/>");
let n2 = Math.floor(123.45);
document.write(n2 + "<br/>");
let n3 = Math.ceil(123.45);
document.write(n3 + "<br/>");
let n4 = Math.random();
document.write(n4 + "<br/>");
</script>
</body>
</html>
小结
方法名作用
round(x)四舍五入保留到整数floor(x)向下取整ceil(x)向上取整random()随机生成0~1之间的小数，不等于1
全局函数
目标
学习全局函数的使用
代码
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>全局函数
</title
>
</head
>
<body
>
<script type
="text/javascript">
let n4
= parseInt("2") + parseInt("3");
document
.write(n4
+ "<br/>");
document
.write(parseInt("abc") + "<br/>");
document
.write(parseInt("12abc") + "<br/>");
let n5
= parseFloat("2.3") + parseFloat("3.1");
document
.write(n5
+ "<hr/>");
let order
= "明天晚上偷袭珍珠港";
document
.write(order
+ "<br/>");
let s1
= encodeURI(order
);
document
.write(s1
+ "<hr/>");
let s2
= decodeURI(s1
);
document
.write(s2
+ "<hr/>");
let s3
= "alert('Hello 你好！')";
eval(s3
);
</script
>
</body
>
</html
>
小结
字符串转为数字说明
parseInt(字符串)转成整数，如果转换失败，返回NaNparseFloat(字符串)转成小数isNaN(字符串)在转换前判断是否为非数字，非数字返回true，数字为false
编码和解码说明
encodeURI(字符串)对汉字进行URI编码decodeURI(字符串)对URI编码后的
执行字符串说明
eval(字符串)执行脚本
内置对象：数组对象
目标
数组的创建的方式数组中的方法
创建数组的四种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组
</title>
</head>
<body>
<script type="text/javascript">
let a1 = new Array();
document.write(a1.length + "<br/>");
let a2 = new Array(5);
document.write(a2.length + "<br/>");
document.write(a2 + "<hr/>");
let a3 = new Array(2, 5, 6, 8);
document.write(a3.length + "<br/>");
document.write(a3 + "<br/>");
let a4 = [4, 7, 10, 45];
document.write(a4 + "<br/>");
</script>
</body>
</html>
数组的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组
</title>
</head>
<body>
<script type="text/javascript">
let a1 = new Array();
document.write(a1.length + "<br/>");
let a2 = new Array(5);
document.write(a2.length + "<br/>");
document.write(a2 + "<hr/>");
let a3 = new Array(2, 5, 6, 8);
document.write(a3.length + "<br/>");
document.write(a3 + "<br/>");
let a4 = [4, 7, 10, 45];
document.write(a4 + "<hr/>");
let a5 = ["abc", true, 50, 3.6];
document.write(a5 + "<hr/>");
a5[5] = "xyz";
for (let i = 0; i < a5.length; i++) {
document.write(a5[i] + "<br/>");
}
document.write("<hr/>");
a5.length = 2;
for (let i = 0; i < a5.length; i++) {
document.write(a5[i] + "<br/>");
}
</script>
</body>
</html>
方法演示案例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的方法
</title>
</head>
<body>
<script type="text/javascript">
let a1 = [1, 1, 1];
let a2 = [2, 2, 2];
let a3 = a1.concat(a2, 99);
document.write(a3 + "<hr/>");
let a4 = [4, 1, 8, 9];
a4.reverse();
document.write(a4 + "<hr/>");
let a5 = [4, 1, 8, 9];
let str = a5.join("=");
document.write(str + "<hr/>");
document.write(("ac" > "abcdefgh") + "<br/>");
document.write(("x" > "ABCDE") + "<hr/>");
let strArr = ["Jack", "tom","Newboy", "rose"];
document.write("排序前：" + strArr + "<br/>");
strArr.sort();
document.write("排序后：" + strArr + "<hr/>");
let a6 = [40, 100, 28, 9];
document.write("排序前：" + a6 + "<br/>");
a6.sort(function (a, b) {
return a - b;
});
document.write("排序后：" + a6 + "<hr/>");
let a7 = [2, 6, 7];
a7.pop();
document.write(a7 + "<br/>");
a7.push(4, 90);
document.write(a7 + "<br/>");
</script>
</body>
</html>
小结
方法名功能
concat()拼接数组reverse()反转join(separator)将数组接拼接成一个字符串sort()排序pop()删除最后一个元素push()添加元素
内置对象：日期对象
目标
日期对象方法的使用
创建日期对象
new Date() 创建当前时间的日期对象
日期对象的方法
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期对象
</title>
</head>
<body>
<script type="text/javascript">
let date = new Date();
document.write("现在的时间是：" + date + "<br/>");
document.write("年份：" + date.getFullYear() + "<br/>");
document.write("周几：" + date.getDay() + "<br/>");
document.write("毫秒数：" + date.getTime() + "<br/>");
document.write(date.toLocaleString() + "<br/>");
</script>
</body>
</html>
小结
说说下面方法的作用
getFullYear()：年份getDay()：周几getTime()：得到1970-1-1到现在的毫秒数toLocaleString() ：本地格式的日期
学习总结
能够在 JS 中定义命名函数和匿名函数
function 函数名(参数列表) {
return 返回值;
}
var 变量名=function(参数列表) {
return 返回值;
}
元素.onclick = function() {
}
能够使用JS中常用的事件
事件名作用
onclick单击ondblclick双击onload加载完毕onfocus得到焦点onblur失去焦点onchange改变事件onmouseover鼠标移上onmouseout鼠标移出
能够使用 JavaScript 对 CSS 样式进行操作
元素.style.样式名=样式值
元素.className=类名
字符串对象的方法
方法名作用
substring(startIndex,endIndex)包头不包尾split(delimiter)切割字符串toLowerCase()转成小写toUpperCase()转成大写trim()去掉前后空格
全局函数
字符串转为数字说明
parseInt(字符串)转成整数parseFloat(字符串)转成小数isNaN(字符串)判断非数字
编码和解码说明
encodeURI(字符串)URI编码decodeURI(字符串)URI解码
执行字符串说明
eval(字符串)执行字符串中JS代码
能够使用数组中常用的方法
方法名功能
concat()拼接数组reverse()反转join(separator)将数组拼接成一个字符串sort()排序，默认按字符串大小pop()删除push()添加
能够使用日期对象常用的方法
方法名作用
getFullYear()得到年份getDay()得到周几getTime()得到毫秒数toLocaleString()转成本地的时间
