[JavaScript知识库]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;

????????????}

????????}

????})

}