JS续

1、序列化

  • JSON.stringify(obj)   序列化
  • JSON.parse(str)        反序列化

2、转义

  • decodeURI( )                   URl中未转义的字符
  • decodeURIComponent( )   URI组件中的未转义字符
  • encodeURI( )                   URI中的转义字符
  • encodeURIComponent( )   转义URI组件中的字符
  • escape( )                         对字符串转义
  • unescape( )                     给转义字符串解码
  • URIError                         由URl的编码和解码方法抛出
  1.     <script>
  2.         var url = "http://www.baidu.com?n=宝强";
  3.         var ret = encodeURI(url);
  4.         //alert(ret);
  5.         console.log(ret);
  6. //        http://www.baidu.com?n=%E5%AE%9D%E5%BC%BA
  7.         var u = decodeURI(ret);
  8.         //alert(u);
  9.         console.log(u);
  10. //        http://www.baidu.com?n=宝强
  11.  
  12.         var r2 = encodeURIComponent(url);
  13.         console.log(r2);
  14. //        http%3A%2F%2Fwww.baidu.com%3Fn%3D%E5%AE%9D%E5%BC%BA
  15.     </script>

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

  • eval()
  1. <script>
  2.         eval('alert("eval")')
  3.     </script>
  • EvalError   执行字符串中的JavaScript代码

4、正则表达式

JavaScript中支持正则表达式，其主要提供了两个功能：

  • test(string)     用于检测正则是否匹配
  • exec(string)    用于获取正则匹配的内容

注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。

5、时间处理

JavaScript中提供了时间相关的操作，时间操作中分为两种时间：

  • 时间统一时间
  • 本地时间（东8区）
  1.     <script>
  2.         d = new Date
  3. //        Mon Aug 15 2016 20:12:57 GMT+0800 (CST)
  4.         d.getUTCHours()
  5. //12
  6.         d.getFullYear()
  7. //2016
  8.         d.setMinutes(d.getMinutes(200) +2)
  9. //1471263297229
  10.         d
  11. //Mon Aug 15 2016 20:14:57 GMT+0800 (CST)
  12.     </script>

更多操作参见：http://www.shouce.ren/api/javascript/main.htm

JS跑马灯实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="i1" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div>
  9.     <!--<div id="i2" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div>-->
  10.     <script>
  11. //        1000单位为毫秒,相当于一秒
  12.         setInterval("f1()",1000)
  13.         function f1(){
  14. //            js获取某个标签 id=i1
  15.             var tag = document.getElementById("i1");
  16. //            获取标签内容
  17.             var text = tag.innerText;
  18.  
  19.             var a = text.charAt(0);
  20.             var sub = text.substring(1,text.length);
  21.  
  22.             var new_str = sub + a;
  23.             tag.innerText = new_str;
  24.         }
  25.     </script>
  26. </body>
  27. </html>

DOM编程

文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM编程：可以操作html所有的标签，进行找、操作！他也是javascript的一部分

一.查找元素

1、直接查找

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

document.getElementById('id')  查找指定的id，然后我们可以进行操作

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="i1">
            Jason
        </div>
        <script>
            var temp = document.getElementById('i1');//查找指定的id
            temp.innerText = 'Jason wang';//innerText修改指定的字符串
        </script>
    </body>
    </html>

document.getElementsByTagName('tagname')

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         123
  10.     </div>
  11.     <div>
  12.         456
  13.     </div>
  14.     <script>
  15.         var all = document.getElementsByTagName('div');//查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个
  16.         for (var item in all) {
  17.             all[item].innerText = '888' ;//innerText修改指定的字符串
  18.         }
  19.     </script>
  20. </body>
  21. </html>

2、间接查找

  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  // 上一个兄弟标签元素

二、操作

1、内容

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

2、属性

  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)       // 添加类

4、标签操作

a.创建标签

  1.     <script>
  2. //        方式一
  3.         var tag = document.createElement('span')
  4.         tag.innerText = "JasonWang"
  5.         tag.className = "c1"
  6.         tag.href = "http://www.baidu.com/"
  7. //        方式二
  8.         var tag = "<span class='c1' href='http://www.baidu.com/'>JasonWang</span>"
  9.     </script>
  10.

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>

Demo

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>

Demo-滚动固定

  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>

Demo-滚动菜单

  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>

Demo-滚动高度

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                清除单次定时器

2、注册 事件

首先了解下面的意思：

事件：比如有一个“按钮”，当你点击的时候发生什么，双击的时候发生什么，这个就叫做事件！

