Web-第四天 jQuery学习

Web-第四天 jQuery学习

jQuery基础入门1

今日内容介绍

  • 重写javascript案例:弹出广告
  • 重写javascript案例:隔行换色
  • 重写javascript案例:全选/全不选

今日内容学习目标

  • 列举常见的五种选择器,并简单描述其作用
  • 通过选择器,获得jQuery对象
  • 学会给标签绑定事件
  • 可以实现显示或隐藏标签。

第1章 重写弹出广告

1.1 案例分析

重写javascript案例“弹出广告”

1.2 案例相关的函数

1.2.1 jQuery概述

1.2.1.1 什么是jQuery

jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

jQuery2.0及后续版本不再支持IE6/7/8浏览器

核心理念是write less,do more(写得更少,做得更多)

1.2.1.2 下载

1.2.1.3 引入和对象获取

学习JavaScript时,我们就学习过自定义JS库的导入,学习jQuery只需要将对应js库下载,并导入到我们项目下,在html页面使用<script>导入即可。

<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>

  • 基本语法:jQuery(选择器) 或 $(选择器)
    • 及在 jQuery中 "jQuery == $",区分大小写

//1 获得jQuery对象

// * 命名约定:jQuery对象变量名建议以$开头。

var $demoId = $("#demoId");

  • 注释:

//单行注释

/*块注释*/

男人谈恋爱,谈的是什么

作者:奔放的招财猫

当当 广告

购买

1.2.1.4 jQuery对象和DOM转换

jQuery对象和DOM对象可以项目转换,但两个对象的函数不能彼此混搭使用。及jQuery对象只能使用自己的函数

DOM对象转换成jQuery对象,语法:jQuery(dom对象)

jQuery对象转换成DOM对象,语法:$username[index]

//1 原生javascript获得value值

var d1 = document.getElementById("demoId");

//alert(d1.value);

//2 将js dom对象 转换成jQuery对象

// * 语法:$(dom对象) 或 jQuery(dom对象)

var $d2 = $(d1);

//alert($d2.val());

//3 将jQuery 转换成 dom对象

// * jQuery对象内部以数组方式存放所有的匹配数据,如果只匹配到一个,索引号为0。

var d3 = $d2[0];

alert(d3.value);

// 总结:jQuery对象和dom对象,函数(api)不能相互调用

1.2.2 基本操作

1.2.2.1 jQuery页面加载

jQuery提供ready()函数,用于页面成功加载后执行。与window.onload函数类型。

<script type="text/javascript">

//实际开发中,我们习惯将<script>标签编写在<head>标签体内,

//整个页面的解析时从上网下的,此时将不能获得<input>对象

alert($("#demoId").length); //获得匹配对象的个数,0表示没有匹配到任何

//1 javascript页面加载

window.onload = function(){

alert("js页面加载");

}

//2 jQuery页面加载

$(document).ready(function () {

alert("jQuery页面加载");

});

/*

* 注意:

* * js给onload只能赋一个值,如果对此赋值,后面的将覆盖前的。

* * jQuery ready可以使用多次,多个页面加载将依次执行。

*/

</script>

<body>

<input type="text" id="demoId" value="悟空教程&Java帮帮&You"/>

</body>

1.2.2.2 基本选择器

jQuery后续的学习中,“基本选择器”使用的频率最大,我们先预先学习一下。

<script type="text/javascript">

$(document).ready(function () {

//1 id选择器,格式:$("#id值")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一个

//2 标签选择器,格式:$("标签名")

var $d2 = $("input");

alert($d2.length); //3,表示3个input

//3 类选择器,格式:$(".class类名")

// * length 和 size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2,表示两个input class为myClass

});

</script>

<input type="radio" name="hobby" value="敲代码" id="r01"/>

<input type="radio" name="hobby" value="调试bug"/>

<input type="radio" name="hobby" value="谈需求"/>

