测试开发进阶(十四)

发表于 | 分类于 | |

测试开发进阶(十四)

欢迎关注我呀～「测试游记」「zx94_11」

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

DOM HTML‘

节点树中的节点彼此拥有层级关系。

  • 父（parent）
  • 子（child）
  • 同胞（sibling）

父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）

获取页面标签

  • 通过 id 找到 HTML 元素（常用）

    document.getElementById()

  • 通过标签名找到 HTML 元素

    获取出来的是列表getElementsByTagName()

  • 通过类名找到 HTML 元素（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。）

    取出来的是列表getElementsByClassName()

1
2
3
4
5
6
<div class="box1" id="b1">box1</div>

<script type="text/javascript">
    var box1 = document.getElementById('b1');
    box1.style['color'] = 'red';
</script>

通过document.getElementById('b1')找到id是b1的对象，然后把它的颜色设为红色

红色

如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载

解决办法：

  • javascript放到页面最下边
  • 放入window.onload触发的函数里面

window.onload函数在页面加载完后才执行

操作标签内容

  • innerHTML 属性

    获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

  • 读取节点文本

    1
    2
    3
    var odv1 = document.getElementById('box');
    var content1 = odv1.innerHTML;
    alert(content1)

  • 写入(修改)节点文本

    1
    2
    var odv1 = document.getElementById('box');
    odv1.innerHTML = 哈哈哈;

修改标签属性

  • 操作属性的方法

    1. . 操作

    2. [ ]操作

  • 读取属性
    1
    2
    3
    4
    5
    6
    7
    <input type="text" id="input_user" name="user" value="python">  
    //   读取属性
    var odv1 = document.getElementById('input_user');
    var idValue = odv1.id;
    var nameValue = odv1['name'];
    alert(idValue);
    alert(nameValue);
  • 修改属性
    1
    2
    3
    4
    5
    6
    <a href="" id="a1" >「测试游记」</a>

    // 修改属性
    a1 = document.getElementById('a1');
    // a1.href = 'http://www.666.com';
    a1['href'] = 'http://www.666.com';
  • 注意点：操作class属性的时候，要将属性名字改为className
    1
    a1.className = 'hied';
修改css样式

  1. 节点.style.样式名

  2. 节点.style['样式名']

1
<div class="dv1" id="dv01" >这个是div1</div>
1
2
3
4
5
6
 //修改css样式
var odv1 = document.getElementById('dv01');

odv1.style.width = '300px';
odv1.style['height'] = '200px';
odv1.style.background = 'cyan';

oclock 事件

  • onclick事件：点击了该 HTML 元素
  • 事件属性添加 JavaScript 代码：
1
2
3
4
5
6
7
// 给div定义一个onclick事件，触发该事件的时候，调用该事件指定的函数
<div class="dv1" id="dv01" onclick="tank()">这个是div1</div>

// 定义一个函数，负责弹框
function tank() {
    alert('hello')
}

jquery

jQuery是目前使用最广泛的javascript函数库。

jQuery的版本分为1.x系列和2.x、3.x系列

1.x系列兼容低版本的浏览器

2.x、3.x系列放弃支持低版本浏览器

目前使用最多的是1.x系列的。

jquery的口号和愿望 Write Less, Do More（写得少，做得多）

版本下载：https://code.jquery.com/
1
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

jquery基本的选择器

1
2
3
4
5
6
7
8
9
10
// id选择器
$('#btn1') 
// 类选择器
$('.box1') 
// 标签选择器
$('li') 
// 层级选择器
$('#ul li span') 
 // 属性选择器
$('input[name=user]')

选择同胞和父辈元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//选择div元素前面紧挨的同辈元素
$('div').prev(); 
//选择div元素之前所有的同辈元素
$('div').prevAll();

//选择div元素后面紧挨的同辈元素
$('div').next(); 
//选择div元素后面所有的同辈元素
$('div').nextAll(); 

//选择div的父元素
$('div').parent();
//选择div的所有子元素 
$('div').children(); 
//选择div的同级元素
$('div').siblings(); 

//选择div内的class等于cs的元素
$('div').find('#cs li');

选择过滤

1
2
3
4
5
6
7
8
9
10
11
// 选择包含p元素的div元素
$('div').has('p'); 

//选择class不等于cs的div元素
$('div').not('.cs'); 

//选择class等于cs的div元素
$('div').filter('.cs'); 

//选择第6个div元素
$('div').eq(5);

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

1
2
3
4
5
6
7
8
9
10
var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

获取元素样式

1
2
3
// 获取div的样式
$("div").css("width");
$("div").css("color");

修改元素样式

1
2
3
4
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

添加或者移除class属性

1
2
3
4
5
6
// 添加class属性
$("#div1").addClass("cs2") 
// 移除class属性
$("#div1").removeClass("cs2")  
// 重复切换样式
$("#div1").toggleClass("cs2")

案例

案例

代码：

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.title {
    width: 100%;
    height: 100px;
    background: #009FCC;
    text-align: center;
    color: #fff;
    font: bold 28px/100px "微软雅黑";
}

.left_menu {
    width: 200px;
    height: 600px;
    background: #dddddd;
    position: absolute;
    top: 120px;
}

.left_menu ul {
    margin: 0;
    padding: 0;
}

.left_menu .li1 {
    float: left;
    width: 100%;
    height: 60px;
    color: #ffffff;
    list-style-type: none;
    font: normal 20px/60px "微软雅黑";
    background: #009FCC;
    text-indent: 30px;
    margin-bottom: 5px;
}

.hied {
    display: none;
}

.content{
    width: 600px;
    height: 600px;
    position: absolute;
    left: 270px;
    background: #dddddd;
}

JavaScript

1
2
3
4
5
6
7
$(function () {
    $('.li1').click(function () {
        $(this).next().show().siblings('div').hide();
    });
    $('a').attr('href', 'https://w.url.cn/s/A1cCbyT');

});

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>「测试游记」- 案例</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="title">自动化测试平台</div>
<div class="left_menu">
    <ul>
        <li class="li1">用例管理</li>
        <div class="hied">
            <ul>
                <li>查看用例</li>
                <li>添加用例</li>
                <li>修改用例</li>
            </ul>
        </div>
        <li class="li1">套件管理</li>
        <div class="hied">
            <ul>
                <li>查看套件</li>
                <li>添加套件</li>
                <li>修改套件</li>
            </ul>
        </div>
        <li class="li1">环境管理</li>
        <div class="hied">
            <ul>
                <li>查看环境</li>
                <li>添加环境</li>
                <li>修改环境</li>
            </ul>
        </div>
        <li class="li1">项目管理</li>
        <div class="hied">
            <ul>
                <li>查看项目</li>
                <li>添加项目</li>
                <li>修改项目</li>
            </ul>
        </div>
    </ul>
</div>
<div class="content">
    <a href="">「测试游记」</a>
    <br>
    <img src="img/qrcode.jpg" alt="「测试游记」" style="width: 200px;height: 200px;">
</div>
</body>
</html>
wechat
欢迎您扫一扫上面的微信公众号，订阅我的博客！
您的支持将鼓励我继续创作！