Web07--JavaScript基础03

发布时间：2024年01月23日

1、事件绑定

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

1.1 常用的事件

点击事件

事件

描述

onclick

单击事件

ondblclick

双击事件

焦点事件

事件

描述

onblur

失去焦点

onfocus

元素获得焦点

加载事件

事件

描述

onload

页面加载完成后立即发生

鼠标事件

事件

描述

onmousedown

鼠标按钮被按下

onmouseup

鼠标按键被松开

onmousemove

鼠标被移动

onmouseover

鼠标移到某元素之上

onmouseout

鼠标从某元素移开

键盘事件

事件

描述

onkeydown

某个键盘按键被按下

onkeyup

某个键盘按键被松开

onkeypress

某个键盘按键被按下并松开

改变事件

事件

描述

onchange

域的内容被改变

表单事件

事件

描述

onsubmit

提交按钮被点击

事件案例一

<script>

  function demo(){
    //获取用户输入信息
    var name =  document.querySelector("#uid").value;
    //正则
    var regExp = new RegExp("^1[3456789]\\d{9}$");
    //判断是否满足正则
    if(regExp.test(name)){
      document.getElementById("spanid").innerText = "合法";
      //提交到后台，后台到db，查询有没有这个手机号，如果有，手机号已存在！！
    }else{
      document.getElementById("spanid").innerText = "不合法";
    }
  }

  function demo2(){
    alert("我是聚焦事件")
  }

</script>
</head>
<body>

  手机号：<input type="text" name="username" id="uid" onblur="demo()" /><span id="spanid"></span><br>
  密码：<input type="text" name="pwd" id="pid" onfocus="demo2()" /><span id="spanid"></span>

</body>

事件案例二

<script>

  window.onload = function(){
    //获取初始的图片
    var _img = document.getElementById("img");

    //绑定鼠标悬浮事件
    _img.onmouseover = function(){
      _img.src = "img/p4.jpg";
    }
    //绑定鼠标离开事件
    _img.onmouseout = function(){
      _img.src = "img/p3.jpg";
    }
  }
</script>
</head>
<body>

  <img src="img/p3.jpg" id="img" width="450px"/>

</body>

事件案例三

<script>
  window.onload = function(){
    //获取input框
    var _input = document.getElementById("iid");

    //绑定键盘按下事件
    _input.onkeydown = function(){
      _input.style.background = "yellow";
    }
    //绑定键盘松开事件
    _input.onkeyup = function(){
      _input.style.background = "red";
    }

  }
</script>
</head>
<body>

  <input type="text" id="iid" />

</body>

注意事项

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <script>
      function demo(){
        alert(444)
      }
    </script>

  </head>
  <body>
    <input type="button" value="提交" id="buttonid" onclick="demo()" />
    <!-- 
    约定大于配置： 很情况下在写代码，程序员都不约而同都这种写法
    前端人员现在都不这种写法，把所有的样式都用css来控制
    前端人员认为你不应该把事件写在标签中
    前端人员认为你应该把事件写js，事件是js所有拥有

    我们应该优先加载页面相关的样式，html结构
    我们应该把页面以外的尽量写在页面下面
    -->
    <center>
      <p>我爱你中国</p>
    </center>
  </body>

  <script>
    window.onload = function(){
      var buttonid =  document.getElementById("buttonid");
      buttonid.onclick = function(){
        alert(888)
      }
    }
  </script>
</html>

2、自定义对象

2.1 方式一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义对象1</title>
	</head>
	<body>
		<script>
			// 创建自定义对象
			let ob = new Object();
			
			ob.name = "小花";
			ob.age = 2;
			
			ob.mess = function(){
				console.log(this.name + "今年" + this.age + "岁了");
			}
			
			console.log(ob.name);
			console.log(ob.age);
			ob.mess();
			
		</script>
	</body>
</html>

2.2 方式二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义对象2</title>
	</head>
	<body>
		<script>
			// 创建自定义对象
			function Person(name,age,sex){
				this.name = name;
				this.age = age;
				this.sex = sex;
				
				this.mess = function(){
					console.log(this.name + this.sex + this.age);
				}
				
			}
			
			let p = new Person("张三",18,"男");
			console.log(p.name);
			console.log(p.age);
			p.mess();
			
			// 添加属性
			p.address = "河南郑州";
			console.log(p.address);
			
		</script>
	</body>
</html>

2.3 方式三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义对象3</title>
	</head>
	<body>
		
		<script>
			var person = {
				name:"张三",
				age:18,
				sex:"男",
				
				mess:function(){
					console.log(this.name + "已经" + this.age + " 岁了。");
				}
			}
			
			console.log(person.name);
			console.log(person.age);
			person.mess();
		</script>
	</body>
</html>

3、全局函数

3.1 常用全局函数

3.1.1 字符串与number之间的转换

方法

说明

parseInt()

将字符串解析成一个整数。

parseFloat()

将字符串解析成一个浮点数。

isNaN()

判断是否是一个NaN类型的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类型转换</title>
	</head>
	<body>
		<script>
			console.log(parseInt("123.456"));			// 123
			console.log(parseInt("12abc3.456"));		// 12
						
			console.log(parseFloat("123.456"));			// 123.456
			console.log(parseFloat("123.45abc6"));		//123.45
						
			console.log(parseInt("abc123"));			// NaN : not a number 不是一个数字
			
			console.log(isNaN("abc123"));				// true
		</script>
	</body>
</html>

3.1.2 字符编码

方法

说明

encodeURI()

把字符串编码为 URI

decodeURI()

解码某个编码的 URI

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符编码</title>
	</head>
	<body>
		<script>
			// encodeURI()  字符串编码
			let name = "明下午两点偷袭珍珠港";
			let encodeName = encodeURI(name);
			console.log(encodeName);
			
			// decodeURI()  字符串解码
			let decodeName = decodeURI(encodeName);
			console.log(decodeName);
		</script>
	</body>
</html>

3.1.3 URL 和 URI

文章来源:https://blog.csdn.net/weixin_46612641/article/details/135781289
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章