阶段五-Day02-jQuery

最新推荐文章于 2024-05-12 14:23:18 发布

酷寒的小蛮蛮

最新推荐文章于 2024-05-12 14:23:18 发布

阅读量84

点赞数 1

分类专栏： java学习之路文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_59163770/article/details/133580656

版权

java学习之路专栏收录该内容

53 篇文章 1 订阅

订阅专栏

一、jQuery入门

1. 定义和特点

目前最流行的JavaScript函数库之一，对JavaScript进行了封装。
并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。
JavaScript的缺点
- 选择器功能弱
- DOM操作繁琐至极
- 浏览器兼容性不好
- 动画功能弱
jQuery的优点
- 强大的选择器
- 出色的DOM封装
- 出色的浏览器兼容性
- 强大的动画功能
- 体积小，压缩后只有100KB左右
- 可靠的事件处理机制
- 使用隐式迭代简化编程
- 丰富的插件支持

2.jQuery实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <style>
        table{
            border: 1px solid red;
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }

        tr，th，td{
            border: 1px solid red;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            $('tr:odd').css('background-color'， 'gold');
            $('tr:even').css('background-color'， 'skyblue');
        })
    </script>
</head>
<body>
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>明玉</td>
        <td>女</td>
        <td>28</td>
    </tr>
    <tr>
        <td>2</td>
        <td>吕布</td>
        <td>男</td>
        <td>38</td>
    </tr>
    <tr>
        <td>3</td>
        <td>貂蝉</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr>
        <td>4</td>
        <td>西施</td>
        <td>女</td>
        <td>16</td>
    </tr>
    <tr>
        <td>5</td>
        <td>曹操</td>
        <td>男</td>
        <td>60</td>
    </tr>
</table>
</body>
</html>

3. jQuery的使用

关于jQuery的使用需要先导入jQuery的js文件，发现jQuery本身就是一个JS文件。
$是jQuery使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。作用1：$(function(){})
- 相当于 window.οnlοad=function(){}，功能比window.onload更强大
- window.onload一个页面只能写一个，但是可以写多个$() 而不冲突
- window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早
- 完整形式是$(document).ready(…….);
  
  jQuery(document).ready(…….);
作用2： $(selector)
- 选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍
jQuery的基本语法：$(selector).action

获取页面内容:$(selector)

操作页面的内容：action(一般都是方法)
- 控制页面样式
- 访问和操作DOM元素
- 事件处理功能
- 动画功能
- Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

4. jQuery对象和DOM对象

在学习jQuery的过程中，经常出现调用函数出错的情况。究其原因，很多是因为还是对jQuery对象和DOM对象理解不清楚了，出现了函数互调的情况，当然出错了。

DOM对象和jQuery对象分别拥有一套独立的属性和函数，不能混用所以我们在这里先来将搞清楚这两个概念吧。

DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value
jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val()
DOM对象转换成jQuery对象 $(DOM对象)
jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)

二、jQuery选择器

1. 概述

jQuery提供了丰富的选择器功能，jQuery选择器比JavaScript选择器更加的强大。

回顾：JavaScript是如何直接获取元素节点

getElementById( ) ：返回一个元素节点对象
getElementsByName( )：返回多个元素节点（节点数组）
getElementsByClassName( ) ：返回多个元素节点对象（节点数组）
getElementsByTagName( ) ：返回多个元素节点对象（节点数组）

2. 基本选择器

标签选择器 $("a")
ID选择器 $("#id") $("p#id")
类选择器 $(".class") $("h2.class")
通配选择器 $("*")
并集选择器$("elem1， elem2， elem3")
后代选择器$(ul li)(所有后代)
父子选择器 $(ul > li)(直接子元素)
后面第一个兄弟元素节点 prev + next
后面所有的兄弟元素节点 prev ~ next

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            //标签选择器
            // $('h3').css('background-color'， 'red');

            //id选择器
            // $('#p1').css('font-size'， '30px');

            //类选择器
            // $('.p2').css('color'， 'red');

            //通配选择器
            // $('*').css('background-color'， 'blue');

            //并集选择器
            // $('span，h2').css('color'， 'green');

            //后代选择器
            // $('#div1 p').css('color'， 'red');

            //子元素选择器
            // $('#div1 > p').css('color'， 'red');

            //后面的第一个元素
            // $('h2+p').css('color'， 'red');

            //后面的所有兄弟元素
            $('h2~p').css('color'， 'red');
        })

    </script>
