注册用户享全站资源 并成为粉丝 不定时福利发放
 
非盈利性学习社区
分享网站

分享网站

让更多人可以获取免费教程

合作广告

合作广告

最大优惠

人事面试

人事面试

套路太深

面试过程中,面试官会向应聘者发问,而应聘者的回答将成为面试官考虑是否接受他的重要依据。对应聘者而言,了解这些问题背...

部分企业人事部收到求职者简历后,会预先进行一轮电话面试,来考察求职者的综合素质,因此了解懂得求职面试的基本技巧,将...

1、着装要适当  穿着不一定要名贵,但一定要合体、干净、整洁,而且颜色和图案的搭配一定要协调。鞋子应该是舒服而又引...

一、隐瞒真实个人资料的不诚实者简历是求职的第一步,只有面试官对你的简历有兴趣才会通知你面试。在简历中适当地突出个人...

一、首先你得已经成为公司里“最好”的程序员,或者你已经找不到可作为老师和导师的人关于这一点,很多人都会过度自信,所...

程序人生

程序人生

技术的另一面

程序员不是你们眼中的程序猿-后IT时代。程序猿是一种非常特殊的、可以从事程序开发、维护的动物。

1.某程序员的QQ签名:为API生,为框架死,为debug奋斗一辈子,吃符号亏,上大小写的当,最后死在需求上2.去...

Web应用,最常见的研发语言是Java和PHP。后端服务,最常见的研发语言是Java和C/C++。大数据,最常见的...

1、第一份工作的选择很重要。不要想着我没有选择的机会,有份工作就不错了,现实情况是进了一行,想出来很难,想转行更难...

       本文摘自一位工作五年程序老哥的演讲。演讲大概讲了他走过的五年时光,反思自己的职业工作,反思自己的生...

程序员段子

程序员段子

乐一乐

皇上太拼了......  被电视剧蒙骗了好多年,三观毁灭!  这是传说中“帅气的王爷”与“美腻的王妃”,像不像屠夫...

足够自信的程序猿自信是通往成功路上的指明灯,自信的程序员更是加班夜里的探照灯,总能让BUG无所遁形。效率高的程序猿...

最近这段时间,小编絮絮叨叨说了很多严肃的东西,今天说点好玩的,轻松一下。娱乐圈有潜规则,小编认为IT圈一样,也有潜...

今天来说说一位女青年的老公以及他们的事儿。如有雷同,纯属巧合。十一年前我和程序猿第一次见面,还是大一军训期间。我甚...

公司高层公司副总A:咱们开个会研究一下这个事情怎么处理。公司副总B:如果老板没有救成功,下任是谁呢?会不会影响公司...

Web-第四天 jQuery学习【悟空教程】
发表时间:2018-11-07 13:57来源:Java帮帮-微信公众号

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页面加载");

});

/*

* 注意:

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

* * 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,表示3input


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

// * length size() 等效

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

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

});

</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 :一个01之间表示透明度的数字

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,表示3input


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

// * length size() 等效

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

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

});

</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去掉,例如:事件onclickjQueryclick

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

alert("被点击");

});

});

</script>


5.1.1.3 鼠标事件:mouseovermouseout

$("#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 属性操作:valtexthtml

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:{

requiredtrue

},

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);

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

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

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

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

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

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

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


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:都是数字或末尾为Xx

* 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:"用户名的长度是58"

},

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 检验方式3html5 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 检验方式4js 代码

语法:

$(…).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>

全部评论(0条)
亲~快来评论噢!
Java帮帮公众号生态

Java帮帮公众号生态

总有一款适合你

Java帮帮-微信公众号

Java帮帮-微信公众号

将分享做到极致

Python帮帮-公众号

Python帮帮-公众号

人工智能,爬虫,学习教程

大数据驿站-微信公众号

大数据驿站-微信公众号

一起在数据中成长

九点编程-公众号

九点编程-公众号

深夜九点学编程

程序员服务区-公众号

程序员服务区-公众号

吃喝玩乐,听学吐画

Java帮帮学习群生态

Java帮帮学习群生态

总有一款能帮到你

Java学习群

Java学习群

与大牛一起交流

大数据学习群

大数据学习群

在数据中成长

九点编程学习群

九点编程学习群

深夜九点学编程

python学习群

python学习群

人工智能,爬虫

测试学习群

测试学习群

感受测试的魅力

Java帮帮生态承诺

Java帮帮生态承诺

一直坚守,不负重望

初心
勤俭
诚信
正义
分享
战略合作
关于我们
友链申请
友链交换:加帮主QQ2524138991 留言即可 24小时内答复  
快速换友链:在你的网站设置好Java帮帮-IT免费资源网友链,截图发给帮主即可
会员登录
获取验证码
登录
登录
我的资料
留言
回到顶部