带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验

今日内容

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

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

使用JQuery完成复选框的全选效果

使用JQuery完成省市联动效果

使用JQuery完成下列列表左右选择

使用JQuery完成表单的校验.

今日目标：

掌握JQuery的基本使用

掌握JQuery的基本选择器,层次选择器

会使用JQuery完成DOM的基本操作

定时弹出广告

定时器: setInterval setTimeout
- clearInterval
style.display : none 隐藏 block显示

注册表单:

事件: onfocus 获焦点 onblur 失去焦点 onkeyup 按键抬起的时候

正则表达式校验邮箱. js . <script src=""></script>

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

onsubmit = "return checkForm()"

表格隔行换色

table.rows
- row.style.backgroundColor
window.onload

表格全选和全不选:

checked属性:

document.getElementById()

document.getElementsByName() 返回的是一个数组

省市联动:

DOM:

//创建节点: document.createElement()

//创建文本节点: document.createTextNode()

//添加节点: appendChild()

商品左右选择中:

事件:

select改变的时候:

onchange

ondbclick()

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>

定时弹出广告:

slideDown : 必须得指定宽度

show()

hide()

选择器

基本选择器:
- ID选择器 #
- 类选择器 .
- 元素选择器元素的名称
- 通配符选择器 *
- 选择器选择器选择器1, 选择器2
层级选择器:
- 后代选择器 : 选择器选择器
- 子元素选择器: 选择器1 > 选择器2
- 相邻兄弟选择器: 选择器 + 选择器2
- 找到所有兄弟选择器: 选择器1 ~选择器2
属性选择器

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

需求分析:

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

技术分析:

代码实现

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-1.8.3.js"></script>

        <script type="text/javascript">

            //页面加载

            $(document).ready(function(){

                //获取表单

                $("tbody tr:odd").css("background-color","#FF0000");

                $("tbody tr:even").css("background-color","#FFF38F");

                $("tr").click(function(){

                    var $color = $(this).css("background-color");

                    var $this = $(this);

                    $(this).css("background-color","yellow");

                    $(this).click(function(){

                     $this.css("background-color",$color);

});

});

                //表单的全选与全不选

                /*$("#ck1").click(function(){

                 var v = this.checked;

                 //alert(v);

                 $("input[name='ck2']").each(function(index,name){

                  //alert(this.checked);

                  this.checked = v;

});

                });*/

                $("#ck1").click(function(){

                    //检查id为#ck1是否被选中,选中为true,未选中为false

                    var flag = $(this).prop("checked");

                    $("input[name='ck2']").prop("checked",flag);

});

});

        </script>

    </head>

    <body>

        <table id="table1" border="1px" width="700px" height="200px" align="center">

            <thead>

                <tr>

                    <td>

                     <input type="checkbox" id="ck1"/>

                    </td>

                    <th>

                     分类ID

                    </th>

                    <th>

                     分类名称

                    </th>

                    <th>

                     分类商品

                    </th>

                    <th>

                     分类描述

                    </th>

                    <th>

                     操作

                    </th>

                </tr>

            </thead>

            <tbody>

                <tr align="center">

                    <td>

                     <input οnclick="checkAll()" type="checkbox" name="ck2" />

                    </td>

                    <td>

                    </td>

                    <td>

                     手机数码

                    </td>

                    <td>

                     三星NOTE7,IPhone7

                    </td>

                    <td>

                     这里面放的都是最新手机

                    </td>

                    <td>

                     <a href="#">修改</a>|

                     <a href="#">删除</a>

                    </td>

                </tr>

                <tr align="center">

                    <td>

                     <input οnclick="checkAll()" type="checkbox" name="ck2" />

                    </td>

                    <td>

                    </td>

                    <td>

                     黄鹤楼,双喜,长白山,白沙

                    </td>

                    <td>

                     分类商品

                    </td>

                    <td>

                     这里面都是香烟

                    </td>

                    <td>

                     <a href="#">修改</a>|

                     <a href="#">删除</a>

                    </td>

                </tr>

                <tr align="center">

                    <td>

                     <input οnclick="checkAll()" type="checkbox" name="ck2" />

                    </td>

                    <td>

                    </td>

                    <td>

                     电脑办公

                    </td>

                    <td>

                     MBP,联想

                    </td>

                    <td>

                     电脑

                    </td>

                    <td>

                     <a href="#">修改</a>|

                     <a href="#">删除</a>

                    </td>

                </tr>

                <tr align="center">

                    <td>

                     <input οnclick="checkAll()" type="checkbox" name="ck2" />

                    </td>

                    <td>

                    </td>

                    <td>

                     冰箱洗衣机

                    </td>

                    <td>

                     海尔,格力,三菱,美的

                    </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>");

                //给所有的框添加一个blur事件

                $("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; 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; 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 xx商城 版权所有

            </div>

        </div>

    </body>

</html>

转载于:https://www.cnblogs.com/GuoXueLi/p/6120298.html