2022年 9月
一	二	三	四	五	六	日
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

前言：

承接前面的内容，跟着尚硅谷继续学习javaweb。

jQuery

jQuary内容多而杂，我可能介绍的不会很详细，手册分享

链接：https://pan.baidu.com/s/14uo9RuF6Urzt8WZjNUlvOQ
提取码：6xfh

了解

jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库

jQ的核心思想就是：write less，do more（写的更少，做的更多），所以他实现了很多浏览器的兼容问题。

初体验

在IDEA中新建一个静态网页项目。

新建一个html文件

引入jQuery类库需要使用一条命令

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

更多版本的引入可以参考这个网页

然后我们可以 alert($) ，如果 $ 的值是一个函数，说明引入成功。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        //这里相当于window.onload，页面加载完成后表现
        $(function () {
            //$("#btnID")返回一个jQuery对象
            //jQuery默认$符开头
            var $btnobj=$("#btnID");
            $btnobj.click(function () {
                alert("Hello World");
            })
        });
    </script>
</head>
<body>
    <button id="btnID">SayHello</button>
</body>

$(function(){ })：相当于 window.onload，页面加载完后的函数
jQuery对象一定要加 $
click 是一个函数，可以将一个方法绑定

核心函数

$ 是jQuery的核心函数，因为jQuery的大部分功能都离不开这个符号，并且它会根据传入参数的不同而起到不同的作用

传入参数为函数时，表示页面加载完成之后。相当于window.onload=function(){}

传入html字符串时，会对我们创建的这个html标签对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        //这里相当于window.onload，页面加载完成后表现
        $(function () {
            $("    <div>" +
                "        <span>div-span1</span>" +
                "    </div>").appendTo("body");
        });
    </script>
</head>

