目录：

　　一、CSS补充

　　　　1、position

　　　　2、overflow

　　　　3、hover

　　　　4、background

　　二、JavaScript

　　三、DOM

主要内容：

　　一、CSS补充　　

　　1、position

　　可以定义元素锚定到哪个位置

　　1、fixed固定在窗口的某个位置

　　例子：

　　将网页分为上下两部分，其中头部占据页面上方，内容部分可以滑动，但是头部不会被覆盖

  1.  <style>
  2.          .pg-header{
  3.              height:48px;
  4.              background-color: black;
  5.              color:#dddddd;
  6.              position: fixed;
  7.              top:0;
  8.              right:0;
  9.              left:0;
  10.  
  11.          }
  12.  
  13.          .pg-body{
  14.              background-color: #dddddd;
  15.              height: 5000px;
  16.              margin-top:48px;
  17.          }
  18.      </style>
  19.  </head>
  20.  <body>b
  21.      <div class="pg-header">头部</div>
  22.      <div class="pg-body">内容</div>
  23.  </body>

　　2、absolute 绝对定位 ，需要和relative一起使用

　　将absolute嵌套在relatvie中，实现某一特定位置的绝对定位

  1.  <body>
  2.      <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
  3.          <div style="position: absolute;left:0;bottom: 0; width:50px;height: 50px;background-color:black"></div>
  4.      </div>
  5.      <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
  6.          <div style="position: absolute;right:0;bottom: 0; width:50px;height: 50px;background-color:black"></div>
  7.      </div>
  8.      <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
  9.          <div style="position: absolute;right:0;top: 0; width:50px;height: 50px;background-color:black"></div>
  10.      </div>
  11.

　　3、opacity：取值0~1，0表示全透明，1表示完全遮住

　　例子：页面三层分层

  1.  <body>
  2.      <div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color: white;height:400px;width:500px">
  3.          <input type="text" />
  4.      </div>
  5.      <div style="z-index: 9;position:fixed;top:0;bottom: 0;right:0;left:0;opacity: 0.5;background-color:black"></div>
  6.      <div style="height: 5000px;background-color:green">abc</div>
  7.  </body>

　　

　　

　　2. overflow

　　overflow包含两个属性：

　　1、hidden：超出的部分隐藏

　　2、auto：超出的部分出现滚动条

　　例子：定义div标签，同时在该标签内定义一个超出标签范围的图片，查看该效果。

　　（1）超出部分隐藏

  1.  <div style="height:200px;width:200px;overflow: hidden;">
  2.          <img src="a.jpg"/>
  3.      </div>

　　(2) 超出部分变为滚动条

  1.  <div style="height:200px;width:200px;overflow:auto ">
  2.         <img src="a.jpg"/>
  3.     </div>

　　3、hover

　　当鼠标移动某一个元素下，应用该元素另外定义的一个CSS属性中，使用hover元素

  1.  <head>
  2.      <meta charset="UTF-8">
  3.      <title>Title</title>
  4.      <style>
  5.          .pg-header{
  6.              position: fixed;
  7.              top:0;
  8.              right:0;
  9.              left:0;
  10.              height:48px;
  11.              background-color:#2459a2;
  12.              line-height:48px;
  13.              color:white;
  14.  
  15.          }
  16.          .pg-body{
  17.              margin-top: 50px
  18.          }
  19.          .w{
  20.              width:980px;
  21.              margin:0 auto;
  22.  
  23.          }
  24.          .pg-header .menu{
  25.              display: inline-block;
  26.              padding:0 10px;
  27.          }
  28.          .pg-header .menu:hover{
  29.              background-color:blue;
  30.          }
  31.  
  32.      </style>
  33.  </head>
  34.  <body>
  35.      <div class="pg-header">
  36.          <div class="w">
  37.              <a class="menu">LOGO</a>
  38.              <a class="menu">最新发布</a>
  39.              <a class="menu">人类</a>
  40.              <a class="menu">24区</a>
  41.              <a class="menu">段子</a>
  42.          </div>
  43.      </div>
  44.      <div class="pg-body">
  45.          <div class="w"></div>
  46.      </div>
  47.  </body>

　　4、background

　　background分为几种不同的属性：

　　1、background-color：定义背景颜色

　　2、background-image：url（image位置加名字） 定义背景图片

　　3、background-repeat：repeat-x|repeat-y|no-repeate哪个位置重复

　　4、background-position：背景图片的位置定义可以但是使用background-position-x和background-postion-y分别定义

　　5、background：背景颜色     iamge  哪个位置重复     x轴位置  y轴位置    background可以一次全部定义

　　例子：

　　

  1. <div style="background:#dddddd url(a.jpg) no-repeat 80px 80px;height: 800px;"></div>
  1.   <style>
  2.          .menu{
  3.              height:30px;
  4.              width:200px;
  5.              position: relative;
  6.  
  7.          }
  8.          .input_w{
  9.              height:30px;
  10.              width:190px;
  11.              padding-right:20px;
  12.          }
  13.      </style>
  14.  </head>
  15.  <body>
  16.  
  17.              <div class="menu">
  18.  
  19.                  <input class='input_w' type="text"  name='name'  />
  20.                  <span style="position:absolute;left:190px;top:5px;background-image:url(i_name.jpg);background-position:3px  5px;background-repeat: no-repeat;
  21.                  display: inline-block;height: 30px;width:20px;"></span>
  22.              </div>
  23.  
  24.  </body>

