Javascript(2) js进阶-白红宇

#1.JavaScript核心操作——DOM对象

window对象

通过window对象，可以操作和浏览器软件相关的信息		// window.alert();//调用浏览器的对话框操作		// history对象：项目中几乎不用		//window.history.back();//后退操作,返回上一个访问历史		//window.history.forward();//前进操作，访问下一个访问历史		//window.history.go(2);//跳转到某一个访问历史		// location对象：项目中的url操作		/*console.log(location);		console.log(location.href);// 获取当前网页的url地址		console.log(location.protocol);//获取当前访问协议		console.log(location.host);// 获取访问网页的主机地址		console.log(location.hostname);		console.log(location.post);// 访问端口*/		// JS代码控制页面的指向		/*setTimeout(function() {			location.href="http://www.baidu.com"		}, 2000)*/		/*setTimeout(function() {			location.reload()// 刷新网页		}, 5000)*/		// screen对象		// screen表示电脑屏幕的意思		// screen.width/height表示的是电脑屏幕的宽度和高度分辨率		// screen.availWidth/screen.availHeight:屏幕的宽度和高度【不包含任务栏】		// console.log(screen.width, screen.height);		// console.log(screen.availWidth, screen.availHeight);		// navigator对象：浏览器软件的信息复制代码

screen对象

history对象

location对象

navigator对象

document对象

window事件操作

onload页面数据加载事件

onscroll页面滚动条事件

兼容问题：获取滚动条卷去网页高度

#2.DOM基础API操作

获取标签DOM对象

直接通过id属性值使用DOM对象通过id属性值获取：document.getElementById() 通过标签名称获取：document.getElementsByTagName() 通过class属性值获取：document.getElementsByClassName() 通过name属性值获取：document.getElementsByName() 混合获取，通常是id模式和tagName模式混合获取

代码操作

// 直接通过标签的id属性，得到标签对象【 不推荐】		console.log(box);		box.innerText = "可以通过标签的id属性直接使用标签"		// 通过getElemnetById("id")函数，来通过id属性值获取标签，【推荐】		var _box = document.getElementById("box2");		_box.innerText = "通过ElementById()函数获取标签对象，进行操作"		// 通过标签名称，可以获取到一组标签		var _boxes = document.getElementsByTagName("div");		console.log(_boxes);		_boxes[2].innerText = "这是通过getElementsByTagName()获取的元素"		// 通过标签的name属性，也可以获取到一组标签		var _jerry = document.getElementsByName("jerry");		console.log(_jerry);		_jerry.innerText = "通过name属性获取标签"		// 通过标签的class属性获取标签：IE8.0+		var _container = document.getElementsByClassName("container");		console.log(_container);		_container[0].innerText = "这个是通过class属性获取到的标签对象"复制代码

操作标签的DOM对象属性

标准函数操作

获取属性值：var x = getAttribute(name) 设置属性值：setAttribute(name, value) 移除属性：removeAttribute(name);

方括号操作

获取属性值：var x = dom[“name”]; 设置属性值：dom[“name”]=value;

连接符.操作

获取属性值：var x = dom.name; 设置属性值：dom.name = value; 备注：dom表示dom对象，name表示属性名称，value表示属性值操作标签的DOM对象样式

获取DOM对象样式

var x = document.currentStyle[name];兼容IE低版本的获取样式的方式 var x = getComputedStyle(dom)[name];获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】 Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。

	
    	
    	JS代码操作标签的样式			
    
	复制代码

设置DOM对象样式

直接通过style进行行内样式设置。 dom.style.样式名称 = 样式值; 样式名称可能是多个单词组成的 background-color，在JS中进行操作的时候需要将名称转换成驼峰命名法：backgroundColor 注意：尽量不要在JS中进行大量样式的设置。

对于标签内容的操作，有三种方式

innerText：给指定标签的开始标签和结束标签中增加文本内容【非W3C标准】

textContent：dom操作，给标签的开始标签和结束标签中增加文本内容，W3C标准操作

innerHTML：给标签的开始标签和结束标签中，增加一段HTML代码；慎重使用，容易造成代码注入漏洞！扩展：所谓代码注入漏洞，是用于可以在客户端通过输入包含代码的字符串的方式，将带入注入到我们的网页中进行执行的过程 innerHTML的使用规则 对于数据的来源，完全信任的情况下使用它。其他时候禁止使用！

代码操作：

	
    	
    	JS操作标签属性		
    	输入年龄：	复制代码

备注：在使用原生JS操作标签的属性时，规则如下

id属性、title属性，建议通过标签对象.属性名称的语法进行处理。

class属性，建议通过标签对象.className 的语法进行处理。

其他属性，建议使用set/getAttribute()的语法进行处理。

删除value属性。。。。：这样的语法是不能删除属性的 ~~_name.value = null;~~

#3.DOM核心API操作

节点属性API——获取元素定位

元素的尺寸(宽度、高度)、位置(top.left)

属性/函数名称	描述
offsetWidth	获取元素宽度；包含padding值\border值
offsetHeight	获取元素高度；包含padding值\border值
offsetTop	获取元素距离浏览器顶部的距离
offsetLeft	获取元素距离浏览器左边的距离

