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   屏幕

1. 常用事件

       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 
复习

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

JS原生第七篇 （帅哥）