04_在线课课件资料Javaweb项目实战01_

“玩转”Java系列Lession 1 : JavaScript & jQueryl 上半场(技术分享)n HTML/CSS的使用n JavaScript的使用n jQuery的使用l 下半场(项目实战)n 功能一: 搭建项目的前台框架界面n 功能二: 完成用户的注册与登陆页面n 功能三: 实现用户注册/登陆的表单验证功能1. 技术分享1.1. HTML/CSS的使用l 学习基本语法: 参考,l 语法和使用技巧: 使用尚硅谷的, l 使用HTML/CSS技术: 完成项目实战部分的功能一和功能二1.2. JavaScript的使用l 学习基本语法: 参考,l 语法和使用技巧: 使用尚硅谷的, l 使用JavaScript技术: 完成项目实战部分的功能三1) 在哪编写Javascript代码?l 位置1: 将js编写在一个单独的.js文件中, 在页面中通过引入l 位置2: 在页面的标签中直接编写代码, 放在之前l 位置3: 在页面的标签中直接编写代码, 放在之后/alert(body上面的js执行!); /alert(body下面的js执行!);2) 如何定义和使用变量?l 通过var关键字来定义变量l 一个变量可以被赋值为js支持的任何类型的值l js支持的数据类型:n 基本类型: 数值(number),字符串(string),布尔值(boolean),undefinedn 对象类型: 对象(object)，数组(array)，函数(function)var i = 1;i = atguigu;i = name:xfzhang, age:18; i.agei = 1, abc; i1/alert(i);3) 如何定义和调用函数?l 通过function关键字来定义一个函数l 通过函数名()来调用函数function fun(input) alert(input);/click(fun.);4) 如何得到一个标签对象?l document.getElementById(id): n 根据id得到一个唯一的标签对象l document.getElementsByTagName(tagname)n 根据标签名得到包含n个标签对象的数组var nameElement = document.getElementById(name);/alert(nameElement.value);5) 如何给标签添加点击事件监听?l 方法一: 通过标签的onclick属性去调用js中定义好的一个函数l 方法二: 在js中得到标签对象, 为对象的onclick属性赋值为一个函数function checkLogin() alert(click login);document.getElementById(login2).onclick = function()alert(click login2222!);1.3. jQuery的使用l 学习基本语法: 参考l 语法和使用技巧: 使用尚硅谷的l 使用jQuery技术: 完成项目实战部分的功能三1) 为什么要用jQuery?谁在用jQuery?l 简化js的开发l jQuery在很多方面优于其它js框架l 在世界前10000个访问最多的网站中，有超过55%在使用jQuery2) 如何引入jQuery?l 将jQuery的库文件加入到当前项目中l 在页面中通过引入jquery库文件l 在中调用jQuery定义的$()函数/使用jQuery库定义的$()和jQuery对象3) jQuery中的$是什么?如何用?l $是jQuery给window对象添加的一个全局方法(函数), 可以直接调用l $(param)函数内部会根据传入的参数类型不同做不同的事n param是一个function: 它就会在文档加载完成自动调用n param是一个字符串: 将它作为选择器去找到所有匹配的标签对象,并封装成jQuery自己定义的对象(一般称为jQuery对象) /alert(typeof $);$(function()/alert(文档加载完成!);/alert($(#name).length););4) jQuery中的选择器是什么?如何用?l jQuery的选择器就是具有一定格式的字符串l 它的语法参照的是CSS的选择器语法, 并进行了一定的扩展l 调用$(selector), 就可以得到包含与selector匹配的所有标签对象的jQuery对象/alert($(input).length);/alert($(.input).length);$(.input).each(function()/alert(this.value););5) jQuery中如何给标签添加事件监听处理?l 调用包含标签对象的jQuery对象的click(), 并传入一个回调函数l 当点击标签时, 函数就会自动调用$(#login).click(function()alert(click login););6) jQuery中如何进行DOM的CRUD操作?l jQuery库除了可以进行DOM的查询外, 还能高效的进行增删改的操作/点击登 录2删除自己$(#login2).click(function()$(this).remove(););2. 项目实战2.1. 功能一: 搭建项目的前台框架界面2.2. 功能二: 完成用户的注册与登陆页面2.3. 功能三: 实现用户注册/登陆的表单验证功能1). 功能需求:1). 用户名: 长度为6到12位, 只能输入数字和英文和下划线/w6,12$/2). 密码: 长度为6位, 只能输入数字和英文/a-zA-Z0-96$/3). 确认密码: 必须与密码相同4). 邮箱: 格式必须正确, 可以不输入/(a-zA-Z0-9_.-)+(a-zA-Z0-9-)+.)+(a-zA-Z0-92,4)+$/2). javaScript实现window.onload=function()document.getElementById(registBtn).onclick = function()/1). 用户名: 长度为6到12位, 只能输入数字和英文和下划线var usernameEle = document.getElementById(username);var username = usernameEle.value;var reg = /w6,12$/;if(!reg.test(username) alert(用户名长度为6到12位, 只能输入数字和英文和下划线);usernameEle.focus();return false;/2). 密码: 长度为6位, 只能输入数字和英文var passwordEle = document.getElementById(password);var password = passwordEle.value;reg = /a-zA-Z0-96$/;if(!reg.test(password) alert(密码长度为6位, 只能输入数字和英文);passwordEle.focus();return false;/3). 确认密码: 必须与密码相同var password2Ele = document.getElementById(password2);var password2 = password2Ele.value;if(password2!=password) alert( 确认密码必须与密码相同);password2Ele.focus();return false;/4). 邮箱: 格式必须正确, 可以不输入var emailEle = document.getElementById(email);var email = emailEle.value;reg = /(a-zA-Z0-9_.-)+(a-zA-Z0-9-)+.)+(a-zA-Z0-92,4)+$/;if(email.length0 & !reg.test(email) alert(邮箱格式必须正确, 可以不输入);emailEle.focus();return false;return true;3). jQuery实现$(function()$(#registBtn).click(function()/1). 用户名: 长度为6到12位, 只能输入数字和英文和下划线var $usernameEle = $(#username);var username = $usernameEle.val();var reg = /w6,12$/;if(!reg.test(username) alert(用户名长度为6到12位, 只能输入数字和英文和下划线);$usernameEle.focus();return false;/2). 密码: 长度为6位, 只能输入数字和英文var $passwordEle = $(#password);var password = $passwordEle.val();reg = /a-zA-Z0-96$/;if(!reg.test(password) alert(密码长度为6位, 只能输入数字和英文);$passwordEle.focus();return false;/3). 确认密码: 必须与密码相同var $password2Ele = $(#password2);var password2 = $password2Ele.val();if (password2 != password) alert( 确认密码必须与密码相同);$password2Ele.focus();return false;/4). 邮箱: 格式必须正确, 可以不输入var $emailEle = $(#email);var email = $emailEle.val();reg