JQuery(2) - 事件和模块化-buukle

1. jquery的循环遍历

jquery对象本身就是数组对象，通过jquery选择器获得的都是满足该选择器条件的元素对象的集合体。因此在常常需要对jquery对象进行遍历。

1.1 原始方式遍历

跟java和js一样，既然是数组那么就可以使用原始的for循环进行遍历。
例如：

var $options = $(“option”);
for（var i=0 ; i<$options.length ; i++）{
	alert(option.value);
}

1.2 jquery对象的方法

此方式是jquery特有的遍历方式，使用jquery集合对象调用each方法即可遍历。
例如：

var $options = $(“option”);
$options.each（function（index，element）{
	alert(index); //打印索引
	alert(element); //打印$options集合对象中的每一个元素
}）；

1.3 jquery的全局方法

此方式是jquery特有的遍历方式，与上面jquery的对象方法相似，但此处的each 方法不是某个具体jquery对象的，而是jquery的全局对象的each方法，名字和功能虽然相同，但语法不同。
例如：

var $options = $(“option”);
$.each（$options，function（index,element）{
	alert(index); //打印索引
	alert(element); //打印$options集合对象中的每一个元素
}）；

注意：别管是上述的哪种遍历方法，遍历的集合中的每一个元素都是js对象，要想使用 jquery的方法请使用$(js对象)进行转换。

2. jquery的事件

2.1 jquey中常用的事件

jquery的事件与js的事件的功能和意义一样，只是在使用语法上稍微有些差异

例如：要为一个按钮绑定点击事件。

2.1.1 与js对比

 // js代码实现
document.getElementById(“btn”).onclick=function(){
      //逻辑代码... ...
}
// jquery实现
$(“#btn”).click(function(){
	//逻辑代码... ...
});

2.2 事件的绑定与解绑

我们之前使用元素对象直接绑定事件的方式进行开发，但这样的缺点是，当该元素对象身上的事件使用完成后如果想解除该事件是不可以的，所以下面我学习事件的另一种绑定方式。

2.2.1 事件的绑定：jquery对象.bind(事件类型，响应函数);

例如：

// 绑定一个事件：
$("btn").bind("click", function(){
      alert();
});

// 绑定多个事件：
$("button").bind({
  click:function(){alert()},
  mouseover:function(){alert()}, 
  mouseout:function(){alert()} 
});

2.2.2 事件的解绑：jquery对象.unbind([事件类型]);

例如：

// 解绑所有事件：
$("btn").unbind();

// 解绑指定事件：
$("button").unbind(“click”);

3．事件切换

hover(over,out) == mouseover+mouseout

3. jquery的插件-表单校验的validate插件

3.1 jquery插件的概述

网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的“小框架“就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而我们需要做的是学会该插件的使用语法即可。
我尝试使用的是jquery关于表单校验的插件

3.2 validate插件的使用步骤

1）下载jquery-validation插件
2）将该插件（也就是一个js文件）导入到我们的工程中
3）在要使用校验插件的html中引入该js文件
4）编写表单校验的代码

$("form表单的选择器").validate({
 rules:{                      
 	  对哪个name进行校验
       表单项name值:校验规则，  ---校验规则有已经定义好的规则
       表单项name值:校验规则... ...
 },
 messages:{
       表单项name值:错误提示信息，
       表单项name值:错误提示信息... ...
 }
});

3.3 常用的校验规则

注意：当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏

<lable for="html元素name值" class="error" style="display:none">错误信息</lable>

如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了

3.4 自定义校验规则

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：
自定义校验规则步骤如下：
(1) 使用

$.validator.addMethod("校验规则名称",function(value,element,params)){}

(2) 在rules中通过校验规则名称使用校验规则
(3) 在messages中定义该规则对应的错误提示信息
其中： value是校验组件的value值
element是校验组件的节点对象
params是校验规则的参数

目录CONTENT

JQuery(2) - 事件和模块化