JS day02

最新推荐文章于 2024-09-30 23:47:24 发布

weixin_45741427

最新推荐文章于 2024-09-30 23:47:24 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/weixin_45741427/article/details/103333096

版权

回顾

JavaScript三种引入方式

内联:在标签的事件属性中添加js代码,当事件触发时执行.
内部:在页面任意位置添加script标签,在标签内部写js代码
外部:在单独的js文件中写js代码通过script标签的src属性引入,如果script标签引入了文件则不能在标签体内继续写js代码

js数据类型

js中只有对象类型
常见的对象类型
1. 数值number
2. 字符串string
3. 布尔值boolean
4. 未定义undefined
5. 自定义object

数据类型间的隐式转换

数值: 转字符串直接转转布尔值 0和NaN转false 其他true
布尔值:转字符串直接转转数值 false->0 true->1
字符串:转数值能转直接转不能则转成NaN , 转布尔值 “”->false 其他true
undefined: 转字符串直接转转数值NaN 转布尔值false
null: 转字符串直接转专数值0 转布尔值false

运算符

先统一类型再比较值和=先比较类型再比较值
除法会自动转换整数和小数
typeof x 获取变量的类型 typeof 66 + 6 = “number6”

语句

if和while括号里面的内容如果不是布尔值会自动隐式转换成布尔值
for循环把int改成var 不支持新for循环

方法声明三种方式

function 方法名(参数列表){方法体}
var 方法名 = function(参数列表){方法体}
var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

和页面相关的方法

通过id获取页面元素对象
var d = document.getElementById(“xxx”);
获取和修改标签的文本内容
d.innerText = “xxx”;
d.innerText
获取和修改标签的html内容
d.innerHTML = “标签内容”;
d.innerHTML
获取和修改文本框的文本内容
i.value=“xxx”;
i.value

实现步骤:

创建页面在页面中添加两个按钮分别显示红和蓝,再添加一个空的div id为d1
给两个按钮添加点击事件,调用同一个方法,同时传递参数red和blue
在head中添加style和script标签,style中添加两个类选择器分别是.red
和.blue控制元素的宽高和背景色
在script标签中实现按钮的点击事件方法,在方法中获取页面的div对象,给div添加子div,添加的同时给div设置class,值为调用方法时传递过来的red或blue 搞定!

String 数组日期对象正则

字符串相关

创建字符串
var s1 = “abc”/‘abc’;
var s2 = new String(“abc”);
把字符串转成数值
parseInt()
parseFloat()
Number() 作用和parseFloat类似
转大小写
str.toUpperCase() 转大写 str.toLowerCase()转小写
获取字符串出现的位置

str.indexOf(); //从前面找
str.lastIndexOf(); //从后面找

截取字符串

str.substring(start,?end);

替换字符串

str.replace(old,new);

拆分字符串

var arr = str.split(".");

数学相关

随机数 Math.random() 获取0-1的随机小数
1-100 parseInt(Math.random()*100)+1
3-5的随机整数 0-2 parseInt(Math.random()*3) + 3
5-9的随机整数 0-4 parseInt(Math.random()*5) + 5
四舍五入 num.toFixed(n); n代表保留几位小数
38.3456.toFixed(3) 38.346

数组相关

创建数组
var arr1 = [“abc”,18,true];
var arr2 = new Array();
往数组中添加数据
arr.push(“xxx”);
获取数组长度
arr.length;
遍历数组和java一样
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
数组反转
arr.reverse();
数组排序

默认排序规则是以unicode编码进行排序,依次比较
arr.sort();

arr.sort(自定义排序方法);

//创建自定义排序方法
function mysort(a,b){
//return a-b;//升序 b-a降序
return b-a;
}
//当方法作为参数传递时不写() 只有调用时才加()
alert(arr.sort(mysort));
简单写法
arr.sort(new Function(“a”,“b”,“return a-b;”));

日期相关

服务器时间和客户端时间

获取当前客户端时间
var d = new Date();
把字符串时间转成时间对象
var str = “2019/6/11 15:47:22”;
var d = new Date(str);
获取和设置时间戳(时间戳:距1970年1月1日 08:00:00的毫秒数)
d.getTime();//获取
d.setTime(1000);
获取时间分量
d.getFullYear();
d.getMonth();
d.getDate();
d.getDay();
d.getHours();
d.getMinutes();
d.getSeconds();
获取年月日和获取时分秒
d.toLocaleDateString(); 获取年月日
d.toLocaleTimeString(); 获取时分秒

正则表达式

正则应用场景:1. 查找内容 2. 文本校验
.:匹配任意字符除了换行
\w:匹配任意数字字母下划线
\d:匹配任意数字
\s:匹配任意空白
^: 开头
$: 结尾
举例:
1. 以m开头 ^m
2. 以n结尾 n$
3. 包含两位数字 \d{2}
4. 只有两位数字组成 ^\d{2}$
5. 以3个数字开头 ^\d{3}
6. 以x开头y结尾中间5个数字 ^x\d{5}y$
7. 以m开头n结尾中间3到5个数字 ^m\d{3,5}n$
8. 6-10位数字字母下划线组成 ^\w{6,10}$

