0
点赞
收藏
分享

微信扫一扫

JavaScript4.26学习内容总结

凛冬已至夏日未远 2022-04-27 阅读 51
javascript

一.JavaScript内置对象之Array

在js中Array对象特点,跟Java中的数组不一样的,
 js是一个弱类型语言,数组对象中不存在角标越界,元素可以不断扩容,而且js数组对象可以存储任何类型的元素

1.创建Array对象三种方式

方式1

var  数组对象名 = new Array() ;//不指定长度
var arr=new Array();
/*分配数组元素
数组的对象名称[索引值]=实际值;  索引值从0开始*/
arr[0]=10;
arr[1]=20;
arr[2]=30;
arr[3]=40;
//对象名.length属性:获取长度
alert(arr.length);	
for(var i=0;i<arr.length;i++){
	document.write(arr[i]+"<br/>");
}

方式2

var  数组对象名 = new Array(size) ;//指定数组长度
var arr=new Array(4);
/*分配数组元素
数组的对象名称[索引值]=实际值;  索引值从0开始*/
arr[0]=10;
arr[1]=20;
arr[2]=30;
arr[3]=40;
arr[4]=50;
//对象名.length属性:获取长度
alert(arr.length);
for(var i=0;i<=arr.length-1;i++){
	document.write(arr[i]+"<br/>");
}

方式3

var  数组对象名 = new Array([元素1,元素2,...]) ;
//它可以简化为
var  数组对象名 = [元素1,元素2,...] ;
var arr=[10,20,30,40,50,"helloworld",'a',false,new Object()];
//对象名.length属性:获取长度
alert(arr.length);
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"<br/>");

虽然可以存储任何类型,但是实际开发中,具体的元素类型肯定时统一的

不管js还是java,数组都有一个length属性:获取数组长度

二、JavaScript自定义对象的方式

1.JavaScript自定义对象的方式1

定义一个对象,格式和定义函数相同的,形式参数不能带var

//方式1:
function 对象名(形式列表...)
//定义一个对象
function 对象(属性1,属性2,属性3...){  //属性就是某个真实世界事物的特征
	//给属性赋值
	//给对象添加功能(方法)
}
创建对象
var 对象名 = new 对象(实际参数1,实际参数2,实际参数3....)

具体实例

1)定义一个人对象

//定义一个人对象 
function Person(name,age,gender,address){//姓名,年龄,性别,住址  属性

2)给属性值

//给属性赋值
//this.属性名称 = 形式参数值;			
//=号左边name:就相当于要给Person对象添加name值		
this.name = name ;//=号右边name 当前形式参数里面的name
this.age = age ;
this.gender = gender ;
this.address = address;

3)给对象添加功能(方法)

//人会说英语
//this.方法名 = function(){}
this.speak = function(a){ //方法里面参数   a="英语"
    alert("会说"+a) ;//弹出提示框
}
//人会玩王者荣耀
this.playGame = function(){
	alert("会玩"+"王者荣耀") ;
}

4)创建一个具体的人

//创建一个具体的人:创建对象
			//var 对象名 = new 对象(实际参数1,实际参数2,实际参数3....)
			var p = new Person("xxx",20,"女","xxxx") ;

5)输出这个人的基本信息

//输出这个人的基本信息
//对象名.属性名 =获取内容
document.write("这个人的姓名是:"+p.name+",这个人的年龄是:"+p.age+",性别是:"+p.gender
			+",住址是:"+p.address) ;

6)调用方法

//调用方法
//对象名.方法名() ;	
p.speak("英语") ;
p.playGame() ;

2.JavaScript自定义对象的方式2

1)定义一个对象,不携带参数了

//定义一个对象
function Person(){
				
}

2)创建对象

//创建对象 人对象
var p=new Person();

3)追加属性

//自己追加属性
//对象名.追加的属性名称=实际值;
p.name="xxx";
p.age=19;
p.gender="男";
p.address="xx";

4)追加方法

//追加方法
//对象名.追加的方法名=function(空参/带参数){...}
p.speak=function(a){
	alert("会说"+a);
}
p.playGame=function(b){
	alert("会玩"+b);
}

5)输出这个人的基本信息

document.write("这个人的姓名是"+p.name+","+"年龄是"+p.age+","+"性别是"+p.gender+","+"住址是"+p.address);

6)调用方法

p.speak("英语");
p.playGame("王者荣耀");

3.JavaScript自定义对象的方式3

