[学习总结]小tip

1.JavaScript内置对象Array

Javascript是一个弱类型语言,数组对象不存在角标越界,元素可以不断扩容

创建Array对象的三个方式:

(1) var 数字对象名 = new Array( ); 不指定长度

(2) var 数字对象名 = new Array( ); 指定数组长度

(3) var 数组对象名 = new Array( );[元素1,元素2,…]

也可以简化为

var 数组对象名 =[元素1,元素2,… ];

//方法1:创建数组对象
var arr = new Array() ;
// 方法2: 数组对象名 = new Array(size) ; //指定数组长度
var arr = new Array(4) ;//数组中最大索引值:arr.length-1
//方法3:  var 数组对象名 = [元素1,元素2,...];
var arr =  [10,"hello",turn,'a','b',1,new object()];
//虽然可以储存任何类型,但是实际开发中,具体元素类型肯定是统一的!;


var arr = ["陕西","西安","鄠邑区"];
        arr[0] = 1;
		arr[1] = 2;
		arr[2] = 4;
		arr[3] = 20;
		alert(arr.length);
for(var i=0 ; i < arr.length ; i++){
		document.write(arr[i] + "<br/>");
						
		}

2.JavaScript自定义对象的方式(初步了解)

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

最后对实际参数进行输出

例1

     //定义一个对象
 function computer(pinpai,size,cpu,ssd){
	 //品牌,尺寸,处理器型号,硬盘型号
     //给属性赋值
			   
	 //=左边pinpai:就相当于要给computer对象添加pinpai属性(this:代表的是当前pinpai对象一个地址值)
	 //=右边品牌  当前形势里面的参数
			   
     //this.属性名称 = 形式参数值;
 this.pinpai = pinpai ;
 this.size = size ;
 this.cpu = cpu ;
 this.ssd = ssd ;
			   
 }
		   
  var p =new computer("华为","14英寸","inter","西部数据") ;
 document.write("电脑的品牌是:"+p.pinpai+ ",电脑的尺寸是"+p.size+ ",处理器型号是"+p.cpu+",固态硬盘选的是"+p.ssd+"<br/&gt;");

输出结果:

 (2) //方法2:定义对选哪个的时候,function 对象(){}  //不携带参数了
        //创建对象:  var 对象名 = new 对象() ;

例2

   //定义一个人对象
function Person(){
				
			}
			
   //创建对象  人对象
	var p = new Person() ;
			
	//自己追加的属性
	//对象名.追加的属性名称 = 实际值;
p.name = "法外狂徒张三" ;
p.age = 50 ;
p.gender = "男" ;
p.address = "比尔吉沃特" ;
p.high = 183 ;
	
	//追加方法
	//对象名.追加的方法名(实参/空参){ ..}
p.speak = function(a){
		alert("会"+a);
}
	//输出这个人的基本信息
	//对象名.属性名 = 获取内容
	//对象名.方法名(); 调用方法
document.write("这个人的姓名是:"+p.name+",这个人的年龄是:"+p.age+",性别是:"+p.gender+",住址是:"+p.address+",身高为:"+p.high);
			
p.speak("英语") ;

输出结果:

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

例3

        //直接创建对象
	var  p =  new Object();
		//追加属性
		//对象名.属性名 = 值;
	p.brand = "华为mate30pr0" ;// brand:品牌
	p.price = 4699 ; //price:价格
	p.color = "粉翠绿" ; //color:手机颜色
	p.memory = "64G" ; //memory:手机内存
			
		//追加方法
		//对象名.追加的方法名 = function(空参/带参数) {...}
			
		//打电话
	p.call = function(toName){//高圆圆
	alert("这个手机给可以给"+toName+"打电话了") ;
		}
		//发短信
	p.sendMessage = function(){
	alert("可以发短信") ;
		}
			
		//打印出 手机信息 以及调用手机的这两个功能
	document.write("手机品牌是:"+p.brand+",它的价格是:"
+p.price+",机身颜色是:"+p.color+",它的机身内存是:"+p.memory) ;
			
	p.call("高圆圆") ;
	p.sendMessage() ; 

 (4) json数据格式(也称为 “字面量值的方式“)                    
       //json:Js对象简谱,是一种数据交互的格式(体现,前后端交互,使用json传参)
       //json数据解析速度非常快!
        var 对象名 = {“key1″:value1,”key2″:value2….}
        现在描述一个具体学生事物
         姓名,年龄,性别,地址这个几个属性

例4

var student = {
			//追加属性
	    "name":"王宝强",
	    "age":35 ,
    	 "gender" :"男",
	     "address":"渭南市",
									 
			 //追加方法:
			 //"方法名":function(){...}
									 
			//学习
		 "study":function(){
			 alert("学习Javascript") ;
				 }
						  
			};
									
									
			//访问方式:    var 值 = 对象名.key	 ;		
		document.write("学生的姓名是:"+student.name+"<br/>") ;
		document.write("学生的年龄是:"+student.age+"<br/>") ;
		document.write("学生的性别是:"+student.gender+"<br/>") ;
		document.write("学生的住址是:"+student.address+"<br/>") ;
			//访问方法
			//对象名.方法名() ;
		student.study() ;

输出结果:

4.JavaScript通过方法获取标签对象

当在输入框中输入内容完毕,鼠标光标失去焦点,触发一个失去焦点事件,将文输入框的内容弹框出来
      失去焦点事件:        blur事件  —标签中 onblur属性

5.JavaScript常用事件编程

将所有的时间在标签上,值需要在事件名称前面加上on, 将指定的事件绑定到onxxx属性上

(1) 点击相关事件

        单击:click   —>onclick属性

        双击:dbclick  —>ondbclick属性

(2) 焦点事件

        获取焦点: focus  —>onfocus属性

        失去焦点: blur  —>onblur属性

(3)选项卡发生变化的事件,一般用在select下拉菜单中

        事件名称: change  —>onchange属性

            //单击点击事件函数
	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> "
				}
				
			}
			
		}

代码007普通

打赏 收藏 海报 链接