本案例中将使用到jQuery的“基本过滤选择器”、样式操作、属性操作等知识,接下来我们下了解这些知识。

1.2.3 效果(了解)

1.2.3.1 基本

  • 通过改变元素 高度和宽度 显示或隐藏

show(speed ,fn) 显示

参数1 speed,显示速度,单位:毫秒。固定字符串:slow, normal, or fast

参数2fn,显示成功之后回调函数。

hide() 隐藏

toggle() 切换

1.2.3.2 滑动

  • 通过改变元素 高度 显示或隐藏

slideDown() 显示,高度变大。

slideUp() 隐藏,高度变小。

slideToggle() 切换

1.2.3.3 淡入淡出

  • 通过改变元素 透明度 显示或隐藏

fadeIn() 显示

fadeOut() 隐藏

fadeToggle() 切换

fadeTo(speed,opacity,[fn]) 指定透明度

参数2 opacity :一个0至1之间表示透明度的数字

1.3 案例实现

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<script>

var time;

$(function(){

// 设置定时 5秒后执行一个显示广告的函数

time = setInterval("showAd()",5000);

});

// 显示广告的函数

function showAd(){

// 获得广告的div,显示

// $("#divAd").show(1000);

// $("#divAd").slideDown(3000);

$("#divAd").fadeIn(3000);

// 清空定时:

clearInterval(time);

// 重新设置定时:

time = setInterval("hideAd()",5000);

}

// 隐藏广告的函数:

function hideAd(){

// 获得广告的div,隐藏

// $("#divAd").hide(3000);

// $("#divAd").slideUp(3000);

$("#divAd").fadeOut(3000);

// 清空定时:

clearInterval(time);

}

</script>

1.4 选择器总结

1.4.1 基本选择器

jQuery后续的学习中,“基本选择器”使用的频率最大,我们先预先学习一下。

<script type="text/javascript">

$(document).ready(function () {

//1 id选择器,格式:$("#id值")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一个

//2 标签选择器,格式:$("标签名")

var $d2 = $("input");

alert($d2.length); //3,表示3个input

//3 类选择器,格式:$(".class类名")

// * length 和 size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2,表示两个input class为myClass

});

</script>

<input type="radio" name="hobby" value="敲代码" id="r01"/>

<input type="radio" name="hobby" value="调试bug"/>

<input type="radio" name="hobby" value="谈需求"/>

1.4.2 层级选择器

A B ,获得A元素内部的所有的B元素。(祖孙)--后代

A > B ,获得A元素下面的所有B子元素。(父子)

A + B ,获得A元素同级下一个B元素(兄弟)

A ~ B, 获得A元素之后的所有B元素(兄弟)

1.4.3 基本过滤选择器

:first 第一个

:last 最后一个

:not(..) 删除指定内容。例如:1234:not(3) --> 124

:even 偶数,从 0 开始计数 -- 操作索引号,页面显示奇数项

:odd 奇数

:eq(index) 指定第几个 =

:gt(index) 大于n个 >

:lt(index) 小于n个 <

--------------------------------------------------

:header 获得标题 (<h1> /<h2> ....)

:animated 获得动画的

:focus 获得焦点

1.4.4 属性选择器

[属性名] 获得有属性名的元素。例如:<xxx name="username"> | <xxx name=" "> | <xxx name>

[属性名=值] 获得属性名 等于 值 元素。

[属性名!=值] 获得属性名 不等于 值 元素。

[...][...][...] 复合属性选择器,多个属性同时过滤。where .. and ... and ...

----------------------------------

[属性名^=值] 获得属性名 以 值 开头 元素。

[属性名$=值] 获得属性名 以 值 结尾 元素。

[属性名*=值] 获得属性名 含有 值 元素。

1.4.5 表单属性选择器

:enabled 可用

:disabled 不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>

:checked 选中(单选radio ,多选checkbox) <input type="..." checked="checked">

