前言：

承接前面的內容，跟着尚硅谷繼續學習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.οnlοad=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'>[email protected]</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'>[email protected]</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'>[email protected]</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.οnlοad=function(){}

$(function(){})、window.οnlοad=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
                }
                //郵箱驗證：[email protected]
                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>

商業轉載請聯繫作者獲得授權，非商業轉載請標明出處，謝謝

學習JavaWeb（二）——jQuery

前言：