WEEK15：css、javascript基础

  • CSS补充
    • position
      • fixed固定位置，使用top\right\left等来确定位置
      • relative表示在父标签中相对位置
      • absolute随着滑轮滚动，一般结合relative使用
    • opacity：透明度
    • z-index：层级顺序，越大越在上面
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height: 48px;
 9             background-color: black;
10             color: #dddddd;
11             position: fixed;
12             top:0;
13             right: 0;
14             left: 0;
15         }
16         .pg-body{
17             background-color: #dddddd;
18             height: 5000px;
19             margin-top: 50px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="pg-header">头部</div>
25     <div class="pg-body">内容</div>
26 </body>
27 </html>
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="width: 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div>
 9     <div style="height: 5000px;background-color: #dddddd;">
10         asdfasdf
11     </div>
12 </body>
13 </html>
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
10         <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
11     </div>
12     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
13         <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
14     </div>
15     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
16         <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
17     </div>
18 </body>
19 </html>
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--z-index:10指定层级，数字越大，层越在上面-->
 9 <!--display:none;使效果不显示-->
10     <div style="display:none;background-color:white;
11     z-index:10; position: fixed;top: 50%;left:50%;margin-left: -250px;margin-top: -200px; height: 400px;width:500px; ">
12 
13         <input type="text" />
14         <input type="text" />
15         <input type="text" />
16 
17     </div>
18 <!--覆盖整个页面， opacity: 0.5透明度为0.5-->
19     <div style="display:none;z-index:9; position: fixed;background-color: black;
20     top:0;
21     bottom: 0;
22     right: 0;
23     left: 0;
24     opacity: 0.5;
25     "></div>
26 
27     <div style="height: 5000px;background-color: green;">
28         asdfasdf
29     </div>
30 </body>
31 </html>
    • overflow
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--overflow: auto图片超过的部分可以通过定义的窗口滚动滚动条来查看-->
 9     <div style="height: 200px;width: 300px;overflow: auto">
10         <img src="1.jpg">
11     </div>
12 <!--overflow: hidden图片超过定义的宽度，则超过的部分隐藏-->
13     <div style="height: 200px;width: 300px;overflow: hidden">
14         <img src="1.jpg">
15     </div>
16 </body>
17 </html>
    • hover
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             position: fixed;
 9             right: 0;
10             left: 0;
11             top: 0;
12             height: 48px;
13             background-color: #2459a2;
14             line-height: 48px;
15         }
16         .pg-body{
17             margin-top: 50px;
18         }
19         .w{
20             width: 980px;
21             margin: 0 auto;
22         }
23         .pg-header .menu{
24             display: inline-block;
25 <!--            边框上右下左的像素点-->
26             padding: 0 10px 0 10px;
27             color: white;
28         }
29         /*当鼠标移动到当前标签上时，以下css属性才生效*/
30         .pg-header .menu:hover{
31             background-color: blue;
32         }
33     </style>
34 </head>
35 <body>
36     <div class="pg-header">
37         <div class="w">
38             <a class="logo">LOGO</a>
39             <a class="menu">全部</a>
40             <a class="menu">42区</a>
41             <a class="menu">段子</a>
42             <a class="menu">1024</a>
43         </div>
44     </div>
45     <div class="pg-body">
46         <div class="w">a</div>
47     </div>
48 </body>
49 </html>
    • background
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="height: 100px;"></div>
 9 <!--    background-image: url(icon_18_118.png)：默认和定义的div大小一样，图片长度宽度不够则重复堆放-->
10 <!--    background-repeat:no-repeat：no-repeat不堆叠，repeat-y纵向堆叠,repeat-x横向堆叠-->
11 <!--    height: 20px;width:20px：这是长照片中一个小图标的宽度-->
12 <!--    background-position-x和 background-position-y可以用来确定显示哪一个小图标，这两个参数的值可以直接写在background这个参数里面-->
13     <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;background-position-x:0px;background-position-y:-40px;"></div>
14 </body>
15 </html>
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--position: relative将图片放在输入框中，使用相对位置-->
 9     <div style="height: 35px;width: 400px;position: relative;">
