1. 首页
  2. 前端
  3. Web前端第四季（jQuery）
2547人加入学习
(5人评价)
Web前端第四季（jQuery）

制作完成于2018年6月19日 基于jQuery-3.3.1

价格 免费
加入学习 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>volidation表单校验</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/messages_zh.min.js"></script>
    <script type="text/javascript">
        var validateRule = {
            rules:{
                username:{
                    required:true,
                    minlength:3,
                    maxlength:6
                },
                email:{
                    required:true,
                    email:true
                },
                password:{
                    required:true,
                    minlength:3,
                    maxlength:6
                },
                rePassword:{
                    required:true,
                    equalTo:"[name='password']",
                },
                birthday:{
                    date:true
                },
                sex:{
                    required:true
                }
            },
            messages:{
                username:{
                    required:"这个是必须填写的",
                    minlength:"最少输入 3 个字符",
                    maxlength:"最多输入 6 个字符"
                },
                sex:{
                    required:"性别必须选择"
                }
            }
        };
        $(function(){
            $("#registerForm").validate(validateRule);
        });
    </script>
</head>
<body>
    <form action="register.jsp" id="registerForm">
        <table border="1" width="800px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right" width="100px">用户名：</td>
                <td align="left"><input type="text" name="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="text" name="email"/></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td>
                <td><input type="password" name="rePassword"/></td>
            </tr>
            <tr>
                <td align="right">出生年月日：</td>
                <td><input type="text" name="birthday" /></td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td>男<input type="radio" name="sex" />女<input type="radio" name="sex" /><label for="sex" class="error"></label></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-23 · 605-完成validation校验（课程结束） 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>volidation表单校验</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
        var validateRule = {
            rules:{
                username:{
                    required:true,
                    minlength:3,
                    maxlength:6
                },
                email:{
                    required:true,
                    email:true
                },
                password:{
                    required:true,
                    minlength:3,
                    maxlength:6
                },
                rePassword:{
                    required:true,
                    equalTo:"[name='password']",
                },
                birthday:{
                    date:true
                },
                sex:{
                    required:true
                }
            },
        };
        $(function(){
            $("#registerForm").validate(validateRule);
        });
    </script>
</head>
<body>
    <form action="register.jsp" id="registerForm">
        <table border="1" width="800px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right" width="100px">用户名：</td>
                <td align="left"><input type="text" name="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="text" name="email"/></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td>
                <td><input type="password" name="rePassword"/></td>
            </tr>
            <tr>
                <td align="right">出生年月日：</td>
                <td><input type="text" name="birthday" /></td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td>男<input type="radio" name="sex" />女<input type="radio" name="sex" /> </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-23 · 604-书写validation校验规则 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>volidation表单校验</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
        var validateRule = {
            rules:{
                username:{
                    required:true,
                    minlength:3,
                    maxlength:6
                }
            },
        };
        $(function(){
            $("#registerForm").validate(validateRule);
        });
    </script>
</head>
<body>
    <form action="register.jsp" id="registerForm">
        <table border="1" width="800px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right" width="100px">用户名：</td>
                <td align="left"><input type="text" name="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td>
                <td><input type="password" /></td>
            </tr>
            <tr>
                <td align="right">出生年月日：</td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td>男<input type="radio" name="sex" />女<input type="radio" name="sex" /> </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-23 · 603-使用validation校验用户名 0

https://jqueryvalidation.org/

[展开全文]
遗失的星空 · 2022-02-23 · 602-编辑器插件和validation插件的下载 0

jQuery插件
1，jQuery特别容易扩展，开发者可以基于jQuery开发一些扩展动能
2，插件:http://plugins.jquery.com/
3，validation    pickadate        Echarts
    chosen    ckeditor

[展开全文]
遗失的星空 · 2022-02-23 · 601-jQuery常用插件一 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var provinceArr = new Array(5);
        provinceArr[0] = new Array("北京市");
        provinceArr[1] = new Array("郑州市","洛阳市","濮阳市","驻马店市");
        provinceArr[2] = new Array("石家庄市","唐山","秦皇岛","邯郸");
        provinceArr[3] = new Array("西安市","宝鸡市","延安");
        provinceArr[4] = new Array("菏泽市","济南市","青岛");

        $(function(){
            $("#province").change(function(){
                $("#city").empty();
                var provinceID = this.value;
                console.log(provinceID);
                if(provinceID == -1){
                    $("#city").html("<option value='-1'>-请选择-</option>");
                }else{
                    for(var i=0;i<provinceArr[provinceID].length;i++){
                        var option = document.createElement("option");
                        option.innerText = provinceArr[provinceID][i];
                        $("#city").append(option);
                    }
                }
            });
        });
    </script>