:selected 选择(下列列表 <select>) <option selected="selected">

第2章 隔行换色:

2.1 案例介绍

重写JavaScript案例“隔行换色”

2.2 案例相关技术

2.2.1 class操作:

  • <xxx class=””>

addClass() 给指定标签的class属性追加样式

removeClass() 将标签指定的class属性移除

toggleClass() 切换class属性样式。及没有时添加,有的时候删除。

2.3 案例实现

CSS样式:

.even { background:#FFF38F;} /* 偶数行样式*/

.odd { background:#FFFFEE;} /* 奇数行样式*/

JavaScript代码

<script>

$(function(){

// 找奇数行:

//$("tr:odd").addClass("odd");

// 偶数行:

//$("tr:even").addClass("even");

//tr索引号大于1的所有tr

$("tr:gt(1):odd").addClass("odd");

$("tr:gt(1):even").addClass("even");

});

</script>

第3章 全选和全不选

3.1 案例介绍

重写JavaScript时案例“全选/全不选”

3.2 案例相关的函数

3.2.1 属性操作:prop() 和attr()

  • prop() 操作的标签的特性。JQ1.6新特性,获得一些第一次分配undefined属性值的标签时,如果抛异常,将忽略浏览器生成的任何错误。
  • removeProp() 移除标签的特性。
  • attr() 设置标签属性
  • removeAttr() 移除标签的属性。
  • 注意:prop() 和 attr() 使用时容易混淆,建议先使用prop() 没有效果,再使用attr()。

3.3 案例实现

// 复选框的全选和全不选:

$(function(){

// 步骤一:为上面的复选框绑定单击事件:

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

/*if(this.checked == true){

// 如果上面的复选框被选中:

$("input[name='ids']").prop("checked",true);

}else{

// 上面的复选框没有被选中

$("input[name='ids']"). prop ("checked",false);

}*/

$("input[name='ids']").prop("checked",this.checked);

});

});

第4章 总结

jQuery基础入门扩展

第5章 案例:隔行换色(另一种实现)

5.1 扩展(课外阅读)

5.1.1 相关知识点

5.1.1.1 CSS样式操作:css()

  • <xxx style="k:v">

css(name) 获得css值

css(name,value) 设置一对值

css(prop) 设置一组值 --> { k:v, k:v , ....}

5.1.1.2 事件绑定

jQuery提供更灵活的方式用于绑定事件,只要获得jQuery对象,就可以直接绑定事件,jQuery使用的事件与javascript使用的事件名称雷同,jQuery将js事件前面的on去掉了。例如:javascript点击称为onclick,jQuery称为click。

<script type="text/javascript">

$(document).ready(function () {

// 格式:对象.事件名(fn);

// * jQuery事件名将js的之间前面的on去掉,例如:事件onclick,jQuery为click

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

alert("被点击");

});

});

</script>

5.1.1.3 鼠标事件:mouseover、mouseout

$("#e02").mouseover(function(){

$("#divMsg").html("鼠标移上:mouseover");

}).mouseout(function(){

$("#divMsg").html("鼠标移出:mouseout");

})

5.1.2 实现

<script type="text/javascript">

$(document).ready(function () {

//数据展示中,偶数行的颜色设置成#FFFAE8

$("tr:gt(1):odd").css("backgroundColor","#FFFAE8");

//鼠标移上和移除变色 E8DFC4

$("tr:gt(1)").mouseover(function () {

//记录之前的颜色

$(this).attr("bgc" , $(this).css("backgroundColor"));

//设置移上背景色

$(this).css("backgroundColor","#E8DFC4");

}).mouseout(function () {

//获得之前记录的背景色

var bgc = $(this).attr("bgc");

//设置移除后之前的颜色

$(this).css("backgroundColor",bgc);

});

});

</script>

第6章 案例:全选/全不选,反选

6.1 反选:循环checkbox,依次取反

