JS对象与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/Emperorn/article/details/126948918

属性、方法和事件

属性：

属性是指对象包含的值，使用' 对象名.属性名' 的方式进行操作，如：

document.myfrom.first.value

方法：

在代码里，使用' 对象名.属性名()' 来调用该对象的方法。

alte( " )=Window.alter( " )

事件：

响应用户操作、完成交互，如OnClik、OnKeyDown

一般可以分为鼠标事件、键盘事件及其他事件

案例页面计算

		第一个数：<input type="text" id="one" value="" /><br />
		第二个数：<input type="text" id="two" value="" /><br />
		运算方式：<input type="button" name="" id="" value="+" onclick="cal_2('+')"/>
		<input type="button" name="" id="" value="-" onclick="cal_2('-')"/>
		<input type="button" name="" id="" value="*" onclick="cal_2('*')"/>
		<input type="button" name="" id="" value="/" onclick="cal_2('/')"/><br />
		运算结果：<input type="text" name="result" id="result" value="" />
		<script type="text/javascript">
			//获取文本框中输入的值
			function cal_2(y){
				var one = document.getElementById("one").value
				var two = document.getElementById("two").value
				var result
				//判断 + - * /
				if(y=="+"){
					result = Number(one)+Number(two)
				}else if(y=="-"){
					result = Number(one)-Number(two)
				}else if(y=="*"){
					result = Number(one)*Number(two)
				}else if(y=="/"){
					result = Number(one)/Number(two)
				}
				
				document.getElementById("result").value=result
			}
		</script>

试图

字符串对象

验证是否是真邮箱

<body>
		email:<input type="text" name="email" id="email" value="" />
		<input type="button" id="" value="验证" onclick="checkEmail()" />
		<script type="text/javascript">
			//字符串对象
			//获取一个字符串的长度
			var str="Hello world!"
			console.log("该字符串的长度是："+str.length)
			console.log(str.charAt(1))
			console.log(str.indexOf("1"))
			console.log(str.indexOf("a"))//-1,当查找的字符不存在时，返回-1
			
			//123@qq.com
			//邮箱中必须包含@和.,且@必须在.的前面
			function checkEmail(){
				var email=document.getElementById("email").value
				if(email.indexOf("@")==-1){
					alert("该邮箱地址中不包含@")
				}else if(email.indexOf(".")==-1){
					alert("该邮箱地址中不包含.")
				}else if(email.indexOf("@")>email.indexOf(".")){
					alert("该邮箱地址中@必须在.前面")
				}else{
					alert("邮箱地址正确！")
				}
			}
		</script>
	</body>

自定义对象

--字符串对象

用于存储一系列字符，使用单引号或双引号包含

--数学对象

用于获取各种数学常量及数学函数

--日期对象

用于获取或操作各种时间

开发人员根据自己的需要而定义新对象

1.1自定义对象,使用Object

var student=new Object()

给对象设置一些属性

<script type="text/javascript">
			//自定义对象
			var student = new Object()
			//给对象设置一些属性
			student.stuID = "1001"
			student.stuName = "张三"
			student.className = "移动3班"
			//给对象设置函数
			student.sayHello = function(){
				console.log("大家好")
			}
			student.sayHello()
			console.log(student.stuID)
</script>

1.2使用构造函数

<script type="text/javascript">
           function teacher(tid,tname){
				//构造函数中的this指的是当前对象
				this.tid = tid
				this.tname = tname
				this.Eat = function(){
					console.log("吃饭")
				}
			}
			
			//实例化一个对象
			var t1 = new teacher("1","张三")
			t1.Eat()
			console.log(t1.tid,t1.tname)
			
			console.log(t1)
</script>

1.3其他方式

<script type="text/javascript">
            var stu = {
				stuid:"1002",
				stuname:"李四",
				study:function(){
					console.log("学习")
				}
			}
			stu.study()
			console.log(stu.stuid)
</script>

用于储存一系列字符

使用单引号和双引号包含

var name = "优快云"

var name = '优快云'

可以使用索引访问字符串中任何的字符

var char = http[5]；