</head>
<body>
    <select id="province">
        <option value="-1">-请选择-</option>
        <option value="0">北京市</option>
        <option value="1">河南省</option>
        <option value="2">河北省</option>
        <option value="3">陕西省</option>
        <option value="4">山东省</option>
    </select>
    <select id="city">
        <option value="-1">-请选择-</option>
    </select>
</body>
</html>

省市联动
1、选择器
2、添加事件
$("#province").change(
funtion(){

}
);
3、清空下拉列表
$("#city").empty();

[展开全文]
遗失的星空 · 2022-02-23 · 501-二级省市联动 0

jquery中attr ()和prop ()的区别是：attr函数操作的是文档节点的属性，设置的属性值只能是字符串类型；prop函数操作的是js对象的属性，设置的属性值可以是包括数组和对象在内的任意类型。

[展开全文]
遗失的星空 · 2022-02-23 · 403-属性选择器和属性设置 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>全选和全不选功能</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#selectBtn").click(function(){//this.checked
                console.log($("#selectedBtn"));//selectBtn对应的jQuery对象
                console.log(this);//selectBtn对应的DOM对象
                $("tbody input[name='select']").prop("checked",this.checked);
            });
        });
    </script>
</head>
<body>
    <p>
            <span>Category:Hierarchy</span>
            Child Selector("parent>child")
        </p>
    </div>
    <table id="mytable" border="1" cellspacing="" cellpadding="">
        <thead>
            <tr><th><input type="checkbox" id="selectBtn" /></th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
        </thead>
        <tbody>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        </tbody>
        <tfoot>
            <tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
        </tfoot>
    </table>
    <table border="1" cellspacing="" cellpadding="">
        <tr><th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    </table>
</body>
</html>

全选\全部不选
1，先选择全选按钮
2，添加事件 
$("#selectBtn").click(function(){
$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});

[展开全文]
遗失的星空 · 2022-02-23 · 402-全选和全不选功能 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>祖先选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // $("#mytable tbody tr:even").css("background-color","aliceblue");
            // $("#mytable tbody tr:odd").css("background-color","beige");
            
            //祖先选择器
            // $("祖先 后代")
            // $("table td").css("background-color","beige");
            // $("table tbody td").css("background-color","beige");
            // $("tbody td").css("background-color","beige");
            // $("#mytable td").css("background-color","beige");
            // $("div span").css("background-color","red");

            //孩子选择器
            //$("父亲>孩子")
            // $("div>span").css("background-color","red");//div下没有孩子是span，选择不了。
            $("p>span").css("background-color","red");//div下没有孩子是span，选择不了。
        });
    </script>
</head>
<body>
    <div>
        <p>
            <span>Category:Hierarchy</span>
            Child Selector("parent>child")
        </p>
    </div>
    <table id="mytable" border="1" cellspacing="" cellpadding="">
        <thead>
            <tr><th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
        </thead>
        <tbody>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        </tbody>
        <tfoot>
            <tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
        </tfoot>
    </table>
    <table border="1" cellspacing="" cellpadding="">
        <tr><th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    </table>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-23 · 401-祖先选择器和孩子选择器 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#mytable tbody tr:even").css("background-color","aliceblue");
            $("#mytable tbody tr:odd").css("background-color","beige");
        });
    </script>
</head>
<body>
    <table id="mytable" border="1" cellspacing="" cellpadding="">
        <thead>
            <tr><th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
        </thead>
        <tbody>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
            <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        </tbody>
        <tfoot>
            <tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
        </tfoot>
    </table>
    <table border="1" cellspacing="" cellpadding="">
        <tr><th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
        <tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    </table>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-22 · 302-实现隔行换色 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery偶数奇数过滤器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css"></style>
    <script type="text/javascript">
        $(function(){
            $("div:even").css("background-color","red"); //取得div的even偶数索引
            $("div:odd").css("background-color","green"); //取得div的odd奇数索引
        });
    </script>