利用js内置对象:Object,代表的所有对象的模板

//利用js内置对象:Object,代表的所有对象的模板!
var 对象名 = new Object()

1)直接创建对象

//直接创建对象
var p = new Object() ;

2)追加属性

//追加属性
//对象名.属性名 = 值;
p.brand = "华为mate30pr0" ;// brand:品牌
p.price = 4699 ; //price:价格
p.color = "粉翠绿" ; //color:手机颜色
p.memory = "64G" ; //memory:手机内存

3)追加方法

//追加方法
//对象名.追加的方法名 = function(空参/带参数) {...}	
//打电话
p.call = function(toName){//高圆圆
	alert("这个手机给可以给"+toName+"打电话了") ;
}
//发短信
p.sendMessage = function(){
	alert("可以发短信") ;
}

4)打印出手机信息

//打印出手机信息
document.write("手机品牌是:"+p.brand+",它的价格是:"+p.price+",机身颜色是:"+p.color+",它的机身内存是:"+p.memory) ;

5)调用方法

p.call("高圆圆") ;
p.sendMessage() ;

4.JavaScript自定义对象的方式4

后期经常用到(重点),json数据格式(也称为 "字面量值的方式") 

json:Js对象简谱,是一种数据交互的格式(体现,前后端交互,使用json传参)

json数据解析速度非常快!

var 对象名 = {"key1":value1,"key2":value2....}

现在描述一个具体学生事物,有姓名,年龄,性别,学号这个几个属性    

 1)创建一个具体的类

 var student = {

 }

2)追加属性

//追加属性
"name":"xxx",
"age":19 ,
"gender" :"男",
"address":"xxx",

3)追加方法

 //追加方法:
//"方法名":function(){...}						 
//学习
"study":function(){
		alert("学习xxx") ;
}

4)访问方式

//访问方式:   var 值 = 对象名.key	 ;		
document.write("学生的姓名是:"+student.name+"<br/>") ;
document.write("学生的年龄是:"+student.age+"<br/>") ;
document.write("学生的性别是:"+student.gender+"<br/>") ;
document.write("学生的住址是:"+student.address+"<br/>") ;

5)访问方法

//访问方法
//对象名.方法名() ;
student.study() ;

三、JavaScript常用事件编程

这些所有的事件在标签上 只需要在事件名称前面加上on..,将指定的事件绑定到onxx属性上
        
       1)点击相关的事件
                  单击  click    -- onclick属性
                  双击  dbclick  -- ondblick属性
       2)焦点事件
                   获取焦点  focus ----> onfocus属性
                   失去焦点  blur ----> onblu       
       3)选项卡发生变化的事件,一般用在select下拉菜单中
                   事件名称 change  ---->onchange属性

1.单击点击事件函数

<body>
		<input type="button" value="click" onclick="testClick()"/>
</body>
<script>
		//单击点击事件函数
		function testClick(){
			alert("单击事件触发了");
</script>

2.双击点击事件函数

<body>
		<input type="button" value="dbclick" oncdblclick="testDbClick()"/>
</body>
<script>
		//双击点击事件函数
		function testDbClick(){
			alert("双击事件触发了");
</script>

3.获取焦点事件函数

<body>
    用户名:<input type="text" value="请输入用户名" id="username" 
		onfocus="textFocus()" />
</body>
<script>
    //获取焦点事件函数
		function textFocus(){
			//将文本输入框的value属性值清空
			//dom操作:通过id="username"获取input标签对象
			var a=document.getElementById("username");
			a.value="";//清空就是定义一个空字符串
		}
</script>

4.失去焦点事件函数

<body>
    用户名:<input type="text" value="请输入用户名" id="username" onblur="testBlur()" /><span id="tip"></span>
</body>
<script>
    //失去焦点事件函数
		function testBlur(){
			//需求:当鼠标移除文本输入框,触发失去焦点事件
			//获取文本输入的内容,判断它的内容是否是王炜斌,如果不是,在文本输入框后面提示
			//1)获取文本输入框的内容
			var username= document.getElementById("username").value;
			//2)获取id="tip"所在的span标签对象
			var a=document.getElementById("tip");
			//逻辑判断
			if(username!="xxx"){
				a.innerHTML="×".fontcolor("red");
			}else{
				a.innerHTML="√".fontcolor("green");
			}
			
		}
</script>

5.选项卡发生变化的事件

<body>
籍贯:
    <select onchange="testChange()">
	    <option value="请选择">请选择</option>
	    <option value="陕西省">陕西省</option>
	    <option value="山西省">山西省</option>
	    <option value="广东省">广东省</option>
    </select>
</body>

1)定义函数:选项卡发生变化的事件

function testChange(){

}

2)通过id="pro" 所在的select标签,获取它的标签对象