传入参数是选择器字符串时，根据选择器查询对象
- $(“#id选择器”)：id选择器，根据id
- $(“标签名”)：标签名选择器，根据标签名
- $(“.类选择器”)：类型选择器，根据class属性
传入参数是DOM对象时，会把DOM对象转换为jQuery对象

jQuery对象的本质

jQuery对象时dom对象的数组+jQuery提供的一系列功能函数

jQuery对象和DOM对象使用区别

jQuery对象不能使用DOM对象的属性和方法
DOM对象不能使用jQuery对象的属性和方法

jQuery对象和DOM对象的相互转换

dom对象转化为jQuery对象

先有DOM对象
$(DOM对象)就可以转换为jQuery对象

jQuery对象转化为DOM对象

先有jQuery
jQuery对象通过下标去除相应的DOM对象：var dom=$obj[下标]

选择器

W3Cschool

菜鸟教程

菜鸟教程的总结

元素的筛选

常见

eq()　　筛选指定索引号的元素
first()　　筛选出第一个匹配的元素
last()　　筛选出最后一个匹配的元素
hasClass()　　检查匹配的元素是否含有指定的类
filter()　　筛选出与指定表达式匹配的元素集合
is()　　　检查元素是否参数里能匹配上的
map()
has()　　筛选出包含指定子元素的元素
not()　　排除能够被参数中匹配的元素
slice()　　　　从指定索引开始，截取指定个数的元素
children()　　筛选获取指定元素的资源
closest()　　从当前元素开始，返回最先匹配到的符合条件的父元素
find()　　　　从指定元素中查找子元素
next()　　　获取指定元素的下一个兄弟元素
nextAll()　　获取其后的所有兄弟元素
nextUntil()　获取其后的元素，直到参数能匹配上的为止,不包括结束条件那个
offsetPosition()　　返回第一个用于定位的祖先元素，即查找祖先元素中position为relative或absolute的元素。
parent()　　　获取指定元素的直接父元素
parents()　　获取指定元素的所有祖先元素，一直到<body></body>
parentsUntil()　　获取指定元素的祖先元素，知道参数里能匹配到的为止
prev()　　　　获取指定元素的前一个兄弟元素
prevAll()　　　获取指定元素前面的所有兄弟元素
prevUntil()　获取指定元素前面的所有兄弟元素，直到参数里的条件能够匹配到的。注意参数条件本身不会被匹配
siblings()　　获取指定元素的兄弟元素，不分前后
add()　　　　将选中的元素添加到jQuery对象集合中
andSelf()　　将自身加到选中的jQuery集合中,以方便一次性操作
end()　　　将改变当前选择器选中的操作回退为上一个状态。

属性操作

html()：设置和获取起始标签和结束标签中的内容，就和dom属性中的innerHTML一样
text()：设置和获取其实标签和结束标签中的文本，跟dom属性innerText一样。
val()：设置和获取标签项的value属性值，跟dom属性value一样。
attr()：可以设置和获取属性的值（传一个参数是获取，传两个参数是设置）
prop()：可以设置和获取属性的值

attr和prop的区别：如果用attr去尝试获取没有设置的属性，那么会返回undefine，官方不希望这样，所以有了prop，prop会返回true（存在时），false（不存在时）。根据这个限制，以下一般建议使用prop而不是attr：checked、readOnly、selected、disabled等等。

示例(全选、全不选、反选)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //给全选绑定单机事件
            $("#checkedAllBtn").click(function(){
                $(":checkbox").prop("checked",true)
            })
            //全不选绑定单机事件
            $("#checkedNoBtn").click(function(){
                $(":checkbox").prop("checked",false)
            })
            //反选
            $("#checkedRevBtn").click(function(){
                //过滤出来球类的筛选框
                $(":checkbox[name='items']").each(function () {
                    //在each遍历的function函数中，有一个this对象，这就是当前遍历到的dom对象
                    this.checked=!this.checked
                });
                //检查是否满选
                //获取全部的球类个数
                var allCount=$(":checkbox[name='items']").length
                //选中的球类个数（表单选择器:checkbox+表单对象属性:checked）
                var checkCount=$(":checkbox[name='items']:checked").length

                $("#checkedAllBox").prop("checked",allCount==checkCount)

            })
            //提交
            $("#sendBtn").click(function () {
                //获取选中的球类的复选框
                $(":checkbox[name='items']:checked").each(function(){
                    alert(this.value);
                })
            })
            //全选/全不选 绑定
            $("#checkedAllBox").click(function(){
                //得到上面这个复选框的状态
                //在事件的function函数中，有一个this对象，这个对象是正在响应事件的dom对象
                $(":checkbox[name='items']").prop("checked",this.checked)
            })
            $(":checkbox[name='items']").click(function () {
                //检查是否满选
                //获取全部的球类个数
                var allCount=$(":checkbox[name='items']").length
                //选中的球类个数（表单选择器:checkbox+表单对象属性:checked）
                var checkCount=$(":checkbox[name='items']:checked").length

                $("#checkedAllBox").prop("checked",allCount==checkCount)
            })
        })
    </script>
    <style type="text/css">
        span{
            color: #DC143C;
        }
    </style>
</head>
<body bgcolor="#B0E0E6" >
    <form method="post" >
        你爱好的运动是?<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="checkedAllBox" /> <b>全选/全不选</b>
        <br/>
        <ul>
            <li><input type="checkbox" name="items" value="足球" /><span>足球</span></li>
            <li><input type="checkbox" name="items" value="羽毛球"/><span>羽毛球</span></li>
            <li><input type="checkbox" name="items" value="乒乓球"/><span>乒乓球</span></li>
            <li><input type="checkbox" name="items" value="篮球" /><span>篮球</span></li>
        </ul>
        <input type="button" id="checkedAllBtn" value="全 选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedRevBtn" value="反 选"/>
        <input type="button" id="sendBtn" value="提 交"/>
    </form>
</body>
</html>

上面示例的提交使用弹窗的方式呈现了，想玩的高级点的朋友可以开个node服务器接收post请求，示例node代码：

var http=require('http')
var querystring = require('querystring');

var onRequest=function(request,response){
    var data=""
    request.on("error",function(err){
        console.error(err)
    }).on("data",function(chunk){
        data+=chunk
    }).on("end",function(){
        data=querystring.parse(data)
        console.log(data)
    })
}
console.log("服务器监听在3001")
http.createServer(onRequest).listen(3001)

node index.js启动

前端这边，在上面的代码的基础上，将“提交”按钮的type改为submit（上面绑定的响应弹窗就可以删了），form 标签设置好 action=”http://127.0.0.1:3001″ ，其他没啥了，注意复选框要有value哦。

DOM的增删改

增