</head>
<body>
    <div>
        索引：0 -- 表格各行换色 作用：方便区分行与行之间的区别
        <div>
            索引：1 -- 表格各行换色 作用：方便区分行与行之间的区别
        </div>
    </div>
    <div>
        索引：2 -- 表格各行换色 作用：方便区分行与行之间的区别
    </div>
    <div>
        索引：3 -- 表格各行换色 作用：方便区分行与行之间的区别
    </div>
    <div>
        索引：4 -- 表格各行换色 作用：方便区分行与行之间的区别
    </div>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-22 · 301-jQuery基本过滤器（奇数和偶数） 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery广告弹窗</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        #ad{
            width:300px;
            height:300px;
            background-color:antiquewhite;
            position:fixed;
            bottom:0;
            right:0;
            display:none;
        }
    </style>
    <script type="text/javascript">
        // setTimeout(function(){
        //     // $("#ad").show();//display block none
        //     $("#ad").show(3000,function(){
        //         console.log("动画播放完成");
        //     });//"slow" | "fast" | 3000
        // },1000);
        // setTimeout(function(){
        //     $("#ad").hide("hide",function(){
        //         console.log("广告不见了");
        //     });
        // },5000);
        // $(function(){
        //     $("#closeBtn").click(function(){
        //         $("#ad").hide();
        //     });
        // });

        // $("xxxxxx").click();

        setTimeout(function(){
            // $("#ad").toggle("slow");
            // $("#ad").slideDown(2000);//slideDown从底部向上滑动出来。
            // $("#ad").slideToggle();
            // $("#ad").fadeIn(1000);
            // $("#ad").fadeToggle(1000);
            $("#ad").fadeTo(1000,1);//0完全透明  1是完全不透明  0.5半透明
        },1000);
        $(function(){
            $("#closeBtn").click(function(){
                // $("#ad").toggle("slow");
                // $("#ad").slideUp(2000);//和slideDown相反，显示完整后，从顶部向下滑动，直至没了。
                // $("#ad").slideToggle();
                // $("#ad").fadeOut(1000);
                $("#ad").fadeToggle(1000);
            });
        });
    </script>
</head>
<body>
    <div id="ad">
        <button id="closeBtn">关闭</button>
    </div>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-22 · 203-滑动和渐隐渐现的动画效果 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery广告弹窗</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        #ad{
            width:300px;
            height:300px;
            background-color:antiquewhite;
            position:fixed;
            bottom:0;
            right:0;
            display:none;
        }
    </style>
    <script type="text/javascript">
        setTimeout(function(){
            // $("#ad").show();//display block none
            $("#ad").show(3000,function(){
                console.log("动画播放完成");
            });//"slow" | "fast" | 3000
        },1000);
        setTimeout(function(){
            $("#ad").hide("hide",function(){
                console.log("广告不见了");
            });
        },5000);
        $(function(){
            $("#closeBtn").click(function(){
                $("#ad").hide();
            });
        });


        // $("xxxxxx").click();
    </script>
</head>
<body>
    <div id="ad">
        <button id="closeBtn">关闭</button>
    </div>
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery广告弹窗</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        #ad{
            width:300px;
            height:300px;
            background-color:antiquewhite;
            position:fixed;
            bottom:0;
            right:0;
            display:none;
        }
    </style>
    <script type="text/javascript">
        // setTimeout(function(){
        //     // $("#ad").show();//display block none
        //     $("#ad").show(3000,function(){
        //         console.log("动画播放完成");
        //     });//"slow" | "fast" | 3000
        // },1000);
        // setTimeout(function(){
        //     $("#ad").hide("hide",function(){
        //         console.log("广告不见了");
        //     });
        // },5000);
        // $(function(){
        //     $("#closeBtn").click(function(){
        //         $("#ad").hide();
        //     });
        // });

        // $("xxxxxx").click();

        setTimeout(function(){
            $("#ad").toggle("slow");
        },1000);
        $(function(){
            $("#closeBtn").click(function(){
                $("#ad").toggle("slow");
            });
        });
    </script>
</head>
<body>
    <div id="ad">
        <button id="closeBtn">关闭</button>
    </div>
</body>
</html>

显示和隐藏( 属于effect里面的basic )
show()    //相当于 display:block
第一个参数slow fast 毫秒数（速度）
第二个参数是回调函数
hide()
第一个参数是速度
第二个参数是回调函数
Toggle
如果是显示的就隐藏
如果是隐藏的就显示
滑动显示和隐藏
slideDown
slideUp
参数跟上面的一样
其他显示和隐藏效果
fadeIn
fadeOut

[展开全文]
遗失的星空 · 2022-02-22 · 202-关于show和hide函数的动画设置 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery广告弹窗</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        #ad{
            width:300px;
            height:300px;
            background-color:antiquewhite;
            position:fixed;
            bottom:0;
            right:0;
            display:none;
        }
    </style>
    <script type="text/javascript">
        setTimeout(function(){
            $("#ad").show();
        },3000);
        setTimeout(function(){
            $("#ad").hide();
        },5000);
        $(function(){
            $("#closeBtn").click(function(){
                $("#ad").hide();
            });
        });
    </script>