备注：如果父元素进行了relative/absolute定位，offsetTop/offsetLeft就是相对父元素的顶部和左边的距离，如果父元素默认定位，就是相对浏览器窗口的距离

备注：获取网页可视区域宽度，高度var clientWidth = window.innerWidth||document.documentElement.clientWidth;var clientHeight =       window.innerHeight||document.documentElement.clientHeight;获取网页文档的宽度、高度var bodyWidth = document.body.clientWidth;var bodyHeight = document.body.clientHeight;复制代码

实例：

节点查询API

属性/函数名称	描述
hasChildNodes()	判断是否包含子节点，返回一个布尔值
children	获取元素所有的子元素节点集合/数组
childNodes	获取元素所有的子节点集合/数组
firstChild	获取元素第一个子节点
firstElementChild	获取元素第一个子元素节点
lastChild	获取元素最后一个子节点
lastElementChild	获取元素最后一个子元素节点
previousSibling	获取元素前一个兄弟节点
previousElementSibling	获取元素前一个兄弟元素节点
nextSibling	获取元素后一个兄弟节点
nextElementSibling	获取元素后一个兄弟元素节点
parentNode	获取元素的父节点
textContent	操作(获取/设置)元素内容

节点创建/添加API

属性/函数名称	描述
createElement(tagName)	根据名称创建一个元素节点
createTextNode(text)	根据文本创建一个文本节点
insertBefore(new,old)	在指定的节点前面添加节点
appendChild(child)	在子节点的末尾追加节点
replaceChild(new,old)	使用新的节点替换指定的节点
removeChild(child)	移除指定的子节点
className	设置标签class属性样式值

#代码操作

#4.简单特效开发

抽奖

效果展示：

飞机飞行进度演示

	
    	飞机飞行进度演示		
    		
     
		![](images/flystart.png)	
    
		复制代码

效果展示：

#5.JavaScript事件——Event 事件操作：事件就是一种发生在网页上的行为；鼠标单击、鼠标双击、键盘按下、键盘抬起、获得焦点、失去焦点等等各种行为常见的事件：

鼠标事件

属性/函数名称	描述
onmouseout	鼠标离开
onmouseenter	鼠标进入
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

键盘事件

属性/函数名称	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

焦点事件：常用于表单元素标签

onfocus 获取焦点事件【获得光标事件】 onblue 失去焦点事件 onchange 内容修改事件，

事件的绑定方式： 1.标签属性绑定 2.dom元素绑定

鼠标拖拽功能

	
    	鼠标拖动		
    			
    
	复制代码

效果展示：

####扩展

瀑布流式布局

	
    	
    			
    		
     			
      
       ![](image/1.jpg)
      
		
     
		
     			
      
       ![](image/2.jpg)
      
		
     
		
     			
      
       ![](image/3.jpg)
      
		
     
		
     			
      
       ![](image/4.jpg)
      
		
     
		
     			
      
       ![](image/5.jpg)
      
		
     
		
     			
      
       ![](image/6.jpg)
      
		
     
		
     			
      
       ![](image/7.jpg)
      
		
     
		
     			
      
       ![](image/8.jpg)
      
		
     
		
     			
      
       ![](image/9.jpg)
      
		
     
		
     			
      
       ![](image/10.jpg)
      
		
     
		
     			
      
       ![](image/11.jpg)
      
		
     
		
     			
      
       ![](image/12.jpg)
      
		
     
		
     			
      
       ![](image/13.jpg)
      
		
     
		
     			
      
       ![](image/14.jpg)
      
		
     
		
     			
      
       ![](image/15.jpg)
      
		
     
		
     			
      
       ![](image/16.jpg)
      
		
     
		
     			
      
       ![](image/17.jpg)
      
		
     
		
     			
      
       ![](image/18.jpg)
      
		
     
		
     			
      
       ![](image/19.jpg)
      
		
     
		
     			
      
       ![](image/20.jpg)
      
		
     
		
     			
      
       ![](image/21.jpg)
      
		
     
		
     			
      
       ![](image/22.jpg)
      
		
     
		
     			
      
       ![](image/23.jpg)
      
		
     
		
     			
      
       ![](image/24.png)
      
		
     
		
     			
      
       ![](image/25.jpg)
      
		
     
		
     			
      
       ![](image/26.jpg)
      
		
     
		
     			
      
       ![](image/27.png)
      
		
     
		
     			
      
       ![](image/28.jpg)
      
		
     
		
     			
      
       ![](image/29.jpg)
      
		
     
		
     			
      
       ![](image/30.jpg)
      
		
     
		
     			
      
       ![](image/31.jpg)
      
		
     
		
     			
      
       ![](image/32.jpg)
      
		
     
		
     			
      
       ![](image/33.jpg)
      
		
     
		
     			
      
       ![](image/34.jpg)
      
		
     
		
     			
      
       ![](image/35.jpg)
      
		
     
		
     			
      
       ![](image/36.jpg)
      
		
     
		
     			
      
       ![](image/37.jpg)
      
		
     
		
     			
      
       ![](image/38.jpg)
      
		
     
		
     			
      
       ![](image/39.jpg)
      
		
     
		
     			
      
       ![](image/40.jpg)
      
		
     
	
    
	复制代码

效果展示：