a.appendTo(b)：把a插入到b所有子元素末尾，成为最后一个子元素
a.prependTo(b)：把a插到b所有子元素的前面，成为第一个子元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("<h1>有意思</h1>").appendTo("div")
        })
    </script>

</head>
<body bgcolor="#B0E0E6" >
    <div>
        <span>1234</span><br/>
        <span>5678</span>
    </div>
    <div>
        <span>9abc</span><br/>
        <span>defg</span>
    </div>
</body>

如果把script里面的内容换了

$(function(){
    $("<h1>有意思</h1>").prependTo("div")
})

这两个方法是在指定标签的子元素中操作，如果是要在同级下操作，就用

$(function(){
    $("<h1>有意思</h1>").insertAfter("div")
})

这样就是平级操作。

删

remove()
- a.remove()：删除a标签
empty()
- a.empty()：清空a标签里面的内容

改

replaceWith()
- a.replaceWith(b)：用b替换掉a
replaceAll()
- a.replaceAll(b)：用a替换所有的b

具体操作我就不弄了，我分享的那个手册里面都有示例。

jQuery增、删练习

从左到右、从右到左

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //选中添加到右边
            $("button:eq(0)").click(function(){
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"))
            })
            //全部添加到右边
            $("button:eq(1)").click(function(){
                $("select:eq(0) option").appendTo($("select:eq(1)"))
            })

            //选中添加到左边
            $("button:eq(2)").click(function(){
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"))
            })
            //全部添加到左边
            $("button:eq(3)").click(function(){
                $("select:eq(1) option").appendTo($("select:eq(0)"))
            })
        })
    </script>
</head>
<body bgcolor="#B0E0E6" >
    <span id="left">
        <select multiple="multiple" name="sel01">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
            <option value="opt04">选项4</option>
            <option value="opt05">选项5</option>
            <option value="opt06">选项6</option>
            <option value="opt07">选项7</option>
            <option value="opt08">选项8</option>
            <option value="opt09">选项9</option>
        </select>
        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </span>
    <span id="right">
        <select multiple="multiple" name="sel02">
        </select>
        <button>选中删除到左边</button>
        <button>全部删除到左边</button>
    </span>
</body>

动态添加、删除表格记录

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //添加新的员工还有给a标签绑定事件都会用到这个函数
            var deleteTest=function(){
                //得到tr
                var tarObj=$(this).parent().parent()
                //confirm是js提供的一个确认提示框函数
                //你给它传什么，他就提示什么（类似于alert）
                //当用户点击了确定就返回true、反之false
                if(confirm("是否删除成员"+tarObj.find("td:first").text())){
                    tarObj.remove()
                }
                //防止跳转
                return false
            }
            //submit按钮 绑定单机事件
            $("#addEmyButton").click(function(){
                //获取输入框、姓名、邮箱、工资的内容
                var name=$("#empName").val()
                var email=$("#empEmail").val()
                var salary=$("#empSalary").val()

                //创建一个行标签对象，添加到显示数据的表格当中
                var $trObj=$("        <tr>\n" +
                    "            <td align='center'>"+name+"</td>\n" +
                    "            <td align='center'>"+email+"</td>\n" +
                    "            <td align='center'>"+salary+"</td>\n" +
                    "            <td><a href=\"deleteEmp?id=001\">Delete</a></td>\n" +
                    "        </tr>")
                //添加到显示数据的表格当中
                $trObj.appendTo($("#employeeTable"))
                //给新添加的行的a标签榜上事件
                $trObj.find("a").click(deleteTest)
            })
            //给删除的a标签绑定单机事件
            $("a").click(deleteTest)

        })
    </script>
</head>
<body bgcolor="#B0E0E6" >
    <table id="employeeTable" align="center">
        <tr>
            <th align='center'>Name</th>
            <th align='center'>Email</th>
            <th align='center'>Salery</th>
            <th></th>
        </tr>
        <tr>
            <td align='center'>Tom</td>
            <td align='center'>tom@TOM.com</td>
            <td align='center'>5000</td>
            <td align='center'><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td align='center'>Jerry</td>
            <td align='center'>jerry@sohu.com</td>
            <td align='center'>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td align='center'>Bob</td>
            <td align='center'>bob@tom.com</td>
            <td align='center'>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div align="center" id="formDiv" style="border: 5px solid sandybrown">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name：</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">Email：</td>
                <td class="inp">
                    <input type="text" name="empEmail" id="empEmail" />
                </td>
            </tr>
            <tr>
                <td class="word">Salary：</td>
                <td class="inp">
                    <input type="text" name="empSalary" id="empSalary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center" >
                    <button id="addEmyButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>