<script type="text/javascript">

$(function(){

// 全选

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

$(".itemSelect").prop("checked" , this.checked);

});

// 反选

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

$(".itemSelect").each(function(){

$(this).prop("checked", !this.checked);

});

});

});

</script>

6.2 反选:回调函数,自身取反

<script type="text/javascript">

$(function(){

// 全选

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

$(".itemSelect").prop("checked" , this.checked);

});

// 反选

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

// 给每一个input设置与自己相反的状态

// 使用函数进行数据返回 function(){ return ...}

// 函数内部this,就是当前操作的对象 ,需要就是与自己相反 !this.checked

$(".itemSelect").prop("checked", function(){

return !this.checked;

});

});

});

</script>

6.3 点击列表项后,全选按钮是否选中

<script type="text/javascript">

$(function(){

// 全选

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

$(".itemSelect").prop("checked" , this.checked);

});

// 每一个列表项绑定事件,如果不是全部勾选,那么“全选”按钮不勾选

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

$("#selectAllId").prop("checked",$(".itemSelect").length ==$(".itemSelect:checked").length);

});

});

</script>

jQuery基础入门2

今日内容介绍

  • 重写javascript案例:省市联动
  • 重写javascript案例:左右选择
  • 重写javascript案例:表单校验

今日内容学习目标

  • 能够使用jQuery为标签添加属性或样式
  • 能够为指定标签添加子标签或兄弟标签
  • 学会给标签绑定事件

第7章 省市联动

7.1 案例分析

重写javascript案例“省市联动”

7.2 案例相关的函数

本案例需要对标签的value属性值,标签体内容进行操作,并需要遍历所有的市。

7.2.1 属性操作:val、text、html

val() 获得value属性的值

val(...) 给value属性设置值

html() 获得html代码,如果有标签,一并获得。

html(....) 设置html代码,如果有标签,将进行解析。

text() 获得文本,如果有标签,忽略。

text(....) 设置文本,如果含有标签,不进行解析。原样输出。

7.2.2 遍历函数:each

  • 方式1:$(ele).each( fn );
  • 方式2:$.each( $ele , fn );
  • 回调函数fn:function(index , docEle)
    • 参数1:遍历索引号
    • 参数2:遍历当前对象 docEle == this (dom对象)

// each(fn) 函数

$("input:hidden").each(function(){

//alert( this.value );

alert( $(this).val() );

});

// $.each(对象,fn) 全局函数

// * each回调函数

// ** 参数1:遍历索引号

// ** 参数2:遍历当前对象 docEle == this

$.each($("input:hidden"), function(index,docEle){

alert( index + " -- " + docEle.value );

});

7.2.3 文档处理:内部插入

A.append(B) , 将B插入到A内部后面。

<A>

....

<B></B>

</A>

A.prepend(B) , 将B插入到A内部前面。

<A>

<B></B>

....

</A>

---------------------------------------------------

A.appendTo(B) ,将A插入到B内部后面

A.prependTo(B) ,将A插入到B内部前面。

7.3 案例实现

<script type="text/javascript">

// 定义二维数组:

var cities = new Array(4);

cities[0] = new Array("市辖区","县");

cities[1] = new Array("长春市","吉林市","松原市","延边市");

cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");

cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");

cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

$(document).ready(function () {

// 给省绑定change事件

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

//获得省value值,及索引号

var pIndex = $(this).val();

// 获得对应的市

var allCity = cities[pIndex];

// 遍历

$("#cityId").html("<option value=''>----请-选-择-市----</option>");

$(allCity).each(function (i) {

$("#cityId").append( "<option value=’’>"+allCity[i]+"</option>");

});

});

});

</script>

第8章 左右选择

8.1 案例分析

本案例我们jQuery的“层级选择器”、“表单属性过滤选择器”、“文档处理”。通过“层级选择器”获得需要的操作对象,通过“表单属性过滤选择器”从已有的对象中筛选出需要的,最后通过“文档处理”将筛选后的内容追加到指定的位置。