</head>
<body>

    <p id="p1">我是段落1.</p>
    <p class="p2">我是段落2.</p>
    <p class="p2">我是段落3.</p>

    <div id="div1">
        <span>我是div中span的内容！</span>
        <h2>我是div中的h2标题内容1！</h2>
        <p>我是div中的段落1.</p>
        <p>我是div中的段落2.</p>
        <div>
            <p>我是div中的div中的段落.</p>
        </div>
        <h2>我是div中的h2标题内容2！</h2>
    </div>

    <h3>我是h3内容1</h3>
    <h3>我是h3内容2</h3>
    <h3>我是h3内容3</h3>

</body>
</html>

3.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <!-- 属性选择器 -->
    <script>
        $(function () {
            //1.根据指定的属性名获取元素节点
            //有type属性的节点都获取
            var $type = $("[type]");
            console.log($type);

            var $type1 = $("[type][value]"); //同时有两个属性
            console.log($type1);

            var $name = $("input[name][id]");
            console.log($name);

            //2.根据指定的属性名和属性值获取元素节点
            //type属性值为text的元素节点
            var $type2 = $("[type='text']");
            console.log($type2);
            //type属性值不为text的元素节点
            var $type3 = $("[type!='text']");
            console.log($type3);
            //td标签中type属性不为text的元素节点
            var $type4 = $("td[type!='text']"); //同时满足
            console.log($type4);
            //td标签的后代标签的type属性不为text的元素节点
            var $type5 = $("td [type!='text']"); //后代选择器
            console.log($type5);
            //td标签的儿子标签的type属性不为text的元素节点
            var $type6 = $("td>[type!='text']"); //子选择器
            console.log($type6);
            //td的儿子中的input节点中type不等于text的元素节点
            var $type7 = $("td>input[type!='text']");
            //input节点中name属性值以h开头的所有节点
            console.log($type7);
            var $input = $("input[name ^= 'h']");
            console.log($input);
            //input节点中name属性值以e结尾的所有节点
            var $input1 = $("input[name $= 'e']");
            console.log($input1);
            //input节点中name属性值包含o的所有节点
            var $input2 = $("input[type *= 'o']");
            console.log($input2);

        });
    </script>
</head>
<body>
<form action="">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username" id="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="hpassworde" id="password"></td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" name="hobby" value="Java">Java
                <input type="checkbox" name="hobby" value="C++">C++
                <input type="checkbox" name="hobby" value="PHP">PHP
            </td>
        </tr>
        <tr>
            <td>职业：</td>
            <td>
                <select name="professional" id="professional">
                    <option value="程序员">程序员</option>
                    <option id="p2" value="公务员">公务员</option>
                    <option value="律师">律师</option>
                    <option value="医生">医生</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>
</form>
</body>
</html>

4.位置选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            //1.获取第一个元素节点
            var $p = $("p:first");
            console.log($p);

            //2.div的后代所有p中的第一个
            var $div = $("div p:first");
            console.log($div);

            //3.获取最后一个元素节点
            var $p1 = $("p:last");
            console.log($p1);

            //第一个div中的所有直接子元素p的最后一个
            var $div1 = $("div:first>p:last");
            console.log($div1);


            var $div2 = $("div:first>div:first>p");
            console.log($div2);

            //3.获取指定索引位置的元素节点（从0开始）
            var $p2 = $("p:eq(0)");
            console.log($p2);

            var $div3 = $("div:first p:eq(4)");
            console.log($div3);

            //4.获取奇数索引位置的元素节点（从0开始）0是偶数
            var $div4 = $("div:first p:odd");
            console.log($div4);

            var $div5 = $("div:first>p:odd");
            console.log($div5);

            //5.获取偶数索引位置的元素节点（从0开始）0是偶数
            var $div4 = $("div:first p:even");
            console.log($div4);

            //6.获取大于执行索引位置的元素节点
            var $p3 = $("p:gt(1)");  //Greater Than
            console.log($p3);

            //7.获取小于执行索引位置的元素节点
            var $p4 = $("p:lt(3)"); //Less than
            console.log($p4);

            //获取到所有后代中的第一个子元素
            var $div6 = $("div:first :first-child");
            console.log($div6);

            //获取到第一个直接子元素
            var $div7 = $("div:first>:first-child");
            console.log($div7);

            //获取div中第一个p子元素节点
            var $div8 = $("div:first>p:first-child");
            console.log($div8);

        });
    </script>
