JavaScript的常用事件,自定义对象的方式,创建Array内置对象

最新推荐文章于 2024-05-21 14:15:14 发布

程序员习溶

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1.4k

点赞数 3

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_69992031/article/details/124443159

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.JavaScript的常用事件(举例);
1点击相关的事件
   单击 click -- onclick属性
   双击 dbclick -- ondblick属性
2焦点事件
   获取焦点 focus -- onfocus属性
   失去焦点 blur -- onblur
3选项卡发生变化的事件,一般用在select下拉菜单中
   事件名称 change --onchange属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05_js常用事件编程</title>
	</head>
	<body>
		<input type="button" value="click" onclick="testClick()" /><br/>
		<input type="button" value="dbClick" ondblclick="testDbClick()" /><br/>
		用户名:<input type="text" id="username" value="请输入用户名" 
		onfocus="testFouces()" onblur="testBlur()" /><span id="tip"></span> <br/>
		<hr/>
		籍贯:
		<select onchange="testChange()" id="pro">
			<option value="请选择">请选择</option>
			<option value="陕西省">陕西省</option>
			<option value="山西省">山西省</option>
			<option value="广东省">广东省</option>
		</select>
		<select id="city">
				<!-- <option value="西安市">西安市</option> 
					 <option value="渭南市">渭南市</option>
				-->
			
		</select>
	</body>
	<script>
		//单击点击事件函数
		function testClick(){
			alert("单击事件触发") ;
		}
		//双击点击事件的函数
		function testDbClick(){
			alert("双击事件触发") ;
		}
		
		//定义获取焦点事件函数
		function testFouces(){
			//将文本输入框的value属性值清空掉
			//dom操作:通过id="username"获取input标签对象
			var a =  document.getElementById("username") ;
			//将input标签对象的value属性清空掉
			a.value = "" ;
		}
		
		//定义一个函数:失去焦点的函数
		function testBlur(){
			
			//需求:当鼠标移出文本框,触发失去焦点事件,
			//获取文本输入的内容,判断它的内容如果不是"高圆圆",在文本输入框的后面提示,"是否可用"
			
			//1)获取文本输入框的内容
			var username = document.getElementById("username").value ;
			
			//2)获取id="tip"所在的span标签对象
			var a = document.getElementById("tip") ;
			//3)逻辑判断
			if(username !="高圆圆"){
				//给span标签对象设置文本
				a.innerHTML = "×".fontcolor("red") ;
			}else{
				//可用
				a.innerHTML = "√".fontcolor("green") ;
			}
			
		}
	
	
		//定义函数:选项卡发生变化的事件
		function testChange(){
			//alert("选项卡变化了") ;
			//通过id="pro" 所在的select标签,获取它的标签对象
			//同时获取下拉菜单的内容
			var province = document.getElementById("pro").value ;
			//alert(province) ;
			//应该要给第二个select标签(城市所在的下拉菜单),获取它的标签对象,动态给力拼接城市
			//获取id="city"所在的select标签对象
			var city =  document.getElementById("city") ;
			
			//将city的innerHTML清空掉
			
			city.innerHTML = "" ;
			//判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"
			if(province=="陕西省"){
				//定义一个城市数组
				var arr = ["西安市","渭南市","咸阳市","宝鸡市"] ;
				
				//遍历数组,获取每一个城市
				for(var i = 0 ; i < arr.length;i++){
					// 拼接<option value="渭南市">渭南市</option> 文本
					//给city标签对象(代表就是第二个select标签对象)拼接上面的文本
					city.innerHTML +="<option value="+arr[i]+">"+arr[i]+"</option> "
				}
				
			}
			
			if(province=="山西省"){
				//定义一个城市数组
				var arr = ["太原市","晋中市","临汾市","大同市"] ;
				
				//遍历数组,获取每一个城市
				for(var i = 0 ; i < arr.length;i++){
					// 拼接<option value="渭南市">渭南市</option> 文本
					//给city标签对象(代表就是第二个select标签对象)拼接上面的文本
					city.innerHTML +="<option value="+arr[i]+">"+arr[i]+"</option> "
				}
				
			}
			
			if(province=="广东省"){
				//定义一个城市数组
				var arr = ["广州市","东莞市","佛山市","深圳市"] ;
				
				//遍历数组,获取每一个城市
				for(var i = 0 ; i < arr.length;i++){
					// 拼接<option value="渭南市">渭南市</option> 文本
					//给city标签对象(代表就是第二个select标签对象)拼接上面的文本
					city.innerHTML += "<option value="+arr[i]+">"+arr[i]+"</option> "
				}
				
			}
			
		}
	</script>
</html>

2.JavaScript自定义对象的方式

<!--			
方式1:
function 对象名(形式列表...)
//定义一个对象
function 对象(属性1,属性2,属性3...){  //属性就是某个真实世界事物的特征!
			给属性赋值
			给对象添加功能(方法)
}
创建对象
var 对象名 = new 对象(实际参数1,实际参数2,实际参数3....)
//方式2:
定义对象的时候,function 对象(){} //不携带参数了
创建对象: var 对象名 = new 对象() ;
定义一个人对象
function Person(){
				
}
创建对象 人对象
var p = new Person() ;
方式3:
利用js内置对象:Object,代表的所有对象的模板!
var 对象名 = new Object() 
直接创建对象
var p = new Object() ;
追加属性
对象名.属性名 = 值;
追加方法
对象名.追加的方法名 = function(空参/带参数) {...}
方式4:
var 对象名 = {"key1":value1,"key2":value2....}
追加方法:
"方法名":function(){...}
访问方式:    var 值 = 对象名.key	 ;	
访问方法:    对象名.方法名() ;
-->

3.JavaScript中创建Array内置对象

//方式1:创建数组对象
//var arr = new Array() ;

//方式2:  数组对象名 = new Array(size) ;//指定数组长度
//	var arr = new Array(4) ; // 数组中最大索引值:arr.length-1
		
//方式3：var  数组对象名 = [元素1,元素2,...] ;
//var arr = [10,20,30,40,"hello",true,'a',100,3.14,new Object()] ;

程序员习溶

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的常用事件,自定义对象的方式,创建Array内置对象

1.JavaScript的常用事件(举例);1点击相关的事件单击 click -- onclick属性双击 dbclick -- ondblick属性2焦点事件获取焦点 focus -- onfocus属性失去焦点 blur -- onblur3选项卡发生变化的事件,一般用在select下拉菜单中事件名称 change --onchange属性<!DOCTYPE html><html> <...
复制链接

扫一扫