<body>
籍贯:
	<select onchange="testChange()" id="pro">
		<option value="请选择">请选择</option>
		<option value="陕西省">陕西省</option>
		<option value="山西省">山西省</option>
		<option value="广东省">广东省</option>
	</select>
		
</body>
<script>

    //定义函数:选项卡发生变化的事件
    function testChange(){

        //通过id="pro" 所在的select标签,获取它的标签对象
        var province = document.getElementById("pro");
}
</script>

3)获取下拉菜单的内容

<body>
籍贯:
	<select onchange="testChange()" id="pro">
		<option value="请选择">请选择</option>
		<option value="陕西省">陕西省</option>
		<option value="山西省">山西省</option>
		<option value="广东省">广东省</option>
	</select>
		
</body>
<script>

    //定义函数:选项卡发生变化的事件
    function testChange(){

        //通过id="pro" 所在的select标签,获取它的标签对象,同时获取下拉菜单的内容
        var province = document.getElementById("pro").value;
}
</script>

给第二个select标签(城市所在的下拉菜单),获取它的标签对象,动态拼接城市

4)获取id="city"所在的select标签对象

<body>
籍贯:
	<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 testChange(){

        //通过id="pro" 所在的select标签,获取它的标签对象,同时获取下拉菜单的内容
        var province = document.getElementById("pro").value;

        //获取id="city"所在的select标签对象
        var city =  document.getElementById("city") ;
}
</script>

5)判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"

<body>
籍贯:
	<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 testChange(){

        //通过id="pro" 所在的select标签,获取它的标签对象,同时获取下拉菜单的内容
        var province = document.getElementById("pro").value;
        //获取id="city"所在的select标签对象

        var city =  document.getElementById("city") ;
        //判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"
			if(province=="陕西省"){
				
			}
			
			if(province=="山西省"){
				
				
				
			}
			
			if(province=="广东省"){
			
				}
				
			}
}
</script>

6)定义一个城市数组

<body>
籍贯:
	<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 testChange(){

        //通过id="pro" 所在的select标签,获取它的标签对象,同时获取下拉菜单的内容
        var province = document.getElementById("pro").value;

        //获取id="city"所在的select标签对象
        var city =  document.getElementById("city") ;

        //判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"
			if(province=="陕西省"){

				//定义一个城市数组
				var arr = ["西安市","渭南市","咸阳市","宝鸡市"] ;
			}
			
			if(province=="山西省"){

				//定义一个城市数组
				var arr = ["太原市","晋中市","临汾市","大同市"] ;
			}
			
			if(province=="广东省"){

			    //定义一个城市数组
				var arr = ["广州市","东莞市","佛山市","深圳市"] ;
				
			}
}
</script>

7)遍历数组,获取每一个城市,拼接<option value="省份所属市">省份所属市</option> 文本

<body>
籍贯:
	<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 testChange(){

        //通过id="pro" 所在的select标签,获取它的标签对象,同时获取下拉菜单的内容
        var province = document.getElementById("pro").value;

        //获取id="city"所在的select标签对象
        var city =  document.getElementById("city") ;

        //判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"
			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>

优化:上述代码实现的结果是选择一个省份,获取的城市会叠加,因为是一个数组

所以需要将city的innerHTML清空掉,

这个清空放在判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"之前

<body>
籍贯:
	<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 testChange(){
        //通过id="pro" 所在的select标签,获取它的标签对象,同时获取下拉菜单的内容
        var province = document.getElementById("pro").value;
        //获取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>

实现省市联动

举报

相关推荐

Isaac Sim 2 (学习笔记4.26)

新媒体运营

4.26 接口

javajava-ee开发语言

JavaScript学习总结

javascript学习前端

4.26作业

dba

一天工作总结4.26

工作StrutsJSPApacheServletJavaScript前端开发

JavaScript基础总结学习

javascript

HTML5学习内容总结

html前端

JavaScript4.24学习总结

javascript

JavaScript中数组的学习总结

javascript前端开发语言

JavaScript的学习总结（原型对象）

前端基础HTML5
0 条评论