java web 登陆验证弹窗_带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验

最新推荐文章于 2022-07-13 10:29:38 发布

baskice

最新推荐文章于 2022-07-13 10:29:38 发布

阅读量1.2k

点赞数

文章标签： java web 登陆验证弹窗

本文链接：https://blog.csdn.net/weixin_36048838/article/details/114139799

版权

本文主要介绍了如何使用JQuery完成JavaWeb登录注册页面的交互功能，包括定时弹出广告、表单校验、表格隔行换色、全选与全不选、省市联动效果以及下拉列表左右选择。详细讲解了JQuery的选择器、事件和DOM操作，并提供了实例代码。

摘要由CSDN通过智能技术生成

今日内容

使用JQuery完成页面定时弹出广告

使用JQuery完成表格的隔行换色

使用JQuery完成复选框的全选效果

使用JQuery完成省市联动效果

使用JQuery完成下列列表左右选择

使用JQuery完成表单的校验.

今日目标：

掌握JQuery的基本使用

掌握JQuery的基本选择器,层次选择器

会使用JQuery完成DOM的基本操作

定时弹出广告

定时器: setInterval setTimeout

clearInterval

style.display : none 隐藏 block显示

注册表单:

事件: onfocus 获焦点 onblur 失去焦点 onkeyup 按键抬起的时候

正则表达式校验邮箱. js .

onsubmit = "return checkForm()"

表格隔行换色

table.rows

row.style.backgroundColor

window.onload

表格全选和全不选:

checked属性:

document.getElementById()

document.getElementsByName() 返回的是一个数组

省市联动:

DOM:

//创建节点: document.createElement()

//创建文本节点: document.createTextNode()

//添加节点: appendChild()

商品左右选择中:

事件:

select改变的时候:

onchange

ondbclick()

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析：

当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告

如何定时弹出广告

如何显示广告

如何隐藏广告

1.2 技术分析

【什么是JQuery】

【JQuery的作用是什么】

它封装了很多效果，事件，能够大大的提高我们的开发效率

将我们的页面和Js分离出来

【JQuery的入门】

window.onload = function(){

alert("window.onload 结束");

}

window.onload = function(){

alert("window onload 2 结束啦")

}

//jQuery的写法

jQuery(document).ready(function(){

alert("jquery ready 结束");

});

jQuery(document).ready(function(){

alert("jqeuery ready 结束啦");

});

//我们发现ready时间可以被多次调用，并且不会像window.onload时间一样被覆盖，执行顺序是按定义顺序执行

// jQuery = $

$(document).ready(function(){

alert("jqeuery ready 结束啦啦啦");

});

//更加简洁的写法

$(function(){

alert("jquery 终极简洁版");

});

【JQ和JS之间的转换】

JS对象只能调用JS的属性和方法

JQ对象只能调用JQ的属性和方法

//1. 给按钮注册事件， onclick 事件

//2. 实现事件对应的函数

function change(){

//找到span 元素

var span = document.getElementById("span");

//span.innerHTML="我被JS按钮修改了内容";

$(span).html("我调用了JQ的方法");

}

