新手：自己整理的jQuery

2015-02-09

一、登陆界面

1登录实现文本框提示信息，鼠标点击提示信息消失

body中<div id="logindiv">
    <table>
    <tr><td>
    <span id="error2"></span>
    </td></tr>
    <tr>
    <td>用户名：</td>
    <td><input id="txname" name="txname" type="text" /></td>
    </tr>
    <tr>
    <td>密码：</td>
    <td><input name="txpwd" type="text" id="txpwd"  class="input" value="请输入密码" />
    <input name="password" type="password" id="password" class="input" style="display:none;" />
    </td>
    </tr>
    <tr>
    <td>验证码：</td>
    <td><input id="code" type="text"  name="code"/></td>
    </tr>
    <tr>
    <td><img id="valiCode" style="cursor: pointer;" src="/Login/GetValidateCode/?id=1" alt="验证码" /></td>
    <td><a  href="javascript:void(0)" οnclick="ChangeCode(); return false">看不清，换一张</a></td>
    </tr>
    <tr>
    <td><input id="login" type="button" value="登录" /> </td>
    <td><input id="register" name="register" type="button" value="注册"  οnclick="location.href='/Register/add'" /></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table>  
    </div>

script中

    $(function () {
            //提示输入用户名
            $("#txname").val("请输入用户名").focus(function () {
                if ($(this).val() == '请输入用户名') {
                    $(this).val("");
                }
            }).blur(function () {
                if ($(this).val() == "") {
                    $(this).val("请输入用户名");
                }
            });
            //提示输入密码
            $("#txpwd").val("请输入密码").focus(function () {
                if ($(this).val() == '请输入密码') {
                    $("#txpwd").hide();
                    $("#password").show().focus();
                }
            });

            $("#password").blur(function () {
                if ($(this).val() == "") {
                    $("#password").hide();
                    $("#txpwd").show();
                }
            });
            //提示输入验证码
            $("#code").val("请输入验证码").focus(function () {
                if ($(this).val() == '请输入验证码') {
                    $(this).val("");
                }
            }).blur(function () {
                if ($(this).val() == "") {
                    $(this).val("请输入验证码");
                }
            });
        });

2.非空验证

script中

 if (username == "" || username == null || username == "请输入用户名") {
                    $("#error2").text("用户名不能为空！");
                    return false;
                }

二、注册常遇问题

1.验证（正则表达式）

①字符限制

$(this).val().length > 5

②6-20位字母数字下划线的组合

var reg1 = /^\w{6,20}$/;

③身份证号
 var reg2 = /^([0-9]{15}|[0-9]{18})$/;

④邮箱

var reg3 = /^[a-zA-Z0-9_-]+@@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

用以下方式对比验证：reg1.test($("#username").val()，值为布尔型

三、列表页自动加载

<script type="text/javascript">
        $(function () {
            var num = 1;                 //计数器初始化为1
            var maxnum = 20;             //设置加载最多次数  
            var pageIndex = 1;
            $("#pageIndex").val(pageIndex);
            var pageCount=$("#Hidden1").val();
            $(window).scroll(function () {
                //判断滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight（兼容不同的浏览器）
                //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
                //console.log("页面的文档高度 ："+$(document).height());  
                //console.log('浏览器的高度：'+$(window).height());  
                if (($(document).scrollTop() >= $(document).height() - $(window).height()) && num != pageCount && num!=maxnum) {
                    $.ajax({
                        type: "GET",
                        url: 'Li',
                        dataType: 'html',
                        data: { pageIndex: $("#pageIndex").val() },
                        beforeSend: function () {
                            $('.ajax_loading').show(); //显示加载提示
                        },
                        success: function (data) {

                            $("#tablelist").append(data);
                            $('.ajax_loading').hide(); //请求成功,隐藏加载提示

                        },
                        error: function (e) {
                            alert(e);
                        }
                    });
                    num++;
                    pageIndex++;
                    $("#pageIndex").val(pageIndex);
                }
            });
        });
   </script>