CSS样式操作

主要是用的方法：

addClass()：添加样式
removeClass()：删除样式
toggleClass()：有就删除，没有就添加样式
offset()：获取和设置元素的坐标

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        div{
            width:100px;
            height:260px;
        }
        <!--限定选择器仅对div起作用-->
        div.whiteborder{
            border:2px white solid;
        }
        div.redDiv{
            background-color: red;
        }
        div.blueBorder{
            border: 5px blue solid;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            var $divEle=$('div:first')
            $('#btn01').click(function(){
                //addClass() 向被选中元素添加一个或多个类
                //添加红色背景和蓝色边框
                $divEle.addClass('redDiv blueBorder')
            })
            $('#btn02').click(function(){
                //removeClass() 从被选元素删除一个或多个类
                $divEle.removeClass('redDiv')
            })
            $('#btn03').click(function(){
                //toggleClass() 对被选元素进行添加/删除类的切换操作
                $divEle.toggleClass('redDiv')
            })
            $('#btn04').click(function(){
                //offset() 返回第一个匹配元素相对于文档的位置
                //可以理解为获取坐标位置
                var pos=$divEle.offset()
                //console.log(pos)
                $divEle.offset({
                    top:pos.top+10,
                    left:pos.left+10
                })
            })
        })
    </script>
</head>
<body bgcolor="#F0F8FF" >
    <table align="center">
        <tr>
            <td>
                <div class="border">
                </div>
            </td>
            <td>
                <div class="btn">
                    <input type="button" value="addClass()" id="btn01"/>
                    <input type="button" value="removeClass()" id="btn02"/>
                    <input type="button" value="toggleClass()" id="btn03"/>
                    <input type="button" value="offset()" id="btn04"/>
                </div>
            </td>
        </tr>
    </table>
</body>

jQuery 动画

基本动画

show( )
hide( )
toggle( )

淡入淡出动画

fadeln( )
fadeOut( )
fadeTo( )
fadeToggle( )

学个英语：fade：变淡、变暗、主键消失

jQuery事件操作

$(function(){})和window.onload=function(){}

$(function(){})、window.onload=function(){}，这两个都可以理解为页面加载完成之后的时间方法。

执行顺序：这两个事件的执行顺序是：jQuery的页面加载完成先执行，然后才是原生js，原因：
- 原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成（比如iframe小窗口的加载、img图片的加载等）。
执行次数：原生js的页面加载完成之后，只会执行最后一个加载（因为这是个赋值操作，会将前面的内容覆盖），执行一次；jQuery不是这样，它会将你注册的先记录，然后页面加载完成后依次执行，执行多次。

$(function(){ })的完整写法是 $(document).ready(function(){ })

常用的事件处理方法

click( )：绑定单机事件，以及触发单机事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style type="text/css">
    </style>
    <script type="text/javascript">
        $(function () {
            //传function是为点击事件添加方法
            $("h5").click(function () {
                alert("h5单机事件==click方法绑定")
            })
            $("button").click(function () {
                //不传function相当于直接触发点击事件
                $("h5").click()
            })
        })
    </script>
</head>
<body bgcolor="#F0F8FF" >
    <div id="panel">
        <h5 class="head">什么是jQuery？</h5>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库。
        </div>
    </div>
    <button type="button">按钮</button>
</body>

mouseover( )：绑定鼠标移入事件，或者触发鼠标移动事件
mouseout( )：绑定鼠标移出事件，或者触发鼠标移出事件

        $(function () {
            //传function是为 事件添加方法
            $("h5").mouseover(function () {
                alert("h5鼠标移入事件")
            })
            $("button").click(function () {
                //不传function相当于直接触发事件
                $("h5").mouseover()
            })
        })

bind( )：可以跟元素一次性绑定一个或多个事件（中间用空格隔开）

        $(function () {
            //传function是为点击事件添加方法
            $("h5").bind("click mouseover",function () {
                console.log("这是bind绑定的事件")
            })
        })

