04.26

最新推荐文章于 2024-09-27 00:45:01 发布

麻辣香郭pu

最新推荐文章于 2024-09-27 00:45:01 发布

阅读量177

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_45237403/article/details/124434461

版权

本文介绍了JavaScript内置对象Array的特点与创建方法，自定义对象的不同实现方式，包括使用函数构造、对象字面量，以及DOM操作技巧和常见事件编程。详细讲解了如何创建数组，自定义对象的属性和方法，并展示了如何通过DOM操作和事件处理进行实际应用。

摘要由CSDN通过智能技术生成

一、js内置对象Array

在js中Array对象特点,跟Java中的数组不一样

js是弱类型语言,数组中不存在角标越界(元素可以不断扩充)
js数组对象可以任何类型

创建Array的三种方式
var 数组对象名= new Array();
var 数组对象名= new Array(size);制定长度
var 数组对象名= new Array([元素1,元素2…]);
可简化为:var 数组对象名= [元素1,元素2…];

方式1:创建数组对象
var arr = new Array;
			
			
方式2:var 数组对象名= new Array(size);
var arr = new Array(4);
数组中最大索引值:arr.length-1


方式3:
var arr=[10,20,30,40,"hello",true,'a','3.14'];
虽然可以存储任何类型,但是实际开发中,具体的元素类型肯定统一的!

使用方式3来

 <script>

			var arr=["陕西省","山西省","广东省"];
			document.write(arr[0]+"<br/>");
			document.write(arr[1]+"<br/>");
			document.write(arr[2]+"<br/>");

			alert(arr.length);
			
			
			//遍历数组,获取arr数组对象的运算
			for(var i=0;i<arr.length;i++){   //i就是角标 0,1,2,3,4
				document.write(arr[i]+"<br/>");//i=0,0<3,arr[0]
			}
		 </script>

在这里插入图片描述

二、js自定义对象方式

1.方法一:

代码如下（示例）：
function 对象(属性1,属性2,…){
//给属性赋值
//给对象添加功能(方法)
}

<script>
function Person(name,age,sex,address){
				this.name=name;//右边的name当前形参里的name
							//左边name相当于要给person对象添加一个name值
				this.age=age;
				this.sex=sex;
				this.address=address;
				
			//给对象加功能----说英语
			//this.方法名=function(){}
			this.speak=function(a){
				alert("会讲"+a);
			}	
			this.playGame=function(b){
				alert("会玩"+b);
			}		
				
		}
		
		//创建一个具体的人:创建对象
		//var 对象名 =new 对象(实参1,实参2)
		var p =new Person("郭晓",24,"男","西安市")	;
		document.write("姓名:"+p.name+"年龄:"+p.age+"性别:"+p.sex+"住址:"+p.address);
		
		p.speak("英语");
		p.playGame("lol");
		</script>

2.方法二:

代码如下（示例）：
:定义对象的时候,function 对象(){} //不携带参数了
创建对象: var 对象名 = new 对象() ;

该处使用的url网络请求的数据。

<script>
			function Person(){
				
			}
		
			//创建对象 人对象
			var p = new Person() ;
			
			//自己追加属性
			//对象名.追加的属性名称 = 实际值;
			p.name = "文章" ;
			p.age = 20 ;
			p.gender = "男" ;
			p.address = "西安市" ;
			p.high = 180 ; //身高
		
			//追加方法
			//对象名.追加的方法名 = function(空参/带参数) {...}
			p.speak =function(a){
				alert("会"+a) ;
			}
			
			p.playGame = function(gameName){
				alert("会玩"+gameName) ;
			}
			
			//学习的方法
			p.study=function(className){ //前端的javascript
				alert("正在学习"+className) ;//"正在学习前端的javascript""
			}
			
			//输出这个人的基本信息
			//对象名.属性名 =获取内容
			//对象名.方法名() ;调用方法
			document.write("姓名是:"+p.name+",这个人的年龄是:"+p.age+",性别是:"+p.gender
			+",住址是:"+p.address+",身高为:"+p.high) ;
			
			p.speak("英语");
			p.playGame("csGo") ;
			p.study("前端的javascript") ;
		</script>

3.方法三:

利用js内置对象Object,代表所有对象

<script>
		 //直接创建
		 var p=new Object();
		 
		 //追加属性
		 p.brand="huaweiP30";
		 p.price=4699;
		 p.color="荧光黑";
		 p.memory="128G";
		 
		 //追加方法
		p.call=function(toname){
			alert("通话给"+toname);
		}
		p.mail=function(tomail){
			alert("发短信给给"+tomail);
		}
		 
		//打印
		document.write("手机是:"+p.brand+",价格是:"+p.price+",颜色:"+p.color+",内存是:"+p.memory) ;
		
		p.call("郭晓");
		p.mail("gx");
	</script>

4.方法四

json数据格式(字面量值的方式)
var 对象名={“key1”:value1,“key2”:value2…}

这里这也是我们在今后开发中常用到的方法

	 <script>
		 /* 现在描述一个具体的学生*/	
			
		var student ={
			"name":"郭晓",
			"age":"24",
			"sex":"男",
			"address":"西安市"	,
			
			//追加
			"study":function(){
				alert("学习Java");
			},
			"speak":function(){
				alert("讲英语");
			},
			"play":function(){
				alert("讲英语");
			},
		}	
		
		//访问方式
			document.write("姓名:"+student.name+",年龄:"+student.age+",性别:"+student.sex+",住址:"+student.address);
		//访问方法
			student.study();
			student.speak();
			student.play();
			
		 </script>

三、常用dom操作

方法1:document.getElementById(“id属性值”) 给id值 //通过id="username"获取input标签对象

方法2:document.getElementByClassName(“页面用所以同名class”)
var input=document.getElementByClassName(“c1”)[0];

方式3:docuement.getElementsByName(“页面中所有同名的name属性值”) ; 在标签中给定name属性值
var input = document.getElementsByName(“name”)[0] ;
方式4:docuement.getElementsByTagName(“页面中所有同名的标签名称”) ;
var input =document.getElementsByTagName(“input”)[0] ;

<body>
		用户名:<input type="text" id="username" 
		value="" placeholder="请输入用户名"
		onblur="tb()"  class="c1"/>	
		
	</body>

<script>
		function tb(){
			var input = document.getElementById("username");
			
			alert(input.value);
		}
	</script>

鼠标移出文本框时显示为
在这里插入图片描述

四、js常用事件编程

1.点击相关的事件
单击 click
双击 dbclick
2.焦点事件
获取焦点 focus
失去焦点 onblur
3.选项卡发生变化的事件

<body>
		<input type="button" name="" id="" value="单击按钮" 
		onclick="testClick()"/>
		<input type="button" name="" id="" value="双击按钮"
		ondblclick="testDbClick()"/><br/>
		用户名:<input type="" id="username" value="请输入用户名"
		onfocus="testFouces()" onblur="testBlur()"/>
		<span id="tip"></span><br/>
</body>

<script>
function testBlur(){
			//移出文本框
			//1.获取文本内容,判断是否是"郭晓",在后面提示
			var username= document.getElementById("username").value;
			//2.获取id="tip"所在span标签对象
			var a= document.getElementById("tip");
			//3.逻辑判断
			if(username!="郭晓"){
			a.innerHTML="错误".fontcolor("red");
			
						}else{
				a.innerHTML="正确".fontcolor("green");			
						}
		}
		</script>