注册用户享全站资源 并成为粉丝 不定时福利发放
合作广告

合作广告

最大优惠

人事面试

人事面试

套路太深

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

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

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

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

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

程序人生

程序人生

技术的另一面

女程序员这一物种是稀有物种,茫茫软件工程系,放眼望去满眼尽收“屌丝男士”。零星几只女性就显得尤为珍贵。这里有只女程...

你是否曾经遇到过这样的情况:你已经有了一个好主意,比如开发一个在线商店,制作一个应用等等,但是却只缺一个程序员,能...

在北京四环路西北部的中关村,聚集了这座城市最多的科技企业和最优秀的技术人员,因为腾讯、字节跳动等互联网巨头坐落于此...

作者 : 何俊林 王小波在《黄金时代》里写道,“那一天我二十一岁,在我一生的黄金时代。我有好多奢望。我想爱,想吃,...

在Stack Overflow上有这样的一个贴子《What’s your most controversial p...

程序员段子

程序员段子

乐一乐

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

足够自信的程序猿自信是通往成功路上的指明灯,自信的程序员更是加班夜里的探照灯,总能让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>

Java帮帮公众号生态

Java帮帮公众号生态

总有一款适合你

Java帮帮-微信公众号

Java帮帮-微信公众号

将分享做到极致

Python帮帮-公众号

Python帮帮-公众号

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

大数据驿站-微信公众号

大数据驿站-微信公众号

一起在数据中成长

九点编程-公众号

九点编程-公众号

深夜九点学编程

程序员服务区-公众号

程序员服务区-公众号

吃喝玩乐,听学吐画

Java帮帮学习群生态

Java帮帮学习群生态

总有一款能帮到你

Java学习群

Java学习群

与大牛一起交流

大数据学习群

大数据学习群

在数据中成长

九点编程学习群

九点编程学习群

深夜九点学编程

python学习群

python学习群

人工智能,爬虫

测试学习群

测试学习群

感受测试的魅力

Java帮帮生态承诺

Java帮帮生态承诺

一直坚守,不负重望

初心
勤俭
诚信
正义
分享
合作品牌 非盈利生态-优质内容分享传播者
关于我们
友链申请
友链交换:加帮主QQ2524138991 留言即可 24小时内答复  
全站内容非商业用途,内容来源于网友,并遵循 CC BY-NC 4.0 许可,如有异议请联系客服。
会员登录
获取验证码
登录
登录
我的资料
留言
回到顶部