Java Script 是基于对象的脚本语言,而不是面向对象中所使用的那个对象,之所以说JS是一门基于对象的编程语言,是因为它没有提供抽象,继承,封装等面向对象语言的很多功能,而是把其他语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统.
JavaScript 基本变量
JS代码引入: 在body标签的区域内直接使用方式来引用代码,或者是在head头部也可以直接引用.
<head>
<meta charset="UTF-8">
<script src="jquery-3.4.1.js" type="text/javascript"></script>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> alert("hello lyshark") </script>
</head>
定义局部变量: 如下函数内局部变量必须以var开头,如果在函数内未使用var,系统默认也是定义局部变量.
<body>
<script type="text/javascript">
function func() {
names = "lyshark"; // 函数内部默认转成局部变量
var age = 21; // 定义局部变量标准写法
gender = "Man"; // 默认局部变量
alert("姓名:" + names);
alert("年龄:" + age);
alert("性别:" + gender);
}
func() // 调用函数,不掉用则不执行
</script>
</body>
定义全局变量: 如果我们想要定义全局变量,只需要在函数体外部定义,解释器默认将外部变量当成全局变量.
<body>
<script type="text/javascript">
var func_names = "lyshark" // 定义全局变量
func_novar = "hello" // 定义全局变量
function func()
{
alert("打印全局变量:" + func_names)
alert("打印全局变量:" + func_novar)
}
func() // 调用函数
</script>
</body>
JavaScript 数值类型
整数变量: 使用显式方式声明三个变量,num1=1024,num2=5E2,num3=1.23e-3.
<body>
<script type="text/javascript">
var num1 = 1024;
var num2 = 0x1A;
var num3 = 10;
var num4 = 20;
document.write("两个数相加:" + (num3 + num4 ))
</script>
</body>
浮点数变量: 分别声明四个浮点数变量,其中表示方式可以有以下四种形式.
<body>
<script type="text/javascript">
var num1 = 3.5659;
var num2 = -8.1E12;
var num3 = .1e12;
var num4 = 32E-12;
document.write("输出一个浮点数:" + num2)
</script>
</body>
特殊的数值: 除了上面的数值表示类型外,JS默认定义了一些常量用来表示更多的类型值.
<body>
<script type="text/javascript">
document.write("表示无穷大的特殊值:" + Infinity)
document.write("特殊的非数字值:" + NaN)
document.write("表示最大值:" + Number.MAX_VALUE)
document.write("表示最小值:" + Number.MIN_VALUE)
document.write("特殊的非数字值:" + Number.NaN)
document.write("表示正无穷大的特殊值:" + Number.POSITIVE_INFINITY)
document.write("表示负无穷大的特殊值:" + Number.NEGATIVE_INFINITY)
</script>
</body>
数字转换: parseInt(..)方法,可以实现将一个字符串转换成整数,如果不成功则返回NaN.
<body>
<script type="text/javascript">
str = "1024";
console.log(typeof str) //输出字符串格式
num = parseInt(str) //将字符串转成数值,赋值给num
console.log(num) //打印这个数值
</script>
</body>
转浮点数转换: parseFloat(..)方法,可以实现将一个字符串转换成浮点数,如果不成功则返回NaN.
<body>
<script type="text/javascript">
str = "1024";
console.log(typeof str) //输出字符串格式
num = parseFloat(str) //将字符串转成浮点数,赋值给num
console.log(num) //打印这个数值
</script>
</body>
常用数值函数: 这里举三个例子,分别代表判断有限值,保留小数点,和保留小数点后几位.
<body>
<script type="text/javascript">
var num1 = 1024;
var num2 = 3.16159;
var num3 = 100;
document.write("判断是否为有限值: " + isFinite(num1) + "<br>")
document.write("指定要保留的小数点位数: " + num2.toFixed(2) + "<br>")
document.write("保留小数点后2位: " + num3.toFixed(2))
</script>
</body>
基本类型转换: 基本类型转换String:将字数字转成字符串,Number:将其他类型转为整数,Boolean:其他类型转成布尔类型.
<body>
<script type="text/javascript">
document.write("其他类型转换为字符串: " + String(1024) + "<br>");
document.write("其他类型转换为数值:" + Number("hello") + "<br>");
document.write("其他类型转换为布尔:" + Boolean(1) + "<br>");
</script>
</body>
字符串转成整数: 字符串之间的数据转换,与进制转换实例.
<body>
<script type="text/javascript">
document.write("将a转换成整数: " + parseInt("a") + "<br>");
document.write("将a转换成8进制,整数: " + parseInt("a",8) + "<br>");
document.write("将a转换成2进制,整数: " + parseInt("a",2) + "<br>");
document.write("将a转换成浮点数: " + parseFloat("a") + "<br>");
</script>
</body>
数学计算: Math主要用于对数值进行科学计算,这里只展示基本的.
<body>
<script type="text/javascript">
// console.dir(Math);
document.write("取出PI: " + Math.PI + "<br>");
document.write("获取绝对值: " + Math.abs(-12.5) + "<br>");
document.write("获取绝对值: " + Math.abs(-12.5) + "<br>");
document.write("向上取整数: " + Math.ceil(-12.5) + "<br>");
document.write("向下取整数: " + Math.floor(-12.5) + "<br>");
document.write("四舍五入: " + Math.round(22.5) + "<br>");
document.write("返回最大: " + Math.max(1,6,7,9,3,2) + "<br>");
document.write("返回最小: " + Math.min(1,6,7,9,3,2) + "<br>");
document.write("开平方: " + Math.sqrt(18) + "<br>");
document.write("计算字串: " + eval("11+22") + "<br>");
document.write("取随机数: " + Math.random() + "<br>");
document.write("获取1,10之间随机数: " + Math.round(Math.random()*(10-1)+1)+ "<br>");
</script>
</body>
JavaScript 字符串型
obj.length 获取字符串长度
obj.toString() 将数组转换成字串
obj.trim() 移除字符串中空白
obj.trimLeft() 移除字符串中左边空白
obj.trimRight() 移除字符串中右边空白
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 两个或者多个字符串拼接
obj.indexOf(substring,start) 返回指定字符串在字符串中首次出现的位置
obj.lastIndexOf(substring,start) 返回该元素在字符串中最后一次出现的位置
obj.substring(from,to) 提取字符串中介于两个指定下标之间的字符
obj.slice(start,end) 从已有字符串数组中返回选定的元素,切片
obj.split(delimiter,limit) 用于把一个字符串分割成字符串数组,分割
obj.toLowerCase() 将小写字符串转换成大写
obj.toUpperCase() 将大写字符串转换成小写
obj.search(regexp) 从头开始匹配,返回匹配成功的第一个字符串位置,g无效
obj.match(regexp) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个
obj.replace(regexp,replacement) 正则替换,正则中有g则替换所有,否则只替换第一个匹配项
$数字：匹配的第n个组内容
$&：当前匹配的内容
$`：位于匹配子串左侧的文本
$'：位于匹配子串右侧的文本
$$：直接量$符号
统计字串长度: 使用length方法获取字符串的长度,并返回,可以直接返回,也可以赋值给变量.
<body>
<script type="text/javascript">
var string = " hello lyshark 欢迎来到中国!";
var num = string.length;
document.write("统计字符串长度: " + string.length + "<br>")
document.write("另一种统计长度的方法: " + num)
</script>
</body>
移除字串空格: 通过使用trim()移除字符串两边空格,trimLeft(),trimRight()可以分别移除左边和右边空格.
<body>
<script type="text/javascript">
var obj = " lyshark ";
document.write("统计字符串大小: " + obj.length + "<br>")
document.write("去除两边的空格: " + obj.trim() + "<br>")
document.write("统计字符串大小: " + obj.length + "<br>")
</script>
</body>
字符串拼接: 使用concat(,)将两个或者多个字符串拼接在一起形成一个新的字符串.
<body>
<script type="text/javascript">
var string1 = "hello ";
var string2 = "lyshark";
var string3 = "welcome";
document.write("拼接一个字串: " + string1.concat(string2) + "<br>")
document.write("拼接多个字串: " + string1.concat(string2,string3) + "<br>")
</script>
</body>
字符串提取: 使用indexOf定位首次出现的位置,lastIndexOf定位最后出现的位置,substring实现提取任意字符串.
<body>
<script type="text/javascript">
var str = "Hello World!";
document.write("Hello 首次出现的位置: " + str.indexOf("Hello") + "<br/>")
document.write("World 首次出现的位置: " + str.indexOf("World") + "<br/>")
document.write("如果没有出现过默认-1: " + str.indexOf("world"))
</script>
</body>
<body>
<script type="text/javascript">
var str = "Hello World! Hello lyshark!";
document.write("Hello 最后出现的位置: " + str.lastIndexOf("Hello") + "<br/>")
document.write("World 最后出现的位置: " + str.lastIndexOf("World") + "<br/>")
document.write("如果没有出现过默认-1: " + str.lastIndexOf("world"))
</script>
</body>
<body>
<script type="text/javascript">
var str = "Hello World!";
document.write("从0偏移取数据,向后取5个: " + str.substring(0,5) + "<br>")
document.write("从0偏移取数据,向后取11个: " + str.substring(0,11) + "<br>")
document.write("从3偏移取数据,向后取7个: " + str.substring(3,7))
</script>
</body>
切片与分割: 通过使用slice()方法切割数组,split()方法用来切割字符串转换成数组.
<body>
<script type="text/javascript">
var array = new Array(5)
array[0] = "LyShark";
array[1] = "Admin";
array[2] = "John";
array[3] = "Adrew";
document.write("返回整个数组: " + array + "<br>")
document.write("返回[1]-[2]元素: " + array.slice(1,3) + "<br>")
</script>
</body>
<body>
<script type="text/javascript">
var str = "hello world my names lyshark !";
var test = "a:b:c:d:e:f:g:h"
document.write("以空格作为分隔符分割字串: " + str.split(" ") + "<br>")
document.write("将每个字母单独变成一个数组: " + str.split("") + "<br>")
document.write("以空格分隔,只分割前三个单词: " + str.split(" ",3) + "<br>")
document.write("以冒号作为分隔符,分割元素: " + test.split(":"))
</script>
</body>
字符串查找: 查找字符串并返回所在位置,search() 和 match()方法作用基本一致,查找时支持正则匹配.
<body>
<script type="text/javascript">
var string = "hello world my names lyshark my world !";
document.write("精确查找字符串: " + string.search("lyshark") + "<br>")
document.write("精确检索字符串: " + string.search(/my/) + "<br>")
document.write("忽略大小写检索: " + string.search(/world/i) + "<br>")
</script>
</body>
<body>
<script type="text/javascript">
var string = "hello world my names lyshark my world 123 456 !";
document.write("精确查找字符串: " + string.match("lyshark") + "<br>")
document.write("全局匹配\d数字: " + string.match(/\d+/g) + "<br>")
</script>
</body>
字符串替换: 查找并替换字符串,可以使用replace()方法,该方法也支持正则表达式.
<body>
<script type="text/javascript">
var string = "hello world welcome to lyshark.com hello lyshark HELLO lyshark!";
document.write("查找welcome替换成xxxx: " + string.replace(/welcome/,"xxxx") + "<br>")
document.write("全局查找替换hello并替换: " + string.replace(/hello/g,"oooo") + "<br>")
document.write("匹配替换并区分大小写: " + string.replace(/HELLO/,"gggg") + "<br>")
</script>
</body>
字符串与数组互转: 将指定字符串转换为数组,或者将数组转换为指定字符串.
var str = 'posted @ 2020-01-01 08:00 lyshark 阅读 (23) 评论 (0)';
var ary = str.split(" "); // 字符串转数组
var new_str = ary.join(" ") // 数组转字符串
var divArr =$('.day .postDesc');
$.each(divArr,function(i,n){
console.log(n.innerText);
});
时间字符串处理: 将指定的时间字符串格式差分或组合成任意格式的时间显示.
<body>
<script type="text/javascript">
let time;
// 方法一：输出为 2020年08月05 12时22分11秒
time = "2020-08-05 12:22:11";
time = time.replace('-','年').replace('-','月').replace('-','日').replace(':','时').replace(':','分') + '秒';
document.write("日期转换: " + time + "<br>");
// 方法二：输出为 2020/08/05
time = "2020-08-05 12:22:11";
let n = time.indexOf('-');
let m = time.lastIndexOf('-');
let x = time.indexOf(' ');
let year = time.substring(0,n);
let month = time.substring(n+1,m);
let day = time.substring(m+1,x);
document.write("日期: " + year + "/" + month + "/" + day + "<br>");
// 拆分日期
time = "2020-08-05 12:22:11";
let data = time.split(' ');
m = data[0].split('-');
x = data[1].split(':');
console.log("日期: " + m + "时间: " + x);
// 正则拆分,addZero不足两位自动补齐0
let addZero = val => val.length < 2 ? '0' + val:val;
time = "2020-08-05 12:22:11";
let array = time.split(/(?: |-|:)/g);
console.log(array[0] + " " + addZero(array[1]));
</script>
</body>
处理字符串路径: 实现将一个字符串URL路径,拆分为一个键值对类型的数据类型.
<body>
<script type="text/javascript">
let url = "https://baidu.com/index.php?id=1&name=lyshark&pid=1023&teacher=admin#1E2c";
let result = {};
let askIndex = url.indexOf('?');
let wellIndex = url.indexOf('#');
let askText = url.substring(askIndex+1,wellIndex);
let wellText = url.substring(wellIndex+1);
console.log("得到字符串: " + askText);
let askArray = askText.split('&');
console.log("得到字符串数组: " + askArray);
// 得到 key=value 结构
askArray.forEach(item =>{
let n = item.split('=');
let key = n[0];
let value = n[1];
result[key] = value;
document.write(key + " : " + value + "<br>");
});
result['Hash'] = wellText;
console.log(result);
</script>
</body>
日期时间字符串: 获取本机的日期和时间,并且将其转换为我们想要的格式.
<body>
<script type="text/javascript">
function addZero(val)
{
val = Number(val);
return val < 10 ? '0' + val : val;
}
var now = new Date();
let year = now.getFullYear(),month = now.getMonth()+1,day = now.getDate(),
week = now.getDay(),hours = now.getHours(),minutes = now.getMinutes(),seconds = now.getSeconds();
let weekArray = ['日','一','二','三','四','五','六'];
let result = year + "年" + month + "月" + day + "日";
result += " 星期" + weekArray[week] + " ";
document.write("当前日期: " + result + "<br>");
let result_time = " " + addZero(hours) + ":" + addZero(minutes) + ":" + addZero(seconds);
document.write("当前时间: " + result_time + "<br>");
document.write("采用UTC时区表示: " + now.toUTCString(now.getTime()) + "<br>");
document.write("采用本地时区表示: " + now.toLocaleString(now.getTime()) + "<br>");
document.write("采用本地时区表示日期: " + now.toDateString(now.getTime()) + "<br>");
document.write("采用本地中国标准时间: " + now.toTimeString(now.getTime()) + "<br>");
document.write("采用本地时区表示2019/02/21: " + now.toLocaleDateString(now.getTime()) +"<br>");
document.write("采用本地时区表示4:01:55 : " + now.toLocaleTimeString(now.getTime()) +"<br>");
</script>
</body>
日期对象处理字符串:
<body>
<script type="text/javascript">
// 字符串补全函数
function addZero(val)
{
val = Number(val);
return val < 10 ? '0' + val : val;
}
// 字符串格式化函数
function formatTime(time)
{
// let array = time.split(/(?: |-|:)/g);
let array = time.split(' ');
let array_left = array[0].split('-');
let array_right = array[1].split(':');
let new_array = array_left.concat(array_right);
return new_array;
}
let time = "2020-07-22 11:12:54";
let result = formatTime(time);
document.write("拆分年份: " + result[0] + "<br>");
</script>
</body>
封装模板字符串: 通过传递模板,实现对时间日期的自定义转换.
<body>
<script type="text/javascript">
// 封装字符串格式化方法
String.prototype.formatTime = function formatTime(template)
{
typeof template === 'undefined'? template="{0}年{1}月{2}日 {3}:{4}:{5}":null;
let array = this.match(/\d+/g);
// 模板和数据渲染
template = template.replace(/\{(\d+)\}/g,(x,y) => {
let val = array[y] || '00';
val.length < 2 ? val='0'+val: null;
return val;
});
return template;
}
let time = "2020-08-22 12:22:11";
console.log(time.formatTime());
console.log(time.formatTime("{0}年/{1}月"));
</script>
</body>
URL字符串转义: 返回一个对URI字符串编码后的结果,URI表示的范围比URL要大.
<body>
<script type="text/javascript">
var urlstr = encodeURI("http://www.lyshark.com/index.html country=中国")
document.write("URI转义字符: " + urlstr + "<br>")
var urlstr = encodeURIComponent("http://www.lyshark.com/index.html country=中国")
document.write("转义URI组件: " + urlstr + "<br>")
var urlde = decodeURI("http://www.lyshark.com/index.html%20country=%E4%B8%AD%E5%9B%BD")
document.write("URI解码: " + urlde + "<br>")
var urlde = decodeURIComponent("%2Findex.html%20country%3D%E4%B8%AD%E5%9B%BD")
document.write("URI组件解码: " + urlde)
</script>
</body>
字符串转换: 使用escape()方法对字符串进行转义处理,unescape()则负责将代码解码.
<body>
<script type="text/javascript">
var encode = escape("中国")
document.write("字符串转换: " + encode + "<br>")
var decode = unescape("%u4E2D%u56FD")
document.write("字符串解码: " + decode)
</script>
</body>
字符串序列化: 使用JSON方法将数组序列化存储,方便数据传输.
<body>
<script type="text/javascript">
var array = [1,2,3,4,5]
ret = JSON.stringify(array) //序列化,将其他类型转换成字符串
document.write("序列化后的类型: " + typeof(ret) + "<br>")
document.write("反序列化,加载结果: " + JSON.parse(ret) + "<br>")
let obj = {"name":"lyshark"};
ret = JSON.stringify(obj);
document.write("反序列化: " + ret)
let obj1 = {"age":22},obj2 = {"age":33};
let obj_array = [];
obj_array.push(obj1);
obj_array.push(obj2);
console.log(obj_array);
</script>
</body>
正则匹配字符串: 一些常用的正则匹配函数,正则表达式是通用的.
<body>
<script type="text/javascript">
var string = "hello123world567mynames;"
document.write("Match全局匹配: " + string.match(/\d+/g) + "<br>");
document.write("Search取出第一个结果的索引值: " + string.search(/\d+/g) + "<br>");
document.write("Split取出第一个结果的索引值: " + string.split(/\d+/g) + "<br>");
var reg = RegExp("\d+",g);
document.write("测试字符是否存在: " + reg.test("names123123lyshark456,789") + "<br>");
</script>
</body>
JavaScript 数组类型
obj.length 获取数组的大小
obj.push(ele) 给数组尾部追加元素
obj.pop() 从尾部获取一个元素
obj.unshift(ele) 在数组头部插入元素
obj.shift(ele) 在数组头部移除元素
obj.slice() 数组元素的切片
obj.concat(val,..) 多个数组相连接
obj.join(sep) 将数组连接起来变成字符串
obj.sort() 对数组元素进行排序
obj.reverse() 反转数组中的元素
obj.splice(n,0,val) 在数组指定位置插入元素
obj.splice(n,1,val) 在数组指定位置替换元素
obj.splice(n,1) 在数组指定位置删除元素
定义一维数组: 以下案例定义了3个数组,并且分别给数组赋值,然后打印结果.
<body>
<script type="text/javascript">
var array = [1,2,3,4,5]; //创建数组,并有5个元素
var array1 = []; //创建空数组
var array2 = new Array() //同样创建空数组
array1[0] = "hello";
document.write("数组array大小: " + array.length + "<br>");
for(let i=0;i<array.length;i++)
{
document.write(array[i] + "<br>");
}
array.forEach((item,index) => {console.log(item,index)});
</script>
</body>
定义二维数组: 以下案例定义了3个数组,并且分别给数组赋值,然后通过循环语句打印数组值.
<body>
<script type="text/javascript">
var value = [[1,2,3],[4,5,6],[7,8,9,10]]; //创建二维数组
document.write("数组value大小: " + value.length + "<br>") //打印数组大小
document.write("数组value[2]大小: " + value[2].length + "<br>") //打印数组大小
for(var i=0;i<3;i++) //循环输出数组元素
{
for(j in value[i]) //输出每个数组元素的值
{
document.write(" " + value[i][j]);
}
document.write("<br>")
}
</script>
</body>
数组嵌套字典: 在数组中嵌套字典,并通过遍历得到字典中的每个值.
<body>
<script type="text/javascript">
let person = {
name: "lyshark",
age: 22
};
document.write("姓名: " + person['name'] + "<br>");
person.age = 100;
document.write("年龄: " + person.age + "<br>");
let array = [];
let var1 = {"name": "admin","age": 22};
let var2 = {"name": "lyshark","age": 33};
array.push(var1);
array.push(var2);
console.log("数组中的字典: " + array);
array.forEach(item =>{
console.log("遍历姓名: " + item['name'],"遍历年龄: " + item['age']);
});
</script>
</body>
PUSH/POP 结尾插入删除: 通过该命令可实现在数组结尾追加新元素,也可从结尾删除元素.
<body>
<script type="text/javascript">
var list = [1,2,3,4,5];
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
list.push(6)
list.push(7) //在结尾添加新元素
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
list.pop()
list.pop() //在结尾删除元素
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
</script>
</body>
Shift/Unshift 开头插入删除: 该命令可以实现在数组元素的头部添加元素,或者是删除头部的元素.
<body>
<script type="text/javascript">
var list = [4,5,6];
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
list.unshift(3)
list.unshift(2)
list.unshift(1) //在开头添加元素
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
list.shift()
list.shift() //从开头删除一个元素
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
</script>
</body>
Splice 替换数组元素: 通过使用splice()方法,实现对元素的各种替换操作.
<body>
<script type="text/javascript">
var array = new Array(5)
array[0] = "admin";
array[1] = "guest";
array[2] = "lyshark";
array[3] = "wall";
document.write("当前列表: " + array + "<br>")
array.splice(2,1,"替换成我") //把第2个元素替换,替换1次
document.write("替换列表: " + array + "<br>")
let ary = [10,20,30,40,50];
let res = ary.splice(1,2,'aaa','bbb') //针对多个元素的一次性替换
document.write("数组替换后: " + ary + "<br>")
array.splice(5,1,"插入新元素") //在第5个位置上插入新元素
document.write("插入列表: " + array + "<br>")
array.splice(1,3,"删除元素") //删除第2个位置以后2个元素
document.write("删除列表: " + array + "<br>")
array.splice(array.length,0,"aaa") //向数组末尾追加aaa
document.write("开头追加元素: " + array + "<br>")
array.splice(0,0,"bbb") //向数组开头追加bbb
document.write("末尾追加元素: " + array + "<br>")
</script>
</body>
slice 切片与克隆: 使用slice()方法实现数组的切片与克隆,原数组不受影响.
<body>
<script type="text/javascript">
var array = [1,2,3,4,5,6,7,8,9];
document.write("数组切片(从1号索引开始显示元素): " + array.slice(1) + "<br>")
document.write("数组切片(从3号索引开始显示元素): " + array.slice(3) + "<br>")
document.write("数组切片(只显示1-2号元素切片): " + array.slice(1,3) + "<br>")
var res = new Array();
res = array.slice(0);
document.write("浅克隆数组到res: " + res + "<br>")
</script>
</body>
join 指定分隔符: 转换字符串与分隔符分割.
<body>
<script type="text/javascript">
let ary1 = [1,2,3,4,5];
let ary2 = [6,7,8,9,10];
let res = ary1.concat('0',ary2);
document.write("数组res: " + res + "<br>")
let str_ary = res.toString();
document.write("转为字符串: " + str_ary + "<br>")
document.write("转换字符串: " + [3].toString() + "<br>")
let res2 = ary2.join("+");
document.write("指定分隔符: " + res2 + "<br>")
document.write("ary2数组求和: " + eval(res2) + "<br>")
</script>
</body>
IndexOf 验证数组: 检测数组中是否包含某一项值.检测当前项在数组中第一次或最后一次出现位置索引值.
<body>
<script type="text/javascript">
let ary1 = [1,2,3,4,5,1,2,3];
document.write("第一次出现索引: " + ary1.indexOf(2) + "<br>")
document.write("最后出现的索引: " + ary1.lastIndexOf(4) + "<br>")
if(ary1.indexOf(3)>=0)
{
document.write("包含有3这个元素 <br>")
document.write("includes验证: " + ary1.includes(3) + "<br>")
}
</script>
</body>
Sort 数组排序: 使用sort()方法实现数组的正向排列,reverse()则实现数组的反向排列.
<body>
<script type="text/javascript">
var array = [12,65,77,89,32,-19,54,33,78]
document.write("正向排序: " + array.sort() + "<br>")
document.write("反向排序: " + array.reverse() + "<br>")
let ary = [7,5,33,88,90,32,5,4,6]
ary.sort(function(a,b) {
document.write(a + " " + b + "<br>")
return a-b; // 升序
// return b-a; // 降序
})
</script>
</body>
实现数组去重: 分别提供了多种方法,实现对特定数组中的数值进行去重,只保留一份.
<body>
<script type="text/javascript">
var array = [1,2,3,4,5,1,2,3,6,7,8,9,3,2,6,87,9,0,5,4];
var new_array = [];
// 方法1
for(let x=0;x<array.length;x++)
{
let item = array[x];
// 验证新数组中是否存在重复值
if(new_array.includes(item) == 0)
{
new_array.push(item);
}
}
document.write("数组大小: " + array.length + "<br>")
document.write("原数组: " + array + "<br>");
document.write("新数组: " + new_array + "<br><br>");
// 方法2
new_array = []
array.forEach(item => {
if(new_array.includes(item)) return;
new_array.push(item);
});
document.write("新数组: " + new_array + "<br><br>");
// 方法3,在原数组中去重
for(var x=0; x<array.length; x++)
{
var item = array[x];
// 用当前项分别和后面的每一项作比较
for(var y=x+1; y<array.length; y++)
{
var compare = array[y];
if(compare == item)
{ // 如果找到相等的则直接在原数组中删除
array.splice(y,1);
y--;
}
}
}
document.write("原数组操作: " + array + "<br>");
</script>
</body>
高效数组去重:
<body>
<script type="text/javascript">
function unique(array)
{
let obj = {};
for(let x=0; x<array.length; x++)
{
let item = array[x];
if(obj[item] !== undefined)
{
array[x] = array[array.length-1];
array.length--;
x--;
continue;
}
obj[item] = item;
}
return array;
}
var array = [1,2,3,4,5,1,2,3,6,7,8,9,3,2,6,87,9,0,5,4];
document.write("数组去重: " + unique(array) + "<br>");
</script>
</body>
JavaScript 流程控制
IF 条件判断: 判断if(num1>num2)如果条件满足则执行,否则判断if(num2>num3),满足执行否则执行else里面的代码.
<body>
<script type="text/javascript">
var num1 = 100,num2 = 200,num3 = 10;
if(num1 > num2 || num1 > num3)
{
var temp = num1 - num2;
document.write("num1 大于 num2" + " 比num2多出:" + temp + "<br>")
}
else if(num2 > num3){
var temp = num2 - num3
document.write("num2 大于 num3" + " 比num2多出:" + temp + "<br>")
}
else
{
document.write("没有合适的结果..")
}
</script>
</body>
Switch 选择结构: switch通常用于选择结构,以下代码用户输入一个数值,进入选择结构根据输入数值执行相应代码片段.
<body>
<script type="text/javascript">
var temp;
temp = prompt("请选择输入(1,2,*):","");
switch(temp){
case "1":
document.write("你选择了1号");
break;
case "2":
document.write("你选择了2号");
break;
default:
document.write("你选择了其他选项");
break;
}
</script>
</body>
While 循环结构: 循环执行结构,while会一直循环下去,直到满足(num <=100)的条件则跳出循环,语句语法结构如下.
<body>
<script type="text/javascript">
var num = 0,sum = 0;
while(num <=100)
{
sum = sum +num;
num = num +1;
document.write("当前循环: "+ num + " 当前累加: " + sum);
document.write("<br>")
}
document.write("从1+100...结果是:" + sum)
</script>
</body>
For 循环结构: 通过for循环遍历数组,这里提供了多种遍历写法.
<body>
<script type="text/javascript">
var names = ["admin","guest","lyshark","alex"]
for(var i=0;i<names.length;i++)
{
document.write("当前位置: "+ i +"元素值: " + names[i] + "<br>");
}
for(var index in names)
{
document.write("当前位置: "+ index +"元素值: " + names[index] + "<br>");
}
names.forEach(item =>{ console.log("元素值: " + item); });
</script>
</body>
try..catch: 异常处理,当try里面代码出现问题的时候自动执行catch抛出异常,最后无论是否异常都会执行finally.
<body>
<script type="text/javascript">
try {
// 这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch(e){
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行
// e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally{
// 无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行
}
</script>
</body>
JavaScript 定义函数
普通无参函数: 通过使用关键字function声明了func()无参数的函数.
<body>
<script type="text/javascript">
function func(){
document.write("这个无参数函数被执行了..." + "<br>");
return "ok";
}
var ret = func() //调用函数,并将返回值赋值给ret变量
document.write("函数的返回值是: " + ret);
</script>
</body>
普通有参函数: 通过使用关键字function声明了func()有参数的函数,其中形式参数有name,age,sex.
<body>
<script type="text/javascript">
function func(name,age,sex){
document.write("姓名: " + name + "年龄:" + age + "性别: " + sex + "<br>");
return 0;
}
var ret = func("lyshark","22","Man") //调用函数
document.write("函数的返回值是: " + ret);
</script>
</body>
传递数组地址: 我们不仅仅可以传递单个的参数,还可以将一个预定义好的数组传递到函数体内部.
<body>
<script type="text/javascript">
function show(temp)
{
for(i in temp)
document.write(temp[i] + " ");
document.write("<br>");
}
var array = new Array(1,2,3,4,5,6,7,8,9,10);
show(array) //传递一个数组到函数体,并执行
</script>
</body>
定义匿名函数: 匿名函数,就是没有名字的函数,需要我们手动进行调用,一般情况不会使用.
<body>
<script type="text/javascript">
var func = function(x,y){
document.write("参数1= " + x + "参数2= " + y);
}
func(10,20) //调用匿名函数
</script>
</body>
自执行函数: 自执行函数,也就是说无论我们是否调用它,它都会被执行,适合做初始化工作.
<body>
<script type="text/javascript">
(function(name,url){
document.write("姓名: " + name + "URL: " + url);
})("lyshark","lyshark.com")
</script>
</body>
arguments: 使用特殊对象arguments,开发者无需明确指出参数名,就能访问数据的内部元素.
<body>
<script type="text/javascript">
function func() {
document.write("当前参数长度: " + arguments.length + "<br>");
}
func(1,2,3,4,5);
</script>
</body>
嵌套函数: 函数的嵌套是指在函数体的内部再次嵌套一层函数体,并依次返回执行结果,就是嵌套函数.
<body>
<script type="text/javascript">
function ext_func(){
function func(){
document.write("内部函数执行结果...." + "<br>")
return 1024;
}
ret = func()
return ret
}
ret = ext_func()
document.write("内部函数返回值: " + ret)
</script>
</body>
递归函数: 函数的递归是指函数不停地调用自身,直到满足一定得条件才会自动的跳出循环体.
<body>
<script type="text/javascript">
function func(temp){
if(temp == 1){
return 1;
}else{
return func(temp-1)+2;
}
}
ret = func(5)
document.write("内部函数返回值: " + ret)
</script>
</body>
函数闭包: 通常情况下,我们想调用一个函数内部的嵌套方法,我们可以使用闭包的形式来实现.
<body>
<script type="text/javascript">
function func1(){
var array = [1,2,3,4,5];
function func2() {
return array;
}
return func2;
}
temp = func1() //调用语句返回函数func2对象
document.write("函数返回对象: " + temp + "<br>");
ret = temp() //调用这个对象,最终得到结果
document.write("最终返回值: " + ret);
</script>
</body>
JavaScript DOM编程
GetElementById: 根据ID号获取一个标签,这种方式是最常用的.
<body>
<div id="MyDiv"> hello world </div>
<script type="text/javascript">
var temp = document.getElementById("MyDiv");
document.write("获取到的结果: " + temp.innerText);
</script>
</body>
getElementsByName: 根据自定义标签alex=MyDiv属性获取标签集合.
<body>
<div alex="MyDiv"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var names = document.getElementsByName("alex"); //通过自定义的名称找标签
names.innerText = "www.baidu.com"; //改变元素标签名称
document.write("修改后的内容:" + names.innerText);
</script>
</body>
getElementsByClassName: 根据class类名称属性获取标签集合.
<body>
<div clas="MyClass"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var names = document.getElementsByClassName("MyClass"); //通过类名称找出标签
names.innerText = "www.baidu.com"; //改变元素标签名称
document.write("修改后的内容:" + names.innerText);
</script>
</body>
getElementsByTagName: 根据标签名name="MyDiv"来获取标签集合.
<body>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var names = document.getElementsByName("MyDiv"); //通过标签名称找出标签
names.innerText = "www.baidu.com"; //改变元素标签名称
document.write("修改后的内容:" + names.innerText);
</script>
</body>
querySelector: 通过CSS选择器,查找指定上下文中,指定的元素集合或标签.
<body>
<div id="dd">
<div class="cc"> div 1 </div>
</div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<script type="text/javascript">
// 通过CSS选择器寻找到 div1
let box = document.querySelector('#dd .cc');
console.log(box);
// 找到所有的div标签
let link = document.querySelectorAll('div');
console.log(link[0]);
</script>
</body>
综合案例: DOM 获取到用户选择的选项.
<body>
<div class="formBox">
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<input type="radio" name="sex" value="未知">未知
<button id="submit">button</button>
</div>
<script type="text/javascript">
var sexList = document.getElementsByName('sex');
var submit = document.getElementById('submit');
submit.onclick = function()
{
let res = null;
for(var x=0; x<sexList.length;x++)
{
var item = sexList[x];
if(item.checked)
{
res = item.value;
break;
}
}
console.log("当前选中: " + res);
}
</script>
</body>
innerText: 该方式只能对单纯的标签进行操作,如果标签中嵌入了其他标签,那么该方式会自动过滤掉标签格式.
<body>
<div id="lyshark">hello world</div>
<script type="text/javascript">
var temp = document.getElementById("lyshark"); //通过标签ID获取标签句柄
document.write("原来的内容: " + temp.innerText + "<br>"); //获取标签中原始的内容
temp.innerText = "alex" //修改标签中的内容为alex
document.write("修改后的内容: " + temp.innerText + "<br>"); //获取修改后的标签内容
</script>
</body>
innerHTML: 该方式不但可以修改文本,还可以同时修改HTML的嵌套标签,修改时应加上标签格式.
<body>
<div id="lyshark"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var temp = document.getElementById("lyshark"); //通过标签ID获取标签句柄
document.write("原来的内容: " + temp.innerHTML + "<br>"); //获取标签中原始的内容
temp.innerHTML = '<b> hello alex </b>' //修改标签中的内容为alex
document.write("修改后的内容: " + temp.innerHTML + "<br>"); //获取修改后的标签内容
</script>
</body>
inner 循环修改: 通过使用数组的形式,可以实现循环修改元素,比如以下循环修改name="MyDiv"的所有标签内容.
<body>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var names = document.getElementsByName("MyDiv"); //通过标签名称找出标签
//id.innerText = "www.lyshark.com"; 不生效:原因是标签名称重复,需要使用数组
names[0].innerText = "www.lyshark.com"; //改变第1个元素标签名称
names[1].innerText = "www.lyshark.com"; //改变第2个元素标签名称
//------------------------------------------------
//通过循环修改多个标签
document.write("总共有标签数: " + names.length); //可以统计总共标签数量
for(var item in names){
names[item].innerText = "www.lyshark.com"; //这里写批量修改的内容
}
</script>
</body>
CreateElement 创建标签: 使用最原始的方式创建标签,实现在父容器div id=tags中,动态的添加a标签.
< -------------------------[方式1]------------------------- >
<body>
<div id="MyDiv"> </div> <!--指定一个父容器-->
<script type="text/javascript">
var tag = document.createElement("a"); //指定标签格式:这里是a标签
tag.innerText = "点我跳转"; //设置标签名称
tag.href = "http://www.baidu.com"; //设置跳转地址
var id1 = document.getElementById("MyDiv"); //获取标签的对象
id1.appendChild(tag) //放到标签里面
</script>
</body>
< -------------------------[方式2]------------------------- >
<body>
<div id="MyDiv"> </div> <!--指定一个父容器-->
<script type="text/javascript">
var tag = "<a class='c1' href='http://www.baidu.com'>点我啊</a>";
var id1 =document.getElementById("MyDiv"); //加到这个标签的里面
id1.innerHTML = tag; //直接通过inner追加进去
</script>
</body>
修改类属性: 分别新建两个CSS属性,并通过className方法,实现后期对类属性的修改.
<head>
<style type="text/css">
.show_table{
display: block;
background-color: red;
}
.hide_table{
display: none;
}
</style>
</head>
<body>
<div id="MyDiv" class="show_table"> hello world </div> <!--指定修改的标签-->
<script type="text/javascript">
var ids = document.getElementById("MyDiv"); //通过ID找到标签
ids.className = "hide_table"; //指定使用hid_table的CSS属性
</script>
</body>
修改标签属性: 修改DIV标签id=MyDiv的标签属性,将name=lyshark修改为name=hello.
<body>
<div id="MyDiv" name="lyshark"> hello world </div> <!--准备修改的标签-->
<script type="text/javascript">
var ids = document.getElementById("MyDiv"); //找到DIV标签
document.write("当前 Name= " + ids.getAttribute('name')); //找到div1标签里面的name属性
ids.setAttribute('name','hello'); //将name属性修改为name=hello
document.write("修改后 Name= " + ids.getAttribute('name')); //修改后,再次打印出结果
</script>
</body>
修改标签样式: 修改标签的CSS代码的格式,可以修改多个,但是标签中必须存在该字段,否则无法修改.
<body>
<div id="MyDiv" name="lyshark" style="background-color: red "> hello world </div>
<script type="text/javascript">
var ids = document.getElementById("MyDiv"); //找到DIV标签
ids.style.backgroundColor = "green"; //将背景色改成绿色
</script>
</body>
伪造表单提交: 自己实现一个submit的表单提交功能,自己定义提交按钮的功能.
<body>
<form id="MyForm">
<input type="text">
<input type="submit" value="submit提交">
<a onclick="Submit()">自定义提交</a>
</form>
<script type="text/javascript">
function Submit(){
var form = document.getElementById("MyForm");
form.submit();
}
</script>
</body>
JavaScript 事件绑定
键盘按键检测: 当键盘接收到按下弹起等按键时,执行操作.
<body onkeypress="keycode()">
<input type="text" name="text" onkeydown="func_keydown()">
<input type="text" name="text" onkeyup="func_keyup()">
<input type="text" name="text" onkeypress="func_keypress()">
<script type="text/javascript">
function func_keydown() { alert("你按下了键"); }
function func_keyup() { alert("你松开了键"); }
function func_keypress() { alert("你按下并松开"); }
function keycode(){
if(window.event.keyCode==32)
{
alert("你在body区域按下了空格.");
}
}
</script>
</body>
窗口大小检测: 当浏览器窗口或帧的大小发生变化时触发Resize事件.
<body onresize="mesg()">
<script type="text/javascript">
function mesg() {
document.write("窗口大小已被改变了..." + "<br>")
}
</script>
</body>
鼠标点击事件: 鼠标在一个对象上左键点击触发Click事件,对象包括button,document,checkbox,link,radio,submit.
<body>
<input type="button" id="button1" value="按钮1" onclick="alert('按钮1被按下了...')">
<input type="button" id="button2" value="按钮2" onclick="alert('按钮2被按下了...')">
<script type="text/javascript">
</script>
</body>
鼠标按下检测: 当我们按下鼠标,系统触发MouseDown事件,释放鼠标时自动触发MouseUP事件.
<body>
<input type="button" value="点我" onmousedown="down()">
<input type="button" value="点我" onmouseup="up()">
<script type="text/javascript">
function down() {
document.write("你按下了按键...")
}
function up() {
document.write("你释放了按键...")
}
</script>
</body>
鼠标移动检测: 鼠标指针到达一个对象之上时,触发MouseOver事件,鼠标离开时触发MouseOut事件.
<body>
<input type="submit" value="鼠标在按钮上" onmouseover="in_over()"></input>
<input type="submit" value="鼠标离开按钮" onmouseout="out_over()"></input>
<script type="text/javascript">
function in_over() {
alert("鼠标在按钮上...")
}
function out_over(){
alert("鼠标离开按钮...")
}
</script>
</body>
点击相应检测: 通用事件,可以绑定到任何可以操作的标签中,当事件触发后,执行对应的函数体.
<body>
<input type="button" value="弹窗" onclick="show()">
<script type="text/javascript">
function show(){
alert("触发弹窗一个窗口提示...")
}
</script>
</body>
Focus&Blur: 当屏幕上的光标进入对象区域内时触发focus事件,反之当光标离开时触发blur事件.
<body>
<input onfocus="Focus(this);" onblur="Blur(this);"
id="search" value="请输入关键字" style="color: gray;" />
<script type="text/javascript">
function Focus(ths){ //光标来到执行
ths.style.color = "black";
if(ths.value == '请输入关键字' || ths.value.trim() == ""){
ths.value = "";
}
}
function Blur(ths){ //光标离开执行
if(ths.value.trim() == ""){
ths.value = '请输入关键字';
ths.style.color = 'gray';
}else{
ths.style.color = "black";
}
}
</script>
</body>
Submit: 通常和form标记配合使用,其作用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.
<body>
<form name="forms" method="post" onsubmit="return check()">
<input type="text" name="texts" size="20">
<input type="submit" value="提交">
</form>
<script type="text/javascript">
function check() {
if(document.forms.texts.value == ""){
document.forms.focus()
alert("用户没有输入任何内容...")
return false
}else
{
alert("用户输入了内容...")
return true
}
}
</script>
</body>
Submit: 通常和form标记配合使用,其作用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.
<body>
<form action="https://www.baidu.com">
<input type="text" id="username">
<input type="submit" value="提交" onclick="return MySub()">
</form>
<script type="text/javascript">
function MySub(){
var user = document.getElementById("username");
if(user.value.length > 0){
alert("编辑框内有数据,允许提交数据..")
return true;
}else
{
alert("用户名输入不能为空...")
return false;
}
}
</script>
</body>
Reset: 通常情况下和form标记配合使用,其起到的作用是,当用户完成信息输入后,按下按钮自动清空已经输入的数据.
<body>
<form name="forms" method="post" >
<input type="text">
<input type="password">
<input type="reset" value="重置" onreset="reset()">
</form>
<!--<script type="text/javascript">-->
<!--function reset(){-->
<!--alert("内容已经清空了...")-->
<!--return 1-->
<!--}-->
<!--</script>-->
</body>
Change: 当文本区域中的鼠标指针移离该对象时,若对象内容与原来内容不同,则就会触发Change事件.
<body>
<textarea name="text" rows="3" cols="30" value=""
onchange="show()"></textarea>
<script type="text/javascript">
function show(){
alert("您在文本框中添加了新的内容...")
}
</script>
</body>
Select: 当一个文本框,文本区域对象中的文本被选中时就会触发Select事件,未被选择则不会出现提示框.
<body>
<input type="text" value="hello lyshark" onselect="show()">
<script type="text/javascript">
function show(){
alert("您选中了文本框中的文本内容...")
}
</script>
</body>
Error: 当网页因为某种原因出现错误时就会触发,在错误处理程序中可以绑定操作,该标签常用与<body>,<img>配合.
<body>
<img src="temp.jpg" onerror="error_msg()">
<script type="text/javascript">
function error_msg(){
alert("图片加载失败了...")
}
</script>
</body>
对象编程: 对象是编程语言中很重要的特征之一,灵活使用这些对象能够实现丰富而强大的功能,下面我们首先来看如何创建一个自定义类,代码如下:
<body>
<script type="text/javascript">
function MyClass(name,age){ //定义类,类名MyClass
this.name = name;
this.age = age;
this.print = function(name,age){ //定义的一个函数体
document.write("姓名: " + this.name + "年龄: " + this.age);
}
}
var temp = new MyClass("lyshark",22); //实例化一个对象
temp.print() //调用对象中的函数体
</script>
</body>
上述代码执行后会打印出姓名和年龄,但是这种写法在实例化对象时,系统会为每个对象中均保存了一个相同的print()函数,从而浪费内存,使用原型写法可以解决该问题,改进代码如下:
<body>
<script type="text/javascript">
function MyClass(name,age){
this.name = name;
this.age = age;
}
MyClass.prototype = {
print:function(){
document.write("姓名: " + this.name + "年龄: " + this.age);
}
}
var temp = new MyClass("lyshark",22); //实例化一个对象
temp.print() //调用对象中的函数体
</script>
</body>
打开关闭窗口: 利用window.open()打开网页,window.close()关闭打开的网页.
msg.html
<body bgcolor="#bc8f8f">
<table width="300" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"> 网页通知
<p> 这是一个通知信息,您可以忽略掉</p>
</td>
</tr>
</table>
</body>
index.html
<body>
<input type="button" value="弹出通知" onclick="msg()">
<input type="button" value="关闭通知" onclick="msg_close()">
<script type="text/javascript">
function msg(){
open("msg.html","通知",height=50,width=30,top=20,left=10);
}
function msg_close() {
close()
}
</script>
</body>
弹出提示框: 点击按钮自动弹出Window.alert()提示消息框.
<body>
<input type="button" value="点击弹窗" onclick="msg()">
<script type="text/javascript">
function msg(){
alert("这是一个提示框...")
}
</script>
</body>
弹出选择框: Window.confirm()弹出一条信息让用户确认,包括确认和取消按钮.
<body>
<input type="button" value="弹窗口" onclick="msg()">
<script type="text/javascript">
function msg(){
if(confirm("请输入你的选项..")){
alert("感谢您的参与..") //确认按钮执行语句
}else{
alert("取消语句..") //取消按钮执行语句
}
}
</script>
</body>
弹出输入框: window.prompt()用于弹出一个输入框,可以让用户输入一些信息.
<body>
<script type="text/javascript">
var passwd = prompt("请输入密码(密码是123): ","");
while(passwd !="123"){
passwd = prompt("密码错误,请重新输入: ");
}
if(passwd =="123"){alert("密码正确...")}
</script>
</body>
设置单次定时器: 以下案例,实现当点击删除按钮时,屏幕提示删除成功,在5秒后自动的隐藏标签.
<body>
<div id="status" style="color: red;"> </div>
<input type="button" value="删除定时" onclick="DeleteStatus()">
<script type="text/javascript">
function DeleteStatus(){
var temp = document.getElementById("status");
temp.innerText = "删除成功了...";
setTimeout(function(){
temp.innerText = "";
},50000); //设置5秒后执行清空标签
}
</script>
</body>
输入框触发事件: 当输入框中输入内容时,自动触发输入事件.
<form action="">
手机号: <input type="text" id="userphone">
<input type="submit">
</form>
<script type="text/javascript">
// 输入框发生变化触发
document.getElementById("userphone").oninput=function(){
console.log(this.value);
}
// 键盘按下触发
document.getElementById("userphone").onkeyup=function(){
console.log(this.value);
}
</script>
网络相关事件: 当网络断开,或者连接时自动触发的事件.
<script>
// 网络联通后执行
window.addEventListener("online",function(){
console.log("网络已连接");
});
// 网络断开后触发
window.addEventListener("offline",function(){
console.log("网络已断开");
});
</script>
设置循环定时器: setIntercal设置定时器,clearInterval清除定时器,定时器用于周期性执行.
<body>
<input type="text" id="clock">
<input type="button" value="开始执行" onclick="begin_func()">
<input type="button" value="取消执行" onclick="end_func()">
<script type="text/javascript">
function begin(){
var now = new Date();
var stime = now.getTime()
var ret = document.getElementById("clock");
ret.value=stime;
}
var ID; //定义全局变量,后期用于清楚定时器
function begin_func(){
ID =setInterval(begin,1000); //每隔1秒执行一次,设置定时器
}
function end_func(){
clearInterval(ID); //取消一秒内执行,清除定时器
ID = undefined;
}
</script>
</body>
定时器设置按钮: 通过定时器计时默认将按钮禁止点击,等超过五秒后将按钮变为可点击状态.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="button" id="btnShow" disabled="true" value="等待5秒后可用"/>
<script type="text/javascript">
var time1 = 5;
var id1, btnShow;
onload = function ()
{
// 获取按钮,启动定时器
btnShow = document.getElementById('btnShow');
id1 = setInterval('changeBtn(btnShow)', 1000);
};
function changeBtn(btn1) {
time1--;
btn1.value = "等待" + time1 + "秒后可用";
if (time1 == 0)
{
// 当5秒结束后让按钮可用
btn1.value = "立即注册";
btn1.disabled = false;
clearInterval(id1); // 停止定时器
}
}
</script>
动态生成超链接: 通过循环的方式动态生成超链接,并设置点击后变为红色.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<div id="myDiv"></div>
<script type="text/javascript">
onload = function () {
//获取容器
var div = document.getElementById('myDiv');
//循环创建5个超链接
for (var i = 0; i < 5; i++) {
//创建a对象
var a = document.createElement('a');
//为属性赋值
a.href = 'http://www.itcast.cn';
a.innerHTML = '链接' + i;
a.onclick = function() {
//设置背景色为红色
this.style.backgroundColor = 'red';
return false;
};
//追加到容器中
div.appendChild(a);
}
};
</script>
绘制方框嵌套图: 每次循环并绘制方框图.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
onload = function () {
//根据标签获取body元素
var body = document.getElementsByTagName('body')[0];
//规定初始值
var width = 500, height = 500, left = 10, top = 10;
//循环创建div
while (true) {
//创建div加入body中
var div1 = document.createElement('div');
div1.style.position = 'absolute';
div1.style.left = left + 'px';
div1.style.top = top + 'px';
div1.style.border = '1px solid blue';
div1.style.width = width + 'px';
div1.style.height = height + 'px';
body.appendChild(div1);
//改写数值
left += 5;
top += 5;
width -= 10;
height -= 10;
//当div的宽度<=0时，在页面上不会显示，所以退出循环
if (width <= 0) {
break;
}
}
};
</script>
DIV显示隐藏: 默认DIV为显示状态,当我们点击按钮后自动收缩隐藏.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="button" id="btnShow" value="隐藏"/>
<div style="border: 1px solid red;" id="divShow">test</div>
<script type="text/javascript">
onload = function() {
document.getElementById('btnShow').onclick = function () {
var divShow = document.getElementById('divShow');
if (this.value == '隐藏') {
this.value = '显示';
divShow.style.display = 'none';//控制层隐藏
} else {
this.value = '隐藏';
divShow.style.display = 'block';//控制层显示
}
};
};
</script>
图片跟随鼠标移动: 让一张图片跟随屏幕鼠标动态调整.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<img id="img1" style="background: red;width: 20px; height: 20px;position: absolute;" />
<script type="text/javascript">
onload = function() {
//鼠标移动：mousemove
window.onmousemove = function (e) {
//获取图片对象
var img1 = document.getElementById('img1');
//设置x坐标
img1.style.left = e.clientX - parseInt(img1.width) / 2 + 'px';
//设置y坐标
img1.style.top = e.clientY - parseInt(img1.height) / 2 + 'px';
};
};
</script>
正则验证输入账号: 当用户输入一个账号时,自动验证该账号是否符合正则要求.
<html lang="en">
<head>
<style>
span { color: #aaa; font-size: 14px;}
.right { color: green;}
.wrong { color: red; }
</style>
</head>
// 手机号验证:/^1[3|4|5|7|8][0-9]{9}$/
// QQ号验证: /^[1-9]\d{4,}$/
// 昵称验证:/^[\u4e00-\u9fa5]{2,8}$/
// 密码验证:/^[a-zA-Z0-9_-]{6,16}$/
// 邮箱验证:/\w+@\w+\.\w+/
<body>
<input type="text" class="uname"> <span>输入用户</span>
<script type="text/javascript">
var reg = /^[a-zA-Z0-9_-]{6,16}$/;
var uname = document.querySelector('.uname');
var span = document.querySelector('span');
uname.onblur = function() {
if (reg.test(this.value)) {
span.className = 'right';
span.innerHTML = '输入正确';
} else {
span.className = 'wrong';
span.innerHTML = '输入不正确';
}
}
</script>
</body>
</html>
闭包输出索引: 闭包应用,点击li标签后输出当前li的索引号.
<html lang="en">
<body>
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
<script type="text/javascript">
// 1. 利用动态添加属性的方式
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
}
// 2. 利用闭包的方式得到当前小li的索引号
for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
(function(i) {
lis[i].onclick = function() {
console.log("li索引号: " + i);
}
})(i);
}
</script>
</body>
</html>
实现深度拷贝: 实现将一个字典,深度拷贝到另一个区域中.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj = {id: 1,name: 'andy',msg: {age: 18},color: ['pink', 'red']};
var o = {};
// 封装函数
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判断我们的属性值属于那种数据类型
// 1. 获取属性值 oldobj[k]
var item = oldobj[k];
// 2. 判断这个值是否是数组
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3. 判断这个值是否是对象
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4. 属于简单数据类型
newobj[k] = item;
}
}
}
deepCopy(o, obj);
console.log(o);
var arr = [];
console.log(arr instanceof Object);
o.msg.age = 20;
console.log(obj);
</script>
显示按钮详细信息: 将鼠标放到按钮上,即可显示出按钮的详细信息.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="button" id="btn1" value="一号"/>
<input type="button" id="btn2" value="二号"/>
<div style="width: 100px;height: 100px; position: absolute;display: none;" id="divShowId"></div>
<script type="text/javascript">
onload = function () {
//获取所有按钮
var btns = document.getElementsByTagName('input');
//遍历按钮，绑定事件
for (var i = 0; i < btns.length; i++) {
btns[i].onmouseover = function(e) {
//获取div
var divShowId = document.getElementById('divShowId');
divShowId.textContent = this.value;
//显示
divShowId.style.display = 'block';
//定义位置
divShowId.style.left = e.clientX + 'px';
divShowId.style.top = e.clientY + 'px';
};
btns[i].onmouseout = function() {
//获取div
var divShowId = document.getElementById('divShowId');
//隐藏
divShowId.style.display = 'none';
};
}
};
</script>
按钮点击事件: 当用户点击按钮时,会自动将按钮的标题设置为其他值.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="button" name="btnCry" id="0" value="哈哈"/>
<input type="button" name="btnCry" id="1" value="哈哈"/>
<input type="button" name="btnCry" id="2" value="哈哈"/>
<input type="button" name="btnCry" id="3" value="哈哈"/>
<input type="button" name="btnCry" id="4" value="哈哈"/>
<script type="text/javascript">
//事件只能接收函数，这里直接使用匿名函数更简便
onload = function () {
//获取所有name为btnCry的按钮
var btn = document.getElementsByName('btnCry');
for (var i = 0; i < btn.length; i++) {
//逐个为按钮注册点击事件
btn[i].onclick = function () {
//改写按钮的显示文本
this.value = '呜呜';
};
}
};
</script>
给图片添加描述: 当鼠标经过特定的图片时,就显示出图片的具体信息.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#showCountry {
position: absolute;display: none;
width: 200px;height: 100px;
border: 1px solid red;
background-color: blue;color: white;
}
</style>
<script>
var list = {
'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和A片'],
'hg': ['韩国', '首尔', '无穷', '民族意识超强']
};
onload = function () {
//获取所有图片
var imgs = document.getElementsByTagName('img');
//为每个图片指定指向、移开事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function(e) {//指向国旗显示国家信息
//获取国家信息
var msg = list[this.id];
//构造描述字符串
var msgStr = '国家：' + msg[0] + '<br>首都：' + msg[1] + '<br>国花：' + msg[2] + '<br>描述：' + msg[3];
//获取div
var showCountry = document.getElementById('showCountry');
//显示div
showCountry.style.display = 'block';
//设置描述信息
showCountry.innerHTML = msgStr;
//让div在鼠标的位置显示
showCountry.style.left = e.clientX + 'px';
showCountry.style.top = e.clientY + 'px';
};
imgs[i].onmouseout = function() {//移开国旗隐藏显示
//获取div
var showCountry = document.getElementById('showCountry');
showCountry.style.display = 'none';
};
}
};
</script>
</head>
<body>
<img id="zg" width="100" height="100" />
<img id="mg" width="100" height="100" />
<img id="rb" width="100" height="100" />
<img id="hg" width="100" height="100" />
<div id="showCountry"></div>
</body>
动态生成表格: 通过JS代码动态的生成表格,将鼠标放上后会高亮本行.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var bgColor;
var list = [
{ id: '1', country: '中国', capital: '北京' },
{ id: '2', country: '美国', capital: '华盛顿' },
{ id: '3', country: '日本', capital: '东京' },
{ id: '4', country: '韩国', capital: '首尔' }
];
onload = function() {
var body = document.getElementsByTagName('body')[0];
//创建表格
var table = document.createElement('table');
table.border = 1;
body.appendChild(table);
//创建标题行
var thead = document.createElement('thead');
var item0 = list[0];
for (var key0 in item0) {
//创建标题单元格
var th = document.createElement('th');
th.innerText = key0;
thead.appendChild(th);
}
table.appendChild(thead);
for (var i = 0; i < list.length; i++) {
//遍历对象
var item = list[i];
//创建行
var tr = document.createElement('tr');
table.appendChild(tr);
//注册事件
tr.onmouseover = function () {//指向行时高亮
//改变颜色前，先获取值，用于恢复
bgColor = this.style.backgroundColor;
this.style.backgroundColor = 'green';
};
tr.onmouseout = function() {//移开行时恢复原来颜色
this.style.backgroundColor = bgColor;
};
//设置行的背景色
if (i % 2 == 0) {
tr.style.backgroundColor = 'red';
} else {
tr.style.backgroundColor = 'blue';
}
//遍历对象
for (var key in item) {
//创建单元格
var td = document.createElement('td');
td.innerText = item[key];
tr.appendChild(td);
}
}
};
</script>
反调试绑定: 各种反调试技巧最佳代码.
禁用F12调试键
<script type="text/javascript">
window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
if (event.keyCode === 123) {
event.preventDefault(); // 阻止默认事件行为
window.event.returnValue = false;
}
}
</script>
// ----------------------------------------------------------------------------
禁用页面的ctrl功能,来禁止ctrl+S保存功能
<script type="text/javascript">
//禁用页面的ctrl功能，来禁止ctrl+S保存功能
window.addEventListener('keydown', function (e) {
if(e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)){
e.preventDefault();
}
})
</script>
// ----------------------------------------------------------------------------
禁用页面的ctrl功能,来禁止ctrl+C保存功能
<script type="text/javascript">
window.addEventListener('keydown', function (e) {
if(e.keyCode == 67 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)){
e.preventDefault();
}
})
</script>
// ----------------------------------------------------------------------------
屏蔽Ctrl+Shift+I
<script type="text/javascript">
window.addEventListener('keydown', function (e) {
if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
e.preventDefault();
}
})
</script>
// ----------------------------------------------------------------------------
当通过特殊途径打开F12时,会清空页面内容.
<script type="text/javascript">
var x = document.createElement('div');
var isOpening = false;
Object.defineProperty(x, 'id', {
get:function(){
bodys=document.body.firstChild.data;
document.body.innerHTML=bodys;
heads = document.head.firstChild.data;
document.head.innerHTML=heads;
document.open();
document.close();
}
});
console.info(x);
</script>
// ----------------------------------------------------------------------------
当控制台被打开时,自动清空所有内容,只保留一段话.
<script type="text/javascript">
document.onkeydown = document.onkeyup = document.onkeypress = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 123) {
document.open();
document.close();
var docFragment = document.createDocumentFragment();
var node = document.createElement("b");
var node_text = document.createTextNode("请勿调试本页面..");
node.appendChild(node_text);
docFragment.appendChild(node);
document.body.appendChild(docFragment);
}
}
</script>
// ----------------------------------------------------------------------------
自动触发点击指定标签
<script type="text/javascript">
setTimeout(function() {
// IE
if(document.all) {
document.getElementById("clickMe").click();
}
// 其它浏览器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("clickMe").dispatchEvent(e);
}
}, 2000);
</script>
<a href="http://www.baidu.com" id="clickMe">触发onclick</a>
// ----------------------------------------------------------------------------
为右键添加自定义事件,禁用菜单右键,或者使用HTML插入代码来禁用菜单.
<script type="text/javascript">
window.oncontextmenu = function() {
event.preventDefault();
return false;
}
</script>
<body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false'
onselectstart ='return false' onselect='document.selection.empty()'
oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>
// ----------------------------------------------------------------------------
当通过特殊途径打开浏览器调试窗口时,会无限刷新,导致无法调试
<script type="text/javascript">
var x = document.createElement('div');
var isOpening = false;
Object.defineProperty(x, 'id', {
get:function(){
console.log("Please close debug now");
window.location.reload()
}
});
console.info(x);
</script>