javaee 超链接提交表单_047 JS中的表单验证以及JQuery初介

1. 表单验证A

(1) 如何可以产生一个4位的随机数验证码

/**********验证码生成**********/

function YZM(){

//4位随机整数

ran=Math.floor(Math.random()*9000+1000);

//获得span对象

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

span.innerText=ran;

}

(2) 在案例中是如何控制表单是否提交的

首先规定检查表单是否满足条件的方法

function zong(){

var flag=checkName()&&checkPwd()&&checkSex()&&checkYZM()&&checkAgree()&&checkEmail();

return flag;

}

然后在表单属性中调用该函数，将函数结果返回给onsubmit事件来控制表单是否提交

<form action="" method="get" οnsubmit="return zong()">

2. 表单验证B

(1) 代码中如何判断性别是否选择的

首先定义性别

<tr height="35px">

<td>性别：</td>

<td>

男：<input type="radio" name="sex" id="" value="1" οnclick="checkSex()"/>

女：<input type="radio" name="sex" id="" value="0" οnclick="checkSex()"/>

<span id="sex_span">

</span>

</td>

</tr>

定义检查性别的方法：sex[i].checked返回boolean类型，检查复选框是否被勾选

/*******性别校验**************/

function checkSex(){

//获得所有的性别对象

var sex=document.getElementsByName("sex");

//获得span对象

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

for(var i in sex){

if(sex[i].checked){

span.innerHTML="性别选择成功";

span.style.color="green";

return true;

}

}

span.innerHTML="请选择性别";

span.style.color="red";

return false;

}

(2) 代码中如何判断籍贯是否选择的

首先定义籍贯的选择列表：通过select option标签定义

<tr height="35px">

<td>籍贯：</td>

<td>

<select name="adress" id="sel" οnchange="checkAdress()">

<option value="0">--请选择--</option>

<option value="1">河南</option>

<option value="2">湖南</option>

<option value="3">海南</option>

<option value="4">云南</option>

</select>

<span id="sel_span"></span>

</td>

</tr>

检查籍贯是否被选择：

/*********籍贯校验***********/

function checkAdress(){

var sel=document.getElementById("sel").value;

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

if(sel==0){

span.style.color="red";

span.innerText="请选择籍贯"

return false;

}else {

span.style.color="green";

span.innerText="籍贯选择成功"

return true;

}

(3) 代码每一个方法执行完返回true/false

每一个方法返回true或者false来表明该检查方法的执行结果，即用户的输入是否是满足条件的。方便最后表单提交时进行的整体验证，即每一项都满足条件时才可以提交表单信息。

3. 表单验证C

(1) 视频中判断协议是否选中方法,代码（186行）的含义是什么。

判断协议是否被勾选的方法：

/*******是否统一协议**********/

function checkAgree(){

//同意框

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

//提交

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

sub.disabled=!check.checked;

}

勾选框和注册按钮的代码：

<tr height="35px">

<td colspan="2" align="center">

<input type="checkbox" name="" id="check" value="" οnclick="checkAgree()">是否同一本公司协议

</td>

</tr>

<tr height="35px">

<td colspan="2" align="center">

<input type="submit" id="sub" value="注册" disabled="true"/>

</td>

</tr>

如上代码所示：当勾选框被勾选时，check.checked返回的是true，也就意味着sub.disable被赋值的是false，此时注册按钮就是可用的了。

(2) 视频中最后书写的zong()这个方法中的&&可以换成& 吗？为什么？

zong的代码：

function zong(){

var flag=checkName()&&checkPwd()&&checkSex()&&checkYZM()&&checkAgree()&&checkEmail();

return flag;

}

不可以。&&是逻辑与运算符，短路与运算，效率高。&是按位与运算符。

4. 自定义对象 prototype

(1) 请简述 prototype 的具体的作用

prototype会间接实现继承的功能。

function user(age,sex){

this.name="张三";

this.age=age;

this.sex=sex;

this.eat=function(){

alert("我是user中吃的方法");

}

}

var us=new user();

us.eat();

//创建对象

//在使用对象时可以声明新的属性并赋值

// user.look="看雾霾";

// alert(user.look);

function user2(){

this.run=function(){

alert("我是user2中跑的方法");

}

}

user.prototype=new user2();

us.run();

(2) 视频中user.prototype=new user2();语句的作用是什么？

user类继承user2类

5. jQuery概述

(1) 请说出jQuery的特点

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

特点：

轻量级足迹：只有30kB缩小和压缩。也可以作为AMD模块包含在内；

CSS3兼容：支持CSS3选择器来查找元素以及样式属性操作；

跨浏览器：Chrome，Edge，Firefox，IE，Safari，Android，iOS等

(2) jQuery使用有几个版本，目前来说哪一个版本使用比较多

1. x：兼容ie678，使用最为广泛，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x就足够了，最终版本：1.12.4（2016年5月20日）

2. x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4（2016年5月20日）

3. X：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老得jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

(3) jQuery的概念是什么

jQuerry（javaScriptQuery）JavaScript代码库

为什么使用JQuery？

js选择器功能弱；DOM操作繁琐；浏览器兼容性不好；动画效果弱

6. 认识jQuery的$

(1) 请说出$的作用和意义

作用1：

$（function）：

1. 相当于window.οnlοad=function(){}

2. 功能比window.onload更强大：window.onload一个页面只能写一个，但是可以写多个$()而不冲突；window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等 ），但是$的执行时间要早。

3. 完整形式是$(document).ready(......);

作用2：$(selector):

选择器，jQuery具有强大的选择器功能。

(2) window.onload 的作用是什么？和Js中的onload事件有什么区别？

功能比window.onload更强大：

window.onload一个页面只能写一个，但是可以写多个$()而不冲突；

window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等 ），但是$的执行时间要早。

(3) 视频代码中的这句话是什么意思？ $("tr:odd").css("background-color","red");

当tr是奇数行时，将行的背景颜色设置为红色。

7. jQuery的选择器A

(1) 请说出JS对象和JQ对象之间是如何相互转化的。

DOM对象转换成jQuery对象：

· $(DOM对象)

jQuery对象转换成DOM对象：

· jQuery对象[index]

· jQuery对象.get(index)

(2) 请列举本节课中常用基本选择器

基本选择器：

· 标签选择器 $(“a”)

· ID选择器 $(“#id”) $(“p#id”)

· 类选择器 $(“.class”) $(“h2.class”)

通配选择器 $("*")

(3) 请说明 html()和 val()方法之间的区别

html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

val():获得第一个匹配元素的当前值。

val(val):设置每一个匹配元素的值。

8. jQuery的选择器B

(1) 请问后代选择器和子父选择器的区别

后代选择器是指该节点元素下的所有子节点，包含直接子类和间接子类；

子父选择器只选择具有直接父子关系的元素对象。

(2) 请问 prev + next 选择器在使用的时候需要注意什么

后面第一个兄弟元素 prev + next。指的是紧挨着的一下个元素，如果指定的标签类型与紧邻的元素类型不匹配则不会达到预期效果。

(3) prev ~ next 这个选择器的作用

后面所有的兄弟元素 prev ~ next。指的是同级的元素。

9. 选择器学习C

(1) 如何获得ul中所有下标(0开始)为奇数的li对 象

$("ul li:odd")

(2) 如何获得ul中所有下标(0开始)为偶数的li对象。

$("ul li:even")

(3) $("ul li:lt(4)").css("color","green");这个选择器的含义是什么？

表示的是ul中的下标小于4的所有li对象元素（将其背景颜色改为绿色）。