第七章(2)

position
z-index,opacity
overflow
hover
background(imagr,position)
js
字符串
布尔值
数组
字典
if语句
函数
Dom(元素查找)
亲临指导(示例)
模态框(示例)
全选,反选,取消(示例)
左侧菜单(示例)

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(超过范围不显示)

<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

相关阅读:
poj 1655 Balancing Act 树的重心
 poj 1985 Cow Marathon 树的直径
 hdu 4607 Park Visit 求树的直径
 hdu 1548 A strange lift 宽搜bfs+优先队列
 poj 2711 Leapin' Lizards && BZOJ 1066: [SCOI2007]蜥蜴最大流
 poj 2449 Remmarguts' Date K短路+A*
hdu 1285 确定比赛名次拓扑排序
 hdu 3061 Battle 最大权闭合图
 hdu 3879 Base Station 最大权闭合图
 poj 2987 Firing 最大权闭合图
原文地址：https://www.cnblogs.com/hanwei999/p/8086675.html