测试开发进阶(十四)

zx钟

发布于 2019-09-09 18:00:24

9920

发布于 2019-09-09 18:00:24

文章被收录于专栏：测试游记测试游记

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

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

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

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

获取页面标签

通过 id 找到 HTML 元素（常用） document.getElementById()
通过标签名找到 HTML 元素 获取出来的是列表getElementsByTagName()
通过类名找到 HTML 元素（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。） 取出来的是列表getElementsByClassName()

<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 元素的内容很有用。
读取节点文本 var odv1 = document.getElementById('box'); var content1 = odv1.innerHTML; alert(content1)
写入(修改)节点文本 var odv1 = document.getElementById('box'); odv1.innerHTML = 哈哈哈;

修改标签属性

操作属性的方法

. 操作
[ ]操作

读取属性 <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);
修改属性 <a href="" id="a1" >「测试游记」</a> // 修改属性 a1 = document.getElementById('a1'); // a1.href = 'http://www.666.com'; a1['href'] = 'http://www.666.com';
注意点：操作class属性的时候，要将属性名字改为className a1.className = 'hied';

修改css样式

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

  <div class="dv1" id="dv01" >这个是div1</div>

   //修改css样式
  var odv1 = document.getElementById('dv01');

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

oclock 事件

onclick事件：点击了该 HTML 元素
事件属性添加 JavaScript 代码：

// 给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（写得少，做得多）

官方网站：http://jquery.com/
在线手册：https://www.runoob.com/manual/jquery/

版本下载：https://code.jquery.com/

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

jquery基本的选择器

// id选择器
$('#btn1') 
// 类选择器
$('.box1') 
// 标签选择器
$('li') 
// 层级选择器
$('#ul li span') 
 // 属性选择器
$('input[name=user]')

选择同胞和父辈元素

//选择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');

选择过滤

// 选择包含p元素的div元素
$('div').has('p'); 

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

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

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

获取元素的索引值

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

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>

获取元素样式

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

修改元素样式

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

添加或者移除class属性

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

案例

代码：

css

.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

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

});

html

<!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>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-09-04，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery