收藏
批改状态：合格
老师批语：鼠标事件是最常用的, 也不多, 好好学
练习Javascript基础语句与常用方法
实例
<!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>JS基础语法练习2</title>
</head>
<body>
<div style="background: goldenrod;width:300px;height:80px;border-radius: 3px;" onmouseover="over()" onmouseenter="enter()" onmouseout="out()" onmouseleave="leave()">
<div style="background: red;width:300px;height:30px;"> <input type='telphone' placeholder="telphone" /></div>
<br>
<input type='text' placeholder="email" onblur="checks()" /><br>
</div>
<select name="" id="" onchange="change()">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<script>
//条件语句主要有：if else语句 和 switch语句
if (typeof(o) == "undefined") {
o = new Object;
}
function sort(a, b) {
if (a > b) {
a = a - b;
b = a + b;
a = b - a;
}
console.log(a + ',' + b);
}
var a = 8,
b = 5;
sort(a, b); //两个数从小到大排序；
//对于多条件的嵌套结构，可以使用switch语句
var theClass = prompt('请输入您的班级：', "");
switch (theClass) {
case "1":
alert("您是一班的学生！");
break;
case "2":
alert("您是二班的学生！");
break;
case "3":
alert("您是三班的学生！");
break;
default:
alert("没有这个班级！");
}
//循环语句有for 和 while (do while)
for (var i = 0; i < 5; i++) {
console.log(i);
}
for (var i in document) {
// console.log("document." + i + "<br>");
}
var m = 0;
while (m < 3) {
console.log(m);
m++;
}
do {
console.log(m);
m--;
} while (m > 0);
/*
对象是无序的数据集合，数组是有序的数据集合
数组的定义有以下几种方式：
1、var a = new Array();
2、var a = new Array(1,2,3,"4","5");
3、var a = new Array(6);
4、var a = Array(6);
5、var a = [1,2,3,"4","5"];
*/
var arr = [1, 2, 3, "4", "5"];
//存取数组
alert(arr[2]);
//获取数组长度
alert(arr.length);
//数组与字符串互换
var str = arr.join("-");
alert(str);
var sarr = str.split("-");
console.log(sarr);
//数组的排序
var aarr = [3, 2, 5, 4, 1];
var rraa = aarr.reverse();
//从大到小排序
var f = function(x, y) {
return y - x;
}
var dcba = aarr.sort(f);
//从小到大
var abcd = aarr.sort(function(x, y) {
return x - y;
});
//连接数组：将参数追加到指定数组中可以用concat()，如果参数中包含数组，则把数组元素展开添加到数组中；
var baddin = aarr.concat([4, 5], [1, [2, 3]]);
//输出为：[3,2,5,4,1,4,5,1,2,3]
//截取子数组
var sub_arr = aarr.slice(2, 2);
//给数组添加元素的方法：
aarr[6] = 8; //一般不要用；
aarr[aarr.length] = 8;
aarr.push('55'); //添加到数组末位 +
aarr.pop(); //弹出末位的元素，-
aarr.shift(); //弹出第一个元素 -
aarr.unshift('a'); //添加到第一位 +
/*splice()可以实现删除、插入、替换
删除：splice(起始位置，要删除的项数)
插入：splice(起始位置，0（要删除的项数），要插入的项)
替换：splice(起始位置，要删除的项数，要插入的项)，删除的项数与插入的项数不用相等；
splice()始终都会返回一个数组，该数组包含从原始数组中删除的项，如果没有删除项，则返回一个空数组；
*/
var splice_arr = [1, 7, 3, 9, 2, 0, 5, 8];
var arrRemoved = splice_arr.splice(0, 2); //截取的部分，原数组留剩下的部分；
var arrRemoved2 = splice_arr.splice(2, 0, 4, 6); //从第二位开始，不删除，插入4，6；
var arrRemoved3 = splice_arr.splice(1, 2, 3, 6); //从第一位起，删除两位，插入3，6；
/*
indexOf(要查找的项，[起始位置的索引]):从数组的[某个位置开始]（默认从开头开始），向后查找；
lastIndexOf()：默认从末位开始向前查找；
两个方法都返回查找项在数组中的位置，没有找到返回-1，查找参数使用全等操作；
*/
alert(splice_arr.indexOf(0, 2));
/*
还有一些新的操作方法：
1、forEach()：遍历数组，对数组的每一项运行给定的函数；其中函数的参数为：数组的值、数组的索引、数组本身；
2、map()：数组中的每一项传给指定的匿名函数运行，返回函数的结果组成的数组；
3、filter():数组中的每一项传给指定的匿名函数，返回满足过滤条件组成的数组；
4、every()：判断数组的每一项是否都满足匿名函数指定的条件，只有都满足，才返回True;
5、some()：判断数组的每一项是否有满足匿名函数指定的条件，只要有一项满足，就返回True;
6、reduce() 和 reduceRight()：实现迭代数组的所有项，然后构建一个最终返回的值。一个从左往右，一个相反进行；
*/
//地址跳转使用如下两种方法：
// window.location.href = 'https://www.baidu.com'; //直接跳转
// window.open('https://www.baidu.com'); //打开新窗口，谷歌默认会拦截
function change() {
alert('value改变了');
}
function checks(params) {
alert('检查email是否合法');
}
function over() {
console.log('鼠标over了');
}
function enter() {
console.log('鼠标enter了');
}
function out() {
console.log('鼠标out了');
}
function leave() {
console.log('鼠标leave走了');
}
/*
onmouseover 和 onmouseout 对于有子元素的元素使用时，其中的子元素也会继承这个绑定的事件，所以会触发多次，此时应该用
onmouseenter 和 onmouseleave来判断鼠标的事件；
如果没有子元素，这两个事件都可以用，没有什么差别。
*/
</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