8.2 案例实现

<script type="text/javascript">

$(document).ready(function () {

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

$("#leftSelectId option:selected:first").appendTo($("#rightSelectId"));

});

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

$("#leftSelectId option:selected").appendTo($("#rightSelectId"));

});

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

$("#leftSelectId option").appendTo($("#rightSelectId"));

});

});

</script>

8.3 总结

8.3.1 常见事件

8.3.2 事件切换

hover( over , out ) 简化方法

A.hover( fn1 , fn2) 等效 A.mouseover( fn1 ).mouseout( fn2 )

toggle( fn1 , fn2 , .... ) click事件增强版,轮回。(1.8.3版本可用,其他高版本不可用)

第9章 表单校验

9.1 案例介绍

在学习JavaScript时,我们手动的完成过表单数据的校验,此功能在开发中非常常见,属于通用功能范畴,实际开发一般使用都是第三方工具。本案例我们将使用jQuery插件validation进行表单的校验。

9.2 案例相关知识:validation校验

9.2.1 下载

  • 官网地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
  • 帮助文档位置:http://jqueryvalidation.org/documentation/
  • 目录结构:

9.2.2 导入

validate是jQuery插件,及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库(可选)

<!--依赖的jQuery库-->

<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" />

<!--validation校验库-->

<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" />

<!--国际化库,中文提示(可选)-->

<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" />

9.2.3 使用前提

validate需要手动的声明,对那个表单进行校验,及需要手动调用validate()方法。

<script type="text/javascript">

$().ready(function () {

$("#formId").validate();

});

</script>

校验类型

取值

描述

required

true|false

必填字段

email

email

邮件地址

url

路径

date

数字

日期

dateISO

字符串

日期(YYYY-MM-dd)

number

数字(负数,小数)

digits

整数

minlength

数字

最小长度

maxlength

数字

最大长度

rangelength

[minL,maxL]

长度范围

min

最小值

max

最大值

range

[min,max]

值范围

equalTo

jQuery表达式

两个值相同

remote

url路径

ajax校验

9.3 检验方式:js 代码方式

语法:

$(…).validate({

rules:{},

messages:{}

});

rules 规则语法:

rules:{

字段名:校验器,

字段名:校验器

}

校验器语法:

语法:{校验器:值,校验器:值,...}

message 提示语法:

message:{

字段名:{校验器:"提示",校验器:"提示",...}

}

$("#formId").validate({

rules:{

username:{

required:true

},

password:{

required:true,

rangelength:[2,5]

},

repassword:{

equalTo:"[name='password']"

}

},

messages:{

username:{

required:"不能为空"

},

password:{

rangelength:"长度{0}-{1}之间"

}

}

});

9.4 案例实现

  • js代码

<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$().ready(function () {

$("#formId").validate({

rules:{

loginname:{

required:true,

minlength:2,

maxlength:5

},

loginpwd:{

required:true,

number:true

},

reloginpwd:{

equalTo:"[name='loginpwd']"

},

email:"email",

username:{

required:true,

rangelength:[2,5]

},

gender:{

required:true

}

},

messages:{

gender:{

required:"性别必须勾选"

}

}

});

});

</script>

  • html代码

<input type="radio" name="gender" value="男" />男

<input type="radio" name="gender" value="女" />女

<!--在指定位置显示错误信息

* class 必须是error

* for 必须设置错误对象

-->

<label for="gender"></label>

9.5 高级:自定义校验

9.5.1 概述

jquery.validate.js jQuery插件,对jQuery进行增强,添加了validate()函数,用于对表单进行校验。validate()函数内部,调用的是$.validator定义函数进行处理,如果希望自定义校验规则,需要使用$.validator.addMethod完成。

$.validator.addMethod(name , method , message);