</head>
<body>
<p>我是段落0.</p>
<div>
    <p>我是段落1.</p>
    <p>我是段落2.</p>
    <p>我是段落3.</p>
    <p>我是段落4.</p>
    <h4>标题1</h4>
    <h4>标题2</h4>
    <h4>标题3</h4>
    <div>
        <h3>我是h3标题</h3>
        <p>我是段落！</p>
    </div>
    <div>
        <p>唯一的儿子段落！</p>
    </div>
</div>
</body>
</html>

5.表单选择器

注意：$("input")和$(":input")的区别

$("input")：标签选择器，只匹配input标签
$(":input")：匹配所有 input， textarea， select 和 button 等元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <!-- 表单选择器 -->
    <script>
        $(function () {

            //表单选择器, 将属性选择器进行了简化 [type="xxx"]
            var $text = $(":text");
            console.log($text);
            console.log($("form input:text"));

            var $input = $("input:password");
            console.log($input);
            console.log($("form input:password"));

            var $input1 = $("input[type='radio']");
            console.log($input1);
            var $input2 = $("input:radio");

            var $input2 = $("input:checkbox");

            var $input2 = $("input:file");

            var $input2 = $("input:submit");

            var $input2 = $("input:hidden");

            //表单元素选择器
            //所有的input标签
            var $input3 = $("input");
            console.log($input3);

            //获取所有表单元素（input, select, textarea, button）
            var $input4 = $(":input");
            console.log($input4);

            //用法三：表单状态选择器
            var $selected = $(":selected");//只获取selected

            var $checked = $(":checked"); //checked 和 selected 都可以获取到
            console.log($checked);

            var $checked1 = $("input:radio:checked");
            console.log($checked1);

            var $disabled = $(":disabled");
            console.log($disabled);
        });
    </script>
</head>
<body>
<form action="" id="form1">
    <input type="hidden" name="id" value="123">
    账号: <input type="text" name="username">
    <br>
    密码: <input type="password" name="password">
    <br>
    生日: <input type="date" name="birthday"><br>
    工资: <input type="text" name="salary"><br>
    性别：<input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女" checked="checked">女 <br>

    爱好：<input type="checkbox" name="hobby" value="篮球">篮球
    <input type="checkbox" name="hobby" value="足球">足球
    <input type="checkbox" name="hobby" checked="checked" value="排球">排球
    <input type="checkbox" name="hobby" value="网球">网球 <br>

    头像：<input type="file" name="photo"><br>
    <input type="file" name="photo" class="aaa"><br>
    <input type="file" name="photo"><br>

    职业：<select name="" id="">
    <option value="程序员">程序员</option>
    <option value="公务员" selected="selected">公务员</option>
    <option value="律师">律师</option>
</select>
    <br>
    <button type="reset">重置</button>
    自我介绍：<textarea></textarea>
    <br>
    <input type="checkbox"> 勾选同意  <br>
    <input type="submit" value="注册" disabled>
</form>
</body>
</html>

