jquery常用知识点总结

$(function(){

    // 当登陆注册框关闭时，清空文本框

    $('body').on('hidden.bs.modal', '.modal', function () { ——当模态框完全对用户隐藏时候触发

        // console.log('fiuwehfuhewuo')

        $('input[type="text"]').val('');

        $('input[type="password"]').val('');

        $('input[type="checkbox"]').prop('checked',false);

    });

    login();

    register();

})

// 登录

function login(){

    // 点击登录按钮

    $('.login .submit').click(function(){

        var logpwd = $("input[name='logpwd']").val();

        var logphone = $("input[name='logphone']").val();

        if(logphone.trim() === ''){//出去头尾空白符之后，如果还为

            alert('手机号不能为空');

            return false;

        }

        if(logpwd.trim() === ''){

            alert('密码不能为空');

            return false;

        }

        // 发送登录请求

        $.ajax({

            url: '/login/login_pwd',

            type: 'post',

            data: {'logphone':logphone,'logpwd':logpwd},

            dataType: 'json',

            success:function(data){

                console.log(data);

                if(data.code === 2){

                    alert(data.message);

                    return false;

                }

                if(data.code === 1){

                    alert(data.message);

                    return false;

                 }

                if(data.code === 0){

                    alert('登录成功');

                    // location.href='http://www.xlcourse.com/';

                    location.href = window.location.href;

                }

            }

        })

    })

}

// 注册

function register(){

    // 验证码获取

    var codeval;

    codeval = drawCode();

    // 点击图片刷新

    document.getElementById('code_img').onclick = function () {

        $('#verifyCanvas').remove();

        $('#verify').after('<canvas width="72" height="30" id="verifyCanvas"></canvas>')

        codeval = drawCode();

    }

    // 点击密码框的眼睛显示与隐藏

    $('.registpwd .eye').click(function(){

    if($('.registpwd input').attr('type') == 'password'){

            $(this).children('img').attr('src','/static/app/images/login/eye.png');

            $('.registpwd input').attr('type','text');

    }else {

            $(this).children('img').attr('src','/static/app/images/login/eye1.png');

            $('.registpwd input').attr('type','password');

    }

    })

    // 是否选中同意项

    $('.check input').click(function(){

        if($(this).is(':checked')){

            $(this).attr('checked',true);

        }else {

            $(this).attr('checked',false);

        }

    })

    // 点击注册按钮判断文本框内容

    $('.regist .submit').click(function(){

        var code = $("input[name='verify']").val();

        var regpwd = $("input[name='regpwd']").val();

        var regphone = $("input[name='regphone']").val();

        var user_name = $("input[name='user_name']").val();

        var check = $("input[name='check']");

        // console.log(code)

        // console.log(codeval)

        if(!(/^1[3456789]\d{9}$/.test(regphone))){

            alert('请输入正确的手机号');

            return false;

        }

        if(regpwd.trim() === ''){

            alert('密码不能为空');

            return false;

        }

        if(user_name.trim() === ''){

            alert('用户名不能为空');

            return false;

        }

        if(code.toUpperCase() !== codeval.toUpperCase()){

            alert('验证码不正确');

            return false;

        }

        if(!check.is(":checked")){

            alert('请选择同意项');

            return false;

        }

        // 发送注册请求

        $.ajax({

            url: '/login/register',

            type: 'post',

            data: {'regphone':regphone,'regpwd':regpwd,'user_name':user_name},

            dataType: 'json',

            success:function(data){

                console.log(data);

                // location.href='index.php';

                if(data.code === 3){

                    alert(data.message);

                    return false;

                }

                if(data.code === 1){

                    alert(data.message);

                    return false;

                 }

                if(data.code === 0){

                    alert('注册成功');

                    location.href='http://zs.xlteacher.cn/';

                }

            }

        })

    })

}

// 绘制验证码

function drawCode() {

    var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];

    var canvas = document.getElementById("verifyCanvas");  //获取HTML端画布

    if(!canvas){

        return false;

    }

    var context = canvas.getContext("2d");                 //获取画布2D上下文

    context.fillStyle = "#FFEFDB";                  //画布填充色

    context.fillRect(0, 0, canvas.width, canvas.height);   //清空画布

    context.fillStyle = "#F14D50";                           //设置字体颜色

    context.font = "20px Arial";                           //设置字体

    // context.fontWeight = "bold";   

    var rand = new Array();

    var x = new Array();

    var y = new Array();

    for (var i = 0; i < 4; i++) {

        rand[i] = nums[Math.floor(Math.random() * nums.length)]

        x[i] = i * 12 + 10;

        y[i] = Math.random() * 12 + 14;

        context.fillText(rand[i], x[i], y[i]);

    }

    //画3条随机线

    for (var i = 0; i < 1; i++) {

        drawline(canvas, context);

    }

    convertCanvasToImage(canvas)

    return rand.join('');

}

// // 随机线

function drawline(canvas, context) {

    context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));             //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数

    context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数

    context.lineWidth = 1;                                                  //随机线宽

    context.strokeStyle = 'rgb(242, 86, 86)';                               //随机线描边属性

    context.stroke();                                                         //描边，即起点描到终点

}

// 绘制图片

function convertCanvasToImage(canvas) {

    document.getElementById("verifyCanvas").style.display = "none";

    var image = document.getElementById("code_img");

    image.src = canvas.toDataURL("image/png");

    return image;

}

// 退出登录

function logout(){

    // var logout = $('.logout');

    // logout.click(function(){

        $.ajax({

            url: '/login/login_out',

            type: 'get',

            dataType: 'json',

            success:function(data){

                if(data.code === 0){

                    // alert(data.message);

                    // location.href='http://www.xlcourse.com/';

                    location.href = window.location.href;

                }

            }

        })

    // })

}

function keyLogin(){

    if(event.keyCode == 13){

        $('.login .submit input').click();

    }

}

// function keyRegister(){

//     if(event.keyCode == 13){

//         $('.login .submit input').click();

//     }

// }

function forget(){

    var fgpwd = $("input[name='fgpwd']").val();

    var fgphone = $("input[name='fgphone']").val();

    if(fgphone.trim() === ''){

        alert('手机号不能为空');

        return false;

    }

    if(fgpwd.trim() === ''){

        alert('密码不能为空');

        return false;

    }

    // 发送登录请求

    $.ajax({

        url: '/login/forget',

        type: 'post',

        data: {'fgphone':fgphone,'fgpwd':fgpwd},

        dataType: 'json',

        success:function(data){

            console.log(data);

            if(data.code === 2){

                alert(data.message);

                return false;

            }

            if(data.code === 1){

                alert(data.message);

                return false;

            }

            if(data.code === 0){

                alert('修改成功');

                // location.href='http://www.xlcourse.com/';

                location.href = window.location.href;

            }

        }

    })

}