参数1:name,校验规则的名称。例如:required

参数2:method,执行校验时使用的处理函数。返回true表示校验通过,返回false表示校验未通过。

function(value , element , params ){} ,处理函数被调用时,可以获得3个参数。

参数value:表单项的value值。例如:<input value="">

参数element:被校验的表单项对象。

参数params:使用当前校验规则传递的值。例如:rules : { 参数1Method : 参数params }

参数3:message,校验未通过时的提示信息。

9.5.2 提供表单

<form id="formId" action="../index.html" >

<table>

<tr>

<td colspan="3">

<font color="#3164af">会员注册</font> USER REGISTER

</td>

</tr>

<tr>

<td>用户名</td>

<td colspan="2"><input type="text" name="username" /> </td>

</tr>

<tr>

<td>身份证</td>

<td colspan="2"><input type="text" name="card" /> </td>

</tr>

<tr>

<td></td>

<td colspan="2">

<input type="submit" value="注册" />

</td>

</tr>

</table>

</form>

9.5.3 编写自定义校验规则

  • 先注册校验规则:长度校验器 cardlength

/* 1)校验规则名称:cardlength

* 2)校验处理函数:fn(value , element , params)

* * value : 当前文本框输入的内容

* * element : 当前文本框

* * params : 校验的具体参数,[15,18]

* 3)校验提示信息:身份证长度必须是{0}或{1}

* * {0} 可以获得 params第一个参数

*/

$.validator.addMethod("cardlength",function(value,element,params){

if(value.length==15 || value.length==18){

return true;//校验通过

}

return false;//未通过

},"身份证长度必须是{0}或{1}");

  • 先注册校验规则:

/* 如果参数为true进行校验,如果参数为false不进行校验。

* * 进行校验时,长度15:都是数字;长度18:都是数字或末尾为X或x

* 1)校验规则名称:cardformat

* 2)校验处理函数:fn(value , element , params)

* * value : 当前文本框输入的内容

* * element : 当前文本框

* * params : 校验的具体参数,true

* 3)校验提示信息:身份证格式不正确

*/

$.validator.addMethod("cardformat",function(value,element,params){

// 参数必须是boolean

if(typeof params != "boolean"){

return false;

}

//参数为true,需要进行校验

if(params){

if(value.length==15){

//15位:都是数字

var reg = /^[0-9]{15}$/;

return reg.test(value);

}else if(value.length==18){

//18位:都是数字或末尾是X

var reg = /^[0-9]{18}|[0-9]{17}[X|x]$/;

return reg.test(value);

}

// 格式不符合

return false;

}

//参数为false,不需要进行校验

return true;

},"身份证格式不正确");

  • 使用校验规则

$("#formId").validate({

rules:{

username:{

required:true,

rangelength:[5,8]

},

card:{

required:true,

cardlength:[15,18],

cardformat:true

}

}

});

9.5.4 编写自定义提示

$("#formId").validate({

rules:{

username:{

required:true,

rangelength:[5,8]

},

card:{

required:true,

cardlength:[15,18],

cardformat:true

}

},

messages:{

username:{

required:"用户名不能为空",

rangelength:"用户名的长度是5到8"

},

card:{

required:"身份证必须写",

cardlength:"身份证长度{0}位或{1}位",

cardformat:"身份证的格式不正确"

}

}

});

第10章 总结

jQuery基础入门2案例

第11章 模拟用户分组

11.1 案例介绍

使用jQuery模拟用户分组,要求如下:

1.页面加载不显示所有分组的列表项。

2.点击分组名称,显示当前分组列表。

3.点击分组名称,将隐藏其他分组的列表项。

11.2 案例相关知识:

函数名

描述

children()

所有的子元素

prev()

获得上面的兄弟

nextAll()

获得下面的所有兄弟

parent()

获得父元素

siblings()

所有兄弟

find()

查询指定内容

