JS原生第七篇（帅哥）

1.1
复习

offset 自己的偏移

offsetWidth 得到自己的宽度

offsetHeight

构成： width + padding + border

div width 200 border 3px padding-right: 15px

div offsetWidth = 200 + 6 + 15 = 221

2. offsetLeft offsetTop

div.offsetLeft

得到距离这个 div 最近的带有定位的父盒子左边距离

3. offsetParent 返回自己的父亲元素（带有定位的）

parentNode 这个返回亲父亲不管父亲是否带有定位

4. style.top offsetTop

offsetTop 只读只可以得到结果但是不能赋值

style.top 能得到（行内式）但是可以给值

style.top 得到的是 25px

offsetTop 得到的是 25

5. 事件对象 event

div.onclick = function(event) { } event 是点击的事件对象

event 集合点击事件的相关信息

pageX 文档的参考点

clientX 可视区域

ScreenX 屏幕

常用事件

onmouseover 经过

onmouseout 离开

onmousemove 鼠标移动

var num = 0;

div.onmouseover = function() { num++; console.log(num))} 1

div.onmousemove = function() { num++; console.log(num))}

onmousedown 按下鼠标

onmouseup 弹起鼠标

拖拽：先按下鼠标然后移动鼠标

bar.onmousedown = funtion() {

document.onmousemove = function() {}

}

最大 window 对象 document对象

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); ie

1.2 模拟垂直滚动条

红色盒子高度计算公式：容器的高度 / 内容的高度 * 容器的高度

红色方块移动一像素，我们的内容盒子移动多少呢？

（内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) 计算倍数

（内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值

1.3 Html基本结构访问方法

文档是 document

html body head

document.head

document.body

document.title

没有 document.html 取而代之的是 document.documentElement;

1.4 scroll家族

Offset 自己的偏移

scroll 滚动的

1.4.1 scrollTop scrollLeft

scrollTop 被卷去的头部

它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

1.4.2 怎么得到scrollTop

我们学习一个事件：页面滚动效果

window.onscroll = function() { 页面滚动语句 }

谷歌浏览器和没有声明 DTD <DOCTYPE > ：

document.body.scrollTop;

火狐和其他浏览器

document.documentElement.scrollTop;

ie9+ 和最新浏览器都认识

window.pageXOffset; pageYOffset （scrollTop）

兼容性写法：

1 var scrollTop = window.pageYOffset || document.documentElement.scrollTop

2 || document.body.scrollTop || 0;

1.4.3 JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。JSON实际上就是JavaScript

Json很像我们学过的样式条；

var myjson={k:v,k:v,k:v...} 键值对 key: value color: red;

Json一般就是被当做一个配置单用；

我们的网站，可以注册会员：

姓名：李白

年龄: 500

职业： it

xml

json 对象结构书写：

var json = { key: value， key1:value }

var json = {name: “李白”,age: 15}

使用：

json名.属性 json.name 李白

var json1 = {name :"刘德华",age: 55};
console.log(json1.name); // 输出名字刘德华
console.log(json1.age); // 输出年龄 55

1.4.4 判断是不是怪异模式的浏览器

document.compatMode == "CSS1Compat"

document.compatMode === "BackCompat"

BackCompat 未声明

CSS1Compat 已经声明

注意大小写

1.5 scrollTo(x,y)

window.scrollTo(15,15);

方法可把内容滚动到指定的坐标。

格式：

scrollTo(xpos,ypos)

xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标

因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。

1.6
复习

window - document
document.title document.head document.body
document.documentElement (约等于 document.html )
scrollTop 被卷去的头部 scrollLeft 封装自己的函数
scrollTo(x,y) 去往页面的 x 和 y 坐标的位置
window.scrollTo(x,y)
window.onscroll = fucntion() { fun (); } fun() function() {iffss }
JSON js 对象表示法数据传输
var json = {} 对象 var arr = [] ; 数组 var num; 变量
var json = { width: “100px” , height: 100 } 声明的方法
json.height 100 使用

