测试开发进阶(十三)

欢迎关注我公众号：「测试游记」

浮动和定位

定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

通过使用 position 属性，选择不同类型的定位。

相对定位:position: relative;

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位:position: absolute;

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

固定位置:position:fixed;

直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1
2
3

img{
  float:right;
  }

left -> 元素向左浮动
right ->元素向右浮动
none ->默认值。元素不浮动，并会显示在其在文本中出现的位置。
Inherit -> 规定应该从父元素继承 float 属性的值。

完成一个简单的菜单栏

菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>「测试游记」- 菜单栏</title>
    <style type="text/css">
        .menu {
            width: 100%;
            height: 80px;
            background: #5c5dff;
            color: white;
        }
        .menu li {
            float: left;
            width: 100px;
            height: 100%;
            font: normal 20px/80px 'Microsoft Sans Serif';
            list-style: none;
            margin-left: 20px;
            text-align: center;
        }
        .menu li:hover{
            background: coral;
            color: darkblue;
        }
    </style>
</head>
<body>
<div class="menu">
    <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
    </ul>
</div>
</body>
</html>

JavaScript

HTML 中的脚本必须位于标签之间。脚本可被放置在 HTML 页面的和部分中。

1、行间事件（主要用于事件）

1	<div onclick="alert('Hello Python')">box</div>

弹出hello

2、页面script标签嵌入

1
2
3

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入

1	<script type="text/javascript" src="js/index.js"></script>

基本语法

注释

单行注释：以 // 开头。
多行注释：以 /* 开始，以 */ 结尾。

变量

命名

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

驼峰式命名

声明

// 先声明后赋值
var x;
x = 20;

// 在声明的时候赋值
var y=3;

// 同时给多个变量赋值
var a = 100,b = 200,c = 300;

数据类型

number 数字类型

var y=3;

string 字符串类型

1	var st='python'

boolean 布尔类型

true和false(小写)

undefined 类型

变量声明未初始化，它的值就是undefined

null类型

表示空对象，类似于python中的None

1	var tr = null

arry 数组

方法：

length属性：获取数组长度

pop() 方法从数组中删除最后一个元素

push() 方法（在数组结尾处）向数组添加一个新的元素

//创建数组
var skill= Array("html","css","js");

skill[0]
skill.length
skill.pop()
skill.push('jquery')

运算符

算术运算符： +(加)、 -(减)、 *(乘)、/(除)、 %(求余)
赋值运算符：=、 +=、 -=、 *=、 /=、 %= 、++
条件运算符：==、===、>、>=、<、<=、!=、
逻辑运算符：&&(而且 )、||(或者 )、!(否 )

条件运算

条件语句

if
else
else if
switch

var a = 199;
    if(a>200){
        alert('大于200');
    }
    else if(a>100){
        alert('大于100')
    }
    else {
        alert(a);
    }

switch(表达式) {
     case n1:
        代码块
        break;
     case n1:
        代码块
        break;
     default:
        默认代码块
}

计算一次 switch 表达式

把表达式的值与每个 case 的值进行对比

如果存在匹配，则执行关联代码

遇到 break 关键词，它会跳出 switch 代码块。

case 匹配不存在时，运行default 的代码：

循环

while循环
for 循环
for in 循环

// while循环
while（条件语句){
    循环体
}

// for 循环
for (语句1,语句2，语句3 ){
    循环体代码
}
// for in 循环
for (x in arrayr){
    循环体代码
}

var aa = 101, bb = 100;
while (aa > bb) {
    console.log(aa);
    aa -= 1;
}

while

1
2
3

for (i=0;i<10;i++){
    console.log(i)
}

![for](../../../Library/Application Support/typora-user-images/image-20190903153318464.png)

var aList = Array(11,22,33,44,55);
for (i in aList){
    console.log(i);
    console.log(aList[i]);
}

for in

var objC = {name: 'abc', age: 19};
// 遍历对象
for (x in objC) {
    console.log(x);
    console.log(objC[x]);
}

遍历对象

函数

函数定义：定义函数的关键词 function，函数内的代码块，包裹在花括号中：

// 函数的定义 使用function
function func() {
alter(999)
}
// 函数调用
func()

提示：JavaScript 对大小写敏感。关键词 function 必须是小写的

函数参数：

function addNumber(var1,var2) {
alert(var1 + var2;);    
}
addNumber(11,22)

函数返回值：使用 return 来返回值。在使用 return 语句时，函数会停止执行，并返回指定的值。

function addNumber(var1, var2) {
return var1 + var2;
}
var res = addNumber(11,222);
alert(res)

对象属性

对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

1	var objA={name : "python",age : 18,id :123};