1.1 JQuery遍历
jquery对象本身就是数组对象，通过jquery选择器获得的都是满足该选择器条件的元素对象的集合体。因此在常常需要对jquery对象进行遍历。我们会学习三种遍历jquery的方法。
1.1.1 原始方式遍历
跟java和js一样，既然是数组那么就可以使用原始的for循环进行遍历。
例如：
var $options = $(“option”);
for（var i=0 ;i<$options.length ; i++）{
alert(option.value);
}
1.1.2 jquery对象的方法
此方式是jquery特有的遍历方式，使用jquery集合对象调用each方法即可遍历。
例如：
var $options = $(“option”);
$options.each（function（index，element）{
alert(index); //打印索引
alert(element); //打印$options集合对象中的每一个元素
}）；
1.1.3 jquery的全局方法
此方式是jquery特有的遍历方式，与上面jquery的对象方法相似，但此处的each 方法不是某个具体jquery对象的，而是jquery的全局对象的each方法，名字和功 能虽然相同，但语法不同。
例如：
var $options = $(“option”);
$.each（$options，function（index,element）{
alert(index); //打印索引
alert(element); //打印$options集合对象中的每一个元素
}）；
<script type="text/javascript">
$(function(){
/*
* 方式1: for循环方式
*/
var$list = $("#city li");
for(vari = 0 ; i < $list.length;i++){
//遍历数组,DOM对象,调用属性innerHTML
alert($list[i].innerHTML);
//遍历数组,DOM对象转成Jquery对象,调用方法html
alert($($list[i]).html());
}
/*
* 方式2: Jquery对象的each方法
* Jquery对象.each(function(索引,元素))
*/
$list.each(function(index,element){
alert(index+"---"+$(element).html());
});
/*
* 方式3: Jquery的each函数
* $.each(数组, function(索引,元素))
*/
$.each($list,function(index,element) {
alert(index+"==="+$(element).html());
});
});
</script>
1.2 Jquery的事件
1.2.1 jquey中常用的事件
jquery的事件与js的事件的功能和意义一样，只是在使用语法上稍微有些差异
要为一个<input id=”btn” type=”button” value=“提交”/>按钮绑定 点击事件。
1）js代码实现
document.getElementById(“btn”).onclick=function(){
//逻辑代码... ...
}
2）jquery代码实现
$(“#btn”).click(function(){
//逻辑代码... ...
});
<scripttype="text/javascript">
$(function(){
//文本框获取焦点
$("#username").focus(function(){
var$span = $("#span");
$span.html("获取焦点");
});
//文本框失去焦点
$("#username").blur(function(){
var $span =$("#span");
$span.html("失去焦点");
});
//键盘弹起
$("#account").keyup(function(){
alert();
$("#showAccount").html($(this).val());
});
});
</script>
1.1.1 事件的绑定与解绑
我们之前使用元素对象直接绑定事件的方式进行开发，但这样的缺点是，当该元素对象身上的事件使用完成后如果想解除该事件是不可以的，所以下面我学习事件的另一种绑定方式。 事件的绑定：jquery对象.bind(事件类型，响应函数);
例如：
绑定一个事件：
$("btn").bind("click", function(){
alert();
});
绑定多个事件：
$("button").bind({
click:function(){alert()},
mouseover:function(){alert()},
mouseout:function(){alert()}
});
事件的解绑：jquery对象.unbind([事件类型]);
例如：
解绑所有事件：
$("btn").unbind();
解绑指定事件：
$("button").unbind(“click”);
<scripttype="text/javascript">
$(function(){
//按钮绑定点击事件
$("#btn").bind("click",function(){
alert("绑定事件");
});
//解绑按钮事件
$("#btn2").click(function(){
//解绑按钮btn点击事件
$("#btn").unbind("click");
});
//绑定多个事件
$("#btn").bind({
"click":function(){
alert("点击事件");
},
"mouseover":function(){
alert("移入事件");
}
});
//解绑多个事件
$("#btn2").click(function(){
//解绑指定的事件
//$("#btn").unbind("click");
//解绑全部事件
$("#btn").unbind();
});
//事件切换
$("#btn").mouseover(function(){
alert("鼠标移入");
}).mouseout(function(){
alert("鼠标移出");
});
//以上代码使用hover函数替代
$("#btn").hover(function(){
alert("鼠标移入");
},function(){
alert("鼠标移出");
});
});
</script>
第2章 省市联动
2.1 案例分析
重写javascript案例“省市联动”
<scripttype="text/javascript">
$(function(){
//定义区域信息
varareas =
[
["海淀区","昌平区","朝阳区"],//代表北京
["南开区","和平区","西青区"],//天津
["浦东区","浦西区","闵行区"],//上海
["xx区","yy区","zz区"]//重庆
];
//下拉菜单绑定内容变化事件
$("#city").change(function(){
//获取被选中的option属性value的值
var$val = $("#city option:selected").val();
//获取数组,变成Jquery对象
var$area = $(areas[$val]);
//添加之前清空子标签
$("#area").empty();
$("#area").append($("<option>--请选择区域--</option>"));
//遍历数组
$area.each(function(index,element){
//创建option标签
var$optionElement = $("<option></option>");
$optionElement.html(element);
//添加到省份标签中
$("#area").append($optionElement);
});
});
/*
* 另一种简化写法
*/
$("#city").change(function(){
//获取被选中的option属性value的值
var$val = $("#city option:selected").val();
//获取数组,变成Jquery对象
var$area = $(areas[$val]);
//定义变量保存字符串
varoptions = "<option>--请选择区域--</option>";
$area.each(function(index,element){
options+="<option>"+element+"</option>";
});
$("#area").html(options);
});
});
</script>
第3章 左右选择
3.1 案例分析
本案例我们jQuery的“层级选择器”、“表单属性过滤选择器”、“文档处理”。通过“层级选择器”获得需要的操作对象，通过“表单属性过滤选择器”从已有的对象中筛选出需要的，最后通过“文档处理”将筛选后的内容追加到指定的位置。
3.2 案例实现
<scripttype="text/javascript">
$(function(){
//按钮add绑定点击事件
//左面选中的,移动到右边
$("#add").click(function(){
//获取右边 获取选中的
$("#second").append($("#firstoption:selected"));
});
//按钮addall绑定点击事件
//左面全部的,移动到右边
$("#add_all").click(function(){
//获取右边 获取全部的
$("#second").append($("#firstoption"));
});
$("#remove").click(function(){
//获取左边 获取右边选中的
$("#first").append($("#secondoption:selected"));
});
$("#remove_all").click(function(){
//获取左边 获取右边全部
$("#first").append($("#secondoption"));
});
});
</script>
第4章 表单校验插件
4.1 Jquery插件的概述
网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的“小框架“就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而我们需要做的是学会该插件的使用语法即可。
我们仅是要使用的是jquery关于表单校验的插件
4.2 validate快速入门
找到validate中的demo目录下的index.html. 按照提供的演示文档,快速编写自己的验证
<scripttype="text/javascript">
$(function(){
//获取表单id,调用方法validate
$("#empForm").validate({
//定义验证规则
rules:{
//文本框的name属性,必须填写
realname:"required"
},
//定义验证信息
messages:{
//文本框name属性,违反规则的提示
realname:"真是姓名必填"
}
});
});
</script>
4.3 validate插件的使用步骤
1）下载jquery-validation插件
2）将该插件（也就是一个js文件）导入到我们的工程中
3）在要使用校验插件的html中引入该js文件
4）编写表单校验的代码
$("form表单的选择器").validate({
rules:{ ---对哪个name进行校验
表单项name值:校验规则， ---校验规则有已经定义好的规则
表单项name值:校验规则... ...
},
messages:{
表单项name值:错误提示信息，
表单项name值:错误提示信息... ...
}
});
4.4 常用的校验规则
注意：当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏
<lable for="html元素name值"class="error" style="display:none">错误信息</lable>
如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了
<scripttype="text/javascript">
$(function(){
//获取表单id,调用方法validate
$("#empForm").validate({
//定义验证规则
rules:{
//文本框的name属性,必须填写
realname:"required",
//用户名文本框验证,多个规则
username:{
//必须填写
required:true,
rangelength:[5,8]
},
//密码验证规则
psw:{
required:true,
minlength:6,
maxlength:12
},
//确认密码定义规则
psw2:{
required:true,
minlength:6,
maxlength:12,
equalTo:"#psw"
},
//性别选择定义规则
gender:{
required:true
},
//年龄验证规则
age:{
required:true,
range:[26,50]
},
//学历规则
//由option标签的value属性决定
edu:{
required:true
},
//生日规则
birthday:{
required:true,
//验证日期格式
dateISO:true,
//验证日期是否合法
date:true
},
//兴趣爱好规则
checkbox1:{
required:true
},
//电子邮箱规则
email:{
required:true,
email:true
}
},
//定义验证信息
messages:{
//文本框name属性,违反规则的提示
realname:"真是姓名必填",
username:{
required:"用户名必须填写",
rangelength:"用户名5-8位"
},
psw:{
required:"密码必须填写",
minlength:"最小长度6",
maxlength:"最大长度12"
},
psw2:{
required:"确认密码必须填写",
minlength:"最小长度6",
maxlength:"最大长度12",
equalTo:"两次密码不一致"
},
/*
* 性别提示规则
* 显示位置发生错误,手动在添加label标签
*/
gender:{
required:"请选择性别"
},
age:{
required:"请输入年龄",
range:"年龄在26-50之间"
},
edu:{
required:"请选择一个学历"
},
birthday:{
required:"请填写生日",
dateISO:"日期格式不正确",
date:"日期非法"
},
checkbox1:{
required:"请选择至少一个爱好"
},
email:{
required:"必须填写邮件",
email:"请输入正确的邮件格式"
}
}
});
});
</script>
1.1 自定义校验规则
如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：
自定义校验规则步骤如下：
(1) 使用
$.validator.addMethod("校验规则名称",function(value,element,params){});
(2) 在rules中通过校验规则名称使用校验规则
(3) 在messages中定义该规则对应的错误提示信息
其中： value是校验组件的value值
element是校验组件的节点对象
params是校验规则的参数
//身份证号规则
cart:{
required:true,
cartlength:[15,18],
cart15:true,
cart18:true
}
//参数: 规则名称. 参数 实现逻辑
//身份证号码长度
$.validator.addMethod("cartlength", function(value,element,params){
if(value.trim().length!=15&& value.trim().length!=18){
returnfalse;
}
returntrue;
});
//身份证号码15位校验
$.validator.addMethod("cart15", function(value,element,params){
//定义15位正则规则,必须全部数字
varreg = /^[0-9]{15}$/;
if(value.trim().length==15){
returnreg.test(value.trim());
}
returntrue;
});
//身份证号码18位校验
$.validator.addMethod("cart18", function(value,element,params){
//定义15位正则规则,必须全部数字
varreg = /^[0-9]{18}|[0-9]{17}X$/;
if(value.trim().length==18){
returnreg.test(value.trim());
}
returntrue;
});
第2章 表单校验
2.1 案例介绍
在学习JavaScript时，我们手动的完成过表单数据的校验，此功能在开发中非常常见，属于通用功能范畴，实际开发一般使用都是第三方工具。本案例我们将使用jQuery插件validation进行表单的校验。
2.2 案例相关知识：validation校验
2.2.1 下载
1.1.1 导入
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" />
1.1.2 使用前提
validate需要手动的声明，对那个表单进行校验，及需要手动调用validate()方法。
<script type="text/javascript">
$().ready(function() {
$("#formId").validate();
});
</script>
1.1 检验方式：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}之间"
}
}
});
1.2 案例实现
l 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>
l html代码
<input type="radio"name="gender" value="男" />男
<input type="radio"name="gender" value="女" />女
<!--在指定位置显示错误信息
* class 必须是error
* for 必须设置错误对象
-->
<label for="gender"class="error"></label>
1.3 高级：自定义校验
1.3.1 概述
jquery.validate.jsjQuery插件，对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值。例如：<inputvalue="">
参数element：被校验的表单项对象。
参数params：使用当前校验规则传递的值。例如：rules : { 参数1Method: 参数params }
参数3：message，校验未通过时的提示信息。
1.3.2 提供表单
<form id="formId"action="../index.html" >
<table>
<tr>
<tdcolspan="3">
<fontcolor="#3164af">会员注册</font>USER REGISTER
</td>
</tr>
<tr>
<tdalign="right">用户名</td>
<tdcolspan="2"><input type="text"name="username" /> </td>
</tr>
<tr>
<tdalign="right">身份证</td>
<tdcolspan="2"><input type="text" name="card"/> </td>
</tr>
<tr>
<td></td>
<tdcolspan="2">
<inputtype="submit" value="注册" />
</td>
</tr>
</table>
</form>
1.3.3 编写自定义校验规则
l 先注册校验规则：长度校验器 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){
returntrue;//校验通过
}
returnfalse;//未通过
},"身份证长度必须是{0}或{1}");
l 先注册校验规则：
/* 如果参数为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(typeofparams != "boolean"){
returnfalse;
}
//参数为true，需要进行校验
if(params){
if(value.length==15){
//15位：都是数字
varreg = /^[0-9]{15}$/;
returnreg.test(value);
}elseif(value.length==18){
//18位：都是数字或末尾是X
varreg = /^[0-9]{18}|[0-9]{17}[X|x]$/;
returnreg.test(value);
}
// 格式不符合
returnfalse;
}
//参数为false，不需要进行校验
returntrue;
},"身份证格式不正确");
l 使用校验规则
$("#formId").validate({
rules:{
username:{
required:true,
rangelength:[5,8]
},
card:{
required:true,
cardlength:[15,18],
cardformat:true
}
}
});
1.3.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:"身份证的格式不正确"
}
}
});