jq测试练习

最新推荐文章于 2024-06-24 23:27:08 发布

是冰糖呀！

最新推荐文章于 2024-06-24 23:27:08 发布

阅读量727

点赞数 4

文章标签： js

本文链接：https://blog.csdn.net/qq_45900595/article/details/105980583

版权

jq测试

题目

具体任务：使用jQuery实现如下功能。
1、设置两个文本框、一个下拉框，不设置ID，点击按钮，通过jQuery的正确的选择器提取到元素，在console中输出由文本框、下拉框中的值组成的数组。
2、设置三个文本框，分别代表div的宽度、高度、透明度（opacity）。设置两个DIV，第一个DIV设置成固定样式表
.div1{ width:300px; height:80px; background-color:#FF0000; }
div2{ width:300px; height:80px; background-color:#00FF00; }
要求点击第一个DIV，控制第二个div的样式变成由文本框中获取的宽度、高度和透明度，同时变化过程要实现平滑动画。
3、输入标签名称到一个文本框，点击按钮，切换文本框中指定的标签名称所指示的元素的显示和隐藏。

js代码单独放到一个文件中，由HTML文件引入
工具可以是：notepad++，vs系列，eclipse、dw，PhpStrom。

题目一

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--注意“jquery-3.4.1.js”这个文件要先导入，不然会报错-->
    <script src="js/jquery-3.4.1.js"></script> 
    <script src="js/my.js"></script>
</head>
<body>
        <!-- 文本框-->
    <input type="text"> 
    <input type="text">
        <!-- 下拉框-->
    <select>
        <!-- option里面的值自行设置，（可以随便填）-->
        <option>red</option>
        <option>blue</option>
        <option>green</option>
        <option>pick</option>
        <option>black</option>
    </select>
    <br>
        <!-- 按钮-->
    <input type="button" value="点击">
</body>
</html>

js代码

$(document).ready(function () {//在DOM就绪时执行的函数
    $("input:last").on("click",function () {//选择最后一个input元素,并绑定一个点击事件，如下图所示
        console.log("文本框一："+$("input").val());//选择第一个input元素
        console.log("文本框二："+$("input:eq(1)").val());//选择第二个input元素
        console.log("下拉框："+$("select").val());//选择第一个select元素
    })
});

在这里插入图片描述

题目二

实现平滑动画。（不会）

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/my2.js"></script>
    <style>
        .div1{  width:300px;  height:80px;   background-color:#FF0000;  }
        .div2{  width:300px;  height:80px;   background-color:#00FF00;  }
    </style>
</head>
<body>
    <p>宽度</p><input type="text">
    <p>高度</p><input type="text">
    <p>透明度</p><input type="text">
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

js代码

$(document).ready(function () {//在DOM就绪时执行的函数
    $("div").on("click",function () {//点击第一个div，触发的单击事件
        var kuang=$("input:eq(0)").val();//获取宽值
        var gao=$("input:eq(1)").val();//获取高值
        var touming=$("input:eq(2)").val();//获取透明值
        $("div:eq(1)").css({opacity:toumingdu,height:gaodu,width:kuangdu})//设置css样式
    })
});

在这里插入图片描述

题目三

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/my3.js"></script>
</head>
<body>
    <input type="text">
    <input type="button" value="点击">
    <br>
    <a>a标签</a>
    <p>p标签</p>
    <h>h标签</h>
    <div>div标签</div>

</body>
</html>

js代码

$(document).ready(function () {
    //获取按钮，然后绑定一个点击事件
    $("input:eq(1)").on("click",function () {
        //把文本框的值给values
        var values=$("input:eq(0)").val();
        //判断文本框的元素是否隐藏
        if($(values).is("hidden")){
            //如果隐藏，改为显示
            $(values).show();
        }else{
            //如果显示，改为隐藏
            $(values).hide();
        }
    });
});

在这里插入图片描述

是冰糖呀！

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jq测试练习

jq测试题目具体任务：使用jQuery实现如下功能。1、设置两个文本框、一个下拉框，不设置ID，点击按钮，通过jQuery的正确的选择器提取到元素，在console中输出由文本框、下拉框中的值组成的数组。2、设置三个文本框，分别代表div的宽度、高度、透明度（opacity）。设置两个DIV，第一个DIV设置成固定样式表.div1{ width:300px; height:80px;...
复制链接

扫一扫