Web07--JavaScript基础03-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web07--JavaScript基础03。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

Web07--JavaScript基础03,Web,javascript,前端

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>

Web07--JavaScript基础03,Web,javascript,前端

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>

Web07--JavaScript基础03,Web,javascript,前端

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>

Web07--JavaScript基础03,Web,javascript,前端

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>

Web07--JavaScript基础03,Web,javascript,前端