one( )：使用上和bind一样。但是one方法绑定的事件只会响应一次（每个事件都只会响应一次）

        $(function () {
            //传function是为点击事件添加方法
            $("h5").one("click mouseover",function () {
                console.log("这是one绑定的事件")
            })
        })

unbind( )：跟bind方法相反，取消这个事件（如果传多个事件名，就用空格隔开，如果不传事件名，那么就会全部删除bind的事件）

        $(function () {
            //传function是为点击事件添加方法
            $("h5").bind("click mouseover",function () {
                console.log("这是bind绑定的click事件")
            })
            $("h5").unbind("click")
        })

事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何组织事件冒泡呢？

在事件函数体内，return false，可以阻止事件的冒泡传递。

事件对象

jQuery中存在一个事件对象：事件对象就是一个封装有触发的事件信息的一个javascript对象。

如何获取javascript的事件对象呢？

在给元素绑定事件的时候，在事件的function(event) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event，这个event就是 javascript 传递参事件处理函数的事件对象。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        //js原生获取事件对象
        // window.onload=function () {
        //     document.getElementById("areadiv").onclick=function (event) {
        //         console.log(event)
        //     }
        // }
        //jQuery获取事件对象
        $(function () {
            $("#areadiv").click(function (event) {
                console.log(event)
            })
        })
    </script>
</head>
<body bgcolor="#F0F8FF" >
    <div id="areadiv">点我</div>
</body>

javascript事件对象的利用

    <script type="text/javascript">
        $(function () {
            $("#areadiv").bind("mouseover mouseout",function (event) {
                if(event.type=="mouseover"){
                    console.log("鼠标移入")
                }else if(event.type=="mouseout"){
                    console.log("鼠标移出")
                }
            })
        })
    </script>

根据参数进行判断

jQuery练习：图片跟随

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#small").bind("mouseover mouseout mousemove",function(event){
                if(event.type=="mouseover"){
                    $("#showBig").show()
                }else if (event.type=="mouseout"){
                    $("#showBig").hide()
                }else if (event.type=="mousemove"){
                    $("#showBig").offset({
                        //这里之所以加个数据，是避免移除鼠标时发生闪烁。
                        //避免鼠标向右下角滑动的时候直接进入大图片触发消失函数
                        left:event.pageX+30,
                        top:event.pageY+30
                    })
                }
            })
        })
    </script>
</head>
<body bgcolor="#F0F8FF" >
    <img id="small" src="123.jpg" />
    <div id="showBig">
        <img src="123.jpg">
    </div>
</body>

关于jQuery到此就结束了，下面是一个大的示例的第一部分。

项目实践—表单验证的实现

我们新建一个项目，然后新建一个模块（static web），我这里起名叫疯人院了，因为我想弄个精神病院的网页，希望大家不要嫌弃，跟我继续。

项目我打包了：https://pan.baidu.com/s/1j0-yj1CiIzn2d98CmU6Dnw
提取码：b0k4

主要是这个regist.html的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎加入疯人院 +_+ </title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
    <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //给提交按钮绑定单机事件
            $("#sub_btn").click(function () {
                //开始验证用户的填写是否规范
                //用户名：字母、数字、下划线，长度5-12
                var usernameText=$("#username").val()
                var usernamePatt=/^\w{5,12}$/
                if(!usernamePatt.test(usernameText)){
                    $("span.errorMsg").text("用户名不合法")
                    return false
                }
                //密码：字母、数字、下划线，长度5-12
                var passwordText=$("#password").val()
                var passwordPatt=/^\w{5,12}$/
                if(!passwordPatt.test(passwordText)){
                    $("span.errorMsg").text("密码不合法")
                    return false
                }
                //确认密码：和密码相同
                var reqwdText=$("#repwd").val()
                if(reqwdText!=passwordText){
                    $("span.errorMsg").text("确认密码和密码不一致")
                    return false
                }
                //邮箱验证：xxxxx@xxx.com
                var emailText=$("#email").val()
                var emailPatt=
                    /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
                if(!emailPatt.test(emailText)){
                    $("span.errorMsg").text("邮箱格式不合法")
                    return false
                }
                //验证码：现在只需要验证用户已输入，暂不需要了解验证码的生成
                var codeText=$("#code").val()
                //去掉验证码中的空格
                codeText=$.trim(codeText)
                if(codeText==null||codeText==""){
                    $("span.errorMsg").text("请填写验证码")
                    return false
                }
                //填写正确就清空错误提示内容
                $("span.errorMsg").text("")
            })
        })
    </script>
    <style type="text/css">
        .login_form{
            height:420px;
            /*距离最上面的距离大小*/
            margin_top:25px;
        }
    </style>
