zoukankan      html  css  js  c++  java
  • 第七章(2)

    1. position
    2. z-index,opacity
    3. overflow
    4. hover
    5. background(imagr,position)
    6. js
    7. 字符串
    8. 布尔值
    9. 数组
    10. 字典
    11. if语句
    12. 函数
    13. Dom(元素查找)
    14. 亲临指导(示例)
    15. 模态框(示例)
    16. 全选,反选,取消(示例)
    17. 左侧菜单(示例)

    1.position

      fixed(固定在窗口)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-hesder{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right:0;
            left:0;
            }
            .pg-body{
            background-color:#dddddd;
            height:5000px;
            margin-top:50px;
            }
        </style>
    </head>
    <body>
          <div class="pg-hesder">头部</div>
          <div class="pg-body">内容</div>
    </body>
    </html>
    

    relative(固定在某个位置)

     absolute(固定在框里面)

    <body>
          <div style="position: relative;
          500px;height:200px;
          border:1px solid red;
          margin: 0 auto;">
              <div style="position: absolute;
              left:0;bottom:0; 50px;
              height:50px;
              background-color: 
              black;"></div>
          </div>
    </body>
    

    2.z-index,opacity

     z-index(层级),opacity(透明度)

    <body>
         <div style="z-index:10;position: fixed;
         top: 50%;left: 50%;
         margin-left: -250px;margin-top:
         -200px;background-color:
         white;height:400px;
         500px;">
             <input type="text" />
             <input type="text" />
         </div>
         <div style="z-index:9;position: fixed;background-color:black;
         top:0;
         bottom:0;
         right:0;
         left:0;
         opacity:0.5;
         "></div>
         <div style="height:5000px;background-color: green;">
             test
         </div>
    </body>
    

     3.overflow

    overflow:hidden(超过范围不显示)

    overflow:hidden(超过范围不显示)

    <body>
    
         <div style="height: 100px; 200px;overflow:auto">
             <img src="88.jpg">
         </div>
         <div style="height: 100px; 200px;overflow:hidden">
             <img src="88.jpg">
         </div>
    
    </body>

    4.hover

    hover 当鼠标放在标签上面显示颜色

    <head>
    
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
            }
            .pg-body{
            margin-top: 50px;
            }
            .w{
             980px;
            margin: 0 auto;
            }
            .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
            }
            .pg-header .menu:hover{
            background-color: red;
            }
        </style>
    
    </head>
    
    <body>
    
         <div class="pg-header">
             <div class="w">
                 <a class="logo">LOGO</a>
                 <a class="menu">全部</a>
                 <a class="menu">42区</a>
                 <a class="menu">段子</a>
                 <a class="menu">1024</a>
             </div>
             <div class="pg-body">
                 <div class="w">test</div>
             </div>
         </div>
    
    </body>
    
    </html>
    

      

    5.background(imagr,position)

    图片设置背景,background-image

    默认复制 x,y方向

    repeat-y 复制 y 方向

    repeat-x 复制 x 方向

    no-repeat 不复制

    <body>
       <div style="background-image: url('88.jpg');
       background-repeat:no-repeat;height: 500px;">
           test
       </div>
    

    移动图片background-position

    <body>
       <div style="background-image: url('88.jpg');
       background-repeat:no-repeat;
       height: 350px;300px;
       border:1px solid red;
       background-position-x:-25px;
       background-position-y:-5px;
       ">
       </div>
    </body>
    

    简写background:transparent

    <div style="
     height: 350px;300px;
    background:transparent url('88.jpg')
    no-repeat
    scroll 5% 50%;
    border:1px solid red;
    ">
    </div>
    

    登录框 设置图片背景

    <body>
       <div style="height: 35px; 370px;position: relative;">
           <input type="text" style="height:
           35px; 370px;padding-right: 30px;">
           <span style="position:absolute;
           right: 60px;top: 10px;
           background-image: url('a.png'); height: 16px;
            20px;display: inline-block;
           margin-right: -80px;
           "></span>
       </div>
    </body>
    

    js

    <head>
    
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            alert(123);
        </script>
    
    </head>
    

    a.js

    alert(123);
    
    <head>
    
        <meta charset="UTF-8">
        <title>Title</title>
        <script src='test.js'> </script>
    
    </head>
    

     7.字符串

    a = "alex"
    
    获取索引位置
    
    a.charAt(0)
    
    获取开始到结束位置
    
    a.substring(1,3)
    
    获取长度
    
    a.length
    
    charAt(0),ontent.substring,setInterval
    
    obj.length                           长度
     
    obj.trim()                           移除空白
    obj.trimLeft()
    obj.trimRight)
    obj.charAt(n)                        返回字符串中的第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)          分割
    

    8,布尔值

    ==      比较值相等
    !=       不等于
    ===   比较值和类型相等
    !===  不等于
    ||        或
    &&      且
    

    9.数组

    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.splice(1,1,"a")  删除索引1删除1个插入a
    
    obj.slice( )        切片
    obj.reverse( )      反转
    obj.join(sep)       将数组元素连接起来以构建一个字符串
    obj.concat(val,..)  连接数组
    obj.sort( )         对数组元素进行排序
    循环数组
    var a=["k1","k2"]
    
    for(var item in a){
        console.log(a[item]);
    }
     k1
     k2
    

     10.字典

    var a={'k1':'v1','k2':'v2'}
    
    for(var item in a){
        console.log(a[item],item);
    }
    
    v1 k1
    v2 k2 
    for循环
    for(var i=0;i<10;i+=1){
        console.log(i)
    }
    
    
    var a = [11,22,33,55]
    for(var i=0;i<a.length;i+=1){
        console.log(i)
    }
    
    不支持字典循环
    

    11,if语句

    if(条件){
      
    }else if(条件){
      
    }else if(条件){
      
    }else{
      
    }
    

    12,函数

    function test(a,b,c){
    }
    test(1,2,3)
    

    13.Dom(元素查找)

    直接查找

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

    间接查找

    parentNode          // 父节点
    childNodes          // 所有子节点
    firstChild          // 第一个子节点
    lastChild           // 最后一个子节点
    nextSibling         // 下一个兄弟节点
    previousSibling     // 上一个兄弟节点
     
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素
    
    <body>
        <div id="i1">我是i1</div>
        <a>test1</a>
        <a>test2</a>
        <a>test3</a>
    </body>
    
    document.getElementById('i1')   找到标签
    document.getElementById('i1').innerText  获取内容
    document.getElementById('i1').innerText = '新内容'  修改
    
    
    document.getElementsByTagName('a')        取a标签
    document.getElementsByTagName('a')[1]     取第一个a标签
    document.getElementsByTagName('a')[1],innerText = 666;  修改
    
    for循环修改标签
    tags=document.getElementsByTagName('a');
    for(var i=0;i<tags.length;i++){tags[i],innerText=777;}

    14,亲临指导(示例)

    <body>
    
         <div id="i1">欢迎老男孩指导</div>
         <script>
             function func(){
             //根据ID获取指定标签的内容,定于局部变量
             var tag = document.getElementById('i1');
             //获取标签内容的内容
             var content = tag.innerText;
             var f = content.charAt(0);
             var l = content.substring(1,content.length);
             var new_content = l + f;
             tag.innerText = new_content;
             }
             setInterval('func()',500);
         </script>
    
    </body>
    
    </html>
    

    15.模态框(示例)

     1 <head>
     2     <meta charset="UTF-8">
     3     <title>Title</title>
     4     <style>
     5         .hide{
     6              display: none;
     7         }
     8         .c1{
     9            position: fixed;
    10            left: 0;
    11            top: 0;
    12            right: 0;
    13            bottom: 0;
    14            background-color: black;
    15            opacity: 0.6;
    16            z-index: 9;
    17         }
    18         .c2{
    19          500px;
    20         height: 400px;
    21         background-color: white;
    22         position: fixed;
    23         left: 50%;
    24         top: 50%;
    25         margin-left: -250px;
    26         margin-top: -200px;
    27         z-index: 10;
    28         }
    29     </style>
    30 </head>
    31 <body style="margin: 0;">
    32 
    33      <div>
    34          <input type="button" value="添加"  onclick="ShowModel();"/>
    35          <table>
    36              <thead></thead>
    37                     <tr>
    38                         <th>主机</th>
    39                         <th>端口</th>
    40                     </tr>
    41              <tbody>
    42                   <tr>
    43                       <td>1.1.1.3</td>
    44                       <td>190</td>
    45                   </tr>
    46              </tbody>
    47          </table>
    48      </div>
    49      
    50      <!--遮罩层-->
    51      <div id="i1" class="c1 hide">
    52      </div>
    53      <!--弹出框-->
    54      <div id="i2" class="c2 hide">
    55          <p><input type="text" /></p>
    56          <p><input type="text" /></p>
    57          <p>
    58              <input type="button" value="取消" onclick="HideModel()"/>
    59              <input type="button" value="确认"/>
    60          </p>
    61 
    62      </div>
    63 
    64      <script>
    65         function ShowModel(){
    66         document.getElementById('i1').classList.remove('hide');
    67         document.getElementById('i2').classList.remove('hide');
    68         }
    69         function HideModel(){
    70         document.getElementById('i1').classList.add('hide')
    71         document.getElementById('i2').classList.add('hide')
    72         }
    73     </script>
    74 </body>
    View Code

    16.全选,反选,取消(示例)

     1 <body style="margin: 0;">
     2 
     3        <div>
     4            <input type="button" value="添加" onclick="ShwModel();" />
     5            <input type="button" value="全选" onclick="ChooseAll();" />
     6            <input type="button" value="取消" onclick="CancleAll();" />
     7            <input type="button" value="反选" onclick="ReverseAll();" />
     8 
     9            <table>
    10                <thead>
    11                       <tr>
    12                           <th>选择</th>
    13                           <th>主机名</th>
    14                           <th>端口</th>
    15                       </tr>
    16                </thead>
    17 
    18                <tbody id="tb">
    19                <tr>
    20                    <td><input type="checkbox" /></td>
    21                    <td>1.1.1.1</td>
    22                    <td>190</td>
    23                </tr>
    24                <tr>
    25                    <td><input type="checkbox" /></td>
    26                    <td>1.1.1.3</td>
    27                    <td>193</td>
    28                </tr>
    29                </tbody>
    30            </table>
    31        </div>
    32 
    33        <script>
    34            function ChooseAll(){
    35                //获取id
    36                var tbody = document.getElementById('tb');
    37                //获取孩子
    38                var tr_list = tbody.children;
    39                //循环孩子
    40                for(var i=0;i<tr_list.length;i++){
    41                    var current_tr = tr_list[i]
    42                    var checkbox = current_tr.children[0].children[0];
    43                    //修改
    44                    checkbox.checked = true;
    45                }
    46            }
    47 
    48            function CancleAll(){
    49                 var tbody = document.getElementById('tb');
    50 
    51                 var tr_list = tbody.children;
    52                 for(var i=0;i<tr_list.length;i++){
    53 
    54                     var current_tr = tr_list[i];
    55                     var checkbox = current_tr.children[0].children[0];
    56                     checkbox.checked = false;
    57                 }
    58            }
    59 
    60            function ReverseAll(){
    61                 var tbody = document.getElementById('tb');
    62 
    63                 var tr_list = tbody.children;
    64                 for(var i=0;i<tr_list.length;i++){
    65                     var current_tr = tr_list[i];
    66                     var checkbox = current_tr.children[0].children[0];
    67 
    68                     if(checkbox.checked){
    69                         checkbox.checked = false;
    70                     }else{
    71                         checkbox.checked = true;
    72                     }
    73                 }
    74            }
    75 
    76        </script>
    77 </body>
    View Code

    17,左侧菜单(示例)

     1 head>
     2     <meta charset="UTF-8">
     3     <title>Title</title>
     4     <style>
     5           .hide{
     6             display: none;
     7         }
     8         .item .header{
     9             height: 35px;
    10             background-color: #2459a2;
    11             color: white;
    12             line-height: 35px;
    13         }
    14     </style>
    15 </head>
    16 <body>
    17      <div style="height: 48px;"></div>
    18      <div style=" 300px;">
    19          <div class="item">
    20              <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
    21              <div>
    22                  <div>内容1</div>
    23                  <div>内容2</div>
    24                  <div>内容3</div>
    25              </div>
    26          </div>
    27          <div class="item">
    28              <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
    29              <div class="hide">
    30                  <div>内容1</div>
    31                  <div>内容2</div>
    32                  <div>内容3</div>
    33              </div>
    34          </div>
    35          <div class="item">
    36              <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
    37              <div class="hide">
    38                  <div>内容1</div>
    39                  <div>内容2</div>
    40                  <div>内容3</div>
    41              </div>
    42          </div>
    43      </div>
    44 
    45 <script>
    46     function ChangeMenu(nid){
    47         var current_header = document.getElementById(nid);
    48 
    49         var item_list = current_header.parentElement.parentElement.children;
    50 
    51         for(var i=0;i<item_list.length;i++){
    52             var current_item = item_list[i]
    53             current_item.children[1].classList.add('hide');
    54             }
    55             current_header.nextElementSibling.classList.remove('hide');
    56 
    57     }
    58 </script>
    59 </body>
    View Code
  • 相关阅读:
    myeclipse启动后,卡在loading workbench界面
    oracle数据库导入dmp文件
    ORA-28009: 应当以 SYSDBA 身份或 SYSOPER 身份建立 SYS 连接
    debug启动项目很慢
    CSS利用border绘制图形
    HTML创建链接框
    CSS实现单行文本溢出显示省略号
    HTML5中的Web Worker
    HTML拖放元素
    Canvas和SVG的比较
  • 原文地址:https://www.cnblogs.com/hanwei999/p/8086675.html
Copyright © 2011-2022 走看看