jQuery实现管理员登陆

转载

mob64ca141a683a 2025-01-07 07:07:00

文章标签 jQuery实现管理员登陆 jquery 界面技术需求 文章分类 jQuery 前端开发

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析：

当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告

如何定时弹出广告
如何显示广告
如何隐藏广告

1.2 技术分析

【什么是JQuery】

【JQuery的作用是什么】

它封装了很多效果，事件，能够大大的提高我们的开发效率

将我们的页面和Js分离出来

【JQuery的入门】

<script>            
            window.onload = function(){
                alert("window.onload 结束");
            }

            window.onload = function(){
                 alert("window onload 2  结束啦")
            }
            //jQuery的写法
            jQuery(document).ready(function(){
                alert("jquery ready 结束");   
            });

            jQuery(document).ready(function(){
                alert("jqeuery ready 结束啦");
            });

            //我们发现ready时间可以被多次调用，并且不会像window.onload时间一样被覆盖，执行顺序是按定义顺序执行

            // jQuery  = $
            $(document).ready(function(){
                alert("jqeuery ready 结束啦啦啦");
            });

            //更加简洁的写法
            $(function(){
                alert("jquery 终极简洁版");
            });
        </script>

【JQ和JS之间的转换】

JS对象只能调用JS的属性和方法

JQ对象只能调用JQ的属性和方法

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            //1. 给按钮注册事件， onclick 事件
            //2. 实现事件对应的函数
            function change(){
                //找到span 元素
                var span = document.getElementById("span");
//              span.innerHTML="我被JS按钮修改了内容";

                $(span).html("我调用了JQ的方法");
            }

            $(function(){
                //1.需要找到要绑定事件的元素
                $("#jq_btn").click(function(){
                    //2. 找到我们要操作的元素
                    //$("#span").html("我被JQ按钮修改啦");
                    $("#span")[0].innerHTML="我调用的是JS属性";

                    $("#span").get(0).innerHTML="我通过get(0)调用的是JS属性";

                });
            });

        </script>

【JQ中根据ID查找元素】

$("#ID")    JQuery中的ID选择器

【JQ中的动画效果】

show : 控制元素显示
hide : 隐藏元素
toggle : 开关效果，循环调用
slideDown : 向下滑动
slideUp : 向上滑动
slideToggle : 开关上下滑动
animate : 自定义动画
stop : 停止动画
delay : 延迟执行

1.3 步骤分析：

注册一个JQ中ready 事件
3秒之后显示广告， show(3000);
显示5秒钟
隐藏广告

代码实现

/*
             1. 确定事件 : onload
             2. 文档加载完成,三秒之后弹出广告(先得找到要显示的广告元素)
             3. 广告显示三秒钟
             4. 隐藏广告
             * */
            $(function(){
                function showAD(){
                    $("#ad").show();
                    setTimeout(hideAD,3000);
                }
                function hideAD(){
                    $("#ad").hide();
                }
                setTimeout(showAD,1000);
            });

JQuery中的选择器

选择器的目的是让我们能够更加精确的找到页面中的元素

基本选择器

ID选择器

$("#id")

类选择器

$(".className")

元素选择器

$("元素的名称")

通配符选择器

$("*")

选择器,选择器

$("#id,.className")