11.3 案例实现

  • 步骤1:html代码内容

<style type="text/css">

div *{

display:block;

width:200px;

}

div span{

background-color : #0f0;

}

</style>

<div>

<span>JavaEE组</span>

<a>张三</a>

<a>李四</a>

<a>王五</a>

</div>

<div>

<span>Android组</span>

<a>张3</a>

<a>李4</a>

<a>王5</a>

</div>

<div>

<span>UI组</span>

<a>一一</a>

<a>二二</a>

<a>三三</a>

</div>

  • 步骤2:添加js代码

<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>

<script type="text/javascript">

$(function(){

$("div").children("a").hide().prev("span").click(function(){

$(this).nextAll().show(500).parent().siblings().find("a").hide(500);

});

});

</script>

jQuery基础入门案例扩展--校验

第12章 表单校验加强

12.1 案例介绍

在学习JavaScript时,我们手动的完成过表单数据的校验,此功能在开发中非常常见,属于通用功能范畴,实际开发一般使用都是第三方工具。本案例我们将使用jQuery插件validation进行表单的校验。

12.2 案例相关知识:validation校验

12.2.1 下载

  • 官网地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
  • 帮助文档位置:http://jqueryvalidation.org/documentation/
  • 目录结构:

12.2.2 导入

validate是jQuery插件,及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库(可选)

<!--依赖的jQuery库-->

<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" />

<!--validation校验库-->

<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" />

<!--国际化库,中文提示(可选)-->

<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" />

12.2.3 使用前提

validate需要手动的声明,对那个表单进行校验,手动方式可以使用以下4种检验方式。

<script type="text/javascript">

$().ready(function () {

$("#formId").validate();

});

</script>

12.2.4 检验方式1:类class (了解)

表单元素的class属性中,编写需要检验类型,此种校验方式,校验类型种类有限。

语法:<标签 class=”类型1 类型2 …..”> //多个类型使用空格隔开

<form id="formId" action="">

用户名:<input type="text" name="username" class="required "/> <br/>

密码:<input type="password" name="password" class="required number"/> <br />

密码:<input type="text" name="repassword"/> <br />

<input type="submit" value="提交"/>

</form>

12.2.5 检验方式2:属性attr(了解)

使用标签的属性,可以完成提供所有校验类型。

语法:<标签 类型=”值” 类型=”值”>

校验类型

取值

描述

required

true|false

必填字段

email

@

邮件地址

url

路径

date

数字

日期

dateISO

字符串

日期(YYYY-MM-dd)

number

数字(负数,小数)

digits

整数

minlength

数字

最小长度

maxlength

数字

最大长度

rangelength

[minL,maxL]

长度范围

min

最小值

max

最大值

range

[min,max]

值范围

equalTo

jQuery表达式

两个值相同

remote

url路径

ajax校验

<!--required="true" 可以省略成required,其他属性值都不能省略-->

<form id="formId" action="">

用户名:<input type="text" name="username"

required="true" minlength="2" maxlength="5"/> <br/>

密码:<input type="password" name="password"

required="true" number="true"/> <br />

密码:<input type="password" name="repassword"

required="true" equalTo="[name='password']"/> <br />

<input type="submit" value="提交"/>

</form>

12.2.6 检验方式3:html5 data(了解)

采用了HTML5 “data-”机制,提供数据,jQuery提供 data()函数可以获得由“data-”设置的值。

语法:<标签 data-rule-类型=”值”>

jQuery获得语法:$(ele).data(rule类型) ,

例如:$(ele).data(“ruleRequired”); //去掉前缀“data-”,每一个横杆后面的单词首字母大写

例如:

<!--

格式:data-rule-校验器名称="值"

* 底层通过 $(ele).data("ruleRequired")获得数据

-->

<form id="formId" action="">

用户名:<input type="text" name="username"

data-rule-required="true"

data-rule-minlength="2"