1.7 client 家族

client 可视区域

offsetWidth: width + padding + border （披着羊皮的狼）

clientWidth： width + padding 不包含border

scrollWidth: 大小是内容的大小

1.7.1 检测屏幕宽度(可视区域)

ie9及其以上的版本

window.innerWidth

标准模式

document.documentElement.clientWidth

怪异模式

document.body.clientWidth

自己封装一个返回可视区宽度和高度的函数。

1.7.2 window.onresize 改变窗口事件

昨天 window.onscroll = function() {} 屏幕滚动事件

今天 window.onresize = function() {} 窗口改变事件

onresize 事件会在窗口或框架被调整大小时发生

要求：

当我们的页面宽度大于 960 像素的时候页面颜色是红色

当我们的页面宽度大于 640 小于 960 页面的颜色是绿色

剩下的颜色是蓝色

function fun() { 语句 }

fun 是函数体的意思

fun() 调用函数的意思

1.8 检测屏幕宽度(分辨率)

clientWidth 返回的是可视区大小浏览器内部的大小

window.screen.width 返回的是我们电脑的分辨率跟浏览器没有关系

1.9 简单冒泡机制

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

顺序

E 6.0:

div -> body -> html -> document

其他浏览器:

div -> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

1.9.1 阻止冒泡的方法

标准浏览器和 ie浏览器

w3c的方法是event.stopPropagation() proPagation 传播传递

IE则是使用event.cancelBubble = true bubble 冒泡泡泡 cancel 取消

兼容的写法：

3 if(event && event.stopPropagation)

4 {

5 event.stopPropagation(); // w3c 标准

6 }

7 else

8 {

9 event.cancelBubble = true; // ie 678 ie浏览器

10 }

1.9.2 小案例点击空白处隐藏盒子

这个案例就是说，一个盒子，点击除了自己之外的任何一个地方，就会隐藏。

原理：

点击自己不算 ( 怎么证明我是我点击的这个对象id 正好和自己一样 )

点击空白处就是点击 document

1.9.3 判断当前对象

火狐谷歌等 event.target.id

ie 678 event.srcElement.id

兼容性写法：

var targetId = event.target ? event.target.id : event.srcElement.id;

targetId != "show"

代码：

1 <!DOCTYPE html>

11 <html>

12 <head lang="en">

13 <meta charset="UTF-8">

14 <title></title>

15 <style>

16 body {

17 height:2000px;

18 }

19 #mask {

20 width: 100%;

21 height: 100%;

22 opacity: 0.4; /*半透明*/

23 filter: alpha(opacity = 40); /*ie 6半透明*/

25 position: fixed;

26 top: 0;

27 left: 0;

28 display: none;

29 }

30 #show {

31 width: 300px;

32 height: 300px;

33 background-color: #fff;

34 position: fixed;

35 left: 50%;

36 top: 50%;

37 margin: -150px 0 0 -150px;

38 display: none;

39 }

40 </style>

41 </head>

42 <body>

43 <a href="javascript:;" id="login">注册</a>

44 <a href="javascript:;">登录</a>

45 <div id="mask"></div>

46 <div id="show"></div>

47 </body>

48 </html>

49 <script>

50 function $(id) { return document.getElementById(id);}

51 var login = document.getElementById("login");

52 login.onclick = function(event) {

53 $("mask").style.display = "block";

54 $("show").style.display = "block";

55 document.body.style.overflow = "hidden"; // 不显示滚动条

56 //取消冒泡

57 var event = event || window.event;

58 if(event && event.stopPropagation)

59 {

60 event.stopPropagation();

61 }

62 else

63 {

64 event.cancelBubble = true;

65 }

66 }