　　二、JavaScript

　　JS是独立的语言，浏览器具有JS解释器的功能

　　JS代码存在形式：

　　　  -head中　　　

  1. <script type="text/javascript">
  2.         alert('123')
  3.     </script>

　　　　-文件　　

  1. <script src="js路径"></script>

　　PS:JS代码块需要放置在body标签的最下方，由于html代码从上到下执行，如果head中js代码耗时严重，会导致用户长时间没法看到页面，如果放置在body代码块底部，即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已

　　注释：

　　单行注释  //

　　多行注释  /*    */

　　变量：

　　js中的变量声明是一个非常容易出错的点，局部变量必须以var开头，如果未使用var，则默认表明是一个全局变量

  1. <script type="text/javascript">
  2.  
  3.     // 全局变量
  4.     name = 'seven';
  5.  
  6.     function func(){
  7.         // 局部变量
  8.         var age = 18;
  9.  
  10.         // 全局变量
  11.         gender = "男"
  12.     }
  13. </script>

　　数据类型

　　　JS的数据类型分为原始类型和对象类型：

　　　　原始类型：

  • 数字
  • 字符串
  • 布尔值

　　　　对象类型：

  • 数组
  • 字典

　　特别的，数字、布尔值、null、undefine、字符串是不可变的

　　注意：

　　undefined：在js中，如果声明了某个变量，而该变量未赋值，则该变量类型为UNDEFINED，值为undefined，undefined是系统为这种情况自动定义的

　　null：是为一个对象占位，后面用到该对象再重新为该对象赋值，是开发者自己赋值的例如   var obj = null   先占位，等用到再赋值  obj = new Animal（）　　

  1. // null、undefined
  2. null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
  3. undefined是一个特殊值，表示变量未定义。

　　数字：

　　JS中数字不区分整数和浮点数，JS中所有数字均用浮点数表示

　　转换：

　　parseInt（）将某值转成数字，不成功则NaN

　　parseFloat（）将某值转为浮点数，不成功则NaN

　　特殊值：

　　NaN，非数字，可使用isNaN（num）来判断, NaN和一切比较都是false，除非 不等于！=为true

　　Infinity 无穷大，可使用isFinite（num）来判断

　　

　　更多数值计算：

  1. 常量
  2.  
  3. Math.E
  4. 常量e，自然对数的底数。
  5.  
  6. Math.LN10
  7. 10的自然对数。
  8.  
  9. Math.LN2
  10. 2的自然对数。
  11.  
  12. Math.LOG10E
  13. 以10为底的e的对数。
  14.  
  15. Math.LOG2E
  16. 以2为底的e的对数。
  17.  
  18. Math.PI
  19. 常量figs/U03C0.gif。
  20.  
  21. Math.SQRT1_2
  22. 2的平方根除以1。
  23.  
  24. Math.SQRT2
  25. 2的平方根。
  26.  
  27. 静态函数
  28.  
  29. Math.abs( )
  30. 计算绝对值。
  31.  
  32. Math.acos( )
  33. 计算反余弦值。
  34.  
  35. Math.asin( )
  36. 计算反正弦值。
  37.  
  38. Math.atan( )
  39. 计算反正切值。
  40.  
  41. Math.atan2( )
  42. 计算从X轴到一个点的角度。
  43.  
  44. Math.ceil( )
  45. 对一个数上舍入。
  46.  
  47. Math.cos( )
  48. 计算余弦值。
  49.  
  50. Math.exp( )
  51. 计算e的指数。
  52.  
  53. Math.floor( )
  54. 对一个数下舍人。
  55.  
  56. Math.log( )
  57. 计算自然对数。
  58.  
  59. Math.max( )
  60. 返回两个数中较大的一个。
  61.  
  62. Math.min( )
  63. 返回两个数中较小的一个。
  64.  
  65. Math.pow( )
  66. 计算xy。
  67.  
  68. Math.random( )
  69. 计算一个随机数。
  70.  
  71. Math.round( )
  72. 舍入为最接近的整数。
  73.  
  74. Math.sin( )
  75. 计算正弦值。
  76.  
  77. Math.sqrt( )
  78. 计算平方根。
  79.  
  80. Math.tan( )
  81. 计算正切值。

　　

　　字符串：

　　字符串是由字符组成的数组，但是在JS中字符串是不可变的，可以访问字符串任意位置的文本但是JS并未提供修改已知字符串内容的方法