注册：首先这个按钮，当你点击的时候发生的动作，上面的事件要使他出现我们想要的效果，首先得把事件和函数进行绑定，然后把他们注册到指定标签上。

常用事件：

  • onclick
  • onblur
  • onfocus
  • ..................

举例代码如下：

写一个input的标签，首先把事件和函数进行绑定，当你一点这个按钮的时候就会自动执行，绑定的函数：

事件列表 
  1. 属性
 此事件什么时候发生（什么时候被触发
onabort　　　　 图象的加载被中断
onblur　　　　 元素失去焦点
onchange　　　 区域的内容被修改
onclick 当用户点击某个对象时调用的事件句柄（比点击input标签时执行上面的代码例子）
ondblclick 当用户双击某个对象时调用的事件句柄
onerror　　 在加载文档或图像时发生错误
onfocus 元素获得焦点
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘被松开
onload 一张页面或一副图片完成加载
onmousedown 鼠标按钮被按下 
onmousemove 鼠标移动过来后
onmouseout 鼠标从某个元素移开
onmouseover 鼠标移动到某个元素之上
onmouseup 鼠标按键被松开
onreset   重置按钮被点击
onresize  窗口或框架被重新调整大小
onselect  文本被选中
onsubmit  确认按钮被点击
onunload  用户退出页面

对于事件需要注意的要点：

  • this
  • event
  • 事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset='utf-8' />
  5.         <title></title>
  6.  
  7.         <style>
  8.             .gray{
  9.                 color:gray;
  10.             }
  11.             .black{
  12.                 color:black;
  13.             }
  14.         </style>
  15.         <script type="text/javascript">
  16.             function Enter(){
  17.                var id= document.getElementById("tip")
  18.                id.className = 'black';
  19.                if(id.value=='请输入关键字'||id.value.trim()==''){
  20.                     id.value = ''
  21.                }
  22.             }
  23.             function Leave(){
  24.                 var id= document.getElementById("tip")
  25.                 var val = id.value;
  26.                 if(val.length==0||id.value.trim()==''){
  27.                     id.value = '请输入关键字'
  28.                     id.className = 'gray';
  29.                 }else{
  30.                     id.className = 'black';
  31.                 }
  32.             }
  33.         </script>
  34.     </head>
  35.     <body>
  36.         <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
  37.     </body>
  38. </html>

搜索框

作业：登录悬浮窗口

需求：