data-rule-maxlength="5"/> <br/>

密码:<input type="password" name="password"

data-rule-required="true"

data-rule-number="true"/> <br />

密码:<input type="password" name="repassword"

data-rule-required="true"

data-rule-equalTo="[name='password']"/> <br />

<input type="submit" value="提交"/>

</form>

js代码校验,更佳灵活

12.3 检验方式4:js 代码

语法:

$(…).validate({

rules:{},

messages:{}

});

rules 规则语法:

rules:{

字段名:校验器,

字段名:校验器

}

校验器语法:

语法1:"校验器"

语法2:{"校验器":"取值","校验器":"取值",...}

message 提示语法:

message:{

字段名:{"校验器":"提示","校验器":"提示",...}

}

$("#formId").validate({

rules:{

username:"required",

password:{

required:true,

rangelength:[2,5]

},

repassword:{

equalTo:"[name='password']"

}

},

messages:{

username:{

required:"不能为空"

},

password:{

rangelength:"长度{0}-{1}之间"

}

}

});

12.4 案例实现

  • js代码

<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$().ready(function () {

$("#formId").validate({

rules:{

loginname:{

required:true,

minlength:2,

maxlength:5

},

loginpwd:{

required:true,

number:true

},

reloginpwd:{

equalTo:"[name='loginpwd']"

},

email:"email",

username:{

required:true,

rangelength:[2,5]

},

gender:{

required:true

},

birthday:"dateISO"

/*,

verifyCode:{

remote:"t.html"

},*/

},

messages:{

gender:{

required:"性别必须勾选"

}

}

});

});

</script>

  • html代码

<input type="radio" name="gender" value="男" />男

<input type="radio" name="gender" value="女" />女

<!--在指定位置显示错误信息

* class 必须是error

* for 必须设置错误对象

-->

<label for="gender"></label>

本文分享自微信公众号 - Java帮帮(javahelp)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 30多年程序员生涯经验总结

    在我30多年的程序员生涯里,我学到了不少有用的东西。下面是我这些年积累的经验精华。我常常想,如果以前能有人在这些经验上指点一二,我相信我现在会站得更高。 1.客...

    Java帮帮
  • JSP与EL表达式重点学习笔记(1)

    Jsp&el表达式 JSP指令 ? JSP指令概述 JSP指令的格式:<%@指令名 attr1=”” attr2=”” %>,一般都会把JSP指令放到JSP文件...

    Java帮帮
  • 与Ajax同样重要的jQuery(2)

    练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" sr...

    Java帮帮
  • jQuery学习---入口函数

    · window.onload函数必须等待网页全部加载完毕(包括 图片等),然后再执行里面的代码。

    syy
  • 电商小程序,订阅制成新一代“黑马”

    最近,江南布衣推出了一款名为“不止盒子”的小程序,深受消费者欢迎,这款“不止盒子”的亮点在哪呢,就在于消费形式的创新,率先推出“先试后买”的消费形式。

    用户1745481
  • 电商小程序,订阅制成新一代“黑马”

    最近,江南布衣推出了一款名为“不止盒子”的小程序,深受消费者欢迎,这款“不止盒子”的亮点在哪呢,就在于消费形式的创新,率先推出“先试后买”的消费形式。

    用户1745481
  • 第78天:jQuery事件总结(一)

         现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。

    半指温柔乐
  • 美国人眼中的大数据法律问题

    大数据文摘
  • 垃圾进出? 社交计算中的机器学习应用论文是否报告了人为训练数据的来源?

    原文题目: Garbage In, Garbage Out? Do Machine Learning Application Papers in Social ...

    吴亚芳
  • JavaScript之事件及动画

    一、事件 常用事件 click(function(){...}) //单击事件 hover(function(){...}) //鼠标经过事件 b...

    人生不如戏

作者介绍

精选专题

活动推荐

扫码关注云+社区

领取腾讯云代金券