　　常用功能：

  1. obj.length                           长度
  2.  
  3. obj.trim()                           移除空白
  4. obj.trimLeft()
  5. obj.trimRight)
  6. obj.charAt(n)                        返回字符串中的第n个字符
  7. obj.concat(value, ...)               拼接
  8. obj.indexOf(substring,start)         子序列位置
  9. obj.lastIndexOf(substring,start)     子序列位置
  10. obj.substring(from, to)              根据索引获取子序列
  11. obj.slice(start, end)                切片
  12. obj.toLowerCase()                    大写
  13. obj.toUpperCase()                    小写
  14. obj.split(delimiter, limit)          分割
  15. obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
  16. obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
  17. obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
  18.                                      $数字：匹配的第n个组内容；
  19.                                      $&：当前匹配的内容；
  20.                                      $`：位于匹配子串左侧的文本；
  21.                                      $'：位于匹配子串右侧的文本
  22.                                      $$：直接量$符号

　　备注：

　　obj.splice():第一个值是要执行动作的初始索引，第二个值从该索引开始要删除几个，第三个参数为添加的内容

　　例子：

　　a = [11,22,33]

　　a.splice(1,1,99) 表示删除索引1后面一个，再在该位置添加99

　　a.splice(1,0,909) 表示插入一个值

　　a.splice(1,1) 表示删除一个值

　　join方法：

　　a.join('_')
　　"11_99_33"

　　布尔类型：

　　布尔类型仅包含真假，与python不同的是其首字母小写

  • ==  比较数值相等，不管类型
  • ！= 数值不等不管类型
  • === 比较数值与类型相等
  • ！=== 数值与类型都不相等
  • ||  或
  • &&  且

　　数组：

　　JS中数组类似于python中的列表

　　常见功能：

  1. obj.length          数组的大小
  2.  
  3. obj.push(ele)       尾部追加元素
  4. obj.pop()           尾部获取一个元素
  5. obj.unshift(ele)    头部插入元素
  6. obj.shift()         头部移除元素
  7. obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
  8.                     obj.splice(n,0,val) 指定位置插入元素
  9.                     obj.splice(n,1,val) 指定位置替换元素
  10.                     obj.splice(n,1)     指定位置删除元素
  11. obj.slice( )        切片
  12. obj.reverse( )      反转
  13. obj.join(sep)       将数组元素连接起来以构建一个字符串
  14. obj.concat(val,..)  连接数组
  15. obj.sort( )         对数组元素进行排序

　

　　JS条件语句

　　JS中支持两个条件语句，分别是if和switch

  1.  if(条件){
  2.  
  3.     }else if(条件){
  4.  
  5.     }else{
  6.  
  7.     }

if

  1. switch(name){
  2.         case '1':
  3.             age = 123;
  4.             break;
  5.         case '2':
  6.             age = 456;
  7.             break;
  8.         default :
  9.             age = 777;
  10.     }

switch

　　

　　JS循环语句

　　JS中支持三种不同的循环语句，分别是：

  1. var names = ["alex", "tony", "rain"];
  2.  
  3. for(var i=0;i<names.length;i++){
  4.     console.log(i);
  5.     console.log(names[i]);
  6. }

方式一

  1. var names = ["alex", "tony", "rain"];
  2.  
  3. for(var index in names){
  4.     console.log(index);
  5.     console.log(names[index]);
  6. }

方式二

  1. while(条件){
  2.     // break;
  3.     // continue;
  4. }

方式三

　　arguments函数：

　　arguments可以将传入的函数值放入一个列表中，通过索引可以将调入的值取出

  1. function func1(){
  2.     console.log(arguments.length)
  3. }
  4.  
  5. func1(1,2,3,4,5)
  6. 可以直接取出该值为5，表示长度为5
  7.  
  8. function func2(){
  9.     if(arguments.length !== 3){
  10.               throw new Error('the parm should be 3')
  11. }
  12. }
  13.  
  14. //如果参数不等于3，就报错，不必函数中定义形参
  15. func2(1,2,3,4,5)

　　函数：

　　1、基本函数

　　JS中函数基本上可以分为以下三类：

  1. // 普通函数
  2.     function func(arg){
  3.         return true;
  4.     }
  5.  
  6. // 匿名函数
  7.     var func = function(arg){
  8.         return "tony";
  9.     }
  10.  
  11. // 自执行函数
  12.     (function(arg){
  13.         console.log(arg);
  14.     })('123')

注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。

　　异常处理：

　　

  1. try{
  2.     //这段代码从上往下运行，其中任何一个语句抛出异常该代码结束
  3. }
  4. catch（e）{
  5.  
  6.      //如果try代码块汇总抛出异常，catch代码块中代码就会被执行
  7.    // e是一个局部变量，用来指向Error对象或者其他抛出的对象
  8. }
  9. finally{
  10.   //无论try代码是否有异常抛出，甚至try代码块中有return语句，finally代码块始终会被执行
  11. }
  12. //注：主动抛出异常throw Error（‘XXXXXX’）

　　三、DOM

　　文档对象类型（Document Object Model， DOM）是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式，我们最为关心的是，DOM把网页和脚本以及其他编程语言联系起来，DOM属于浏览器，而不是JS语言的规范的规定的核心内容。

　　

　　1、查找元素

　　直接查找

  1. document.getElementById             根据ID获取一个标签
  2. document.getElementsByName          根据name属性获取标签集合
  3. document.getElementsByClassName     根据class属性获取标签集合
  4. document.getElementsByTagName       根据标签名获取标签集合

　　间接查找

  1. parentNode          // 父节点
  2. childNodes          // 所有子节点
  3. firstChild          // 第一个子节点
  4. lastChild           // 最后一个子节点
  5. nextSibling         // 下一个兄弟节点
  6. previousSibling     // 上一个兄弟节点
  7.  
  8. parentElement           // 父节点标签元素
  9. children                // 所有子标签
  10. firstElementChild       // 第一个子标签元素
  11. lastElementChild        // 最后一个子标签元素
  12. nextElementtSibling     // 下一个兄弟标签元素
  13. previousElementSibling  // 上一个兄弟标签元素

　　2、操作

　　内容：

  1. innerText   文本
  2. outerText
  3. innerHTML   HTML内容
  4. innerHTML
  5. value       值

　　属性：

  1. attributes                // 获取所有标签属性
  2. setAttribute(key,value)   // 设置标签属性
  3. getAttribute(key)         // 获取指定标签属性
  4.  
  5. /*
  6. var atr = document.createAttribute("class");
  7. atr.nodeValue="democlass";
  8. document.getElementById('n1').setAttributeNode(atr);
  9. */
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <input type="button" value="全选"  onclick="CheckAll();"/>
  9.     <input type="button" value="取消" onclick="CancelAll();"/>
  10.     <input type="button" value="反选" onclick="ReverseCheck();"/>
  11.  
  12.     <table border="1" >
  13.         <thead>
  14.  
  15.         </thead>
  16.         <tbody id="tb">
  17.             <tr>
  18.                 <td><input type="checkbox" /></td>
  19.                 <td>111</td>
  20.                 <td>222</td>
  21.             </tr>
  22.             <tr>
  23.                 <td><input type="checkbox" /></td>
  24.                 <td>111</td>
  25.                 <td>222</td>
  26.             </tr>
  27.             <tr>
  28.                 <td><input type="checkbox" /></td>
  29.                 <td>111</td>
  30.                 <td>222</td>
  31.             </tr>
  32.             <tr>
  33.                 <td><input type="checkbox" /></td>
  34.                 <td>111</td>
  35.                 <td>222</td>
  36.             </tr>
  37.         </tbody>
  38.     </table>
  39.     <script>
  40.         function CheckAll(ths){
  41.             var tb = document.getElementById('tb');
  42.             var trs = tb.childNodes;
  43.             for(var i =0; i<trs.length; i++){
  44.  
  45.                 var current_tr = trs[i];
  46.                 if(current_tr.nodeType==1){
  47.                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  48.                     inp.checked = true;
  49.                 }
  50.             }
  51.         }
  52.  
  53.         function CancelAll(ths){
  54.             var tb = document.getElementById('tb');
  55.             var trs = tb.childNodes;
  56.             for(var i =0; i<trs.length; i++){
  57.  
  58.                 var current_tr = trs[i];
  59.                 if(current_tr.nodeType==1){
  60.                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  61.                     inp.checked = false;
  62.                 }
  63.             }
  64.         }
  65.  
  66.         function ReverseCheck(ths){
  67.             var tb = document.getElementById('tb');
  68.             var trs = tb.childNodes;
  69.             for(var i =0; i<trs.length; i++){
  70.                 var current_tr = trs[i];
  71.                 if(current_tr.nodeType==1){
  72.                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  73.                     if(inp.checked){
  74.                         inp.checked = false;
  75.                     }else{
  76.                         inp.checked = true;
  77.                     }
  78.                 }
  79.             }
  80.         }
  81.  
  82.     </script>
  83. </body>
  84. </html>

　　

　　3、class操作

  1. className                // 获取所有类名
  2. classList.remove(cls)    // 删除指定类
  3. classList.add(cls)       // 添加类

　　备注：

　　tag = document.getElementById('i2')

　　tag.className = 'c2'

　　tag.classList  #查看该tag下class的列表

　　tag.classList.add('c1')  #添加一个新的class

　　tag.classList.remove('c3')  #删除一个class

　　onclick：表示点击

　　4、标签操作

　　a、创建标签

  1. // 方式一
  2. var tag = document.createElement('a')
  3. tag.innerText = "gavin"
  4. tag.className = "c1"
  5. tag.href = "http://www.cnblogs.com/gavin"
  6.  
  7. // 方式二
  8. var tag = "<a class='c1' href='http://www.cnblogs.com/gavin'>gavini</a>"

　　b、操作标签

  1. // 方式一
  2. var obj = "<input type='text' />";
  3. xxx.insertAdjacentHTML("beforeEnd",obj);
  4. xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
  5.  
  6. //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
  7.  
  8. // 方式二
  9. var tag = document.createElement('a')
  10. xxx.appendChild(tag)
  11. xxx.insertBefore(tag,xxx[1])

　　5、样式操作

  1. var obj = document.getElementById('i1')
  2.  
  3. obj.style.fontSize = "32px";
  4. obj.style.backgroundColor = "red";
  1. <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
  2.  
  3.     <script>
  4.         function Focus(ths){
  5.             ths.style.color = "black";
  6.             if(ths.value == '请输入关键字' || ths.value.trim() == ""){
  7.  
  8.                 ths.value = "";
  9.             }
  10.         }
  11.  
  12.         function Blur(ths){
  13.             if(ths.value.trim() == ""){
  14.                 ths.value = '请输入关键字';
  15.                 ths.style.color = 'gray';
  16.             }else{
  17.                 ths.style.color = "black";
  18.             }
  19.         }
  20.     </script>

　　

　　6、位置操作

  1. 总文档高度
  2. document.documentElement.offsetHeight
  3.  
  4. 当前文档占屏幕高度
  5. document.documentElement.clientHeight
  6.  
  7. 自身高度
  8. tag.offsetHeight
  9.  
  10. 距离上级定位高度
  11. tag.offsetTop
  12.  
  13. 父定位标签
  14. tag.offsetParent
  15.  
  16. 滚动高度
  17. tag.scrollTop
  18.  
  19. /*
  20.     clientHeight -> 可见区域：height + padding
  21.     clientTop    -> border高度
  22.     offsetHeight -> 可见区域：height + padding + border
  23.     offsetTop    -> 上级定位标签的高度
  24.     scrollHeight -> 全文高：height + padding
  25.     scrollTop    -> 滚动高度
  26.     特别的：
  27.         document.documentElement代指文档根节点
  28. */
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body style="margin: 0;">
  8.     <div style="height: 900px;">
  9.  
  10.     </div>
  11.     <div style="padding: 10px;">
  12.         <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">
  13.                 <p>asdf</p>
  14.                 <p>asdf</p>
  15.                 <p>asdf</p>
  16.                 <p>asdf</p>
  17.                 <p>asdf</p>
  18.         </div>
  19.     </div>
  20.  
  21.     <script>
  22.         var i1 = document.getElementById('i1');
  23.  
  24.         console.log(i1.clientHeight); // 可见区域：height + padding
  25.         console.log(i1.clientTop);    // border高度
  26.         console.log('=====');
  27.         console.log(i1.offsetHeight); // 可见区域：height + padding + border
  28.         console.log(i1.offsetTop);    // 上级定位标签的高度
  29.         console.log('=====');
  30.         console.log(i1.scrollHeight);   //全文高：height + padding
  31.         console.log(i1.scrollTop);      // 滚动高度
  32.         console.log('=====');
  33.  
  34.     </script>
  35. </body>
  36. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <style>
  8.  
  9.     body{
  10.         margin: 0px;
  11.     }
  12.     img {
  13.         border: 0;
  14.     }
  15.     ul{
  16.         padding: 0;
  17.         margin: 0;
  18.         list-style: none;
  19.     }
  20.     .clearfix:after {
  21.         content: ".";
  22.         display: block;
  23.         height: 0;
  24.         clear: both;
  25.         visibility: hidden;
  26.     }
  27.  
  28.     .wrap{
  29.         width: 980px;
  30.         margin: 0 auto;
  31.     }
  32.  
  33.     .pg-header{
  34.         background-color: #303a40;
  35.         -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  36.         -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  37.         box-shadow: 0 2px 5px rgba(0,0,0,.2);
  38.     }
  39.     .pg-header .logo{
  40.         float: left;
  41.         padding:5px 10px 5px 0px;
  42.     }
  43.     .pg-header .logo img{
  44.         vertical-align: middle;
  45.         width: 110px;
  46.         height: 40px;
  47.  
  48.     }
  49.     .pg-header .nav{
  50.         line-height: 50px;
  51.     }
  52.     .pg-header .nav ul li{
  53.         float: left;
  54.     }
  55.     .pg-header .nav ul li a{
  56.         display: block;
  57.         color: #ccc;
  58.         padding: 0 20px;
  59.         text-decoration: none;
  60.         font-size: 14px;
  61.     }
  62.     .pg-header .nav ul li a:hover{
  63.         color: #fff;
  64.         background-color: #425a66;
  65.     }
  66.     .pg-body{
  67.  
  68.     }
  69.     .pg-body .catalog{
  70.         position: absolute;
  71.         top:60px;
  72.         width: 200px;
  73.         background-color: #fafafa;
  74.         bottom: 0px;
  75.     }
  76.     .pg-body .catalog.fixed{
  77.         position: fixed;
  78.         top:10px;
  79.     }
  80.  
  81.     .pg-body .catalog .catalog-item.active{
  82.         color: #fff;
  83.         background-color: #425a66;
  84.     }
  85.  
  86.     .pg-body .content{
  87.         position: absolute;
  88.         top:60px;
  89.         width: 700px;
  90.         margin-left: 210px;
  91.         background-color: #fafafa;
  92.         overflow: auto;
  93.     }
  94.     .pg-body .content .section{
  95.         height: 500px;
  96.     }
  97. </style>
  98. <body onscroll="ScrollEvent();">
  99. <div class="pg-header">
  100.     <div class="wrap clearfix">
  101.         <div class="logo">
  102.             <a href="#">
  103.                 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
  104.             </a>
  105.         </div>
  106.         <div class="nav">
  107.             <ul>
  108.                 <li>
  109.                     <a  href="#">首页</a>
  110.                 </li>
  111.                 <li>
  112.                     <a  href="#">功能一</a>
  113.                 </li>
  114.                 <li>
  115.                     <a  href="#">功能二</a>
  116.                 </li>
  117.             </ul>
  118.         </div>
  119.  
  120.     </div>
  121. </div>
  122. <div class="pg-body">
  123.     <div class="wrap">
  124.         <div class="catalog">
  125.             <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
  126.             <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
  127.             <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
  128.         </div>
  129.         <div class="content">
  130.             <div menu="function1" class="section">
  131.                 <h1>第一章</h1>
  132.             </div>
  133.             <div menu="function2" class="section">
  134.                 <h1>第二章</h1>
  135.             </div>
  136.             <div menu="function3" class="section">
  137.                 <h1>第三章</h1>
  138.             </div>
  139.         </div>
  140.     </div>
  141.  
  142. </div>
  143.     <script>
  144.         function ScrollEvent(){
  145.             var bodyScrollTop = document.body.scrollTop;
  146.             if(bodyScrollTop>50){
  147.                 document.getElementsByClassName('catalog')[0].classList.add('fixed');
  148.             }else{
  149.                 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
  150.             }
  151.  
  152.         }
  153.     </script>
  154. </body>
  155. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <style>
  8.  
  9.     body{
  10.         margin: 0px;
  11.     }
  12.     img {
  13.         border: 0;
  14.     }
  15.     ul{
  16.         padding: 0;
  17.         margin: 0;
  18.         list-style: none;
  19.     }
  20.     h1{
  21.         padding: 0;
  22.         margin: 0;
  23.     }
  24.     .clearfix:after {
  25.         content: ".";
  26.         display: block;
  27.         height: 0;
  28.         clear: both;
  29.         visibility: hidden;
  30.     }
  31.  
  32.     .wrap{
  33.         width: 980px;
  34.         margin: 0 auto;
  35.     }
  36.  
  37.     .pg-header{
  38.         background-color: #303a40;
  39.         -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  40.         -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  41.         box-shadow: 0 2px 5px rgba(0,0,0,.2);
  42.     }
  43.     .pg-header .logo{
  44.         float: left;
  45.         padding:5px 10px 5px 0px;
  46.     }
  47.     .pg-header .logo img{
  48.         vertical-align: middle;
  49.         width: 110px;
  50.         height: 40px;
  51.  
  52.     }
  53.     .pg-header .nav{
  54.         line-height: 50px;
  55.     }
  56.     .pg-header .nav ul li{
  57.         float: left;
  58.     }
  59.     .pg-header .nav ul li a{
  60.         display: block;
  61.         color: #ccc;
  62.         padding: 0 20px;
  63.         text-decoration: none;
  64.         font-size: 14px;
  65.     }
  66.     .pg-header .nav ul li a:hover{
  67.         color: #fff;
  68.         background-color: #425a66;
  69.     }
  70.     .pg-body{
  71.  
  72.     }
  73.     .pg-body .catalog{
  74.         position: absolute;
  75.         top:60px;
  76.         width: 200px;
  77.         background-color: #fafafa;
  78.         bottom: 0px;
  79.     }
  80.     .pg-body .catalog.fixed{
  81.         position: fixed;
  82.         top:10px;
  83.     }
  84.  
  85.     .pg-body .catalog .catalog-item.active{
  86.         color: #fff;
  87.         background-color: #425a66;
  88.     }
  89.  
  90.     .pg-body .content{
  91.         position: absolute;
  92.         top:60px;
  93.         width: 700px;
  94.         margin-left: 210px;
  95.         background-color: #fafafa;
  96.         overflow: auto;
  97.     }
  98.     .pg-body .content .section{
  99.         height: 500px;
  100.         border: 1px solid red;
  101.     }
  102. </style>
  103. <body onscroll="ScrollEvent();">
  104. <div class="pg-header">
  105.     <div class="wrap clearfix">
  106.         <div class="logo">
  107.             <a href="#">
  108.                 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
  109.             </a>
  110.         </div>
  111.         <div class="nav">
  112.             <ul>
  113.                 <li>
  114.                     <a  href="#">首页</a>
  115.                 </li>
  116.                 <li>
  117.                     <a  href="#">功能一</a>
  118.                 </li>
  119.                 <li>
  120.                     <a  href="#">功能二</a>
  121.                 </li>
  122.             </ul>
  123.         </div>
  124.  
  125.     </div>
  126. </div>
  127. <div class="pg-body">
  128.     <div class="wrap">
  129.         <div class="catalog" id="catalog">
  130.             <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
  131.             <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
  132.             <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
  133.         </div>
  134.         <div class="content" id="content">
  135.             <div menu="function1" class="section">
  136.                 <h1>第一章</h1>
  137.             </div>
  138.             <div menu="function2" class="section">
  139.                 <h1>第二章</h1>
  140.             </div>
  141.             <div menu="function3" class="section">
  142.                 <h1>第三章</h1>
  143.             </div>
  144.         </div>
  145.     </div>
  146.  
  147. </div>
  148.     <script>
  149.         function ScrollEvent(){
  150.             var bodyScrollTop = document.body.scrollTop;
  151.             if(bodyScrollTop>50){
  152.                 document.getElementsByClassName('catalog')[0].classList.add('fixed');
  153.             }else{
  154.                 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
  155.             }
  156.  
  157.             var content = document.getElementById('content');
  158.             var sections = content.children;
  159.             for(var i=0;i<sections.length;i++){
  160.                 var current_section = sections[i];
  161.  
  162.                 // 当前标签距离顶部绝对高度
  163.                 var scOffTop = current_section.offsetTop + 60;
  164.  
  165.                 // 当前标签距离顶部，相对高度
  166.                 var offTop = scOffTop - bodyScrollTop;
  167.  
  168.                 // 当前标签高度
  169.                 var height = current_section.scrollHeight;
  170.  
  171.                 if(offTop<0 && -offTop < height){
  172.                     // 当前标签添加active
  173.                     // 其他移除 active
  174.                     var menus = document.getElementById('catalog').children;
  175.                     var current_menu = menus[i];
  176.                     current_menu.classList.add('active');
  177.                     for(var j=0;j<menus.length;j++){
  178.                         if(menus[j] == current_menu){
  179.  
  180.                         }else{
  181.                             menus[j].classList.remove('active');
  182.                         }
  183.                     }
  184.                     break;
  185.                 }
  186.  
  187.             }
  188.  
  189.         }
  190.     </script>
  191. </body>
  192. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <style>
  8.  
  9.     body{
  10.         margin: 0px;
  11.     }
  12.     img {
  13.         border: 0;
  14.     }
  15.     ul{
  16.         padding: 0;
  17.         margin: 0;
  18.         list-style: none;
  19.     }
  20.     h1{
  21.         padding: 0;
  22.         margin: 0;
  23.     }
  24.     .clearfix:after {
  25.         content: ".";
  26.         display: block;
  27.         height: 0;
  28.         clear: both;
  29.         visibility: hidden;
  30.     }
  31.  
  32.     .wrap{
  33.         width: 980px;
  34.         margin: 0 auto;
  35.     }
  36.  
  37.     .pg-header{
  38.         background-color: #303a40;
  39.         -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  40.         -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  41.         box-shadow: 0 2px 5px rgba(0,0,0,.2);
  42.     }
  43.     .pg-header .logo{
  44.         float: left;
  45.         padding:5px 10px 5px 0px;
  46.     }
  47.     .pg-header .logo img{
  48.         vertical-align: middle;
  49.         width: 110px;
  50.         height: 40px;
  51.  
  52.     }
  53.     .pg-header .nav{
  54.         line-height: 50px;
  55.     }
  56.     .pg-header .nav ul li{
  57.         float: left;
  58.     }
  59.     .pg-header .nav ul li a{
  60.         display: block;
  61.         color: #ccc;
  62.         padding: 0 20px;
  63.         text-decoration: none;
  64.         font-size: 14px;
  65.     }
  66.     .pg-header .nav ul li a:hover{
  67.         color: #fff;
  68.         background-color: #425a66;
  69.     }
  70.     .pg-body{
  71.  
  72.     }
  73.     .pg-body .catalog{
  74.         position: absolute;
  75.         top:60px;
  76.         width: 200px;
  77.         background-color: #fafafa;
  78.         bottom: 0px;
  79.     }
  80.     .pg-body .catalog.fixed{
  81.         position: fixed;
  82.         top:10px;
  83.     }
  84.  
  85.     .pg-body .catalog .catalog-item.active{
  86.         color: #fff;
  87.         background-color: #425a66;
  88.     }
  89.  
  90.     .pg-body .content{
  91.         position: absolute;
  92.         top:60px;
  93.         width: 700px;
  94.         margin-left: 210px;
  95.         background-color: #fafafa;
  96.         overflow: auto;
  97.     }
  98.     .pg-body .content .section{
  99.         height: 500px;
  100.         border: 1px solid red;
  101.     }
  102. </style>
  103. <body onscroll="ScrollEvent();">
  104. <div class="pg-header">
  105.     <div class="wrap clearfix">
  106.         <div class="logo">
  107.             <a href="#">
  108.                 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
  109.             </a>
  110.         </div>
  111.         <div class="nav">
  112.             <ul>
  113.                 <li>
  114.                     <a  href="#">首页</a>
  115.                 </li>
  116.                 <li>
  117.                     <a  href="#">功能一</a>
  118.                 </li>
  119.                 <li>
  120.                     <a  href="#">功能二</a>
  121.                 </li>
  122.             </ul>
  123.         </div>
  124.  
  125.     </div>
  126. </div>
  127. <div class="pg-body">
  128.     <div class="wrap">
  129.         <div class="catalog" id="catalog">
  130.             <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
  131.             <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
  132.             <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
  133.         </div>
  134.         <div class="content" id="content">
  135.             <div menu="function1" class="section">
  136.                 <h1>第一章</h1>
  137.             </div>
  138.             <div menu="function2" class="section">
  139.                 <h1>第二章</h1>
  140.             </div>
  141.             <div menu="function3" class="section" style="height: 200px;">
  142.                 <h1>第三章</h1>
  143.             </div>
  144.         </div>
  145.     </div>
  146.  
  147. </div>
  148.     <script>
  149.         function ScrollEvent(){
  150.             var bodyScrollTop = document.body.scrollTop;
  151.             if(bodyScrollTop>50){
  152.                 document.getElementsByClassName('catalog')[0].classList.add('fixed');
  153.             }else{
  154.                 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
  155.             }
  156.  
  157.             var content = document.getElementById('content');
  158.             var sections = content.children;
  159.             for(var i=0;i<sections.length;i++){
  160.                 var current_section = sections[i];
  161.  
  162.                 // 当前标签距离顶部绝对高度
  163.                 var scOffTop = current_section.offsetTop + 60;
  164.  
  165.                 // 当前标签距离顶部，相对高度
  166.                 var offTop = scOffTop - bodyScrollTop;
  167.  
  168.                 // 当前标签高度
  169.                 var height = current_section.scrollHeight;
  170.  
  171.                 if(offTop<0 && -offTop < height){
  172.                     // 当前标签添加active
  173.                     // 其他移除 active
  174.  
  175.                     // 如果已经到底部，现实第三个菜单
  176.                     // 文档高度 ＝ 滚动高度 + 视口高度
  177.  
  178.                     var a = document.getElementsByClassName('content')[0].offsetHeight + 60;
  179.                     var b = bodyScrollTop + document.documentElement.clientHeight;
  180.                     console.log(a+60,b);
  181.                     if(a == b){
  182.                         var menus = document.getElementById('catalog').children;
  183.                         var current_menu = document.getElementById('catalog').lastElementChild;
  184.                         current_menu.classList.add('active');
  185.                         for(var j=0;j<menus.length;j++){
  186.                             if(menus[j] == current_menu){
  187.  
  188.                             }else{
  189.                                 menus[j].classList.remove('active');
  190.                             }
  191.                         }
  192.                     }else{
  193.                         var menus = document.getElementById('catalog').children;
  194.                         var current_menu = menus[i];
  195.                         current_menu.classList.add('active');
  196.                         for(var j=0;j<menus.length;j++){
  197.                             if(menus[j] == current_menu){
  198.  
  199.                             }else{
  200.                                 menus[j].classList.remove('active');
  201.                             }
  202.                         }
  203.                     }
  204.  
  205.                     break;
  206.                 }
  207.  
  208.             }
  209.  
  210.         }
  211.     </script>
  212. </body>
  213. </html>

　　7、提交表单

  1. document.geElementById('form').submit()

　　

　　8、其他操作

  1. console.log                 输出框
  2. alert                       弹出框
  3. confirm                     确认框
  4.  
  5. // URL和刷新
  6. location.href               获取URL
  7. location.href = "url"       重定向
  8. location.reload()           重新加载
  9.  
  10. // 定时器
  11. setInterval                 多次定时器
  12. clearInterval               清除多次定时器
  13. setTimeout                  单次定时器
  14. clearTimeout                清除单次定时器

　

Python学习笔记第十五周的更多相关文章

  1. Python学习笔记第二十五周（Django补充）

    1.render_to_reponse() 不同于render,render_to_response()不用包含request,直接写template中文件 2.locals() 如果views文件中 ...

  2. Python学习笔记（十五）：类基础

    以Mark Lutz著的<Python学习手册>为教程,每天花1个小时左右时间学习,争取两周完成. --- 写在前面的话 2013-7-24 23:59 学习笔记 1,Python中的大多 ...

  3. Python学习笔记第十八周

    目录: 一.JavaScript正则表达式 1.test  2.exec 二.BootStrap  1.响应式  2.图标.字体  3.基本使用 三.Django 1.安装  2.创建目录  3.进入 ...

  4. Python学习笔记第十二周

    目录: 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令事务 索引 创建数据库 外键 增删改查表 权限 python 操作mysql  ORM sqla ...

  5. python学习笔记-（十五）RabbitMQ队列

    rabbitMQ是消息队列:想想之前的我们学过队列queue:threading queue(线程queue,多个线程之间进行数据交互).进程queue(父进程与子进程进行交互或者同属于同一父进程下的 ...

  6. Python学习笔记第二十六周（Django补充）

    一.基于jQuery的ajax实现(最底层方法:$.jax()) $.ajax( url: type:''POST“ ) $.get(url,[data],[callback],[type])  #c ...

  7. Python学习笔记第十九周

    目录: 一.路由系统URL 1.Django请求生命周期 2.创建Django project 3.配置 4.编写程序 二.视图 三.模板 四.ORM操作 内容: 一.URL 1.Django请求生命 ...

  8. Python学习笔记第十六周

    目录: 一.CSS补充 1.页面布局 二.JavaScript补充 1.条件判断 2.函数分类 3.序列化 4.转义 5.eval 6.时间 7.作用域 三.DOM 1.间接查找 文本操作 样式操作 ...

  9. Python 学习笔记（十五）Python类拓展（二）方法

    方法 绑定方法和非绑定方法 绑定方法和非绑定方法在创建时没有任何区别,同一方法,既可以为绑定方法,也可以为非绑定方法,一切不同都只在调用时的手法上有所区别. 绑定方法即该方法绑定类的一个实例上,必须将 ...

随机推荐

  1. daal4py 随机森林模型训练mnist并保存模型给C++ daal predict使用

    # daal4py Decision Forest Classification Training example Serialization import daal4py as d4p import ...

  2. PHP隐藏版本号教程

    PHP本身并不启监听服务,所以预防扫描器扫描通过版本号判断漏洞,我们要隐藏的是http头处的版本号,而不是隐藏系统命令行处的版本号. 1.查看当前php版本号 访问一当前服务中的任意页面,截取响应数据 ...

  3. jeasyUI DataGrid 根据屏幕宽度自适应, 改变右侧滚动条Size

    PC浏览器的Datagrid可以显示多几列,但是在手机浏览器时,只能有选择性的显示前几列. $(window).resize(function () { if (document.body.clien ...

  4. vsCode快捷键设置

    // 快捷键设置 keyiing.json // 将键绑定放入此文件中以覆盖默认值 [     /* // 转换大写     {         "key" : "ctr ...

  5. PhpStudy的安装及使用教程

    1.PhpStudy是什么 phpstudy是一个PHP调试环境的程序集成包,phpStudy软件集成了最新的Apache.PHP.MySQL.phpMyAdmin.ZendOptimizer,一次性 ...

  6. jquery ready&&load用法

    ready和load那一个先执行 DOM文档加载的步骤 (1) 解析HTML结构 (2) 加载外部脚本和样式表文件 (3) 解析并执行脚本代码 (4) 构造HTML DOM模型 //ready (5) ...

  7. bzoj3976

    题解: 先跑一下Sa 然后再用kmp匹配一下哪一些位置不行 然后二分答案 代码: #include<bits/stdc++.h> ; using namespace std; int t[ ...

  8. String和StringBuffer互相转换

    String:不可变 StringBuffer:可变 StringBuffer 上的任何修改性的操作都是在同一个字符数组上进行的,所以修改其中任一个值 另一个的值也会随着改变! StringBuffe ...

  9. 最短路径：Dijkstra & Floyd 算法图解，c++描述

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. xml文档的读取

    #! /usr/bin/env python3 # -*- coding:utf-8 -*- import xml.dom.minidom  #该模块被用来处理xml文件 #打开xml文档 dom=x ...