创建正则对象

第一种格式: /规则/模式; 模式(i:忽略大小写 g:全局查找 )
var reg = /^\w{6,10}$/;
第二种格式: new RegExp(“规则”,?“模式”); \需要转义
var reg2 = new RegExp("^\w{6,10}$");

和正则相关的方法

查找内容的方法 reg.exec(str)
var str = “you can you up no can no b b”;
var reg = /no/g;
alert(reg.exec(str)); // no
alert(reg.exec(str)); // no
alert(reg.exec(str)); // null
校验方法 reg.test(str)
var str = “you can you up no can no b b”;
var reg = /^you/i; //添加i代表忽略大小写
reg.test(str); //返回值为false


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.red{
		color: red;
	}
	.green{
		color: green;
	}
</style>
<script type="text/javascript">
	function myfn(){
		var reg = /^\w{6,10}$/;
		/* if(reg.test(i1.value)){
			s1.className="green";
		}else{
			s1.className="red";
		} */
		s1.className=
			reg.test(i1.value)?"green":"red";
		
		s2.className=
			reg.test(i2.value)?"green":"red";
	}
	function fn1(){
		var reg = /^\w{6,10}$/;
		s1.className=
			reg.test(i1.value)?"green":"red";
	}
	function fn2(){
		var reg = /^\w{6,10}$/;
		s2.className=
			reg.test(i2.value)?"green":"red";
	}
</script>
</head>
<body>
用户名:<input type="text" id="i1" οnblur="fn1()"> 
<span id="s1">6-10位数字字母下划线组成</span><br>
密码:<input type="text" id="i2" οnblur="fn2()">
<span id="s2">6-10位数字字母下划线组成</span><br>
<input type="button" value="校验" 
	οnclick="myfn()">

</body>
</html>

字符串和正则相关的方法

查找内容 str.match(reg) 将查找到的内容一次性返回
var str = “you can you up no can no b b”;
var reg = /no/g;
var arr = str.match(reg);
查找并替换 str.replace(reg,new);
var str = “you can you up no can no b b”;
var reg = /no/g;
alert(str.replace(reg,“不”));

给元素添加class属性值

元素对象.className = “xxx”;


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	span{
		  visibility: hidden;  
		/* display: none; */
	}
	.ok{/* 格式正确隐藏 */
		 visibility: hidden; 
	}
	.err{/* 格式错误显示 */
		 visibility: visible; 
	}
</style>
<script type="text/javascript">
	function fn1(){
		var reg = /^\w{6,10}$/;
		s1.className = 
			reg.test(i1.value)?"ok":"err";
		//如果格式正确返回true错误返回false
		return reg.test(i1.value);
	}
	function fn2(){
		var reg = /^\w{6,10}$/;
		s2.className = 
			reg.test(i2.value)?"ok":"err";
		//如果格式正确返回true错误返回false
		return reg.test(i2.value);
	}
</script>
</head>
<body>
<a href="../imgs/2.gif"
	 οnclick="return confirm('您确认离开吗?')">
	 	超链接</a>
<form action="http://www.tmooc.cn" 
	οnsubmit="return fn1()+fn2()==2">
	用户名:<input type="text" id="i1" οnblur="fn1()">
	<span id="s1">格式错误</span><br>
	密码:<input type="text" id="i2" οnblur="fn2()">
	<span id="s2">格式错误</span><br>
	<input type="submit" value="注册">
</form>
</body>
</html>

回顾

字符串相关

创建字符串
var s1 = “xxx”/‘xxx’;
var s2 = new String();
转数值
parseFloat()
parseInt()
Number()
获取字符串出现的位置
indexOf()
lastIndexOf()
转大小写
toUpperCase()
toLowerCase()
替换
replace(old,new) 只能替换第一个
截取字符串
substring(start,?end);
拆分字符串
split() 返回值是数组

数学相关

随机数 Math.random()
四舍五入 num.toFixed(n); n代表保留几位小数

数组相关

创建数组
var arr1 = [“xxx”,23,false];
var arr2 = new Array();
添加元素
arr.push(xxx);
数组长度
arr.length
数组遍历和java一样
数组反转 arr.reverse()
数组排序 arr.sort() 默认是通过Unicode编码依次排序
自定义排序方法
function mysort(a,b){
return a-b;//升序 b-a降序
}

日期相关

获取当前客户端时间
var d = new Date();
var d = new Date(“2019/6/11 17:37:00”);
获取和设置时间戳
d.getTime();
d.setTime(1000);
获取时间分量
d.getFullYear/Month/Date/Day/Hours/Minutes/Seconds();
获取年月日和时分秒
d.toLocaleDateString();
d.toLocaleTimeString();

正则

创建正则对象
var reg1 = /规则/模式;
var reg2 = new RegExp(“规则”,?“模式”); \需要转义
相关方法
1. 查找
  reg.exec(str)
2. 校验
  reg.test(str)
3. 字符串查找
  str.match(reg) 返回数组装着所有找到的内容
4. 替换
  str.replace(reg,new)