js函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function add(a,b){
return a+b;
}
var result=add(10,20);
document.write(result);
var add1=function(a,b){
return a+b;
}
var result=add1(20,20);
document.write(result);
</script>
</body>
</html>
js对象
数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//定义数组
var arr=new Array(1,2,3,4);
document.write("输出arr[0]:",arr[0]);
document.write("<br>\n")
document.write("输出arr[1]:",arr[1]);
document.write("<br>\n")
//特点:长度可变,类型可变
var arr=[1,2,3,4,];
arr[4]=50;
document.write("输出arr[4]:",arr[4]);
document.write("<br>\n")
arr[5]="A";
document.write("输出arr[5]:",arr[5]);
document.write("<br>\n")
for (let i = 0; i < arr.length; i++) {
document.write(arr[i]);
}
document.write("<br>\n")
//forEach
arr.forEach(function (e)
{
document.write(e);
})
document.write("<br>\n")
//ES6箭头函数:(形参列表)=>{函数体}
arr.forEach((e)=>{
document.write(e)
})
document.write("<br>\n")
//push
arr.push(7,8,9)
document.write(arr)
document.write("<br>\n")
//splice(m,n)从第m位起删除n个元素
arr.splice(2,2);
document.write(arr);
</script
</body>
String对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str=new String("hello String ");
document.write(str);
document.write("<br>\n");
var str=("hello String");
document.write(str);
document.write("<br>\n");
//length
document.write("str的长度:"+str.length);
document.write("<br>\n");
//charAt
document.write(str.charAt(4));
document.write("<br>\n");
//IndexOf
document.write(str.indexOf("lo"));
document.write("<br>\n");
//trim
var s=str.trim();
document.write(s);
document.write("<br>\n");
//substring(start,end)含头不含尾
document.write(str.substring(0,5));
</script>
</body>
</html>
JSON对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var user={
name:"Tom",
age:10,
gender:"male",
eat:function(){
document.write("用膳~");
document.write("<br>\n");
// eat:{
// document.write("用膳~")
// }
}
}
document.write(user.name);
document.write("<br>\n");
user.eat();
//json
var jsonStr='{"name":"Jerry","age":20,"addr":["北京","上海","西安"]}';
//json字符串=>js对象
var obj=JSON.parse(jsonStr);
document.write(obj.name);
document.write("<br>\n");
//js=>JSON
document.write(JSON.stringify(obj));
</script>
</body>
</html>
BOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.alert("Hello window");
//window.confirm("您是否要删除这些信息?");
var flag=confirm("您是否要删除这些信息?");
alert(flag);
var i=0;
window.setInterval(function(){
i++;
document.write("定时器执行了"+i+"次");
document.write("<br>\n");
},3000);
window.setTimeout(function(){
i++;
document.write("定时器执行了"+i+"次");
document.write("<br>\n");
},3000);
</script>
</body>
</html>
DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue基础代码/js/vue.js"></script>
</head>
<body>
<img id="h1" src="../off.gif"><br><br>
<div class="cls">武汉科技大学</div><br>
<div class="cls">信息管理系</div><br>
<input type="checkbox" name="hobby">网页设计
<input type="checkbox" name="hobby">java程序设计
<input type="checkbox" name="hobby">数据结构<br>
</body>
<script>
/* //id
var img=document.getElementById('h1');
//tag
var divs=document.getElementsByTagName('div');//返回值是数组
for(let i=0;i<divs.length;i++)
{
document.write(divs[i]);
document.write("<br>\n");
}
//name
var hobbys=document.getElementsByName('hobby');
for(let i=0;i<hobbys.length;i++)
{
document.write(hobbys[i]);
document.write("<br>\n");
}
//class
var clss=getElementsByClassName('cls');
for(let i=0;i<clss.length;i++)
{
document.write(clss[i]);
}*/
/* var divs=document.getElementsByClassName('cls');
var div1=div[0];
div1.innerHTML="传智教育666"; */
//点亮灯泡
var img=document.getElementById('h1');
img.src="../on.gif";
//在div后面加very good
var divs=document.getElementsByTagName('divs');
for(let i=0;i<divs.length;i++)
{
const div=divs[i];
div.innerHTML+="<font color ='red'>very good</font>";
}
var ins=document.getElementsByName('hobby');
for(let i=0;i<ins.length;i++)
{
const check=ins[i];
check.checked=true;
}
</script>
</html>
事件监听
事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
function on(){
alert("按钮1被点击了!");
}
document.getElementById('btn2').onclick=function(){
alert("按钮2被点击了");
}
</script>
</html>
事件绑定TEST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" style="text-align:center;"onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input type="submit" id="b1" value="提交">
<input type="button" id="b1" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<table width="800px" border="1px" cellspacing="0" align="center" onmousemove="over()" onmouseout="out()">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀 </td>
</tr>
</table>
</body>
<script>
function load(){
console.log("页面加载完成......");
}
function fn1(){
console.log("我被点击了......");
}
function bfn(){
console.log("失去焦点......")
}
function ffn(){
console.log("获得焦点......")
}
function kfn(){
console.log("键盘被敲下......")
}
function over(){
console.log("鼠标移入了......")
}
function out(){
console.log("鼠标移出了......")
}
function subfn(){
alert("表单被提交了...")
}
</script>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/5b4cc1d68f11e82bcb88ff0e41ac14bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7bbc1289249800e4580ba90fceda25d9.png)
事件监听案例
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../off.gif" id="light" ><br><br>
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">
<br><br>
<input type="text" id="name" value="ITCAST" onblur="upper()" onfocus="lower()">
<br><br>
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
</body>
<script>
function on(){
var img=document.getElementById('light');
img.src="../on.gif";
}
function off(){
var img=document.getElementById('light');
img.src="../off.gif";
}
function lower(){
var input=document.getElementById("name");
input.value=input.value.toLowerCase();
}
function upper(){
var input=document.getElementById("name");
//转大写
input.value=input.value.toUpperCase();
}
function checkAll(){
var hobbys=document.getElementsByName("hobby");
for(let i=0;i<hobbys.length;i++)
{
const element=hobbys[i];
element.checked=true;
}
}
function reverse(){
var hobbys=document.getElementsByName('hobby');
for(let i=0;i<hobbys.length;i++)
{
const element=hobbys[i];
element.checked=false;
} }
</script>
</html>