6. 事件(都是方法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <!-- 事件 -->
    <script>
        $(function () {
            /*
            *  注意:
            *   jQuery中使用事件,需要将js中事件名的on去掉
            *   获得元素节点对象(jQuery对象), 调用事件监听的函数
            *   驱动执行的函数为调用事件函数时传递的函数参数
            * */
            //单击事件
            $("button:first").click(function () {
                console.log("单击事件触发了")
            });
            //双击事件
            $("button:eq(1)").dblclick(function () {
                console.log("双击事件触发了")
            });
            //鼠标移入事件
            $("div:first").mousemove(function () {
                console.log("鼠标移入事件")
            });
            //鼠标移动事件
            $("div:first").mousemove(function () {
                console.log("鼠标移动事件")
            });
            //鼠标移出事件
            $("div1:first").mouseout(function () {
                console.log("鼠标移出事件")
            });
            //获得焦点事件
            $("input:first").focus(function () {
                console.log("获得焦点事件")
            });
            //失去焦点事件
            $("input:first").blur(function () {
                console.log("失去焦点事件")
            });
            //表单提交事件
            $("form").submit(function () {
                alert("aa");
                /*return false会直接结束该事件*/
                return false;
            });
            //提交按钮监听单击事件
            $("input:submit").click(function () {
                alert("bb");
                return true;
            });
        });
    </script>
</head>
<body>
<button>单击</button>
<br>
<button>双击</button>
<br>
<div style="height: 100px; width: 100px; background-color: lightblue"></div>
<br>
<form action="http://www.baidu.com">
    用户名：<input type="text" name="uname"> <br>
    <input type="submit" value="提交">
</form>
</body>
</html>

7.动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <!-- 动画 -->
    <script>
        //页面加载自动执行的函数
        $(function () {
            /*隐藏和显示*/
            $("button:eq(0)").click(function () {
                $("img").hide(3000);
            });
            $("button:eq(1)").click(function () {
                $("img").show(3000);
            })
            $("button:eq(2)").click(function () {
                //隐藏时显示,显示时隐藏
                $("img").toggle(3000);
            })
            //滑动
            $("button:eq(3)").click(function () {
                $("img").slideUp(3000);
            })
            $("button:eq(4)").click(function () {
                $("img").slideDown(3000);
            });
            $("button:eq(5)").click(function () {
                $("img").slideToggle(2000);
            });
            /* 淡入 淡出 */
            $("button:eq(6)").click(function () {
                $("img").fadeOut(3000);
            });
            $("button:eq(7)").click(function () {
                $("img").fadeIn(3000);
            });
            $("button:eq(8)").click(function () {
                $("img").fadeToggle(2000);
            });
            $("button:last").click(function () {
                if (confirm("是否删除？")) {
                    //...

                    $("div:last").slideDown(2000);
                    setTimeout(function () {
                        $("div:last").slideUp(1000);
                    }, 5000)
                }
            });

            $("#go").click(function(){
                //多长时间内变成什么属性
                $("#block").animate({
                    width: "500px",
                    height: "500px",
                    fontSize: "10em"
                }, 3000);
            });
        });
    </script>
</head>
<body>
<div>
    <img src="2.jpg" alt="" style="height: 150px;width: 150px">
</div>
<button>隐藏</button>
<button>显示</button>
<button>显示|隐藏</button>
<hr>
<button>向上滑动</button>
<button>向下滑动</button>
<button>向上滑动|向下滑动</button>
<hr>
<button>淡出</button>
<button>淡入</button>
<button>淡出|淡入</button>
<hr>
<button id="go">Run</button>
<div id="block">Hello!</div>
<br>
1 zs 18 <button>删除</button>
<div hidden style="height: 25px;background-color: lightgray; text-align: center; color: green; font-weight: bold">删除成功</div>
<hr>
<span>小说</span>
<ol hidden>
    <li>玄幻小说</li>
    <li>修真小说</li>
    <li>言情小说</li>
</ol>
<hr>
</body>
</html>

8.操作文本节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <!-- 操作文本节点-->
    <script>
        $(function () {
            /* js的方式 */
            var elementById = document.getElementById("d1");
            //innerText(仅操作文本内容)
            var innerText = elementById.innerText;
            console.log(innerText);
            // elementById.innerText = "修改后的内容";
            //innerHtml (操作文本和html)
            var innerHTML = elementById.innerHTML;
            console.log(innerHTML);
            //可以修改文本样式
            /*elementById.innerHTML = "<h1>修改后的内容</h1>"*/

            /* jQuery方式的操作*/
            var  $d1 = $("#d1");
            //text()方法(仅操作文本内容)
            var text = $d1.text();//获取文本内容(调用text()方法)
            //也可以将jQuery对象转换为dom对象再使用innerText方法获取
            //或者修改
            $d1.text("修改后的"); //修改

            //html()（操作文本 和 html）
            var html = $d1.html();
            console.log(html);

            $d1.html("<h2>好</h2>")

        });
    </script>
</head>
<body>
<div id="d1">
    <p>我是p标签</p>
</div>
</body>
</html>

9.操作属性节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <!-- 操作属性节点 -->
    <script>
        $(function () {
            /* js 方式操作属性节点*/
            var elementById = document.getElementById("a1");
            //方式一
            //直接获取href属性
            var href = elementById.href;
            console.log(href);
            //修改
            elementById.href = "http://www.4399.com";
            //方式二
            //获取href属性指
            var attribute = elementById.getAttribute("href");
            console.log(attribute);
            //修改
            elementById.setAttribute("href","http://www.baidu.com");

            /*  jQuery方式操作属性节点 */
            //方式一: attr()-> 返回属性值,没有属性返回undefined
            var $a1 = $("#a1");
            //获取
            var jQuery = $a1.attr("href");
            console.log(jQuery);
            //修改
            $a1.attr("href", "http://www.baidu.com");

            //方式二 : prop() -> 返回属性值.
            //与attr的不同点:获取时 disabled，checked，readonly，selected，... 返回布尔值
            //设置时 disabled，checked，readonly，selected，... 设置布尔值
            var prop = $a1.prop("href"); //获取
            console.log(prop);
            $a1.prop("href", "http://www.jd.com"); //修改


            var attr1 = $("input:eq(0)").attr("checked"); //checked
            console.log(attr1);

            var prop1 = $("input:eq(0)").prop("checked"); //true
            console.log(prop1);

            $("input:eq(2)").click(function () {
                //判断按钮形状
                if ($("input:eq(3)").prop("disabled")){
                    //激活
                    $("input:eq(3)").prop("disabled",false);
                }else {
                    //禁用
                    $("input:eq(3)").prop("disabled",true);
                }
            });
            /* 移除属性值 */
            //$("input:eq(0)").removeAttr("type");
            //$("input:eq(1)").removeProp("type");

            //方式三：专用于value属性的操作
            var val = $("input:eq(0)").val();
            console.log(val);
            $("input:eq(0)").val("不详");
            console.log(val);
        })
    </script>
</head>
<body>
<a id="a1" href="http://www.baidu.com">跳转</a>
<hr>
<input type="radio" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
<hr>
<input type="checkbox"> 勾选同意 <br>
<input type="submit" disabled>
</body>
</html>

10.操作元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <!-- 操作元素节点-->
    <script>
        var i = 1;
        $(function () {
            $("button:eq(0)").click(function () {
                //1.创建元素节点
                var $a = $("<a href='http://www.baidu.com'>百度</a>");
                //2.添加到指定位置
                //添加为子元素
                //在div的末尾添加
                $("div").append($a);
                $a.appendTo($("div"));
                //在div的前面添加
                $("div").prepend($a);
                $a.prependTo($("div"));

                //添加为平级元素,前置
                $("div").before($a);
                /*$a.insertBefore($("div"));*/
                //添加为平级元素,后置
                $("div").after($a);
/*
                $a.insertAfter($("div"));
*/

                //获取父节点
                //parent()
                $("button:eq(1)").click(function () {
                    var parent = $("div").parent();
                    console.log(parent);
                });
            })
        })

        function f1() {
            //删除一整个
            $("p:eq(0)").remove(); //删除元素节点
        }

        function f2() {
            //只删除子节点
            $("p:eq(0)").empty(); //删除子元素节点
        }
    </script>
</head>
<body>
<button>添加一个超链接</button>
<button>获取父元素节点</button>
<button onclick="f1()">删除元素节点</button>
<button onclick="f2()">删除子元素节点</button>
<hr>
<div style="height: 100px; background-color: lightblue">
    <span>我是div</span>
</div>
<hr>
<p>
    <span>sp1</span>
    <span>sp2</span>
    <span>sp3</span>
</p>
<p >
    <span>sp4</span>
    <span>sp5</span>
    <span>sp6</span>
</p>
</body>
</html>

11.操作css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style>
        .aa{
            height: 150px;
            width: 150px;
            border: 1px solid black;
        }
        .bb{
            height: 350px;
            width: 350px;
        }
    </style>
    <script>
        $(function () {
            $("img:eq(1)").mouseover(function () {
                $(this).removeClass("aa");
                $(this).addClass("bb");
            })
            $("img:eq(1)").mouseout(function () {
                $(this).removeClass("bb");
                $(this).addClass("aa");
            })
        })
    </script>
</head>
<body>
<img id="img" src="2.jpg" class="aa">
<hr>
<img src="2.jpg" class="aa" alt="">
</body>
</html>

12.表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 表单验证-->
    <script src="js/jquery.js"></script>
    <style>
        .err{
            font-size: 12px;
            color: red;
            font-weight: bold;
        }
        .ok{
            font-size: 12px;
            color: green;
            font-weight: bold;
        }
    </style>
    <script>
        $(function () {
            $(".inp:eq(0)").blur(function () {
                /*
                正则表达式
                中文,字符,_,数字
                长度7~9位
                必须是大写字母开头
                */
                var reg = /^[A-Z][\w\u4e00-\u9fa5]{6,8}$/;
                //获取用户输入的内容
                var val = $(this).val();
                if (val == "" || val == null){
                    $(this).parent().next().html("<span class='err'>用户名不能为空</span>")
                }else if (!reg.test(val)){
                    $(this).parent().next().html("<span class='err'>用户名不合法</span>")
                }else {
                    $(this).parent().next().html("<span class='ok'>用户名合法</span>")
                }
            })
            $(".inp:eq(1)").blur(function () {
                var val = $(this).val();
                if (val == "" || val == null){
                    $(this).parent().next().html("<span class='err'>密码不能为空</span>")
                }
            })
            $(".inp:eq(2)").blur(function () {
                var val = $(this).val();
                if (val == "" || val == null){
                    $(this).parent().next().html("<span class='err'>手机号不能为空</span>")
                }
            })
            $(".inp:eq(3)").blur(function () {
                var val = $(this).val();
                if (val == "" || val == null){
                    $(this).parent().next().html("<span class='err'>邮箱不能为空</span>")
                }
            })

            $("#ck").click(function () {
                var jQuery = $("#btn").prop("disabled");
                if (jQuery){
                    $("#btn").prop("disabled",false);
                }else {
                    $("#btn").prop("disabled",true);
                }
            })


        })
    </script>
</head>
<body>
<div style="text-align: center">
    <h2>注册页面</h2>
    <hr>
    <form action="https://www.baidu.com" method="get">
        <table align="center">
            <tr>
                <td>用户名：</td>
                <td><input class="inp" type="text" name="username" id="username"></td>
                <td></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input class="inp" type="password" name="password" id="password"></td>
                <td><span id="sp2" class="err" hidden>密码不合法</span></td>
            </tr>
            <tr>
                <td>手机号：</td>
                <td><input class="inp" type="text" name="phone" id="phone"></td>
                <td><span id="sp3" class="err" hidden>手机号不合法</span></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input class="inp" type="text" name="email" id="email"></td>
                <td><span id="sp4" class="err" hidden>邮箱不合法</span></td>
            </tr>

            <tr>
                <td>性别：</td>
                <td align="left">
                    <input type="radio" name="sex" checked> 男
                    <input type="radio" name="sex"> 女

                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td align="left">
                    <input  type="checkbox" name="hobby" checked> 学习
                    <input type="checkbox" name="hobby" checked> 整天学习
                </td>
            </tr>
            <tr>
                <td colspan="2"><input id="ck" type="checkbox"> 同意协议</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" id="btn" value="注册" disabled>
                    <input type="reset">
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>