0
点赞
收藏
分享

微信扫一扫

jQuery 实现页面交互逻辑

40dba2f2a596 2022-02-27 阅读 81
jqueryjavascript前端
加载失败

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"]'）

二。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().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操作属性

五。jQuery操作元素

六。jQuery效果函数

七。jQuery事件

八。ajax

举报

相关推荐

javascrip页面交互

linux驱动开发c/c++嵌入式字符设备驱动设备树

jsp页面交互

内置对象重定向服务器Java后端开发yyds干货盘点

jsp怎么和java页面交互

Java表单学生管理系统后端开发

『牛角书』鸿蒙页面交互

前端交互自动化测试web自动化界面交互

Qt中ui页面交互切换

fortifyJava源代码

android 仿音悦台页面交互效果

androidapp优化idesedOpenStack云计算

Flutter与iOS和Android原生页面交互

flinkmacoslinq

微信小程序的页面交互1

微信小程序小程序前端

【优化】514- 如何使页面交互更流畅

时间分片css重绘编程语言

利用streamlit结合langchain_aws实现claud3的页面交互

mapreduce流程图大数据
0 条评论
加载失败