67 document.onclick = function(event) {

69 var event = event || window.event;

70 // alert(event.target.id); // 返回的是点击的某个对象的id 名字

71 // alert(event.srcElement.id);

72 var targetId = event.target ? event.target.id : event.srcElement.id;

73 // 看明白这个写法

74 if(targetId != "show") // 不等于当前点点击的名字

75 {

76 $("mask").style.display = "none";

77 $("show").style.display = "none";

78 document.body.style.overflow = "visible"; // 显示滚动条

79 }

80 }

81 </script>

1.9.4 选中之后，弹出层

我们想，选中某些文字之后，会弹出一个弹出框

这个和我们前面讲过的拖拽有点不一样。

拖拽是拖着走。拉着鼠标走。

选择文字：这个弹出的层选中的时候不出来，弹起鼠标的时候才出现。

所以这个的事件一定是 onmouseup . 盒子显示而且盒子的位置再鼠标的 clientX 和 clientY 一模一样

用来判断选择的文字：

1.9.5 获得用户选择内容

window.getSelection() 标准浏览器

document.selection.createRange().text; ie 获得选择的文字

兼容性的写法：

if(window.getSelection)
{
txt = window.getSelection().toString(); // 转换为字符串
}
else
{
txt = document.selection.createRange().text; // ie 的写法
}

综合代码:

1 <!DOCTYPE html>

82 <html>

83 <head lang="en">

84 <meta charset="UTF-8">

85 <title></title>

86 <style>

87 div {

88 width: 400px;

89 margin:50px;

90 }

91 #demo {

92 width: 100px;

93 height: 100px;

95 position: absolute;

96 top: 0;

97 left: 0;

98 display: none;

99 }

100 </style>

101 </head>

102 <body>

103 <span id="demo"></span>

104 <div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div>

105 <div id="another">

106 我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字我不要的文字

107 </div>

108 </body>

109 </html>

110 <script>

111 function $(id) {return document.getElementById(id)}

112 $("test").onmouseup = function(event) {

113 var event = event || window.event;

114 var x = event.clientX; // 鼠标的x坐标

115 var y = event.clientY; // 同理

116 var txt; // 用于存贮文字的变量

117 if(window.getSelection) // 获取我们选中的文字

118 {

119 txt = window.getSelection().toString(); // 转换为字符串

120 }

121 else

122 {

123 txt = document.selection.createRange().text; // ie 的写法

124 }

125 if(txt) // 所有的字符串都为真 "" 是假所有的数字为真 0 为假

126 {

127 //看看有没有选中的文字，没有选中文字为空的，就不应该执行点击一下鼠标就是空的

128 showBox(x,y,txt); // 调用函数

129 }

130 }

131 document.onclick = function(event) { // 点击空白处隐藏

132 var event = event || window.event;

133 var targetId = event.target ? event.target.id : event.srcElement.id;

134 if(targetId != "demo"){

135 $("demo").style.display = "none";

136 }

137 }

138 function showBox(mousex,mousey,contentText) { // 相关操作

139 setTimeout(function(){

140 $("demo").style.display = "block";

141 $("demo").style.left = mousex + "px";

142 $("demo").style.top = mousey + "px";

143 $("demo").innerHTML = contentText;

144 },300);

145 }

146 </script>

1.10 动画原理

人走路的时候，步长

动画的基本原理：让盒子的 offsetLeft + 步长

盒子原来的位置 0 + 10 盒子现在的offsetLeft 10

10 + 10 = 20 + 10

原理：

|-5| = 5

Math.abs(-5) 取绝对值函数 js 就是数学计算

1.10.1 匀速运动封装函数

1 function animate(obj,target){

147 var speed = obj.offsetLeft < target ? 5 : -5; // 用来判断应该 + 还是 -

148 obj.timer = setInterval(function() {

149 var result = target - obj.offsetLeft; // 因为他们的差值不会超过5

150 obj.style.left = obj.offsetLeft + speed + "px";

151 if(Math.abs(result)<=5) // 如果差值不小于 5 说明到位置了

152 {

153 clearInterval(obj.timer);

154 obj.style.left = target + "px"; // 有5像素差距我们直接跳转目标位置

155 }

156 },30)

157 }