当点击登录按钮，悬浮窗弹出，当点击取消按钮时悬浮框退出

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide {
  8.             display: none;
  9.         }
  10.         .modal {
  11.             height: 300px;
  12.             width: 400px;
  13.             background-color: rgba(126, 255, 104, 0.6);
  14.             position: fixed;
  15.             top: 50%;
  16.             left: 50%;
  17.             margin-left: -200px;
  18.             margin-top: -150px;
  19.             z-index: 11;
  20.         }
  21.         .shadow{
  22.             position: fixed;
  23.             top: 0;
  24.             right: 0;
  25.             bottom: 0;
  26.             left: 0;
  27.             /*background-color: black;*/
  28.             /*opacity: 0.4;*/
  29.             background-color: rgba(98, 103, 107, 1);
  30.             z-index: 9;
  31.         }
  32.         .left{
  33.             float: left;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <!--默认登录悬浮窗口添加隐藏属性,当点击登录按钮后,出发登录函数,取消隐藏样式-->
  39.     <input type="button" value="登录" id="i1" onclick="Login(this)" />
  40.     <div class="shadow hide" ></div>
  41.     <div class="modal hide">
  42.         <div style=" float:left">
  43.             <input name="usr" value="用户名"  style="width: 210px;margin-left: 100px;margin-top: 2px"/>
  44.         </div>
  45.         <div style="display: inline-block;float: left ">
  46.             <input name="pwd" value="密码"  style="width: 210px;margin-left: 100px;margin-top: 2px"/>
  47.         </div>
  48.         <!--<div>-->
  49.             <!--<input name="email" value="邮箱地址" class="left" style="width: 210px"/>-->
  50.         <!--</div>-->
  51.  
  52.         <input type="button" value="登录" style="margin-bottom: 2px;margin-right: 2px;padding-right: 2px;width: 215px;margin-left: 100px;margin-top: 2px;">
  53.         <!--当点击取消按钮时,触发Cancel函数,添加隐藏样式,恢复最开始登录的效果-->
  54.         <input type="button" value="取消" style="margin-bottom: 2px;margin-right: 2px;padding-right: 2px;width: 215px;margin-left: 100px;margin-bottom:200px;" onclick="Cancel(this)">
  55.     </div>
  56.     <!--<div class="hide"></div>-->
  57.     <script>
  58.         function Login(ths){
  59. //            通过getElementsByClassName找到类
  60. //            通过classList.remove删除属性
  61.             document.getElementsByClassName('shadow')[0].classList.remove('hide');
  62.             document.getElementsByClassName('modal')[0].classList.remove('hide');
  63. //            shadow.add('hide') ;
  64. //            modal.add('hide')
  65.         }
  66.         function Cancel(ths){
  67.             //            通过getElementsByClassName找到类
  68. //            通过classList.add添加属性
  69.             document.getElementsByClassName('shadow')[0].classList.add('hide');
  70.             document.getElementsByClassName('modal')[0].classList.add('hide');
  71.         }
  72.     </script>
  73.  
  74. </body>
  75. </html>

前端 JS&&DOM续的更多相关文章

  1. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  2. 前端JS模版库kino.razor - 原理流程分析 - 改进版轮子RazorJs

    1.前言 从后台获取数据,在前端JS里面拼接字符串,不累吗?敢不敢找一款前端使使... 现在这种模板库比较多了,我用过的jquery-template .JsRender .听说过的一堆,还有各种MV ...

  3. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  4. 前端之DOM操作

    一.概念 javascript javascript是一种脚本语言,可以被浏览器解析,所以它可以称之为前端的三把利器之一. javascript跟java没有半毛钱关系. 声明局部变量:使用关键字va ...

  5. 图片纯前端JS压缩的实现

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  6. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...

  7. 我对 前端 Js 开发方式 架构方向 的 一些看法

    有 网友 提到 : “复杂的页面,一个页面加载的模块多,各种异步请求,页面渲染,jquery链式编程操作dom数过于频繁.现在的前台越来越复杂,逻辑臃肿.” 哎, 所以 我说, 要改成用 同步调用 . ...

  8. 前端Js框架汇总【转】

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  9. 前端JS利用canvas的drawImage()对图片进行压缩

    对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致 ...

随机推荐

  1. 带宽的单位为什么是Ｈz而不是bps？

    如果从电子电路角度出发,带宽(Bandwidth)本意指的是电子电路中存在一个固有通频带,这个概念或许比较抽象,我们有必要作进一步解释.大家都知道,各类复杂的电子电路无一例外都存在电感.电容或相当功能 ...

  2. figure margins too large错误解决

    使用Rstudio,遇到下面这个错误: figure margins too large 这是因为界面右下角的“plot”窗口太小,显示不了,将右下角的窗口调大就能解决

  3. es6中顶层对象属性≠全局属性

    先思考一下下面代码的输出结果是什么 const a = { x:1, fn:()=>this.x+=1 } const x = 1 a.fn() console.log(a.x,x) 正确答案为 ...

  4. python笔记1，语法,函数,类和实例,异常

    >>> int(12.34) 12 >>> float('12.34') 12.34 >>> str(1.23) '1.23' >>& ...

  5. Linux 文件管理（系统函数）

    //read函数 #include <stdio.h> #include <stdlib.h> #include <unistd.h> /* STDIN_FILEN ...

  6. Spring MVC资源绑定视图解析器

    ResourceBundleViewResolver使用属性文件中定义的视图bean来解析视图名称. 以下示例显示如何使用Spring Web MVC框架中的ResourceBundleViewRes ...

  7. LINQ 标准查询操作符

    本文介绍了LINQ标准查询操作符.没有这些操作符,LINQ就不会存在.本文为理解这些操作符的功能提供了很好的基础.了解它们将会很有帮助,因为LINQ的各种Provider都是基于这些操作符来完成各自丰 ...

  8. GDB调试，转载一位大牛的东西

    http://www.wuzesheng.com/?p=1327 手把手教你玩转GDB(一)——牛刀小试:启动GDB开始调试 写在最前面:GDB是unix相关操作系统中C/C++程序开发必不可少的工具 ...

  9. Tomcat访问日志详细配置(转)

    在server.xml里的<host>标签下加上<Valve className="org.apache.catalina.valves.AccessLogValve&qu ...

  10. SQL.Cookbook 读书笔记3 操作多个表

    第三章 操作多个表 表连接的内连接和外连接 A表 B表id name id name 1 a 1 b 2 b 3 c4 c内连接就是左表和右表相同的数据,查询结果只有相等的数据:select * fr ...