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() 调用函数 的意思
function fun() {
return 3;
}
console.log(fun); // 返回函数体 function fun() { retrun 3}
console.log(fun()); // 调用函数 3 返回的是结果
fun();
window.onresize = 3
window.onresize = function fun() { retrun 3}
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半透明*/
24
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) {
68
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;
94
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
原理：
<script>
//动画的基本原理 盒子的 offsetLeft + 步长
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function() {
timer = setInterval(function() {
if(div.offsetLeft > 400)
{
clearInterval(timer);
}
div.style.left = div.offsetLeft + 10 + "px";
},20);
}
</script>
|-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 }