</head>
<body>
    <div id="ad">
        <button id="closeBtn">关闭</button>
    </div>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-20 · 201-jQuery实现广告弹窗 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("*")
            $("#one")
            $(".two")
            $("div")
        });
    </script>
</head>
<body>
    <div id="one">Category: Selectors</div>
    <div class="two">Category: Selectors</div>
    <div class="two">Category: Selectors</div>
</body>
</html>

选择器有哪些
全部、类、标签、ID、多个
选择器返回的是一个jQuery对象
http://api.jquery.com/category/selectors/basic-css-selectors/

[展开全文]
遗失的星空 · 2022-02-20 · 106-关于jQuery的API文档 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery id选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // $("#one");//它会返回一个jQuery对象
            // $("#one").show();//display:block
            // $("#one").text("jQuery");


            // $("#one").get(0).innerText = "jQuery";
            //DOM对象
            // var div = document.getElementById("one");
            // div.innerText = "DOM";
            // document.getElementById("one").innerText = "DOM";


            // var div = document.getElementById("one");
            // div.style.display = "block";
            document.getElementById("one").style.display = "block";
        });
    </script>
</head>
<body>
    <div id="one" style="display:none">Category: Selectors</div>
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery id选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // $("#one");//它会返回一个jQuery对象
            // $("#one").show();//display:block
            // $("#one").text("jQuery");

            $("#one").get(0).innerText = "jQuery";
            //DOM对象
            // var div = document.getElementById("one");
            // div.innerText = "DOM";
            // document.getElementById("one").innerText = "DOM";

            // var div = document.getElementById("one");
            // div.style.display = "block";
            // document.getElementById("one").style.display = "block";
        });
    </script>
</head>
<body>
    <div id="one">Category: Selectors</div>
</body>
</html>

jQuery方式

jQuery文档
地址：http://api.jquery.com/
文档下面的几个分类
选择器        Selectors
属性操作    Attributes
特效        Effects
事件        Events
CSS样式处理    CSS
遍历        Traversing
操作DOM节点    Manipulation

jQuery对象和DOM对象的区别

获取并添加事件
$("#id").click(function(){ });

获取并设置内容
$("#id").innerHTML = ""; // 错误
$("#id").html("");

获取html元素
$("#id")
参数是选择器

选择器有哪些
全部、类、标签、ID、多个
选择器返回的是一个jQuery对象
http://api.jquery.com/category/selectors/basic-css-selectors/

[展开全文]
遗失的星空 · 2022-02-20 · 105-jQuery对象和DOM对象的区别 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery id选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // $("#one");//它会返回一个jQuery对象
            $("#one").show();//display:block
        });
    </script>
</head>
<body>
    <div id="one" style="display:none;">Category: Selectors</div>
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery id选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // $("#one");//它会返回一个jQuery对象
            // $("#one").show();//display:block
            $("#one").text("jQuery");
        });
    </script>
</head>
<body>
    <div id="one">Category: Selectors</div>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-20 · 104-使用jQuery获取HTML元素并进行简单操作 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>onload事件的几种方式</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // function init(){
        //     alert("init");
        // }
        // window.onload = init;

        // window.onload = function () {
        //     alert("init");
        // };

        // function init(){
        //     alert("init");
        // }
        // $(init);//用来指定网页加载完成后要执行的函数

        $(function(){
            alert("init");
        });
    </script>
</head>
<body>
    <p>
        想要等文档加载完再执行的函数<br />
        1，在body里面添加onload事件<br />
        2，window.onload = function (){}<br />
        3，$(function(){});<br />
    </p>
</body>
</html>

想要等文档加载完再执行的函数
1，在body里面添加onload事件
2，window.onload = function (){}
3，$(function(){});

[展开全文]
遗失的星空 · 2022-02-20 · 103-jQuery方式监听网页的onload事件 0 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>引入jQuery</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
    
</body>
</html>

使用前先引入
<script type="text/javascript" src="xxxx.jQuery.js" ></script>

[展开全文]
遗失的星空 · 2022-02-20 · 102-jQuery的下载和引入 0

什么是jQuery？
jQuery是一个封装好的JavaScript框架，可以更加简单的实现一些js的功能。
里面提供了很多简单易用，功能强大的东东。
兼容各个浏览器。

[展开全文]
遗失的星空 · 2022-02-20 · 101-什么是jQuery 0

授课教师

siki
SiKi学院老师

课程特色

下载资料(1)
视频(20)

最新学员

学员动态

随便啥名 开始学习 102-jQuery的下载和引...
随便啥名 加入学习
kojo 加入学习
王恰恰 加入学习
123456789Jy 加入学习

UnityA计划

虚幻A计划

JavaA计划