基本选择器的案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的基本选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //ID选择器
                $("#btn_id").click(function(){
                    $("#one").css("backgroundColor","#bbffaa");
                });
                //元素选择器
                $("#btn_element").click(function(){
                    $("div").css("backgroundColor","#bbffaa");
                });
                //类选择器
                $("#btn_mini").click(function(){
                    $(".mini").css("backgroundColor","#bbffaa");
                });
                //通配符选择器
                $("#btn_all").click(function(){
                    $("*").css("backgroundColor","#bbffaa");
                });
                //多选择器
                $("#btn_selector").click(function(){
                    $(".mini,span").css("backgroundColor","#bbffaa");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="选择ID为one的元素" id="btn_id" />
        <input type="button" value="选择所有div元素" id="btn_element" />
        <input type="button" value="选择所有mini类的元素" id="btn_mini" />
        <input type="button" value="通配符选择器" id="btn_all" />
        <input type="button" value="多选择器" id="btn_selector" />

        <hr />
        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>
    </body>
</html>

JQ中的层级选择器

Ancestor descendant后代选择器
parent > child子元素选择器
prev + next 兄弟元素选择器
prev ~ siblings 所有兄弟选择器

JQ中层级选择器案例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的层级选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //ancestor descendant 后代选择器
                $("#btn1").click(function(){
                    $("body div").css("backgroundColor","#bbffaa");
                });
                //parent > child 父子选择器
                $("#btn2").click(function(){
                    $("body > div").css("backgroundColor","#bbffaa");
                });
                //prev + next 父子选择器
                $("#btn3").click(function(){
                    $("#two + div").css("backgroundColor","#bbffaa");
                });
                //prev + next 兄弟选择器
                $("#btn3").click(function(){
                    $("#two + div").css("backgroundColor","#bbffaa");
                });
                //prev ~ next 同辈选择器
                $("#btn4").click(function(){
                    $("#one ~ div").css("backgroundColor","#bbffaa");
                });


            });
        </script>
    </head>
    <body>
        <input type="button" value="选择body中所有的后代div" id="btn1" />
        <input type="button" value="选择body中所有的子div" id="btn2" />
        <input type="button" value="选择id为two的下一个元素" id="btn3" />
        <input type="button" value="选择id为one的所有同辈" id="btn4" />


        <hr />

        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>

JQ中的基本过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的基本过滤器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //找到第一个mini div
                $("#btn1").click(function(){
                    $(".mini:first").css("backgroundColor","#bbffaa");
                });
                //找到最后一个mini div
                $("#btn2").click(function(){
                    $("div .mini:last").css("backgroundColor","#bbffaa");
                });

                //过滤基数/偶数div
                $("#btn3").click(function(){
                    $("body div:odd").css("backgroundColor","#FFFFEE");
                    $("body div:even").css("backgroundColor","#bbffaa");
                });

                //找出所有的div 剔除id为two
                $("#btn4").click(function(){
                    $("body div:not(#two)").css("backgroundColor","#FFFFEE");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="找出第一个mini div" id="btn1" />
        <input type="button" value="找出最后一个mini div" id="btn2" />
        <input type="button" value="过滤基数/偶数div" id="btn3" />
        <input type="button" value="找过所有div 剔除Id为two" id="btn4" />

        <hr />

        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>

JQ中的属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的属性选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //选择有title属性的div
                $("#btn1").click(function(){
                    $("div[title]").css("backgroundColor","#bbffaa");
                });
                //选择有title='bbb'属性的div
                $("#btn2").click(function(){
                    $("div[title='bbb']").css("backgroundColor","#bbffaa");
                });

            });
        </script>
    </head>
    <body>
        <input type="button" value="选择有title属性的div" id="btn1" />
        <input type="button" value="选择有title='bbb'属性的div" id="btn2" />


        <hr />

        <div id="one">
            <div class="mini" title="aaa">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini" title="bbb">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>

JQ中的表单过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $(":text").css("background-color","#E9FBEB")
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="筛选出所有的input" />
        <hr />
        <form>
          <input type="text" />
          <input type="checkbox" />
          <input type="radio" />
          <input type="image" />
          <input type="file" />
          <input type="submit" />
          <input type="reset" />
          <input type="password" />
          <input type="button" />
          <select><option/></select>
          <textarea></textarea>
          <button></button>
        </form>
    </body>
</html>

使用JQ完成表格的隔行换色

需求分析:

在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色

技术分析:

代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>商品分类</title>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            function init(){
                /*
                    var table = document.getElementById("id_table");
                    var rows = table.tBodies[0].rows;
                    //遍历表格
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        if(i%2 == 0){
                            row.style.background="red";
                        }else{
                            row.style.background = "yellow";
                        }
                    }
                */
            }

            $(function(){
                //1.找到要筛选出来的行
                $("tbody > tr:even").css("background-color","red");
                $("tbody > tr:odd").css("background-color","yellow");

            });
        </script>
    </head>
    <body onload="init()">
        <table border="1" width="600px" style="margin: 0 auto;" id="id_table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>分类ID</td>
                    <td>分类名称</td>
                    <td>分类商品</td>
                    <td>分类描述</td>
                    <td>
                        操作
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>1</td>
                    <td>手机数码</td>
                    <td>肾7,肾8,肾9,锤子</td>
                    <td>这里面都是肾,购买需谨慎</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>2</td>
                    <td>冰箱彩电</td>
                    <td>海尔,TCL,康佳</td>
                    <td>支持国货,从你我做起</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>3</td>
                    <td>鞋靴箱包</td>
                    <td>耐克,阿迪,乔丹</td>
                    <td>买鞋还是耐克的好啊!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>4</td>
                    <td>香烟酒水</td>
                    <td>黄鹤楼,芙蓉王,红塔山</td>
                    <td>饭后一根烟,肾做活神仙!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>5</td>
                    <td>黑马超市</td>
                    <td>JAVA,PHP,JAVAEE</td>
                    <td>黑马在线教育产品,棒棒哒!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

使用JQuery完成表单的全选全不选功能

需求分析

在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理,

技术分析:

通过JQ来修改页面元素的属性, 演示代码如下

