今日所学—jQuery基础

2024-02-20 20:06:16

在使用jQuery时，首先需要导入相关库

一、使用JQ完成首页定时弹出图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <style>
            .father{
                border: 0px solid red;
                width: 1300px;
                height: 2170px;
                margin: auto;
            }

        </style>
        <script>
            $(function(){
                //1.书写显示广告图片的定时操作
                time = setInterval("showAd()",3000);
            });
            
            //2.书写显示广告图片的函数
            function showAd(){
                //3.获取广告图片，并让其显示
                //$("#img2").show(1000);
                //$("#img2").slideDown(5000);
                $("#img2").fadeIn(4000);
                //4.清除显示图片定时操作
                clearInterval(time);
                //5.设置隐藏图片的定时操作
                time = setInterval("hiddenAd()",3000);
            }
            
            function hiddenAd(){
                //6.获取广告图片，并让其隐藏
                //$("#img2").hide();
                //$("#img2").slideUp(5000);
                $("#img2").fadeOut(6000);
                //7.清除隐藏图片的定时操作
                clearInterval(time);
            }
        </script>

    </head>
    <body>
        <div class="father">
            <img src="../img/广告.jpg"  width="100%" style="display: none" id="img2"/>
        
        </div>
    </body>
</html>

效果图：

二、使用jQuery完成表格隔行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成表格隔行换色</title>
        <!--使用css样式-->
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            //1.页面加载
            $(function(){
                //2.获取tbody下面的偶数行并设置背景颜色
                $("tbody tr:even").css("background-color","yellow");
                //3.获取tbody下面的奇数行并设置背景颜色
                $("tbody tr:odd").css("background-color","pink");
                
                //2.获取tbody下面的偶数行并设置背景颜色
                //$("tbody tr:even").addClass("even");
                //清除背景颜色
                //$("tbody tr:even").removeClass("even");
                //3.获取tbody下面的奇数行并设置背景颜色
                //$("tbody tr:odd").addClass("odd");
            });
        </script>
        
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </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(){
                //2.创建二维数组用于存储省份和城市
                var cities = new Array(3);
                cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
                cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
                cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
                cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
                
                $("#province").change(function(){
                    //10.清除第二个下拉列表的内容
                    $("#city").empty();
                    
                    //1.获取用户选择的省份
                    var val = this.value;
                    //alert(val);
                    //3.遍历二维数组中的省份
                    $.each(cities,function(i,n){
                        //alert(i+":"+n);
                        //4.判断用户选择的省份和遍历的省份
                        if(val==i){
                            //5.遍历该省份下的所有城市
                            $.each(cities[i], function(j,m) {
                                //alert(m);
                                //6.创建城市文本节点
                                var textNode = document.createTextNode(m);
                                //7.创建option元素节点
                                var opEle = document.createElement("option");
                                //8.将城市文本节点添加到option元素节点中去
                                $(opEle).append(textNode);
                                //9.将option元素节点追加到第二个下拉列表中去
                                $(opEle).appendTo($("#city"));
                            });
                        }
                    });
                    
                });
            });
        </script>

    </head>
    <body>
        <form action="#" method="get" onsubmit="return check()">
            隐藏字段:<input type="hidden" name="id" value="" /><br />
            用户名：<input type="text" name="username" id="username" placeholder="请输入用户名"/><br />
            密码：<input type="password" name="password" id="password"/><br />
            确认密码：<input type="password" name="repassword" id="repassword"/><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" value="写代码" checked="checked"/>写代码<br />
            头像：<input type="file" name="file"/><br />
            籍贯：<select id="province">
                                    <option>--请选择--</option>
                                    <option value="0">湖北</option>
                                    <option value="1">湖南</option>
                                    <option value="2">河北</option>
                                    <option value="3">河南</option>
                                </select>
                                <select id="city">
                                    
                                </select>
            <br />
            自我介绍：
                <textarea name="zwjs">
                    
                </textarea><br />
            提交按钮：<input type="submit" value="注册"/><br />
            普通按钮：<input type="button" value="注册"/><br />
            重置按钮：<input type="reset" />
        </form>
        
    </body>
</html>

效果图：

四、使用jQuery和validate完成注册页面表单校验

使用前需要再导入两个库，分别是jquery.validate.min.js和messages_zh.js

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>使用jquery完成表单校验</title>

        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <!--引入validate插件js文件-->
        <script type="text/javascript" src="../js/jquery.validate.min.js"></script>
        <!--引入国际化js文件-->
        <script type="text/javascript" src="../js/messages_zh.js"></script>
        <script>
            $(function() {
                $("#registForm").validate({
                    rules: {
                        username: {
                            required: true,
                            minlength: 3
                        },
                        password: {
                            required: true,
                            digits: true,
                            minlength: 6
                        },
                        repassword: {
                            required: true,
                            equalTo: "[name='password']"
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        sex: {
                            required: true
                        }
                    },
                    messages: {
                        username: {
                            required: "用户名不能为空!",
                            minlength: "用户名不得少于3位!"
                        },
                        password: {
                            required: "密码不能为空!",
                            digits: "密码必须是整数!",
                            minlength: "密码不得少于6位!"
                        },
                        repassword: {
                            required: "确认密码不能为空!",
                            equalTo: "两次输入密码不一致!"
                        },
                        email: {
                            required: "邮箱不能为空!",
                            email: "邮箱格式不正确!"
                        },
                        sex: {
                            required: "性别必须勾选!"
                        }
                    },
                    errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
                    success: function(label) { //验证成功后的执行的回调函数
                        //label指向上面那个错误提示信息标签label
                        label.text(" ") //清空错误提示消息
                            .addClass("success"); //加上自定义的success类
                    }
                });
            });
        </script>

    </head>

    <body>
        <form action="#" method="get" id="registForm" >
            隐藏字段:<input type="hidden" name="id" value="" /><br />
            用户名：<input type="text" name="username" id="username" /><br />
            密码：<input type="password" name="password" id="password"/><br />
            确认密码：<input type="password" name="repassword" id="repassword"/><br />
            邮箱：<input type="text" name="email" id="email"/><br />
            性别：<input type="radio" name="sex" value="男"/>男
            <input type="radio" name="sex" value="女"/>女
            <label for="sex" class="error"></label>
            <br />
            爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
            <input type="checkbox" name="hobby" value="打电动"/>打电动
            <input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
            头像：<input type="file" name="file"/><br />
            籍贯：<select name="province">
                <option>--请选择--</option>
                <option value="北京">北京</option>
                <option value="上海" selected="selected">上海</option>
                <option value="广州">广州</option>
            </select><br />
            自我介绍：
                <textarea name="zwjs">
                    
                </textarea><br />
            提交按钮：<input type="submit" value="注册"/><br />
            普通按钮：<input type="button" value="注册"/><br />
            重置按钮：<input type="reset" />
        </form>
    </body>

</html>

效果图：

码农公寓

相关文章