10 <!--        padding-right:30px防止输入内容遮挡照片-->
11         <input type="text" style="height: 35px;width: 370px;padding-right:30px" />
12 <!--        style="position:absolute;right:0;top:10px;定义图片的位置-->
13         <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span>
14     </div>
15 </body>
16 </html>

       

  • JavaScript
    js语句之后必须加分号，虽然不加分号也能运行，但是js上线之后一般会压缩成一行，导致无法断句
    • 存在形式
      • html文件中，在head标签中使用标签<script />
         1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*css代码*/
 8     </style>
 9     <script>
10 <!--        javascript代码-->
11         alert(123);
12     </script>
13 </head>
14 <body>
15 </body>
16 </html>
      • 单的的js文件，使用<script src="commons,js"></script>导入
         1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="commons.js"></script>
 7     <script type="text/javascript">
 8         //javascript代码
 9         alert(123);
10     </script>
11 </head>
12 <body>
13 </body>
14 </html>
    • 先出网站的内容，然后在加载javascript效果，需要将javascript内容写到最后
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <h1>asdf</h1>
10     <h1>asdf</h1>
11     <h1>asdf</h1>
12     <h1>asdf</h1>
13     <h1>asdf</h1>
14     <h1>asdf</h1>
15     <h1>asdf</h1>
16 <!--    先出网站的内容，然后在加载javascript效果-->
17     <script src="https://www.gstasdfasdfc.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
18     <script>
19         function
20     </script>
21 </body>
22 </html>
    • 注释
      • 当前行注释 //
      • 多行注释 /* （多行代码）*/
    • 变量
      • 全局变量 name='alex'
      • 局部变量 var name='alex'
         1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <h1>sadf</h1>
 9     <script>
10         /*
11         name = 'alex';
12         function func(){
13             var name = 'eric'
14         }*/
15         age = "18";
16         i = parseInt(age);
17     </script>
18 </body>
19 </html>
    • 写Js代码
      • html文件中编写
      • 临时，浏览器的终端中的Console（控制台）
    • 函数
      • 基本函数
        // 普通函数
    function func(arg){
        return true;
    }
          
// 匿名函数
    var func = function(arg){
        return "tony";
    }
  
// 自执行函数（创建函数并且自动执行）
    (function(arg){
        console.log(arg);
    })('123')
        //注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数
      • 作用域
        JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。
        切记：所有的作用域在创建函数且未执行时候就已经存在。
        1、以函数作为作用域（let除外）
        2、函数的作用域在函数未被调用之前，已经创建
        3、函数的作用域存在作用域链，并且也是在被调用之前创建
        4、函数内局部变量提前声明
         
        function f2(){
    var arg= 111;
    function f3(){
        console.log(arg);
    }
     
    return f3;
}
 
ret = f2();
ret();
      • 闭包
        闭包是指可以包含自由（未绑定到特定对象）变量的代码块。
        闭包是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
        闭包是个函数，而它记住了周围发生了什么，表现为由一个函数体中定义了另个函数。由于作用域链只能从内向外找，默认外部无法获取函数内部变量。但闭包可以在外部获取函数内部的变量。
        function f2(){
    var arg= [11,22];
    function f3(){
        return arg;
    }
    return f3;
}
 