$(function(){
    $("#bt1").click(function(){
        // 获得属性的值
        // alert($("#img1").attr("src"));
        // 修改属性的值:
        $("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
    });
});

代码实现:

$(function(){
                /*
                 1. 确定事件 onclick
                 2. 要操作的元素: 顶部全选按钮
                 3. 实现点击事件
                    * 获取当前选中的状态
                    * 使用过滤器,过滤出所有的checkbox
                    * 改变他们的状态
                 */
                $("#ckall").click(function(){
//                  var checked = $("#ckall").prop("checked");
                    var checked = this.checked;
//                  alert(checked);
                    $("tbody input[type='checkbox']").prop("checked",checked);
                })
            });

使用JQ完成省市联动效果

需求分析:

在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市

技术分析:

JQuery中的遍历:

一种方法:

JQ的对象.each(function(i,n){

});

第二种方法:

$.each(数组,function(i,n){

});

如何使用JQ来添加元素

JQuery的DOM操作
    JQ中添加元素:
        append(); 添加字节点
        appendTo(); 将自己添加到

步骤分析:

定义一个二维数组,用来保存城市的信息
确定事件 onchange事件
找到要操作的select
获取选中的城市
动态添加option节点到城市select中

代码实现:

var provinces = [
                ["武汉市","黄石市","随州市","荆门市"],
                ["长沙市","株洲市","邵阳市"],
                ["广州市","深圳市","东莞市","惠州市"]
            ];

$(function(){
    $("#selectProvince").change(function(){
    //alert(this.value);
    var cities = provinces[this.value];
    //                  $("#selectCity").empty();
    $("#selectCity")[0].options.length = 0;
    $(cities).each(function(i,n){
      $("#selectCity").append("<option>"+n+"</option>")
      });
    });
});

使用JQ完成下拉列表左右选择

需求分析

我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品

技术分析

JQuery中的选择器使用,还有文档的增删

步骤分析

引入jquery文件
页面加载完成的事件
在链接上添加一个事件
使用append()函数将选中的option 添加子节点

代码实现

$(function(){
                $("#clickOne").click(function(){
//                  var value = $("#selectLeft>option:selected").val();
                    $("#selectRight").append($("#selectLeft>option:selected"));
//                  $("#selectLeft>option:selected").appendTo("#selectRight");
                });

                $("#clickAll").click(function(){
                    $("#selectRight").append($("#selectLeft>option"));
                });
            });

使用JQ完成表单的校验

需求分析

在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示

技术分析

需要用到事件:

blur事件
focus事件
keyup事件
submit事件

步骤分析

为输入框添加blur事件
在blur事件触发的函数中,获得文本框
判断用户输入的值是否为空,如果为空,提示一下
添加submit事件
判断表单上的错误数量

代码实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../css/style2.css" />
        <link rel="stylesheet" href="../css/main.css" />
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //给所有必填项添加一个小红点
                $("form .required").parent().append("<b class='high'>*<b>");
                //给所有的框添加一个blu事件
                $("form input").blur(function(){
                    var $parent = $(this).parent();

                    //移除原有的span
                    $parent.find(".formtips").remove();
                    //判断当前在处理的控件
                    if($(this).is("#username")){
                        if(this.value == ""){
                            //<span>用户名不能为空!</span>
                            $parent.append("<span class='formtips onError'>用户名不能为空!</span>");
                        }else{
                            //<span>用户名输入正确!</span>
                            $parent.append("<span class='formtips onSuccess' >用户名输入正确!</span>");
                        }
                    }
                    if($(this).is("#password")){
                        if(this.value == ""){
                            $parent.append("<span class='formtips onError'>密码不能为空!</span>");
                        }else{
                            $parent.append("<span class='formtips onSuccess' >密码输入正确!</span>");
                        }
                    }
                    // /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/
                    if($(this).is("#mail")){
                        if(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(this.value)){
                            $parent.append("<span class='formtips onSuccess'>邮箱格式正确!</span>");
                        }else{
                            $parent.append("<span class='formtips onError' >邮箱格式不对!</span>");
                        }
                    }
                }).focus(function(){
                    $(this).triggerHandler("blur");
                }).keyup(function(){
                    $(this).triggerHandler("blur");
                });

                $("form").submit(function(){
                    $("form .required").trigger("focus");

                    //看看哪一行不为0
                    var length = $("form .onError").length
                    //alert(length);
                    if(length > 0){
                        return false;
                    }
                });

            });
        </script>
    </head>

    <body>
        <div>
            <div>
                <div class=top>
                    <img src="../img/logo2.png" />
                </div>
                <div class="top">
                    <img src="../img/header.png" />
                </div>
                <div class="top" style="padding-top: 20px; height:40px">
                    <a>登录</a>
                    <a>注册</a>
                    <a>购物车</a>
                </div>
            </div>
            <!--定义一个空的div 用于<br />clear浮动-->
            <div class="clear"></div>
            <!--导航栏-->
            <div style="border: 1px black solid; background-color: black;height: 38px;font-size: 15px;color: white;width: 100%; ">
                <ul>
                    <li style="display: inline;">首页</li>
                    <li style="display: inline;">手机数码</li>
                    <li style="display: inline;">电脑办公</li>
                    <li style="display: inline;">鞋靴箱包</li>
                    <li style="display: inline;">洗漱用品</li>
                </ul>
            </div>
            <div style="background: url(../img/regist_bg.jpg); height: 500px;width: 100%;margin: 10px 0px;">
                <div style="border: 5px solid black;width:800px; height: 400px; background-color: white; position: absolute;top: 150px;left: 310px;">

                    <h3>用戶注册</h3>
                    <form action="../案例四：网站首页/index.html" method="get" enctype="application/x-www-form-urlencoded">
                        <table width="100%" height="100%" align="center">
                            <tr>
                                <td>用户名：</td>
                                <td><input type="text" id="username" class="required"/></td>
                            </tr>
                            <tr>
                                <td>密 码：</td>
                                <td><input type="password" id="password" class="required"/></td>
                            </tr>
                            <tr>
                                <td>确认密码：</td>
                                <td><input type="password" /></td>
                            </tr>
                            <tr>
                                <td>邮箱：</td>
                                <td><input type="text" class="required" id="mail"/></td>
                            </tr>
                            <tr>
                                <td>姓名：</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td>性别：</td>
                                <td><input type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
                            </tr>
                            <tr>
                                <td>出生日期：</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td>验证码：</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="提交" style="background: url(../img/register.gif);" />
                                </td>
                            </tr>
                        </table>
                    </form>

                </div>
            </div>
            <!--信息栏-->
            <div>
                <img src="../img/footer.jpg" />
            </div>

            <div align="center">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">招贤纳士</a>
                <a href="#">法律声明</a>
                <a href="#">友情链接</a>
                <a href="#">支付方式</a>
                <a href="#">配送方式</a>
                <a href="#">服务声明</a>
                <a href="#">广告声明</a><br /> Copyright © 2005-2016 传智商城 版权所有
            </div>
        </div>
    </body>

</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：centos7 gpu压测命令

下一篇：生成一个随机的aes密钥

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