</head>
<body bgcolor="black">
    <div id="login_header">
        <img class="logo_img" alt="这里本来有个美女图片" src="../../static/img/hally.png"/>
    </div>
    <div class="login_banner">

        <div id="l_content">
            <span class="login_word">生活本该如此</span>
        </div>

        <div id="content">
            <div class="login_form">
                <div class="login_box">
                    <div class="tit">
                        <h1>注册疯人院成员</h1>
                        <span class="errorMsg"></span>
                    </div>
                    <div class="form">
                        <form action="regist_success.html" >
                            <input type="hidden" name="action" value="regist">
                            <label>用户名称：</label>
                            <input class="itxt" type="text" placeholder="请输入用户名"
                                    autocomplete="off" tabindex="1" name="username" id="username" />
                            <br />
                            <br />
                            <label>用户密码：</label>
                            <input class="itxt" type="password" placeholder="请输入密码"
                                   autocomplete="off" tabindex="1" name="password" id="password" />
                            <br />
                            <br />
                            <label>确认密码：</label>
                            <input class="itxt" type="password" placeholder="确认密码"
                                   autocomplete="off" tabindex="1" name="repwd" id="repwd" />
                            <br />
                            <br />
                            <label>电子邮件：</label>
                            <input class="itxt" type="text" placeholder="请输入邮箱地址"
                                  autocomplete="off" tabindex="1" name="email" id="email" />
                            <br />
                            <br />
                            <label>验证码：</label>
                            <input class="itxt" type="text" name="code" style="width: 150px;" id="code" />
                            <img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px" />
                            <br />
                            <br />
                            <input type="submit" value="注册" id="sub_btn" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

商业转载请联系作者获得授权，非商业转载请标明出处，谢谢

分类

分站

编程语言 / 计算机技术 · 2020年4月16日 0

学习JavaWeb（二）——jQuery

前言：

jQuery

了解

初体验

核心函数

jQuery对象的本质

jQuery对象和DOM对象使用区别

jQuery对象和DOM对象的相互转换

dom对象转化为jQuery对象

jQuery对象转化为DOM对象

选择器

元素的筛选

属性操作

示例(全选、全不选、反选)

DOM的增删改

增

删

改

jQuery增、删练习

从左到右、从右到左

动态添加、删除表格记录

CSS样式操作

jQuery 动画

基本动画

淡入淡出动画

jQuery事件操作

$(function(){})和window.onload=function(){}

常用的事件处理方法

事件的冒泡

事件对象

如何获取javascript的事件对象呢？

javascript事件对象的利用

jQuery练习：图片跟随

项目实践—表单验证的实现

您可能还喜欢...

发表评论取消回复

编程语言 / 计算机技术 · 2020年4月16日 0

前言：

jQuery

了解

初体验

核心函数

jQuery对象的本质

jQuery对象和DOM对象使用区别

jQuery对象和DOM对象的相互转换

dom对象转化为jQuery对象

jQuery对象转化为DOM对象

选择器

元素的筛选

属性操作

示例(全选、全不选、反选)

DOM的增删改

增

删

改

jQuery增、删练习

从左到右、从右到左

动态添加、删除表格记录

CSS样式操作

jQuery 动画

基本动画

淡入淡出动画

jQuery事件操作

$(function(){})和window.onload=function(){}

常用的事件处理方法

事件的冒泡

事件对象

如何获取javascript的事件对象呢？

javascript事件对象的利用

jQuery练习：图片跟随

项目实践—表单验证的实现

您可能还喜欢...

Windows右击开启 上帝模式 ~

Github+Hexo 搭建一个个人博客

学习JavaWeb（一）——前端三剑客

发表评论 取消回复

Windows右击开启上帝模式 ~

发表评论取消回复