ret = f2();
ret();
      • 面向对象
        Foo充当的构造函数，this代指对象，创建对象时需要使用new
        function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
  
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

        上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：

        function Foo (name,age) {
    this.Name = name;
    this.Age = age;
}
Foo.prototype = {
    GetInfo: function(){
        return this.Name + this.Age
    },
    Func : function(arg){
        return this.Name + arg;
    }
}
    • 异常处理
      try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
    • 基本数据类型
      • 数字
        • 转换
          • parseInt(..)    将某值转换成数字，不成功则NaN
          • parseFloat(..) 将某值转换成浮点数，不成功则NaN
        • 特殊值
          • NaN，非数字。可使用 isNaN(num) 来判断
          • Infinity，无穷大。可使用 isFinite(num) 来判断
      • 字符串
        字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
        • 功能
          • 长度 obj.length
          • 移除空白 obj.trim()、obj.trimLeft()、obj.trimRight()
          • 返回字符串中的第n个字符 obj.charAt(n)
          • 拼接 obj.concat(value, ...)
          • 子序列位置 obj.indexOf(substring,start)
          • 子序列位置 obj.lastIndexOf(substring,start)
          • 根据索引获取子序列 obj.substring(from, to)
          • 切片 obj.slice(start, end)
          • 大写 obj.toLowerCase()
          • 小写 obj.toUpperCase()
          • 分割 obj.split(delimiter, limit)
          • 从头开始匹配，返回匹配成功的第一个位置(g无效) obj.search(regexp)
          • 全局搜索，如果正则中有g表示找到全部，否则只找到第一个 obj.match(regexp)
          • 替换，正则中有g则替换所有，否则只替换第一个匹配项 obj.replace(regexp, replacement)
      • 字典
        与python的无差别
      • 列表（数组）
        JavaScript中的数组类似于Python中的列表
        • 数组的大小 obj.length
        • 尾部追加元素 obj.push(ele)
        • 尾部获取一个元素 obj.pop()
        • 头部插入元素 obj.unshift(ele)
        • 头部移除元素 obj.shift()
        • 插入、删除或替换数组的元素 obj.splice(start, deleteCount, value, ...)
          • 指定位置插入元素 obj.splice(n,0,val)
          • 指定位置替换元素 obj.splice(n,1,val)
          • 指定位置删除元素 obj.splice(n,1)
        • 切片 obj.slice( )
        • 反转 obj.reverse( )
        • 将数组元素连接起来以构建一个字符串 obj.join(sep)
        • 连接数组 obj.concat(val,..)
        • 对数组元素进行排序 obj.sort( )
      • 布尔类型
        布尔类型仅包含真假，与Python不同的是其首字母小写
        • 比较值相等 ==
        • 不等于 !=
        • 比较值和类型相等 ===
        • 不等于 !===
        • 或 ||
        • 且 &&
    • 其他
      • 序列化
        • JSON.stringify(obj)   序列化，将对象转换为字符串
        • JSON.parse(str)        反序列化，将字符串转换成json数据
      • 转义
        • decodeURI( )                   URl中未转义的字符
        • decodeURIComponent( )   URI组件中的未转义字符
        • encodeURI( )                   URI中的转义字符
        • encodeURIComponent( )   转义URI组件中的字符
        • escape( )                         对字符串转义
        • unescape( )                     给转义字符串解码
        • URIError                         由URl的编码和解码方法抛出
      • eval
        JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值
        • eval()
        • EvalError   执行字符串中的JavaScript代码
      • 正则表达式
        • 定义正则表达式
          • /.../  用于定义正则表达式
          • /.../g 表示全局匹配
          • /.../i 表示不区分大小写
          • /.../m 表示多行匹配。JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容
            1 var pattern = /^Java\w*/gm;
2 var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
3 result = pattern.exec(text)
4 result = pattern.exec(text)
5 result = pattern.exec(text)
        • 匹配
          JavaScript中支持正则表达式，其主要提供了两个功能：
          • test(string)     检查字符串中是否和正则匹配
            n = 'uui99sdf'
reg = /\d+/
reg.test(n)  ---> true
# 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
          • exec(string)    获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组
             1 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
 2  
 3 非全局模式
 4     获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
 5     var pattern = /\bJava\w*\b/;
 6     var text = "JavaScript is more fun than Java or JavaBeans!";
 7     result = pattern.exec(text)
 8  
 9     var pattern = /\b(Java)\w*\b/;
10     var text = "JavaScript is more fun than Java or JavaBeans!";
11     result = pattern.exec(text)
12  
13 全局模式
14     需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
15     var pattern = /\bJava\w*\b/g;
16     var text = "JavaScript is more fun than Java or JavaBeans!";
17     result = pattern.exec(text)
18  
19     var pattern = /\b(Java)\w*\b/g;
20     var text = "JavaScript is more fun than Java or JavaBeans!";
21     result = pattern.exec(text)
          • 字符串中相关办法
            1 obj.search(regexp)  // 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
