第七次网页前端培训笔记（JS的内置对象，对象，事件）

一、内置对象

内置函数
          

 String

        charAt(idx)    返回指定位置的字符
         indexOf(Chr)   返回指定子字符串的位置，从左到右。找不到返回i-
         substr(m,n)    返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到3字符串末尾。
          substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
            toLowerCase()  将字符串中的字符全部转化成小写。
            toUpperCase()  将字符串中的字符全部转化成大写。
            length         属性，不是方法，返回字符串的长度。
                

var str = "Hello Word";
			 console.log();
			 console.log(str);
			 console.log(str.substring(3)); //从下标3开始，截取到最后
			 console.log(str.substring(3,5)); //从下标3开始，到下标5结束
			 
			  console.log(str.toLowerCase());//转小写
			  console.log(str.toUpperCase()); //转大写

          

 Math

          Math.radom()    随机数
          Math.ceil()     向上取整，大于最大整数
          Math.floor      向上取整，小于最小整数String
            
         

//Math.radom()    随机数
			  console.log(Math.random());
			  //Math.ceil()     向上取整，大于最大整数
			  console.log(Math.ceil(1.2));
			  //Math.floor      向上取整，小于最小整数String
			  console.log(Math.floor(1.2));

   Date
          

         获取日期

             getFullYear()      年
             getMonth()         月
             getDate()          日
             getHours()         时
              getMintes()        分
              getSeconds()       秒
        

     设置日期

                  setYear()
                  setMontth()
                  setDate()
                  setHours()
                  setMinutes()
                  setSeconds()
                  toLoacalsString() 转换成本地时间字符串
        

//得到日期对象
			  var date = new Date();
			  console.log(date);
			  //getFullYear()      年
			  console.log(date.getFullYear());
			  //getMonth()         月
			  console.log(date.getMonth() + 1);  //0~11
			  //getDate()          日
			  console.log(date.getDate() );
			  //getHours()         时
			  console.log(date.getHours());
			  //getMinutes()        分
			  console.log(date.getMinutes());
			  //getSeconds()       秒
			  console.log(date.getSeconds());
			  var mstr = date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes()
			  var dateStr = date.getFullYear()+"-"+(date.getMonth() + 1) + "-" +date.getDate()+ " " +date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
			  console.log(dateStr);
			//时间本地化
			console.log(date.toLocaleString());

二、对象 

一、对象创建

         

1.字面量形式创建对象

                      var 对象名 = {};  //对象
                      var 对象名 = {
                          键：值，
                          键：值，
                          ....
                      };

//字面量形式创建对象
		  var obj1 = {};  //空对象
		  console.log(obj1);
		  var obj2 = {
			  name:"zhangsan",
			  age:18
		  };

2.通过Object创建

                        var 对象名 = new Object(); //空对象
                    3.通过Object对象的create方法创建
                        var 对象 = Object.creat(null); //空对象
                        var 对象 = Object.creat(对象);

/通过new Object创建
		  var obj3 = new Object(); // 空对象
		  console.log(obj3);
		  
		  //通过Object对象的create方法创建
		  var obj4 = Object.create(null);  //空对象
		  console.log(obj4);
		  
		  var obj5 = Object.create(obj2);
		  console.log(obj5);

二、对象的操作

        获取对象的属性(如果属性不存在，则获取null)
        对象名.属性名;

console.log(obj1.name);

         设置对象属性  (如果属性存在则修改属性值，如果属性并不存在，则添加属性值)
          对象名.属性名 = 值;
         file:///D:/梅克尔/Web/B22-李佳明-网页前端7/index.html

       

//存在的属性，修改属性值
		obj2.age = 20;
		console.log(obj2);
		//不存在的属性，添加属性值
		obj2.pwd = "123456";
		console.log(obj2);

 三、对象的序列化和反序列化

       序列化: 将JS对象(JSON对象) 转换成JSON字符串
                      var 变量名 = JSON.stringify(对象);

//将JSON对象转换成JSON字符串
		var objToStr = JSON.stringify(obj);

        反序列化:将JSON字符串转换成JS对象(JSON对象)
                        var 对象名 = JSON.parse(JSON字符串);

//将JSON字符串转换成JSON对象
		var strToObj = JSON.parse(jsonStr);

 四、this

          谁调用函数，this指代谁。
           1.直接调用函数，this代表的全局的window对象
            2.调用对象中的函数，this代表的时对象本身。

//1.直接调用函数，this代表的全局的window对象
		function test(){
			console.log("这是一个测试方法....");
			console.log(this); //window对象
		}
		test();
		//2.调用对象中的函数，this代表的时对象本身。
		var o = {
			name:"zangsan",
			age:18,
			sayHello:function(){
				console.log("你好呀~");
				console.log(this);
			}
		} //调用对象中的方法
		o.sayHello();

三、JS事件 

事件中几个名词:

                 事件源：给什么元素/标签绑定事件
                 事件名: 绑定什么事件
                 事件监听: 浏览器窗口
                 执行函数: 事件触发后需要执行什么代码

常用的事件类型

                 onload: 当页面或图像加载完后立即触发
                 onblur: 元素失去焦点
                 onfocus: 元素获得焦点
                 onclick: 鼠标点击某个对象
                 onchange: 用户改变域的内容
                 onmouseover: 鼠标移动到某个元素上
                 onmouseout: 鼠标从某个元素上离开
                 onkeyup:某个键盘的键被松开
                 onkeydown: 某个键盘的键被按下
          

事件流

                 事件冒泡：事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文档)
                 事件捕获: 事件开始时由文档节点接受，然后逐级向下传播到具体的元素节点
            

事件处理程序

                  1.HTML事件处理程序
                      直接在HTML元素上绑定事件
                  2.DOM0级事件
                      先获取事件源，再给事件源绑定事件
                      不能同时给元素绑定相事件多次
                  3.DOM2级事件
                      事件源.addEventListener("事件类型",执行函数,true)
                  

<!--  HTML事件处理程序  -->
			<button type = "button" onclick = "alert('Hello')">按钮1</button>
			<!--  DOM0级事件  -->
			<button type = "button" id="btn2">按钮2</button>
			<!--  DOM2级事件  -->
			<button type = "button" id="btn3">按钮3</button>




<script type = "text/javascript">
/*  DOM0级事件  */
		   //1.事件源：获取事件源
		   var btn2 = document.getElementById("btn2");
		   console.log(btn2);
		   //2.事件类型：给事件源绑定指定事件
			   
		   btn2.onclick = function(){
			   console.log("按钮2被点击了.....");
		   }
		   btn2.onmouseout = function(){
			   console.log("鼠标离开按钮2了....");
		   }
		   //3.事件函数：事件触发后要执行的代码
		   /*  DOM2级事件  */
		   //1.事件源：获取事件源
		   var btn3 = document.getElementById("btn3");
		   console.log(btn3);
		   //添加事件监听
		   btn3.addEventListener("click",function(){
			   console.log("按钮3被点击了")
		   },false);
		   
		   btn3.addEventListener("mouseout",btn5,false);
		   function btn5(){
			   console.log("鼠标离开按钮3了...")
		   }
</script>

                  
                  注：通过id属性值获取节点对象
                  document.getElementById("id属性值")；