JavaScript（二）

ゝ一世哀愁。 2022-02-17 14:09 177阅读 0赞

### 自定义对象 ###

//自定义对象声明
    	function Person(name,age){ 
    		//给对象添加属性
    		this.name=name;
    		this.age=age;
    		//添加方法
    		this.run = function(){ 
    			alert("我是"+this.name+"今年"+this.age);
    		}
    	}
    	//实例化对象 
    	var p = new Person("貂蝉",68);
    	p.run();
    	
    	
    	/* 第二种创建对象的方式 */
    	 	
    	 	var p2 = { 
    			"name":"刘备",
    			"age":30,
    			"run":function(){ 
    				alert("我叫"+this.name+"今年"+this.age);
    			}
    	}
    		p2.run();

### DHTML ###

*  简介： Dynamic（动态）html，把通过html+css+js实现出来的页面称为dhtml
 *  DHTML包括 BOM 和 DOM 两部分
 *  BOM： Browser浏览器 Object对象 Model模型，浏览器对象模型，包含和浏览器相关的各种内容
 *  DOM： Document文档 Object对象 Model模型，文档对象模型，包含和页面相关的所有内容

### 浏览器对象模型 ###

*  window： 窗口对象， window对象中的属性称为全局属性，方法称为全局方法，调用时可以省略window.
 *  window中常见的全局方法包括：  
    alert() 弹出提示框  
    comfirm() 弹出确认框  
    prompt() 弹出文本框  
    parseInt/Float()  
    isNaN() 判断变量是否是数
 *  window中常见的全局属性包括：

1.  location：位置  
    location.href 可以获取和修改浏览器的访问地址  
    location.reload(); 刷新页面
2.  history 历史  
    history.length 历史页面数量  
    history.back() 返回上一页面  
    history.forward() 前往下一页面  
    history.go(n) n正值前进 负值后退
3.  screen 屏幕  
    screen.width/height 屏幕宽高  
    screen.availWidth/availHeight 屏幕可用宽高
4.  navigator 导航/帮助  
    navigator.userAgent 获取浏览器的版本信息
5.  document 文档 DOM

### window里面常用的事件 ###

1.  点击事件： onclick 当点击窗口页面内部任何区域触发
2.  页面加载完成事件： onload 当页面加载完成时触发
3.  页面获取焦点事件：onfocus 当用户返回页面时触发
4.  页面失去焦点事件：onblur 当用户离开页面时触发

### eval方法 ###

*  此方法可以将字符串以js代码形式执行

### 通过js代码给元素添加样式 ###

元素对象.style.样式名称="值";

### 定时器 ###

setInterval(方法,时间间隔 毫秒);

### 通过标签名获取页面中的元素们 ###

var arr = document.getElementsByTagName("标签名");

### 轮播图相关事件 ###

1.  当鼠标移动到元素上触发的事件 onmouseover
2.  当鼠标移出元素触发的事件 onmouseout

### 定时器 ###

开启 var timer = setInterval(方法,时间间隔);  
停止 clearInterval(timer);

### 只执行一次的定时器 ###

setTimeout(方法,时间间隔)

### DOM 文档对象模型 包含和页面相关的内容 ###

*  学习DOM主要学习如果对页面内容进行修改

#### 如何获取页面中的元素 ####

1.  通过id获取  
    var d = document.getElementById(“id”);
2.  通过标签名获取  
    var arr = document.getElementsByTagName(“标签名”);
3.  通过name属性获取  
    var arr = document.getElementsByName(“name”);
4.  通过class属性获取  
    var arr = document.getElementsByClassName(“class”);
5.  获取body  
    document.body

#### 创建元素对象 ####

var d = document.createElement("div");  
    d.innerText="zzz";   d.innerHTML="";

#### 把元素添加到某个元素内部 ####

父元素.appendChild(新的子元素);

#### 插入元素 ####

父元素.insertBefore(新的子元素,弟弟元素);

#### 删除元素 ####

父元素.removeChild(被删除的子元素);

### 事件相关 ###

*  已经接触过的事件： onclick onblur onsubmit onfocus onmouseover onmouseout onchange onload onresize
 *  事件：事件就是一些特定的时间点，事件包括鼠标事件、键盘事件、状态改变事件
 *  鼠标事件： 鼠标点击事件onclick 鼠标移入事件onmouseover 鼠标移出onmouseout 鼠标按下事件onmousedown 鼠标抬起事件onmouseup 鼠标移动事件onmousemove
 *  键盘事件：键盘按下事件onkeydown 键盘抬起事件onkeyup
 *  状态改变事件： 页面加载完成onload 值改变事件onchange 获取焦点onfocus 失去焦点onblur 提交事件onsubmit 窗口尺寸改变事件onresize

#### 事件绑定 ####

1.  在元素内部通过事件属性绑定事件  
    在事件方法中this代表window
2.  动态绑定，通过js代码给元素对象添加事件  
    在事件方法中this代表事件源

#### event对象 ####

*  event对象中保存着和事件相关的信息

1.  鼠标事件中 可以获取鼠标的坐标 event.clientX/Y
2.  键盘事件中 可以获取键盘的字符编码 event.keyCode
3.  在任何事件中可以通过event对象获取事件源  
    var obj = event.target||event.srcElement;

#### 获取事件源的三种方式 ####

1.  非动态绑定可以将事件源从事件属性的位置传递过去  
    < input type=“button” value=“非动态绑定按钮” οnclick=“fn1(this)”>
2.  动态绑定的事件中 this代表的就是事件源
3.  在任何方式绑定的事件中 通过event对象获取都可以  
    var obj = event.target||event.srcElement;

#### 取消事件 ####

*  在任何事件中执行return false; 即可取消当前事件

#### 事件传递（事件冒泡） ####

*  如果在同一个范围有多个事件响应，响应顺序从底层往上层传递，类似气泡从下往上，所以称为事件冒泡
 *  如果在某一个范围多个元素需要添加事件，可以把事件添加到这些元素共同的上级元素，只需要添加一次，即可让所有子元素全部具备该事件，好处是可以节省代码。