2 obj.match(regexp)  //获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
3 obj.replace(regexp, replacement)   //替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
4 $数字：匹配的第n个组内容；
5 $&：当前匹配的内容；
6 $`：位于匹配子串左侧的文本；
7 $'：位于匹配子串右侧的文本
8 $$：直接量$符号
        • 时间处理
          JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
          Date类
          var d=new Date()
          • 方法
            • getDate 获取日期
            • getDay 获取天
            • getHoues 获取小时
            • setMinutes() 设置分钟
            • 等等
    • 条件语句
      JavaScript中支持两个中条件语句，分别是：if 和 switch
      • if
        if(条件){

}else if(条件){
     
}else{

}
      • switch
        switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }
    • for循环
      循环时，循环的元素是索引。循环内容为字典是，循环的是key。
      • 方式一
        var names = ["alex", "tony", "rain"];
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}
        //不支持字典的循环
      • 方式二
        var names = ["alex", "tony", "rain"];
for(var index in names){
    console.log(index);
    console.log(names[index]);
}
      • 方式三
        while(条件){
    // break;
    // continue;
}

         

    • 定时器
      •  setInterval(需要执行的函数, 间隔时间);
         1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <script>
10         function f1(){
11             console.log(1);
12         }
13 
14         // 创建一个定时器
15         //setInterval("alert(123);", 5000);
16         setInterval("f1();", 2000);
17     </script>
18 </body>
19 </html>
      • 跑马灯效果
         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">欢迎老男孩莅临指导</div>
 9     <script>
10         function func(){
11             // 根据ID获取指定标签的内容,定于局部变量接受
12             var tag = document.getElementById('i1');
13             // 获取标签内部的内容
14             var content = tag.innerText;
15             //i1的第一个字
16             var f = content.charAt(0);
17             //i1的除去第一个字之外的所有字符串
18             var l = content.substring(1,content.length);
19             //新的字符串
20             var new_content = l + f;
21             //i1重新赋值
22             tag.innerText = new_content;
23         }
24         setInterval('func()', 800);
25     </script>
26 </body>
27 </html>
    • Dom
      • 找到标签
        • 直接查找
          • document.getElementById             根据ID获取一个标签
          • document.getElementsByName          根据name属性获取标签集合
          • document.getElementsByClassName     根据class属性获取标签集合
          • document.getElementsByTagName       根据标签名获取标签集合
        • 间接查找
          • parentNode           父节点
          • parentElement            父节点标签元素
          • childNodes           所有子节点
          • children                 所有子标签
          • firstChild           第一个子节点
          • firstElementChild        第一个子标签元素
          • lastChild            最后一个子节点
          • lastElementChild         最后一个子标签元素
          • nextSibling          下一个兄弟节点
          • nextElementtSibling      下一个兄弟标签元素
          • previousSibling      上一个兄弟节点
          • previousElementSibling   上一个兄弟标签元素
      • 操作标签
        • 内容
          • innerText（或者outerText）  文本
          • innerHTML（或者innerHTML）   HTML内容
          • value       值
        • 属性
          • attributes                 获取所有标签属性
          • setAttribute(key,value)    设置标签属性
          • removeAttribute(key)    删除标签属性
          • getAttribute(key)          获取指定标签属性
        • class(样式)操作
          • className                 获取所有类名(返回字符串)
          • classList                  获取所有类名(返回列表)    
          • classList.remove(cls)     删除指定类，删除指定样式
          • classList.add(cls)        添加类，添加指定样式
          • obj.style.fontSize='16px'   直接修改字体大小
          • obj.style.backgroundColor='red'   直接修改背景颜色
          • 等等
        • 其他
          • 获取光标 onfocus
          • 光标丢失 onblur
            终极大招 <input type="text" placeholder="请输入关键字" />
        • 标签操作
          • 创建标签
            • 方法一
              1 var tag = document.createElement('a')
2 tag.innerText = "wupeiqi"
3 tag.className = "c1"
4 tag.href = "http://www.cnblogs.com/wupeiqi"
            • 方法二
              1 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
          • 操作标签（添加标签）
            • 方法一
              1 var obj = "<input type='text' />";
2 xxx.insertAdjacentHTML("beforeEnd",obj);
3 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
4 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            • 方法二
              1 var tag = document.createElement('a')
2 xxx.appendChild(tag)
3 xxx.insertBefore(tag,xxx[1])
        • 样式操作
          1 var obj = document.getElementById('i1')
2 obj.style.fontSize = "32px";
3 obj.style.backgroundColor = "red";
        • 位置操作
          • 总文档高度    document.documentElement.offsetHeight
          • 当前文档占屏幕高度    document.documentElement.clientHeight
          • 代指文档根节点    document.documentElement
          • 自身高度    tag.offsetHeight
          • 距离上级定位高度   tag.offsetTop
          • 父定位标签    tag.offsetParent
          • 滚动高度    tag.scrollTop
          • 可见区域(height+padding)   clientHeight
          • 全文高(height+padding)    scrollHeight
          • border高度    clientTop  
        • 提交表单
          • document.geElementById('form').submit()
        • 其他操作
          • console.log                 输出框
          • alert                       弹出框
          • confirm                     确认框
          • URL和刷新
            • location.href               获取URL
            • location.href = "url"       重定向
            • location.reload()           重新加载
          • 定时器
            • setInterval                 多次定时器
            • clearInterval               清除多次定时器
            • setTimeout                  单次定时器
            • clearTimeout                清除单次定时器
          • 单选框
            • checkbox对象.checked    获取值
            • checkbox对象.checked =true/false    设置值
        • 事件
          • onabort    图像的加载被中断
          • onblur    元素失去焦点
          • onchange    域的内容被改变
          • onclick    当用户点击某个对象时调用的事件句柄
          • ondblclick    当用户双击某个对象时调用的事件句柄
          • onerror    在加载文档或图像时发生错误
          • onfocus    元素获得焦点
          • onkeydown    某个键盘按键被按下
          • onkeypress    某个键盘按键被按下并松开
          • onkeyup    某个键盘按键被松开
          • onload    一张页面或一幅图像完成加载
          • onmousedown    鼠标按钮被按下
          • onmousemove    鼠标被移动
          • onmouseout    鼠标从某元素移开
          • onmouseover    鼠标移到某元素之上
          • onmouseup    鼠标按键被松开
          • onreset   重置按钮被点击
          • onresize    窗口或框架被重新调整大小
          • onselect    文本被选中
          • onsubmit    确认按钮被点击
          • onunload    用户退出页面
          • 注意：this标签  当前触发事件的标签（谁调用这个函数，this就指向谁）；event封装了当前事件的内容
            • Dom绑定方式
              • 第一种
                <input id='i1' type='button' onclick='ClickOn(this)'>
                function ClickOn(self){
                    //self 当前点击的标签
                }
              • 第二种
                <input id='i1' type='button'>
                document.getElementById('i1').onclick=function(){
                    // this 代指当前点击的标签
                }
              • 第三种
                在w3c标准中，事件捕捉和冒泡addEventListener(,,true/false)；第三个参数true表示捕捉，false或者不填第三个参数表示冒泡，但推荐冒泡时不要省略false。（捕捉true,则先出打印main再打印content;冒泡false，则先打印content再打印main）
                <script>
                    var mymain=document.getElementById("main")
                    var mycontent=document.getElementById("content")
                    mymain.addEventListener("click",function(){console.log('main')},false)
                    mycontent.addEventListener("click",function(){console.log('content')},false)
                </script>
      • 例子
        • 模拟对话框
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            //使弹出框在页面中间
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">

    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">

                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"f id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定"/>

        </p>

    </div>
    <!-- 弹出框结束 -->

    <script>
        function ShowModel(){
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideModel(){
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }

        function ChooseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;

            }
        }

        function CancleAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;

            }
        }

        function ReverseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

    </script>
</body>
</html>
        • 后台管理左侧菜单
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px"></div>
    <div style="width: 300px">
        <div class="item">
            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>

    <script>
        function ChangeMenu(nid){
            //获取当前点击的标签
            var current_header = document.getElementById(nid);
            //获取所有的标签item
            var item_list = current_header.parentElement.parentElement.children;
            //将所有的标签content中增加hide属性
            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }
            //将当前标签的下一个兄弟标签元素中的class添加hide属性
            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>
posted @ 2019-10-08 20:53  飞琼君  阅读(229)  评论(0)  编辑  收藏  举报