jQuery 实现页面交互逻辑

chuntian_tester

已于 2022-07-19 23:47:00 修改

阅读量1.7k

点赞数

分类专栏：前端文章标签： jquery javascript 前端

于 2022-02-27 01:11:43 首次发布

本文链接：https://blog.csdn.net/qq_40132294/article/details/123155018

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

jQuery是一个使用最广泛的javascript的函数库，在页面中使用<script>标签引入js文件即可使用。

<script type="text/javascript" src="xxxx/min.js">

jQuery在线手册：https://www.runoob.com/manual/jquery

jquery用法思想：选择某个网页元素，然后对他进行操作。

一。jQuery选择器

$代表jquery

id选择器 $('#id属性值'）

class选择器 $('.class属性值'）

标签选择器 $('标签名'）

层级选择器 $('.box3 ul li'）

属性选择器 $('input[name="user"]'）

索引选择器 $('li').index(-1)

二。jQuery操作样式

$(function(){$('.box3').css({background:"pink"})})

2.1 修改元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <!--外部引入js文件-->
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // class属性
            $('.box3').css({background:"pink"});
            // id属性
            $('#box1').css({background:'cyan',fontSize:'40px'});
            // 标签选择器，选择集可以直接设置样式
            // prev() ： 选择该节点前面一个兄弟节点+链式调用
            $('li').css({background:'red'}).prev().css({background:'green'});
            // prevAll(): 选择该节点前面的所有兄弟节点
            $("#li2").css({background:'red'}).prevAll().css({background:'black'});
            // nex(): 选择该节点后面一个兄弟节点
            // nextAll(): 选择该节点后面所有的兄弟节点
            // siblings(): 选择该节点的所有兄弟节点
            $("#li2").siblings().css({background:'black'});
            // parent(): 父节点
            $("li2").parent().css({background:'black'});
            // children(): 子节点
            $("#li2").children(ul').css({background:'black'});

            // 选择过滤：has()-->包含某个节点
            $('div').has('input').css({background:'blue'});
            // 选择过滤：not()-->排除某个节点
            $('div').not('input').css({background:'yellow'});

            // 索引定位：eq(下标)
            $('li').eq(1).css({background:'yellow'});  // 找到li标签，并设置第2个li标签样式
        })
    </script>
</head>
<body>
<div id="box1">box1</div>
<div id="box2" onclick="tk()">box2</div>
<div id="box3" class="box3">
    <input type="text">
    <ul>
        <li>标签1</li>
        <li id="li2">标签2</li>
        <li>标签3</li>
    </ul>
</div>
<div id="box4">box4</div>
</body>
</html>

2.2 添加或移除class属性

// 添加class属性 $('#box3').addClass('hide')

// 移除class属性 $('#box3').removeClass('hide')

// 重复切换样式 $('#box3').toggleClass('hide')

三。绑定click事件

给元素绑定click事件，可以用如下方法：

$('#box3').click(function(){

// 内部的 this 指的原始对象自己

// 使用jQuery 对象用 $(this)

})

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <link rel="stylesheet" href="./css/index.css" type="text/css">
    <link rel="stylesheet" href="./css/reset.css" type="text/css">
    <style>
        .body{
            background:#fff;
        }
    </style>

    <script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        <!--使用jquery-->
        $(function(){
            // 选择节点时触发的js操作
            // 功能：点击+号时能弹出悬浮框
            $('#add').click(function(){
                // 上面add节点触发后需要做的事情
                $('.add_window').addClass('show');
            });

            // 功能：弹出悬浮框后，点击'取消'和'确认'按钮，隐藏悬浮框
            $('#no').click(function(){
                // 触发后将悬浮框再removeClass掉
                $('add_window').removeClass('show');
            })
            $('#yes').click(function(){
                // 触发后将悬浮框再removeClass掉
                $('add_window').removeClass('show');
            })

            // 利用toggleClass()隐藏并展开左侧菜单栏
            // 反复点击<h3>标签，能够反复打开与关闭其对应子菜单
            $('h3').click(function(){
                $(this).next().toggleClass('show');
            })
        })
    </script>


</head>
<body class="body">

<!--顶部区域-->
<div class="top_menu" >
    <div class="title">自动化测试平台</div>
    <div class="menu_list">
        <ul>
            <a href="跳转的url"><li>首页</li></a>
            <a href=""><li>接口列表</li></a>
            <a href=""><li>用例列表</li></a>
            <a href=""><li>套件列表</li></a>
            <a href=""><li>测试报告</li></a>
        </ul>
    </div>
    <a href=""><div class="user_logout">用户注销</div></a>
</div>
<!--左边区域-->
<div class="left_menu">
    <div class="project_manage">项目管理</div>
    <div class="left_menu_list">
        <ul>
            <li>
                 <h3>接口管理</h3>
                 <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加接口</a></li>
                    <li><a href="">接口列表</a></li>
                 </ul>
            </li>
            <li>
                <h3>用例管理</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加用例</a></li>
                    <li><a href="">用例列表</a></li>
                </ul>
            </li>
            <li>
                <h3>测试计划</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加计划</a></li>
                    <li><a href="">计划管理</a></li>
                </ul>
            </li>
            <li>
                <h3>报告管理</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加报告</a></li>
                    <li><a href="">报告管理</a></li>
                </ul>
            </li>
            <li>
                <h3>套件管理</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加套件</a></li>
                    <li><a href="">套件管理</a></li>
                </ul>
            </li>

        </ul>
    </div>
</div>

<!--右边内容区域-->
<div class="content">
    <div class="project_info">
        <div class="pro_info_top">项目A</div>
        <p>接口数量：15</p>
        <p>用例数量：90</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目B</div>
        <p>接口数量：10</p>
        <p>用例数量：98</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目C</div>
        <p>接口数量：6</p>
        <p>用例数量：66</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目D</div>
        <p>接口数量：5</p>
        <p>用例数量：30</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目E</div>
        <p>接口数量：5</p>
        <p>用例数量：54</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目F</div>
        <p>接口数量：9</p>
        <p>用例数量：90</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目G</div>
        <p>接口数量：7</p>
        <p>用例数量：65</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info" id="add">  <!--增加自定义的add属性，通过jquery动态修改add属性-->
        <img src="./images/加号图标.png" alt="">
    </div>

<!--    增加悬浮表单-->
    <div class="add_window  hide">  <!--增加自定义的hide属性，初始时时隐藏状态-->
        <div class="add_project">新增项目</div>
        <div>
            <form action="">
                <div class="alter_input">
                     <label for="pro_name">项 目 名 称：</label>
                     <input type="text" id="pro_name">
                </div>
                <div class="alter_input">
                    <label for="pro_addr">项 目 地 址：</label>
                    <input type="text" id="pro_addr">
                </div>
                <div class="alter_input">
                    <label for="tester">测 试 人 员：</label>
                    <input type="text" id="tester">
                </div>

                <div class="pro_desc">
                    <label for="pro_desc2">项 目 描 述：</label>
                    <br>
                    <textarea name="" id="pro_desc2" cols="60" rows="8"></textarea>
                </div>



                 <div class="confirm">
                    <input type="submit" value="取消" id="no">
                    <input type="submit" value="确认" id="yes">
                </div>

            </form>
        </div>


    </div>


</div>




</body>
</html>

效果：

四。jQuery操作属性

attr() : 设置或返回匹配元素的属性和值；

removeAttr(): 从所有匹配的元素中移除指定的属性；

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        // 将所有a标签的href属性设置为一样
        $(function(){
            // attr(): 获取属性
            var href = $('.div1 a').eq(0).attr('href');
            // attr(attr_name, attr_value): 设置属性值
            $('.div1 a').attr('href', href);
            // removeAttr(): 移除属性值
            $(".div1 a").eq(3).removeAttr('href')
        })
        
</script>

五。jQuery操作元素

5.1 获取文本内容

text(): 设置或返回所选元素的文本内容；

html(): 设置或返回所选元素的所有内容（包括HTML标记）；

val(): 设置或返回表单字段的值；

5.2 添加新的HTML内容

append(): 在被选元素的末尾插入内容；

prepend(): 在被选元素的开头插入内容；

befor(): 在被选元素之前插入内容；

after(): 在被选元素之后插入内容；

5.3 删除元素/内容

remove(): 删除被选元素及其子元素；

empty(): 清空被选元素的所有子元素（保留被选元素）;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery操作属性</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        // 将所有a标签的href属性设置为一样
        $(function(){
            // attr(): 获取属性
            var href = $('.div1 a').eq(0).attr('href');
            // attr(attr_name, attr_value): 设置属性值
            $('.div1 a').attr('href', href);
            // removeAttr(): 移除属性值
            $(".div1 a").eq(3).removeAttr('href');

            // text(): 获取文本
            console.log($('.div1 a').eq(2).text());
            // text('text_value'): 设置文本
            $('.div1 a').eq(1).text('哈哈哈')

            // html(): 获取html内容
            console.log($('.div1 ul').html());
            // html(content): 设置html内容
            $('.div1 a').eq(2).html('<li><a href="">这是设置html内容</a></li>')
        })

        $(function(){
            // val(): 获取表单元素value值
            $('#btn').click(function(){
                var user_name = $("#user").val();
                console.log(user_name)
                var password = $("#pwd").val();
                console.log(password)
                if(user_name.length<6){
                    console.log('用户名需大于6个字符');
                }
            })
        })

        $(function(){
            // append(): 后面追加内容
            $('.div1').append('<p>内部追加一条</p>');
            // prepend(): 前面追加内容
            $('.div1').prepend('<p>内部前面追加一条</p>');
            // before(): 同级前面追加一条
            $('.div1').before('<p>同级前面追加一条</p>');
            // after(): 同级前面追加一条
            $('.div1').after('<p>同级后面追加一条</p>');
        })

        
    </script>
    
</head>
<body>

<div class="div1">
    <span>小春田</span>
    <form action="">
        <label for="">账号：</label>
        <input type="text" id='user' name="user">
        <br>
        <label for="">密码：</label>
        <input type="password" id='pwd' name="pwd">
        <br>
        <input type="button" id='btn' value="提交">
    </form>
    <ul>
        <li><a href="https://www.baidu.com">这是1</a></li>
        <li><a href="">这是2</a></li>
        <li><a href="">这是3</a></li>
        <li><a href="">这是4</a></li>
    </ul>
</div>

</body>
</html>

六。选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口测试选项卡</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <link type="text/css" href="css/reset.css">
    <style type="text/css">
    <!--顶部菜单-->
     .box1{
        background:grey;
        height:60px;
        margin:20px auto 0 30px;
     }
     .menue li{
        margin-right:10px;
        width:150px;
        text-align:center;
        list-style:none;  <!--去除li标签前的圆点-->
        height:60px;
        font:normal 18px/60px 微软雅黑;
        float:left;
     }
       .back_g{
        background:pink;
     }


     .content{
        width:100%;
        margin-top:10px;
        float:left;
     }
     .content div{
        background:pink;
        width:100%;
        height:100%;
        display:none;
     }
     .content .active{
        display:block;
     }

    .tables th{
        height:40px;
    }
    .tables td{
        height:40px;
    }
    .tables input{
        height:20px;
        width:100%;
    }

    </style>

    <script type="text/javascript">
        $(function(){
            $('.menue li').click(function(){
                $(this).addClass('back_g').siblings().removeClass("back_g");
                $('.content div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });

            // 添加参数行
            $('.add_data').click(function(){
                var tr= '<tr>'+$(this).siblings('table').find('tr').eq(-1).html()+'</tr>';
                $('.tables').append(tr);
            });
            // 删除参数行
            $('.del_data').click(function(){
                // 删除选择的行
                // 删除前先判断当前的tr是否大于2行，是才能删除
                var checked = $(':checked');
                var table = $(this).siblings('table');

                // 判断当前的tr行数是否大于2
                if(table.find('tr').length>2){
                    // 判断是否选择了行
                    if(checked.length>0){
                        // 判断删除后是否行数小于2,小于2不让删
                        if(table.find('tr').length-checked.length>1){
                            checked.parent().parent().remove();
                        }
                    }else{
                        table.find('tr').eq(-1).remove();
                    }
                }
            });
        })



    </script>
</head>
<body>
<!--顶部菜单-->
<div class="box1">
    <div class="menue">
        <ul>
            <li class="back_g">请求头</li>
            <li>请求数据</li>
            <li>响应数据</li>
        </ul>
    </div>
    <div class="content">
        <div class="active">
            <input type="button" class="add_data" value="添加header">
            <input type="button" class="del_data" value="删除header">
            <table class="tables">
                <tr>
                    <th>选择</th>
                    <th>header</th>
                    <th>value</th>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                </tr>

            </table>
        </div>

        <div>
            <input type="button" class="add_data" value="添加数据">
            <input type="button" class="del_data" value="删除数据">
            <table class="tables">
                <tr>
                    <th>选择</th>
                    <th>类型</th>
                    <th>header</th>
                    <th>value</th>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                </tr>

            </table>
        </div>

        <div>
            <input type="button" class="add_data" value="添加响应">
            <input type="button" class="del_data" value="删除响应">
            <table class="tables">
                <tr>
                    <th>选择</th>
                    <th>类型</th>
                    <th>header</th>
                    <th>value</th>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                </tr>

            </table>
        </div>

    </div>


</div>

</body>
</html>

chuntian_tester

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 实现页面交互逻辑

jQuery是一个使用最广泛的javascript的函数库，在页面中使用<script>标签引入js文件即可使用。<script type="text/javascript" src="xxxx/min.js">jQuery在线手册：https://www.runoob.com/manual/jqueryjquery用法思想：选择某个网页元素，然后对他进行操作。一。jQuery选择器$代表jqueryid选择器 $('#id属性值'）c......
复制链接

扫一扫