$(function(){

//1.需要找到要绑定事件的元素

$("#jq_btn").click(function(){

//2. 找到我们要操作的元素

//$("#span").html("我被JQ按钮修改啦");

$("#span")[0].innerHTML="我调用的是JS属性";

$("#span").get(0).innerHTML="我通过get(0)调用的是JS属性";

});

【JQ中根据ID查找元素】

$("#ID") JQuery中的ID选择器

【JQ中的动画效果】

show : 控制元素显示

hide : 隐藏元素

toggle : 开关效果，循环调用

slideDown : 向下滑动

slideUp : 向上滑动

slideToggle : 开关上下滑动

animate : 自定义动画

stop : 停止动画

delay : 延迟执行

1.3 步骤分析：

注册一个JQ中ready 事件

3秒之后显示广告， show(3000);

显示5秒钟

隐藏广告

代码实现

1. 确定事件 : onload

2. 文档加载完成,三秒之后弹出广告(先得找到要显示的广告元素)

3. 广告显示三秒钟

4. 隐藏广告

* */

$(function(){

function showAD(){

$("#ad").show();

setTimeout(hideAD,3000);

}

function hideAD(){

$("#ad").hide();

}

setTimeout(showAD,1000);

});

JQuery中的选择器

选择器的目的是让我们能够更加精确的找到页面中的元素

基本选择器

ID选择器

$("#id")

类选择器

$(".className")

元素选择器

$("元素的名称")

通配符选择器

$("*")

选择器,选择器

$("#id,.className")

基本选择器的案例

JQ的基本选择器

$(function(){

//ID选择器

$("#btn_id").click(function(){

$("#one").css("backgroundColor","#bbffaa");

});

//元素选择器

$("#btn_element").click(function(){

$("div").css("backgroundColor","#bbffaa");

});

//类选择器

$("#btn_mini").click(function(){

$(".mini").css("backgroundColor","#bbffaa");

});

//通配符选择器

$("#btn_all").click(function(){

$("*").css("backgroundColor","#bbffaa");

});

//多选择器

$("#btn_selector").click(function(){

$(".mini,span").css("backgroundColor","#bbffaa");

});

1-111

2-111

2-222

3-111

3-222

3-333

span

JQ中的层级选择器

Ancestor descendant后代选择器

parent > child子元素选择器

prev + next 兄弟元素选择器

prev ~siblings 所有兄弟选择器

JQ中层级选择器案例代码

JQ的层级选择器

$(function(){

//ancestor descendant 后代选择器

$("#btn1").click(function(){

$("body div").css("backgroundColor","#bbffaa");

});

//parent > child 父子选择器

$("#btn2").click(function(){

$("body > div").css("backgroundColor","#bbffaa");

});

//prev + next 父子选择器

$("#btn3").click(function(){

$("#two + div").css("backgroundColor","#bbffaa");

});

//prev + next 兄弟选择器

$("#btn3").click(function(){

$("#two + div").css("backgroundColor","#bbffaa");

});

//prev ~ next 同辈选择器

$("#btn4").click(function(){

$("#one ~ div").css("backgroundColor","#bbffaa");

});

1-111

2-111

2-222

3-111

3-222

3-333

span

JQ中的基本过滤器

JQ的基本过滤器

$(function(){

//找到第一个mini div

$("#btn1").click(function(){

$(".mini:first").css("backgroundColor","#bbffaa");

});

//找到最后一个mini div

$("#btn2").click(function(){

$("div .mini:last").css("backgroundColor","#bbffaa");

});

//过滤基数/偶数div

$("#btn3").click(function(){

$("body div:odd").css("backgroundColor","#FFFFEE");

$("body div:even").css("backgroundColor","#bbffaa");

});

//找出所有的div 剔除id为two

$("#btn4").click(function(){

$("body div:not(#two)").css("backgroundColor","#FFFFEE");

});

1-111

2-111

2-222

3-111

3-222

3-333

span

JQ中的属性选择器

JQ的属性选择器

$(function(){

//选择有title属性的div

$("#btn1").click(function(){

$("div[title]").css("backgroundColor","#bbffaa");

});

//选择有title='bbb'属性的div

$("#btn2").click(function(){

$("div[title='bbb']").css("backgroundColor","#bbffaa");

});

1-111

2-111

2-222

3-111

3-222

3-333

span

JQ中的表单过滤器

$(function(){

$("#btn1").click(function(){

$(":text").css("background-color","#E9FBEB")

});

定时弹出广告:

slideDown : 必须得指定宽度

show()

hide()

选择器

基本选择器:

ID选择器 #

类选择器 .

元素选择器元素的名称

通配符选择器 *

选择器选择器选择器1, 选择器2

层级选择器:

后代选择器 : 选择器选择器

子元素选择器: 选择器1 > 选择器2

相邻兄弟选择器: 选择器 + 选择器2

找到所有兄弟选择器: 选择器1 ~选择器2

属性选择器

使用JQ完成表格的隔行换色

需求分析:

在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色

技术分析:

代码实现

//页面加载

$(document).ready(function(){

//获取表单

$("tbody tr:odd").css("background-color","#FF0000");

$("tbody tr:even").css("background-color","#FFF38F");

$("tr").click(function(){

var $color = $(this).css("background-color");

var $this = $(this);

$(this).css("background-color","yellow");

$(this).click(function(){

$this.css("background-color",$color);

});

//表单的全选与全不选

/*$("#ck1").click(function(){

var v = this.checked;

//alert(v);

$("input[name='ck2']").each(function(index,name){

//alert(this.checked);

this.checked = v;

});

});*/

$("#ck1").click(function(){

//检查id为#ck1是否被选中,选中为true,未选中为false

var flag = $(this).prop("checked");

$("input[name='ck2']").prop("checked",flag);

});

分类ID

分类名称

分类商品

分类描述

操作

手机数码

三星NOTE7,IPhone7

这里面放的都是最新手机

修改|

删除

黄鹤楼,双喜,长白山,白沙

分类商品

这里面都是香烟

修改|

删除

电脑办公

MBP,联想

电脑

修改|

删除

冰箱洗衣机

海尔,格力,三菱,美的

冰箱洗衣机

修改|

删除

使用JQuery完成表单的全选全不选功能

需求分析

在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理,

技术分析:

通过JQ来修改页面元素的属性, 演示代码如下

$(function(){

$("#bt1").click(function(){

// 获得属性的值

// alert($("#img1").attr("src"));

// 修改属性的值:

$("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");

});

代码实现:

$(function(){

1. 确定事件 onclick

2. 要操作的元素: 顶部全选按钮

3. 实现点击事件

* 获取当前选中的状态

* 使用过滤器,过滤出所有的checkbox

* 改变他们的状态

$("#ckall").click(function(){

//var checked = $("#ckall").prop("checked");

var checked = this.checked;

//alert(checked);

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

})

});

使用JQ完成省市联动效果

需求分析:

在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市

技术分析:

JQuery中的遍历:

一种方法:

JQ的对象.each(function(i,n){

});

第二种方法:

$.each(数组,function(i,n){

});

如何使用JQ来添加元素

JQuery的DOM操作

JQ中添加元素:

append(); 添加字节点

appendTo(); 将自己添加到

步骤分析:

定义一个二维数组,用来保存城市的信息

确定事件 onchange事件

找到要操作的select

获取选中的城市

动态添加option节点到城市select中

代码实现:

var provinces = [

["武汉市","黄石市","随州市","荆门市"],

["长沙市","株洲市","邵阳市"],

["广州市","深圳市","东莞市","惠州市"]

];

$(function(){

$("#selectProvince").change(function(){

//alert(this.value);

var cities = provinces[this.value];

//$("#selectCity").empty();

$("#selectCity")[0].options.length = 0;

$(cities).each(function(i,n){

$("#selectCity").append(""+n+"")

});

使用JQ完成下拉列表左右选择

需求分析

我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品

技术分析

JQuery中的选择器使用,还有文档的增删

步骤分析

引入jquery文件

页面加载完成的事件

在链接上添加一个事件

使用append()函数将选中的option 添加子节点

代码实现

$(function(){

$("#clickOne").click(function(){

//var value = $("#selectLeft>option:selected").val();

$("#selectRight").append($("#selectLeft>option:selected"));

//$("#selectLeft>option:selected").appendTo("#selectRight");

});

$("#clickAll").click(function(){

$("#selectRight").append($("#selectLeft>option"));

});

使用JQ完成表单的校验

需求分析

在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示

技术分析

需要用到事件:

blur事件

focus事件

keyup事件

submit事件

步骤分析

为输入框添加blur事件

在blur事件触发的函数中,获得文本框

判断用户输入的值是否为空,如果为空,提示一下

添加submit事件

判断表单上的错误数量

代码实现

$(function(){

//给所有必填项添加一个小红点

$("form .required").parent().append("*");

//给所有的框添加一个blur事件

$("form input").blur(function(){

var $parent = $(this).parent();

//移除原有的span

$parent.find(".formtips").remove();

//判断当前在处理的控件

if($(this).is("#username")){

if(this.value == ""){

//用户名不能为空!

$parent.append("用户名不能为空!");

}else{

//用户名输入正确!

$parent.append("用户名输入正确!");

}

if($(this).is("#password")){

if(this.value == ""){

$parent.append("密码不能为空!");

}else{

$parent.append("密码输入正确!");

}

// /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/

if($(this).is("#mail")){

if(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(this.value)){

$parent.append("邮箱格式正确!");

}else{

$parent.append("邮箱格式不对!");

}

}).focus(function(){

$(this).triggerHandler("blur");

}).keyup(function(){

$(this).triggerHandler("blur");

});

$("form").submit(function(){

$("form .required").trigger("focus");

//看看哪一行不为0

var length = $("form .onError").length

//alert(length);

if(length > 0){

return false;

}

});

购物车

首页
手机数码
电脑办公
鞋靴箱包
洗漱用品

用戶注册

用户名：
密码：
确认密码：
邮箱：
姓名：
性别：	男女
出生日期：
验证码：

baskice

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

java web 登陆验证 弹窗_带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验

用戶注册

java web 登陆验证弹窗_带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验