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

今日内容

使用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);</