函数
常用系统函数
parseInt (“字符串”)
将字符串转换为整型数字
如: parseInt (“86”)将字符串“86”转换为整型值86
parseFloat(“字符串”)
将字符串转换为浮点型数字
如: parseFloat(“34.45”)将字符串“34.45”转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字
var str ="asdas";
//str=parseInt(str);//将字符串转换为整数类型 注意会将小数部分丢弃
// str=parseFloat(str);//将字符串转换为小数类型
// alert(str + (typeof str))
alert(isNaN(str))
//数字或数字字符串返回fasle
//不是数字返回true
自定义函数
js中由于数据类型特殊，使用var进行变量的声明，所以一般会自动根据返回的数据进行返回所以无需书写返回值类型
所以，一般进行函数书写时只针对于参数
无参函数
<script type="text/javascript">
//无参无返回值函数
function methodName1(){
alert("无参无返回值函数");
}
//无参有返回值函数
function methodName2(){
return "返回值";
}
function a(){
//调用无参有返回值函数 并将返回值打印
alert(methodName2())
}
</script>
</head>
<body>
<a href="javascript:methodName1()">无参无返回值</a>
<a href="javascript:a()">无参有返回值</a>
</body>
有参函数
<script type="text/javascript">
//有参无返回值函数
//由于变量var声明，所有变量都为var 所以进行参数书写时无需书写var
function methodName3(a,b){
alert(a+b);
}
//有参有返回值函数
function methodName4(a,b){
return a+b;
}
function b(){
//调用有参有返回值函数 并将返回值打印
alert(methodName4(1,2))
}
</script>
</head>
<body>
<a href="javascript:methodName3(2,3)">有参无返回值</a>
<a href="javascript:b()">有参有返回值</a>
事件
一般函数的调用与事件一同使用，书写在相应的表单元素中，实现相应的效果
语法：事件名=调用函数
| 属性 | 此事件发生在何时… |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 200px;
width: 200px;
}
.d1 {
background-color: aqua;
}
.d2 {
background-color: rosybrown;
}
.d3 {
background-color: salmon;
}
</style>
<script>
function myfocus() {
alert("获取焦点")
}
function myblur() {
alert("失去焦点")
}
function myclick() {
alert("点击")
}
function mydbclick() {
alert("双击")
}
function myselsect(){
alert("文本被选择")
}
function mymousemove() {
alert("鼠标移动");
}
function mymouseover() {
alert("鼠标移入");
}
function mymouseout() {
alert("鼠标移出");
}
function mykeypress(){
alert("键盘按下抬起")
}
</script>
</head>
<body>
<form action="">
获取焦点：
<input type="text" onfocus="myfocus()"><br>
失去焦点:
<input type="text" onblur="myblur()"><br>
点击：
<input type="button" value="按钮" onclick="myclick()"><br>
双击:
<input type="button" value="按钮" ondblclick="mydbclick()"><br>
文本选择：
<input type="text" value="文本内容" onselect="myselsect()"><br>
键盘输入：
<input type="text" onkeypress="mykeypress()"><br>
<div class="d1" onmousemove="mymousemove()">鼠标移动</div>
<div class="d2" onmouseover="mymouseover()">鼠标移入</div>
<div class="d3" onmouseout="mymouseout()">鼠标移出</div>
</form>
</body>
</html>
事件对象
在进行事件操作执行方法时，往往需要根据事件不同获取一些额外的参数。例如鼠标位置。按键按下的键的具体值，这时候就需要在进行方法调用时传入事件对象，通过事件对象的属性进行获取
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，“ALT” 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，“CTRL” 键是否被按下。 |
| metaKey | 返回当事件被触发时，“meta” 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，“SHIFT” 键是否被按下。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 600px;
width: 600px;
}
.d1 {
background-color: aqua;
}
body{
margin: 0px;
}
</style>
<script>
// 实现鼠标移动 鼠标坐标实时显示值输入框中
function mymousemove(e){
var i1= document.getElementById("i1");
var x=e.clientX;
var y=e.clientY;
i1.value=x+","+y;
}
//获取键盘按下对应ascii码
//回车13
function mykeypress(e){
alert(e.keyCode)
}
</script>
</head>
<body>
<form action="">
<div class="d1" onmousemove="mymousemove(event)">鼠标移动</div>
<input type="text" id="i1">
<hr>
<input type="text" onkeypress="mykeypress(event)">
</form>
</body>
</html>
js对象
date日期对象
与java中date对象类似，但声明对象时使用var进行声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.setInterval(() => {
var time= document.getElementById("time");
var nowTime = new Date();
var y = nowTime.getFullYear();
var mon = nowTime.getMonth() + 1;
var d = nowTime.getDate();
var h = nowTime.getHours();
var m = nowTime.getMinutes();
var s = nowTime.getSeconds();
time.innerHTML=y +"年"+mon +"月"+d +"日"+" "+h +"时"+m +"分"+s +"秒";
}, 1000);
</script>
</head>
<body>
<div id="time"></div>
</body>
</html>
Math数学对象
可以直接使用对象名.方法进行调用，方法与java中一致
var pi = Math.PI;
var roundValue = Math.round(3.1415);
var randomValue = Math.random();
var abs = Math.abs(-5);
var maxValue = Math.max(3,9);
var minValue = Math.min(3,9);
String字符串对象
js中用于操作字符串的对象，提供操作字符串的方法，部分方法与java中一致
<script>
var str = new String("a,b,c,d,e,a");//定义字符串对象
// concat() 连接字符串
// alert(str.concat("aaaaa")
// indexOf() 检索字符串
// alert(str.indexOf("e"));
// lastIndexOf() 从后向前搜索字符串
// alert(str.lastIndexOf("a"));
// replace() 替换字符串 只替换匹配的第一个
// alert(str.replace("a","-"));
// toString() 返回字符串
// alert(str.toString())
// split() 把字符串分割为字符串数组
// var arr=str.split(",");
// alert(arr[2])
// substring() 提取字符串中两个指定的索引号之间的字符
// alert(str.substring(3,5))
// sub() 把字符串显示为下标
//alert("X"+str.sub())
// sup() 把字符串显示为上标
//alert("X"+str.sup())
//就是在原字符串的前后添加相应的上下标标签
</script>
Array数组对象
在js中没有集合的概念，但是数组可以进行自动扩容
创建数组方式
new Array();
没有使用参数，返回数组为空，length字段为0;
new Array(size);
Size为数组指定个数，返回具有指定个数、元素为undefined的数组;
new Array(element1,element2,…,elementn);
参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
var arr=[数据1，数据2，数据3]
与java相同使用length属性代表可以保存数据的个数
<script>
//1不指定长度的空数组
var arr1 = new Array();
//长度为0 可以进行数据添加自动增长
//2创建指定长度存储undefined的数组
var arr2 = new Array(10);
//3使用指定数据创建指定长度的数组
var arr3 = new Array(1, 2, 3, 4, 5);
//4简化写法
var arr4 = [1, 2, 3, 4, 5, 6];
//文字下标
//js进行语法检查没有java那么完善，文字本质来说也是字符
//进行下标存储时也可以使用文字进行存储，但是会造成存储长度的丢失
arr1[0]="aaa";
arr1[1]="asd";
arr1["河南省"]="郑州市";
alert(arr1.length)
alert(arr1["河南省"])
//foreach
//语法
//要遍历的数组.forEach(存储取出值的变量=>{循环执行的代码});
arr4.forEach(asd => {
alert(asd)
});
</script>
Json对象
Json是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。
是目前前后端进行数据交互使用的数据格式
json语法类似于map使用的是key-value形式字符串进行数据的存储
<script>
//单个语法
//{}包裹 多个数据,分割 key与value:分隔 key只能是字符串形式 但value可以为任意类型
var jsonObj={"key":"value","a":1,"b":new Date()};
//json对象的使用 直接使用对象名.key进行value的获取
// alert(jsonObj.b)
//数组存json对象
var jsonObj1={"key1":"value1","a1":1,"b1":new Date()};
var jsonObj2={"key2":"value2","a2":2,"b2":new Date()};
var arr=[jsonObj1,jsonObj2];
//alert(arr[1].key2);
//json对象保存数组
var arr1=["a","b","c","d"];
var arr2=["aa","bb","cc","dd"];
var jsonObjArr={"arr1":["a","v"],"arr2":arr2};
//alert(jsonObjArr.arr1[0])
//json对象保存json对象
var jsonObjjson={"k1":jsonObj1,"k2":jsonObj2}
//alert(jsonObjjson.k2.a2)
</script>
RegExp正则对象
进行一段规则字符串的书写，提供了相应的方法进行检测，指定字符串是否符合当前规则字符串的语法
语法：var regObj=/校验字符串/ 例如[a-z]{10}
var reg=/pattern /attributes
// pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式
var reg=new RegExp(pattern, attributes);
// attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配
正则对象的使用 使用test将指定字符串传入进行正则匹配，符合返回true 不符合返回false，一般与form表达校验一起使用，用于检测输入的准确性
<script>
var regObj = /[a-z]{5}/;
//alert( regObj.test("assddsaas"))
//单字符匹配
var reg1 = /a{1}/;//是否包含a
//alert(reg1.test("abcs"))
var reg2 = /a{3,4}/;//是否包含aaa或aaaa
//alert(reg2.test("aassaaa"))
// *表示0次或者多次，等同于{0,}，即
// c* 和 c{0,} 是一个意思。
// +表示一次或者多次，等同于{1,}，即
// c+ 和 c{1,} 是一个意思。
// 最后，?表示0次或者1次，等同于{0,1}，即
// c? 和 c{0,1} 是一个意思。
var reg3=/^a{2,3}/;//以aa或 aaa开头
//alert(reg3.test("saasd"))
var reg4=/a{2,3}$/;//以aa或aaa结尾
//alert(reg4.test("asdasdasa"))
var reg5=/^a{2,3}$/;//以aa或aaa开头并结尾
//将起始标签与结束标签一同使用可以实现限制长度
//alert(reg5.test("aa"))
var reg6=/^[a-z]{1}[a-z A-Z 0-9]{5}$/;
//必须以一个小写字母开头其余为字母或数字 总长度为6
var reg7=/^a|b{3}$/;//以a或b开头其他a或b长度为3
var reg8=/[^abc]{1}/;//只要不含有a或b或c的字符串
</script>
2066
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
